jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 18:48:28 -04:00
Code Issues

use camelCase in themes config

Browse Source
This commit is contained in:
Jake Jarvis 2022-02-28 20:07:27 -05:00
parent 324a15aa6a
commit 33c02d205e
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
5 changed files with 64 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Layout/Layout.tsx
View File

@ -3,7 +3,7 @@ import { useTheme } from "next-themes";
import classNames from "classnames"; import classNames from "classnames";
import Header from "../Header/Header"; import Header from "../Header/Header";
import Footer from "../Footer/Footer"; import Footer from "../Footer/Footer";
import themes, { toCSS } from "../../lib/config/themes"; import themes from "../../lib/config/themes";
import styles from "./Layout.module.css"; import styles from "./Layout.module.css";
@ -18,16 +18,8 @@ const Layout = ({ container = true, stickyHeader = true, className, children, ..
return ( return (
<> <>
<Head> <Head>
{/* convert themes object into inlined css variables */}
<style
id="theme-colors"
dangerouslySetInnerHTML={{
__html: `:root{${toCSS(themes.light)}}[data-theme="dark"]{${toCSS(themes.dark)}}`,
}}
/>
{/* dynamically set browser theme color to match the background color; default to light for SSR */} {/* dynamically set browser theme color to match the background color; default to light for SSR */}
<meta name="theme-color" content={themes[resolvedTheme || "light"]["background-outer"]} /> <meta name="theme-color" content={themes[resolvedTheme || "light"].backgroundOuter} />
</Head> </Head>
<div className={classNames(styles.flex, className)} {...rest}> <div className={classNames(styles.flex, className)} {...rest}>

87
lib/config/themes.ts
View File

@ -1,74 +1,79 @@
import decamelize from "decamelize";
// Light/dark theme-related CSS variables that are inlined in Layout.tsx and become available globally. // Light/dark theme-related CSS variables that are inlined in Layout.tsx and become available globally.
// TODO: Probably invert the object so that *each variable* has a light and dark key. // TODO: Probably invert the object so that *each variable* has a light and dark key.
const themes = { const themes = {
light: { light: {
"background-inner": "#ffffff", backgroundInner: "#ffffff",
"background-outer": "#fcfcfc", backgroundOuter: "#fcfcfc",
"background-header": "rgba(252, 252, 252, 0.7)", backgroundHeader: "rgba(252, 252, 252, 0.7)",
text: "#202020", text: "#202020",
"medium-dark": "#515151", mediumDark: "#515151",
medium: "#5e5e5e", medium: "#5e5e5e",
"medium-light": "#757575", mediumLight: "#757575",
light: "#d2d2d2", light: "#d2d2d2",
"kinda-light": "#e3e3e3", kindaLight: "#e3e3e3",
"super-light": "#f4f4f4", superLight: "#f4f4f4",
"super-duper-light": "#fbfbfb", superDuperLight: "#fbfbfb",
link: "#0e6dc2", link: "#0e6dc2",
"link-underline": "rgba(14, 109, 194, 0.4)", linkUnderline: "rgba(14, 109, 194, 0.4)",
success: "#44a248", success: "#44a248",
error: "#ff1b1b", error: "#ff1b1b",
warning: "#f78200", warning: "#f78200",
// Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight // Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight
"code-text": "#313131", codeText: "#313131",
"code-background": "#fdfdfd", codeBackground: "#fdfdfd",
"code-comment": "#656e77", codeComment: "#656e77",
"code-keyword": "#029cb9", codeKeyword: "#029cb9",
"code-attribute": "#70a800", codeAttribute: "#70a800",
"code-namespace": "#f92672", codeNamespace: "#f92672",
"code-literal": "#ae81ff", codeLiteral: "#ae81ff",
"code-punctuation": "#111111", codePunctuation: "#111111",
"code-variable": "#d88200", codeVariable: "#d88200",
"code-addition": "#44a248", codeAddition: "#44a248",
"code-deletion": "#ff1b1b", codeDeletion: "#ff1b1b",
}, },
dark: { dark: {
"background-inner": "#1e1e1e", backgroundInner: "#1e1e1e",
"background-outer": "#252525", backgroundOuter: "#252525",
"background-header": "rgba(37, 37, 37, 0.85)", backgroundHeader: "rgba(37, 37, 37, 0.85)",
text: "#f1f1f1", text: "#f1f1f1",
"medium-dark": "#d7d7d7", mediumDark: "#d7d7d7",
medium: "#b1b1b1", medium: "#b1b1b1",
"medium-light": "#959595", mediumLight: "#959595",
light: "#646464", light: "#646464",
"kinda-light": "#535353", kindaLight: "#535353",
"super-light": "#272727", superLight: "#272727",
"super-duper-light": "#1f1f1f", superDuperLight: "#1f1f1f",
link: "#88c7ff", link: "#88c7ff",
"link-underline": "rgba(136, 199, 255, 0.4)", linkUnderline: "rgba(136, 199, 255, 0.4)",
success: "#78df55", success: "#78df55",
error: "#ff5151", error: "#ff5151",
warning: "#f2b702", warning: "#f2b702",
// Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments // Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
"code-text": "#e4e4e4", codeText: "#e4e4e4",
"code-background": "#212121", codeBackground: "#212121",
"code-comment": "#929292", codeComment: "#929292",
"code-keyword": "#3b9dd2", codeKeyword: "#3b9dd2",
"code-attribute": "#78df55", codeAttribute: "#78df55",
"code-namespace": "#f95757", codeNamespace: "#f95757",
"code-literal": "#d588fb", codeLiteral: "#d588fb",
"code-punctuation": "#cccccc", codePunctuation: "#cccccc",
"code-variable": "#fd992a", codeVariable: "#fd992a",
"code-addition": "#78df55", codeAddition: "#78df55",
"code-deletion": "#ff5151", codeDeletion: "#ff5151",
}, },
}; };
// JS-friendly camelCase to CSS-friendly kebab-case
const camelToKebab = (camel: string) => decamelize(camel, { separator: "-" });
// converts each variable in a given theme object to CSS syntax and returns all of them as one long string // converts each variable in a given theme object to CSS syntax and returns all of them as one long string
export const toCSS = (theme: Record<string, string>) => export const toCSS = (theme: Record<string, string>) =>
Object.entries(theme) Object.entries(theme)
.map(([name, color]) => `--${name}:${color};`) .map(([name, color]) => `--${camelToKebab(name)}:${color};`)
.join(""); .join("");
export default themes; export default themes;

1
package.json
View File

@ -38,6 +38,7 @@
"copy-to-clipboard": "^3.3.1", "copy-to-clipboard": "^3.3.1",
"critters": "^0.0.16", "critters": "^0.0.16",
"date-fns": "^2.28.0", "date-fns": "^2.28.0",
"decamelize": "^6.0.0",
"escape-goat": "^4.0.0", "escape-goat": "^4.0.0",
"fathom-client": "^3.4.1", "fathom-client": "^3.4.1",
"faunadb": "^4.5.2", "faunadb": "^4.5.2",

11
pages/_document.tsx
View File

@ -1,11 +1,20 @@
import { Html, Head, Main, NextScript } from "next/document"; import { Html, Head, Main, NextScript } from "next/document";
import themes, { toCSS } from "../lib/config/themes";
import * as config from "../lib/config"; import * as config from "../lib/config";
// https://nextjs.org/docs/advanced-features/custom-document // https://nextjs.org/docs/advanced-features/custom-document
const Document = () => { const Document = () => {
return ( return (
<Html lang={config.siteLocale?.replace("_", "-")}> <Html lang={config.siteLocale?.replace("_", "-")}>
<Head /> <Head>
{/* convert themes object into inlined css variables */}
<style
id="theme-colors"
dangerouslySetInnerHTML={{
__html: `:root{${toCSS(themes.light)}}[data-theme="dark"]{${toCSS(themes.dark)}}`,
}}
/>
</Head>
<body> <body>
<Main /> <Main />
<NextScript /> <NextScript />

5
yarn.lock
View File

@ -2480,6 +2480,11 @@ decamelize@^1.1.0, decamelize@^1.2.0:
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
decamelize@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-6.0.0.tgz#8cad4d916fde5c41a264a43d0ecc56fe3d31749e"
integrity sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==
decode-named-character-reference@^1.0.0: decode-named-character-reference@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.1.tgz#57b2bd9112659cacbc449d3577d7dadb8e1f3d1b" resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.1.tgz#57b2bd9112659cacbc449d3577d7dadb8e1f3d1b"