Skip to content

Commit

Permalink
Merge pull request #17 from bibudem/feature/footer
Browse files Browse the repository at this point in the history
Feature/footer
  • Loading branch information
remillc-udem authored May 29, 2024
2 parents be7603d + 2679bdb commit 256619c
Show file tree
Hide file tree
Showing 23 changed files with 581 additions and 392 deletions.
4 changes: 2 additions & 2 deletions .browserslistrc
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# >0.25%, not dead
last 2 versions
>0.25%, not dead
#last 2 versions
8 changes: 8 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"conventionalCommits.scopes": [
"icons",
"coquille",
"theme",
"accessibilite"
]
}
3 changes: 2 additions & 1 deletion gatsby-config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ const config = {
options: {
alias: {
'@/components': 'src/components',
'@/hooks': 'src/hooks',
'@/images': 'src/images',
'@/hooks': 'src/hooks'
'@/icons': 'src/icons'
},
extensions: [
'js',
Expand Down
10 changes: 10 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
"@mui/x-data-grid": "^7.1.0",
"@sindresorhus/slugify": "^2.2.1",
"code-bib": "github:bibudem/code-bib",
"color": "^4.2.3",
"contrast-color": "^1.0.1",
"gatsby": "^5.13.3",
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-image": "^3.13.1",
Expand Down
110 changes: 0 additions & 110 deletions plugins/gatsby-plugin-bib-theme/BibTheme.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,116 +6,6 @@ import tokens from './tokens'

export const theme = responsiveFontSizes(extendTheme(tokens))

// const GlobalStyles = withStyles(theme => {
// const isLight = theme.palette.mode === 'light'
// const mainColor = isLight ? theme.palette.primary.main : theme.palette.primary.light

// return createStyles({
// '@global': {
// body: {
// transition: theme.transitions.create('background'),
// },
// main: {
// '& a': {
// color: mainColor,
// textDecoration: 'none',
// boxShadow: `inset 0px -1px 0px 0px ${mainColor}`,
// transition: theme.transitions.create('box-shadow'),
// '&:hover': {
// boxShadow: `inset 0px 0px 0px 0px ${mainColor}`
// }
// }
// },
// h1: {
// ...theme.typography.h2,
// margin: theme.spacing(3, 0)
// },
// h2: {
// ...theme.typography.h3,
// margin: theme.spacing(3, 0)
// },
// h3: {
// ...theme.typography.h4,
// margin: theme.spacing(3, 0)
// },
// h4: {
// ...theme.typography.h5,
// margin: theme.spacing(3, 0)
// },
// h5: {
// ...theme.typography.h6,
// margin: theme.spacing(3, 0)
// },
// // don't use h6
// p: {
// ...theme.typography.body1,
// margin: theme.spacing(3, 0),
// lineHeight: 1.75
// },
// li: {
// '& > p': {
// // preventing sublist margin problem
// margin: 0
// },
// ...theme.typography.body1
// },
// img: {
// maxWidth: '100%'
// },
// blockquote: {
// position: 'relative',
// paddingLeft: theme.spacing(2),
// borderLeft: `0.2em solid ${isLight ? theme.palette.primary.light : theme.palette.primary.dark}`
// },
// // prism js inline code
// ':not(pre) > code[class*="language-"]': {
// fontSize: 'inherit',
// // light and dark mode different highlighting
// transition: theme.transitions.create(['background', 'color']),
// background: isLight ? 'var(--nord6)' : 'var(--nord0)',
// color: isLight ? 'var(--nord0)' : 'var(--nord4)'
// },
// // code highlight block
// '.gatsby-highlight': {
// marginLeft: '-1em',
// marginRight: '-1em',
// overflow: 'auto',
// borderRadius: theme.shape.borderRadius,
// // this prevents iOS Safari from scaling our code with a big view port
// '-webkit-text-size-adjust': 'none',
// // smooth scrolling on phones
// '-webkit-overflow-scrolling': 'touch',
// '& > pre': {
// minWidth: '100%',
// margin: 0,
// width: 'max-content'
// }
// },
// '.gatsby-highlight-code-line': {
// backgroundColor: '#3b4251',
// display: 'block',
// marginRight: '-1em',
// marginLeft: '-1em',
// paddingLeft: '0.75em',
// borderLeft: '0.25em solid #d8dee9',
// minWidth: 'fit-content'
// },
// '.katex-display': {
// '& > .katex': {
// whiteSpace: 'normal'
// }
// },
// '.gatsby-remark-autolink-headers-a-tags': {
// // remove box shadow on auto linked headers
// boxShadow: 'none',
// '&> svg': {
// fill: theme.palette.primary.main
// }
// }
// }
// })
// })(() => null)

const ChildrenWithGlobalStyle = ({ children }) => {
return <> <GlobalStyles /> {children} </>
}
Expand Down
35 changes: 32 additions & 3 deletions plugins/gatsby-plugin-bib-theme/tokens.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,31 @@
export default {
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1536
}
},
cssVarPrefix: 'bib',
colorSchemes: {
light: {
palette: {
primary: {
main: '#0057AC'
},
udemBleuFonce: {
main: '#0B113A',
light: 'rgb(59, 64, 97)',
dark: 'rgb(7, 11, 40)',
contrastText: '#fff'
},
udemBleuPrincipal: {
main: "#0057ac",
light: "rgb(51, 120, 188)",
dark: "rgb(0, 60, 120)",
contrastText: "#fff"
}
}
}
Expand Down Expand Up @@ -39,13 +60,21 @@ export default {
}
},
components: {
Link: {
color: 'red!important'
},
MuiLink: {
defaultProps: {
underline: 'hover',
},
},
MuiStack: {
defaultProps: {
useFlexGap: true,
},
},
BibFooter: {
styleOverrides: {
udem: ({ theme }) => ({
})
}
}
},
}
73 changes: 73 additions & 0 deletions src/components/Debug.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { useEffect, useState } from 'react'
import { Box, useMediaQuery, useTheme } from '@mui/material'
import Color from 'color'
import ContrastColor from 'contrast-color'

export default function Debug() {
const [resolution, setResolution] = useState('')
const theme = useTheme()
const cc = new ContrastColor()
const queriesLength = theme.breakpoints.keys.length
const queries = theme.breakpoints.keys.map((key, i) => {
// `hsl(from red calc(h + ${(360 / queries.length) * resolution.i}) s l)`
const bg = Color('#ff0000')
.rotate((360 / queriesLength) * i)
.hex()
return {
i,
key,
match: useMediaQuery(theme.breakpoints.only(key)),
range: `${theme.breakpoints.values[key]} - ${i + 1 === theme.breakpoints.keys.length ? '' : theme.breakpoints.values[theme.breakpoints.keys[i + 1]]}`,
color: cc.contrastColor({ bgColor: bg }),
bg,
}
})

useEffect(() => {
const newResolution = queries.find((query) => query.match)
if (resolution.key !== newResolution.key) {
setResolution(newResolution)
}
}, queries)

return (
<Box
sx={{
position: 'fixed',
top: '0',
left: '0',
zIndex: 9999999,
fontSize: '.7rem',
lineHeight: 1,
textAlign: 'center',
backgroundColor: 'rgb(255 255 255 / 76%)',
}}
>
<Box sx={{ padding: '.5em .35em .35em .5em' }}>
<Box
sx={{
color: resolution.color,
backgroundColor: resolution.bg,
borderRadius: '2px',
lineHeight: 1,
padding: '.325em',
}}
>
{resolution.key}
</Box>
<Box
pt={0.25}
sx={{
fontSize: '.85em',
color: '#000',
backgroundColor: '#fff',
borderRadius: '0 0 2px 2px',
padding: '2px 3px',
}}
>
{resolution.range}
</Box>
</Box>
</Box>
)
}
Loading

0 comments on commit 256619c

Please sign in to comment.