From f09d91398fe4c45a0a3f89b2fa2ae288b527a690 Mon Sep 17 00:00:00 2001 From: Mark Holmes Date: Tue, 3 Jun 2025 22:42:06 -0500 Subject: [PATCH] Document Google Fonts setup and use constant --- README.md | 35 +++++++++++++++++++++++++++++++++++ pages/index.js | 18 +++++++++++++++++- portfolio.default.json | 15 +++++++++++++++ styles/styles.css | 24 ++++++++++++------------ 4 files changed, 79 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 8e286e2..8953926 100644 --- a/README.md +++ b/README.md @@ -13,3 +13,38 @@ It requires Node.js 22 or newer. 6. Run `npm test` to execute the unit tests. 7. When you are satisfied with the results run `npm run export` to generate the static site. * The results of the export can be found in the `out` folder. + +## Customizing Colors and Fonts + +The `portfolio.json` file may include a `style` section to override the default +colors and fonts. The following keys are supported: + +``` +{ + "style": { + "colors": { + "text": "#ffddff", + "background": "#111111", + "accent": "#ad71fb", + "accentAlt": "#ffddff", + "iconBackground": "#dfdfdf", + "icon": "#111111" + }, + "fonts": { + "body": "'lato', sans-serif", + "header": "'PT Sans', sans-serif", + "googleFontsUrl": "//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400" + } + } +} +``` + +Any of these values can be omitted to use their defaults. The fonts URL +defaults to the value in `DEFAULT_GOOGLE_FONTS_URL` inside `pages/index.js`. + +### Using Google Fonts + +1. Browse or search fonts at [fonts.google.com](https://fonts.google.com). +2. Add each font to your selection then open the **Get embed code** panel. +3. Copy the `href` attribute from the `` tag and place it in + `style.fonts.googleFontsUrl`. diff --git a/pages/index.js b/pages/index.js index 2c27419..e943632 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,9 @@ import Head from 'next/head' import Script from 'next/script' +const DEFAULT_GOOGLE_FONTS_URL = + '//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400' + export async function getStaticProps() { const fs = require('fs') const path = require('path') @@ -61,13 +64,26 @@ export async function getStaticProps() { } export default function Home({ data, headerPictureUrl, faviconUrl, faviconType, portfolioEntries, description }) { + const styleVars = [] + const colors = data.style?.colors || {} + const fonts = data.style?.fonts || {} + if (colors.text) styleVars.push(`--color-text: ${colors.text}`) + if (colors.background) styleVars.push(`--color-background: ${colors.background}`) + if (colors.accent) styleVars.push(`--color-accent: ${colors.accent}`) + if (colors.accentAlt) styleVars.push(`--color-accent-alt: ${colors.accentAlt}`) + if (colors.iconBackground) styleVars.push(`--color-icon-background: ${colors.iconBackground}`) + if (colors.icon) styleVars.push(`--color-icon: ${colors.icon}`) + if (fonts.body) styleVars.push(`--font-body: ${fonts.body}`) + if (fonts.header) styleVars.push(`--font-header: ${fonts.header}`) + return ( <> {data.pageTitle ? data.pageTitle : data.title} {faviconUrl && } - + + {styleVars.length > 0 && }