-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add details + common example config file
- Loading branch information
1 parent
61f3f0c
commit 36e5ab8
Showing
6 changed files
with
267 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| import { html, styled, OG_SIZE, FONTS } from 'og-images-generator'; | ||
|
|
||
| /** @type {import('og-images-generator').PathsOptions} */ | ||
| export const paths = { | ||
| // DEFAULTS | ||
| // base: './dist', | ||
| // out: './dist/og', | ||
| // json: './dist/og/index.json', | ||
| }; | ||
|
|
||
| /** @type {import('og-images-generator').RenderOptions} */ | ||
| export const renderOptions = { | ||
| satori: { | ||
| fonts: [await FONTS.sourceSans()], | ||
| ...OG_SIZE, | ||
| }, | ||
| }; | ||
|
|
||
| /** @type {import('og-images-generator').Template} */ | ||
| export const template = ({ page }) => { | ||
| console.info('OG Template for: ', page.path); | ||
|
|
||
| if ('og:title' in page.meta.tags === false) throw Error('Missing title!'); | ||
| if ('og:description' in page.meta.tags === false) | ||
| throw Error('Missing description!'); | ||
|
|
||
| const title = page.meta.tags['og:title'] ?? 'untitled'; | ||
| const description = page.meta.tags['og:description'] ?? 'nodesc'; | ||
|
|
||
| return html` <!-- --> | ||
| <div style=${styles.container}> | ||
| <div style=${styles.wrap}> | ||
| <header style=${styles.header}> | ||
| <span style=${styles.breadcrumbs}> | ||
| ${['Bread', 'Crumbs', 'Baguette'].map( | ||
| (b) => html` ${b} <span style="margin: 0 1rem"> / </span>`, | ||
| )} | ||
| </span> | ||
| <span style=${styles.mainTitle}>${title}</span> | ||
| </header> | ||
| <div style=${styles.description}>${description.trim()}</div> | ||
| <footer style=${styles.footer}> | ||
| <div style=${styles.logo1}> | ||
| ${icons.main}${globalContent.siteTitle} | ||
| </div> | ||
| <em>Nice</em> | ||
| <strong>Weather</strong> | ||
| </footer> | ||
| </div> | ||
| </div>`; | ||
| }; | ||
|
|
||
| const globalContent = { | ||
| siteTitle: 'My Site', | ||
| }; | ||
|
|
||
| const tokens = { | ||
| /* Shoelace "Sky" palette (https://shoelace.style/tokens/color) */ | ||
| slColorSky_50: `rgb(19, 61, 87)`, | ||
| slColorSky_100: `rgb(21, 82, 122)`, | ||
| slColorSky_200: `rgb(19, 93, 138)`, | ||
| slColorSky_300: `rgb(18, 109, 166)`, | ||
| slColorSky_400: `rgb(22, 137, 204)`, | ||
| slColorSky_500: `rgb(17, 158, 226)`, | ||
| slColorSky_600: `rgb(39, 186, 253)`, | ||
| slColorSky_700: `rgb(105, 208, 255)`, | ||
| slColorSky_800: `rgb(166, 227, 255)`, | ||
| slColorSky_900: `rgb(203, 239, 255)`, | ||
| slColorSky_950: `rgb(232, 253, 255)`, | ||
| }; | ||
|
|
||
| const icons = { | ||
| main: html` | ||
| <!-- --> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 512 512" | ||
| width="4rem" | ||
| height="4rem" | ||
| fill="currentColor" | ||
| > | ||
| <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> | ||
| <path | ||
| d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM388.1 312.8c12.3-3.8 24.3 6.9 19.3 18.7C382.4 390.6 324.2 432 256.3 432s-126.2-41.4-151.1-100.5c-5-11.8 7-22.5 19.3-18.7c39.7 12.2 84.5 19 131.8 19s92.1-6.8 131.8-19zm-16.9-79.2c-17.6-23.5-52.8-23.5-70.4 0c-5.3 7.1-15.3 8.5-22.4 3.2s-8.5-15.3-3.2-22.4c30.4-40.5 91.2-40.5 121.6 0c5.3 7.1 3.9 17.1-3.2 22.4s-17.1 3.9-22.4-3.2zM176.4 176a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" | ||
| /> | ||
| </svg> | ||
| `, | ||
| }; | ||
|
|
||
| const styles = { | ||
| header: styled.div` | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| flex-direction: column; | ||
| gap: 0.5rem; | ||
| `, | ||
|
|
||
| breadcrumbs: styled.div` | ||
| align-items: center; | ||
| font-size: 40px; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| width: 100%; | ||
| `, | ||
|
|
||
| container: styled.div` | ||
| height: 100%; | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| background-image: radial-gradient( | ||
| at 15% 100%, | ||
| ${tokens.slColorSky_50} 0px, | ||
| ${tokens.slColorSky_100} 100% | ||
| ), | ||
| linear-gradient( | ||
| 90deg, | ||
| ${tokens.slColorSky_50} 0px, | ||
| ${tokens.slColorSky_900} 50%, | ||
| ${tokens.slColorSky_50} 100% | ||
| ); | ||
| `, | ||
|
|
||
| title: styled.div` | ||
| font-weight: 700; | ||
| font-size: 70px; | ||
| color: white; | ||
| `, | ||
|
|
||
| mainTitle: styled.div` | ||
| text-shadow: 0.15em 0.15em 0.5em #00111ad9; | ||
| color: ${tokens.slColorSky_800}; | ||
| font-size: 60px; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| width: 100%; | ||
| `, | ||
|
|
||
| wrap: styled.div` | ||
| padding: 50px 75px 50px 75px; | ||
| height: 100%; | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| flex-direction: column; | ||
| color: ${tokens.slColorSky_900}; | ||
| `, | ||
|
|
||
| description: styled.div` | ||
| text-overflow: ellipsis; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 4; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| white-space: pre-wrap; | ||
| text-overflow: ellipsis; | ||
| font-size: 40px; | ||
| margin: 1.5rem 0 2.5rem 0; | ||
| flex-direction: column; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| border-left: 5px solid ${tokens.slColorSky_950}; | ||
| padding: 0 40px 0 40px; | ||
| padding-bottom: 10px; | ||
| `, | ||
|
|
||
| logo1: styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 2rem; | ||
| `, | ||
|
|
||
| footer: styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| gap: 30px; | ||
| font-size: 40px; | ||
| `, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.