LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 12:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'partial-uwu' into uwu-search-page

Browse Source 
# Conflicts:
#	astro.config.ts
#	package-lock.json
#	package.json
#	src/types/plausible.d.ts
#	src/utils/debounce.ts
This commit is contained in:
Corbin Crutchley
2023-07-26 17:44:00 -07:00
parent 5f7188fedd 6e1a88e4f6
commit d701825d0b
145 changed files with 6739 additions and 4249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
astro.config.ts
View File

@@ -70,7 +70,7 @@ export default defineConfig({
/* start remark plugins here */ /* start remark plugins here */
[behead, { depth: 1 }], [behead, { depth: 1 }],
[ [
remarkEmbedder as never, remarkEmbedder,
{ {
transformers: [oembedTransformer, TwitchTransformer], transformers: [oembedTransformer, TwitchTransformer],
} as RemarkEmbedderOptions, } as RemarkEmbedderOptions,

12
build-scripts/generate-epubs.ts
View File

@@ -40,7 +40,7 @@ async function generateEpubHTML(slug: string, content: string) {
createRehypePlugins({ createRehypePlugins({
format: "epub", format: "epub",
path: resolve(process.cwd(), `content/blog/${slug}/`), path: resolve(process.cwd(), `content/blog/${slug}/`),
}) }),
) )
// Voids: [] is required for epub generation, and causes little/no harm for non-epub usage // Voids: [] is required for epub generation, and causes little/no harm for non-epub usage
.use(rehypeStringify, { allowDangerousHtml: true, voids: [] }); .use(rehypeStringify, { allowDangerousHtml: true, voids: [] });
@@ -55,7 +55,7 @@ type EpubOptions = ConstructorParameters<typeof EPub>[0];
async function generateCollectionEPub( async function generateCollectionEPub(
collection: RawCollectionInfo & Pick<CollectionInfo, "coverImgMeta">, collection: RawCollectionInfo & Pick<CollectionInfo, "coverImgMeta">,
collectionPosts: ExtendedPostInfo[], collectionPosts: ExtendedPostInfo[],
fileLocation: string fileLocation: string,
) { ) {
const authors = collection.authors.map((id) => { const authors = collection.authors.map((id) => {
return unicorns.find((u) => u.id === id).name; return unicorns.find((u) => u.id === id).name;
@@ -115,10 +115,10 @@ async function generateCollectionEPub(
collectionPosts.map(async (post) => ({ collectionPosts.map(async (post) => ({
title: post.title, title: post.title,
data: await generateEpubHTML(post.slug, post.contentMeta), data: await generateEpubHTML(post.slug, post.contentMeta),
})) })),
), ),
} as Partial<EpubOptions> as EpubOptions, } as Partial<EpubOptions> as EpubOptions,
fileLocation fileLocation,
); );
await epub.render(); await epub.render();
@@ -128,12 +128,12 @@ const posts = [...getAllExtendedPosts("en")];
for (const collection of collections) { for (const collection of collections) {
const collectionPosts = posts.filter( const collectionPosts = posts.filter(
(post) => post.collection === collection.slug (post) => post.collection === collection.slug,
); );
generateCollectionEPub( generateCollectionEPub(
collection, collection,
collectionPosts, collectionPosts,
resolve(process.cwd(), `public/${collection.slug}.epub`) resolve(process.cwd(), `public/${collection.slug}.epub`),
); );
} }

4
build-scripts/search-index.ts
View File

@@ -38,7 +38,7 @@ const createPostIndex = () => {
{ name: "description", weight: 1.2 }, { name: "description", weight: 1.2 },
{ name: "excerpt", weight: 1.2 }, { name: "excerpt", weight: 1.2 },
], ],
posts posts,
).toJSON(); ).toJSON();
}; };
@@ -74,7 +74,7 @@ const createCollectionIndex = () => {
weight: 1.2, weight: 1.2,
}, },
], ],
collections collections,
).toJSON(); ).toJSON();
}; };

4
build-scripts/social-previews/index.ts
View File

@@ -71,7 +71,7 @@ const page = await context.newPage();
async function renderPostImage( async function renderPostImage(
layout: Layout, layout: Layout,
post: ExtendedPostInfo, post: ExtendedPostInfo,
path: string path: string,
) { ) {
const label = `${post.slug} (${layout.name})`; const label = `${post.slug} (${layout.name})`;
console.time(label); console.time(label);
@@ -97,7 +97,7 @@ for (const post of getAllExtendedPosts("en")) {
await renderPostImage( await renderPostImage(
twitterPreview, twitterPreview,
post, post,
resolve(outDir, `.${post.socialImg}`) resolve(outDir, `.${post.socialImg}`),
); );
} }
} }

69
build-scripts/social-previews/layouts/banner.tsx
View File

@@ -1,18 +1,20 @@
import * as React from 'preact'; import * as React from "preact";
import { readFileAsBase64 } from '../utils'; import { readFileAsBase64 } from "../utils";
import { ComponentProps, Layout } from '../base'; import { ComponentProps, Layout } from "../base";
import style from './banner-css'; import style from "./banner-css";
import classnames from 'classnames'; import classnames from "classnames";
const tagStickers: Record<string, string> = { const tagStickers: Record<string, string> = {
"default": readFileAsBase64("public/stickers/role_devops.png"), default: readFileAsBase64("public/stickers/role_devops.png"),
"html,webdev": readFileAsBase64("public/stickers/html.png"), "html,webdev": readFileAsBase64("public/stickers/html.png"),
"vue": readFileAsBase64("public/stickers/vue.png"), vue: readFileAsBase64("public/stickers/vue.png"),
"documentation,opinion": readFileAsBase64("public/stickers/role_author.png"), "documentation,opinion": readFileAsBase64("public/stickers/role_author.png"),
'computer science,bash,javascript': readFileAsBase64("public/stickers/role_developer.png"), "computer science,bash,javascript": readFileAsBase64(
"design": readFileAsBase64("public/stickers/role_designer.png"), "public/stickers/role_developer.png",
"rust": readFileAsBase64("public/stickers/ferris.png"), ),
"git": readFileAsBase64("public/stickers/git.png"), design: readFileAsBase64("public/stickers/role_designer.png"),
rust: readFileAsBase64("public/stickers/ferris.png"),
git: readFileAsBase64("public/stickers/git.png"),
}; };
function BannerCodeScreen({ function BannerCodeScreen({
@@ -20,16 +22,18 @@ function BannerCodeScreen({
postHtml, postHtml,
blur, blur,
}: { }: {
post: ComponentProps['post'], post: ComponentProps["post"];
postHtml: string, postHtml: string;
blur?: boolean, blur?: boolean;
}) { }) {
const rotX = (post.description.length % 20) - 10; const rotX = (post.description.length % 20) - 10;
const rotY = ((post.title.length * 3) % 20); const rotY = (post.title.length * 3) % 20;
let tagImg = tagStickers["default"]; let tagImg = tagStickers["default"];
for (const tag of post.tags) { for (const tag of post.tags) {
const key = Object.keys(tagStickers).find(k => k.split(",").includes(tag)); const key = Object.keys(tagStickers).find((k) =>
k.split(",").includes(tag),
);
if (key) { if (key) {
tagImg = tagStickers[key]; tagImg = tagStickers[key];
break; break;
@@ -38,30 +42,36 @@ function BannerCodeScreen({
const theme = post.title.length % 3; const theme = post.title.length % 3;
return <> return (
<div class={classnames("absoluteFill", "codeScreenBg", blur && "blur", "theme-" + theme)} style={`--rotX: ${rotX}deg; --rotY: ${rotY}deg; --left: ${rotY}%;`}> <>
<div
class={classnames(
"absoluteFill",
"codeScreenBg",
blur && "blur",
"theme-" + theme,
)}
style={`--rotX: ${rotX}deg; --rotY: ${rotY}deg; --left: ${rotY}%;`}
>
<div class="codeScreen"> <div class="codeScreen">
<pre dangerouslySetInnerHTML={{ __html: postHtml }} /> <pre dangerouslySetInnerHTML={{ __html: postHtml }} />
<div class="tags"> <div class="tags">
{ {post.tags.map((tag) => (
post.tags.map((tag) => (
<span key={tag}>{tag}</span> <span key={tag}>{tag}</span>
)) ))}
}
</div> </div>
</div> </div>
<div class="rect" style="--z: 60px; --x: -80px; --y: -150px;"> <div class="rect" style="--z: 60px; --x: -80px; --y: -150px;">
<img src={tagImg} /> <img src={tagImg} />
</div> </div>
</div> </div>
</>; </>
);
} }
function Banner({ function Banner({ post, postHtml }: ComponentProps) {
post, return (
postHtml, <>
}: ComponentProps) {
return <>
<BannerCodeScreen post={post} postHtml={postHtml} /> <BannerCodeScreen post={post} postHtml={postHtml} />
<div <div
className="absoluteFill codeScreenOverlay" className="absoluteFill codeScreenOverlay"
@@ -69,7 +79,8 @@ function Banner({
zIndex: -1, zIndex: -1,
}} }}
/> />
</>; </>
);
} }
export default { export default {

6
build-scripts/social-previews/layouts/twitter-preview.test.tsx
View File

@@ -1,4 +1,4 @@
import * as React from 'preact'; import * as React from "preact";
import { render } from "@testing-library/preact"; import { render } from "@testing-library/preact";
import { MockPost } from "__mocks__/data/mock-post"; import { MockPost } from "__mocks__/data/mock-post";
import TwitterLargeCard, { splitSentence } from "./twitter-preview"; import TwitterLargeCard, { splitSentence } from "./twitter-preview";
@@ -15,7 +15,7 @@ test("Social previews splitSentence", () => {
// splits by commas // splits by commas
expect( expect(
splitSentence("An Attribute of Topic, Topic, and Topic") splitSentence("An Attribute of Topic, Topic, and Topic"),
).toStrictEqual(["An Attribute of ", "Topic, Topic, and Topic"]); ).toStrictEqual(["An Attribute of ", "Topic, Topic, and Topic"]);
// splits by apostrophe // splits by apostrophe
@@ -46,7 +46,7 @@ test("Social preview renders", async () => {
width={1280} width={1280}
height={640} height={640}
authorImageMap={{ [post.authors[0]]: "test.jpg" }} authorImageMap={{ [post.authors[0]]: "test.jpg" }}
/> />,
); );
expect(baseElement).toBeInTheDocument(); expect(baseElement).toBeInTheDocument();

20
build-scripts/social-previews/layouts/twitter-preview.tsx
View File

@@ -1,13 +1,13 @@
import * as React from 'preact'; import * as React from "preact";
import { readFileAsBase64 } from '../utils'; import { readFileAsBase64 } from "../utils";
import { ComponentProps, Layout } from '../base'; import { ComponentProps, Layout } from "../base";
import style from './twitter-preview-css'; import style from "./twitter-preview-css";
export function splitSentence(str: string): [string, string] { export function splitSentence(str: string): [string, string] {
const splitStr = str.split(" "); const splitStr = str.split(" ");
const splitBy = ( const splitBy = (
regex: RegExp, regex: RegExp,
matchLast: boolean = true matchLast: boolean = true,
): [string, string] | null => { ): [string, string] | null => {
const matches = splitStr.map((word, i) => ({ reg: regex.exec(word), i })); const matches = splitStr.map((word, i) => ({ reg: regex.exec(word), i }));
const match = (matchLast ? matches.reverse() : matches) const match = (matchLast ? matches.reverse() : matches)
@@ -38,7 +38,9 @@ export function splitSentence(str: string): [string, string] {
return [str, ""]; return [str, ""];
} }
const unicornUtterancesHead = readFileAsBase64("src/assets/unicorn_head_1024.png"); const unicornUtterancesHead = readFileAsBase64(
"src/assets/unicorn_head_1024.png",
);
interface TwitterCodeScreenProps { interface TwitterCodeScreenProps {
title: string; title: string;
@@ -78,7 +80,8 @@ const TwitterLargeCard = ({
const title = post.title; const title = post.title;
const [firstHalfTitle, secondHalfTitle] = splitSentence(title); const [firstHalfTitle, secondHalfTitle] = splitSentence(title);
return <> return (
<>
<TwitterCodeScreen title={post.title} html={postHtml} blur={true} /> <TwitterCodeScreen title={post.title} html={postHtml} blur={true} />
<TwitterCodeScreen title={post.title} html={postHtml} blur={false} /> <TwitterCodeScreen title={post.title} html={postHtml} blur={false} />
<div className="absoluteFill codeScreenOverlay" /> <div className="absoluteFill codeScreenOverlay" />
@@ -120,7 +123,8 @@ const TwitterLargeCard = ({
<img src={unicornUtterancesHead} alt="" height={80} width={80} /> <img src={unicornUtterancesHead} alt="" height={80} width={80} />
</div> </div>
</div> </div>
</>; </>
);
}; };
export default { export default {

2521
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
package.json
View File

@@ -52,18 +52,18 @@
"@testing-library/preact": "^3.2.3", "@testing-library/preact": "^3.2.3",
"@types/jest": "^29.5.2", "@types/jest": "^29.5.2",
"@types/json5": "^2.2.0", "@types/json5": "^2.2.0",
"@types/node": "^20.4.4", "@types/node": "^20.4.5",
"@types/uuid": "^9.0.2", "@types/uuid": "^9.0.2",
"@typescript-eslint/eslint-plugin": "^6.1.0", "@typescript-eslint/eslint-plugin": "^6.2.0",
"@typescript-eslint/parser": "^6.1.0", "@typescript-eslint/parser": "^6.2.0",
"@vercel/node": "^2.15.6", "@vercel/node": "^2.15.6",
"astro": "^2.9.2", "astro": "^2.9.3",
"astro-icon": "^0.8.1", "astro-icon": "^0.8.1",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"classnames": "^2.3.2", "classnames": "^2.3.2",
"dayjs": "^1.11.9", "dayjs": "^1.11.9",
"env-cmd": "^10.1.0", "env-cmd": "^10.1.0",
"esbuild": "^0.18.16", "esbuild": "^0.18.17",
"esbuild-jest": "^0.5.0", "esbuild-jest": "^0.5.0",
"eslint": "^8.44.0", "eslint": "^8.44.0",
"eslint-plugin-astro": "^0.27.1", "eslint-plugin-astro": "^0.27.1",
@@ -86,7 +86,7 @@
"lint-staged": "^13.2.3", "lint-staged": "^13.2.3",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"plausible-tracker": "^0.3.8", "plausible-tracker": "^0.3.8",
"playwright": "^1.36.1", "playwright": "^1.36.2",
"postcss": "^8.4.27", "postcss": "^8.4.27",
"postcss-csso": "^6.0.1", "postcss-csso": "^6.0.1",
"preact-render-to-string": "^6.1.0", "preact-render-to-string": "^6.1.0",
@@ -112,7 +112,7 @@
"unist-util-is": "^6.0.0", "unist-util-is": "^6.0.0",
"unist-util-replace-all-between": "^0.1.1", "unist-util-replace-all-between": "^0.1.1",
"unist-util-visit": "^5.0.0", "unist-util-visit": "^5.0.0",
"vercel": "^31.0.4", "vercel": "^31.1.1",
"vite-plugin-svgr": "^3.2.0" "vite-plugin-svgr": "^3.2.0"
}, },
"lint-staged": { "lint-staged": {

5
postcss.config.cjs
View File

@@ -1,7 +1,4 @@
// @ts-nocheck // @ts-nocheck
module.exports = { module.exports = {
plugins: [ plugins: [require("autoprefixer"), require("postcss-csso")],
require("autoprefixer"),
require("postcss-csso"),
],
}; };

2
src/components/banner-stickers/banner-stickers.ts
View File

@@ -12,7 +12,7 @@ export type StickerInfo = {
export async function createSticker( export async function createSticker(
name: string, name: string,
width: number = STICKER_SIZE, width: number = STICKER_SIZE,
height: number = STICKER_SIZE height: number = STICKER_SIZE,
): Promise<StickerInfo> { ): Promise<StickerInfo> {
const image = await getImage({ const image = await getImage({
src: `/stickers/${name}.png`, src: `/stickers/${name}.png`,

20
src/components/button/button.tsx
View File

@@ -33,7 +33,7 @@ const ButtonWrapper = forwardRef(
rightIcon, rightIcon,
...props ...props
}: ButtonProps<T>, }: ButtonProps<T>,
ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement> ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
) => { ) => {
const Wrapper: any = tag; const Wrapper: any = tag;
@@ -49,13 +49,13 @@ const ButtonWrapper = forwardRef(
{rightIcon && <div class="buttonIcon">{rightIcon}</div>} {rightIcon && <div class="buttonIcon">{rightIcon}</div>}
</Wrapper> </Wrapper>
); );
} },
); );
export const Button = forwardRef( export const Button = forwardRef(
<T extends AllowedTags = "a">( <T extends AllowedTags = "a">(
{ class: className = "", ...props }: ButtonProps<T>, { class: className = "", ...props }: ButtonProps<T>,
ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement> ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
) => { ) => {
return ( return (
<ButtonWrapper <ButtonWrapper
@@ -64,13 +64,13 @@ export const Button = forwardRef(
ref={ref} ref={ref}
/> />
); );
} },
); );
export const LargeButton = forwardRef( export const LargeButton = forwardRef(
<T extends AllowedTags = "a">( <T extends AllowedTags = "a">(
{ class: className = "", ...props }: ButtonProps<T>, { class: className = "", ...props }: ButtonProps<T>,
ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement> ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
) => { ) => {
return ( return (
<ButtonWrapper <ButtonWrapper
@@ -79,7 +79,7 @@ export const LargeButton = forwardRef(
ref={ref} ref={ref}
/> />
); );
} },
); );
type IconOnlyButtonProps<T extends AllowedTags = "a"> = Omit< type IconOnlyButtonProps<T extends AllowedTags = "a"> = Omit<
@@ -90,7 +90,7 @@ type IconOnlyButtonProps<T extends AllowedTags = "a"> = Omit<
export const IconOnlyButton = forwardRef( export const IconOnlyButton = forwardRef(
<T extends AllowedTags = "a">( <T extends AllowedTags = "a">(
{ class: className = "", children, ...props }: IconOnlyButtonProps<T>, { class: className = "", children, ...props }: IconOnlyButtonProps<T>,
ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement> ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
) => { ) => {
return ( return (
<ButtonWrapper <ButtonWrapper
@@ -101,18 +101,18 @@ export const IconOnlyButton = forwardRef(
<div class="iconOnlyButtonIcon">{children}</div> <div class="iconOnlyButtonIcon">{children}</div>
</ButtonWrapper> </ButtonWrapper>
); );
} },
); );
export const LargeIconOnlyButton = forwardRef( export const LargeIconOnlyButton = forwardRef(
<T extends AllowedTags = "a">( <T extends AllowedTags = "a">(
{ class: className = "", children, ...props }: IconOnlyButtonProps<T>, { class: className = "", children, ...props }: IconOnlyButtonProps<T>,
ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement> ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
) => { ) => {
return ( return (
<ButtonWrapper {...props} class={`iconOnly large ${className}`} ref={ref}> <ButtonWrapper {...props} class={`iconOnly large ${className}`} ref={ref}>
<div class="iconOnlyButtonIcon">{children}</div> <div class="iconOnlyButtonIcon">{children}</div>
</ButtonWrapper> </ButtonWrapper>
); );
} },
); );

3
src/components/chip/chip.module.scss
View File

@@ -55,7 +55,8 @@
outline-offset: 0; outline-offset: 0;
border-color: transparent; border-color: transparent;
@include transition(color background-color box-shadow); @include transition(color background-color box-shadow);
outline: var(--chip_focus-outline_color) solid var(--chip_focus-outline_width); outline: var(--chip_focus-outline_color) solid
var(--chip_focus-outline_width);
color: var(--chip_foreground-color); color: var(--chip_foreground-color);
} }

2
src/components/chip/chip.tsx
View File

@@ -24,5 +24,5 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(
<span class={`${style.chip_content}`}>{children}</span> <span class={`${style.chip_content}`}>{children}</span>
</Wrapper> </Wrapper>
); );
} },
); );

4
src/components/collection-card/collection-card.module.scss
View File

@@ -1,7 +1,6 @@
@import "src/tokens/index"; @import "src/tokens/index";
:root { :root {
--collection-card_corner-radius: var(--corner-radius_xl); --collection-card_corner-radius: var(--corner-radius_xl);
--collection-card_author_padding-top: var(--spc-3x); --collection-card_author_padding-top: var(--spc-3x);
@@ -90,7 +89,8 @@
} }
} }
.forwardIcon, .forwardIcon svg { .forwardIcon,
.forwardIcon svg {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }

13
src/components/image/picture.tsx
View File

@@ -3,26 +3,23 @@ import { JSX } from "preact";
interface PictureProps { interface PictureProps {
picture: GetPictureResult; picture: GetPictureResult;
alt: string, alt: string;
class?: string; class?: string;
imgAttrs?: JSX.HTMLAttributes<HTMLImageElement>; imgAttrs?: JSX.HTMLAttributes<HTMLImageElement>;
} }
export const Picture = ({ export const Picture = ({
picture, alt, picture,
alt,
class: className, class: className,
imgAttrs, imgAttrs,
}: PictureProps) => { }: PictureProps) => {
return ( return (
<picture class={`${className || ''}`}> <picture class={`${className || ""}`}>
{picture.sources.map((attrs) => ( {picture.sources.map((attrs) => (
<source {...attrs} /> <source {...attrs} />
))} ))}
<img <img {...(picture.image as any)} {...imgAttrs} alt={alt} />
{...(picture.image as any)}
{...imgAttrs}
alt={alt}
/>
</picture> </picture>
); );
}; };

49
src/components/page-card/page-card.module.scss
View File

@@ -3,7 +3,9 @@
:root { :root {
--page-card_container_corner-radius: calc(var(--site-spacing) * 2); --page-card_container_corner-radius: calc(var(--site-spacing) * 2);
--page-card_container_padding: calc(var(--site-spacing) * 2); --page-card_container_padding: calc(var(--site-spacing) * 2);
--page-card_container_compound-padding: calc(var(--page-card_image_border_width) + var(--page-card_container_padding)); --page-card_container_compound-padding: calc(
var(--page-card_image_border_width) + var(--page-card_container_padding)
);
--page-card_description_padding-top: var(--spc-4x); --page-card_description_padding-top: var(--spc-4x);
--page-card_image_size: 240px; --page-card_image_size: 240px;
@@ -45,7 +47,8 @@
border-radius: var(--page-card_container_corner-radius); border-radius: var(--page-card_container_corner-radius);
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-row-gap: var(--page-card_container_padding); grid-row-gap: var(--page-card_container_padding);
padding: 0 var(--page-card_container_padding) var(--page-card_container_padding) var(--page-card_container_padding); padding: 0 var(--page-card_container_padding)
var(--page-card_container_padding) var(--page-card_container_padding);
margin-top: var(--page-card_image_inset); margin-top: var(--page-card_image_inset);
@@ -55,7 +58,10 @@
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
grid-row-gap: var(--page-card_container_padding); grid-row-gap: var(--page-card_container_padding);
grid-column-gap: var(--page-card_container_padding); grid-column-gap: var(--page-card_container_padding);
padding: var(--page-card_container_padding) var(--page-card_container_compound-padding) var(--page-card_container_compound-padding) var(--page-card_container_compound-padding); padding: var(--page-card_container_padding)
var(--page-card_container_compound-padding)
var(--page-card_container_compound-padding)
var(--page-card_container_compound-padding);
} }
@include from($tabletLarge) { @include from($tabletLarge) {
@@ -63,7 +69,8 @@
grid-template-rows: 1fr 1fr var(--page-card_container_padding) auto; grid-template-rows: 1fr 1fr var(--page-card_container_padding) auto;
grid-row-gap: unset; grid-row-gap: unset;
grid-column-gap: var(--page-card_container_padding); grid-column-gap: var(--page-card_container_padding);
padding: var(--page-card_container_padding) var(--page-card_container_compound-padding); padding: var(--page-card_container_padding)
var(--page-card_container_compound-padding);
} }
@include from($desktopSmall) { @include from($desktopSmall) {
@@ -72,7 +79,9 @@
grid-template-rows: auto auto 1fr auto; grid-template-rows: auto auto 1fr auto;
grid-column-gap: var(--page-card_container_padding); grid-column-gap: var(--page-card_container_padding);
grid-row-gap: var(--page-card_description_padding-top); grid-row-gap: var(--page-card_description_padding-top);
padding: var(--page-card_container_padding) var(--page-card_container_compound-padding) var(--page-card_container_padding) 0; padding: var(--page-card_container_padding)
var(--page-card_container_compound-padding)
var(--page-card_container_padding) 0;
} }
} }
@@ -88,13 +97,17 @@
margin-right: unset; margin-right: unset;
grid-row: 1/1; grid-row: 1/1;
grid-column: 1/1; grid-column: 1/1;
margin-top: calc(0px - var(--page-card_image_inset) - var(--page-card_container_padding)); margin-top: calc(
0px - var(--page-card_image_inset) - var(--page-card_container_padding)
);
} }
@include from($tabletLarge) { @include from($tabletLarge) {
grid-row: 1/3; grid-row: 1/3;
grid-column: 1/1; grid-column: 1/1;
margin-top: calc(0px - var(--page-card_image_inset) - var(--page-card_container_padding)); margin-top: calc(
0px - var(--page-card_image_inset) - var(--page-card_container_padding)
);
} }
@include from($desktopSmall) { @include from($desktopSmall) {
@@ -136,7 +149,10 @@
display: unset; display: unset;
align-items: unset; align-items: unset;
margin-bottom: unset; margin-bottom: unset;
margin-top: calc(var(--page-card_container_compound-padding) - var(--page-card_container_padding)); margin-top: calc(
var(--page-card_container_compound-padding) -
var(--page-card_container_padding)
);
} }
} }
@@ -146,7 +162,11 @@
@include from($tabletSmall) { @include from($tabletSmall) {
grid-column: 1/3; grid-column: 1/3;
padding: 0 calc(var(--page-card_container_compound-padding) - var(--page-card_container_padding)); padding: 0
calc(
var(--page-card_container_compound-padding) -
var(--page-card_container_padding)
);
} }
@include from($tabletLarge) { @include from($tabletLarge) {
@@ -171,13 +191,20 @@
@include from($tabletSmall) { @include from($tabletSmall) {
flex-direction: row; flex-direction: row;
grid-column: 1/3; grid-column: 1/3;
padding: 0 calc(var(--page-card_container_compound-padding) - var(--page-card_container_padding)); padding: 0
calc(
var(--page-card_container_compound-padding) -
var(--page-card_container_padding)
);
} }
@include from($desktopSmall) { @include from($desktopSmall) {
grid-column: unset; grid-column: unset;
justify-content: space-between; justify-content: space-between;
margin-bottom: calc(var(--page-card_container_compound-padding) - var(--page-card_container_padding)); margin-bottom: calc(
var(--page-card_container_compound-padding) -
var(--page-card_container_padding)
);
padding: unset; padding: unset;
} }
} }

8
src/components/pagination/pagination-popover.test.tsx
View File

@@ -8,7 +8,7 @@ test("when the menu button is clicked, the menu popup is opened", async () => {
currentPage: 2, currentPage: 2,
lastPage: 11, lastPage: 11,
}} }}
/> />,
); );
// click the "..." menu // click the "..." menu
@@ -27,7 +27,7 @@ test("when '+' is clicked, the page number is incremented", async () => {
currentPage: 2, currentPage: 2,
lastPage: 11, lastPage: 11,
}} }}
/> />,
); );
// click the "..." menu // click the "..." menu
@@ -54,7 +54,7 @@ test("when '-' is clicked, the page number is decremented", async () => {
currentPage: 2, currentPage: 2,
lastPage: 11, lastPage: 11,
}} }}
/> />,
); );
// click the "..." menu // click the "..." menu
@@ -84,7 +84,7 @@ test("when 'Go to page' is clicked, softNavigate is invoked with the input page
}} }}
getPageHref={(pageNum: number) => `./${pageNum}`} getPageHref={(pageNum: number) => `./${pageNum}`}
softNavigate={softNavigate} softNavigate={softNavigate}
/> />,
); );
// click the "..." menu // click the "..." menu

8
src/components/pagination/pagination-popover.tsx
View File

@@ -21,7 +21,7 @@ import { DOMProps } from "@react-types/shared";
function PopupContents( function PopupContents(
props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate"> & { props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate"> & {
close: () => void; close: () => void;
} },
) { ) {
const [count, setCount] = useState(props.page.currentPage); const [count, setCount] = useState(props.page.currentPage);
return ( return (
@@ -123,7 +123,7 @@ function PaginationPopover({
popoverRef, popoverRef,
triggerRef, triggerRef,
}, },
state state,
); );
/* Setup dialog */ /* Setup dialog */
@@ -167,7 +167,7 @@ function PaginationPopover({
} }
export function PaginationMenuAndPopover( export function PaginationMenuAndPopover(
props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate"> props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate">,
) { ) {
/* Setup trigger */ /* Setup trigger */
const triggerRef = useRef(null); const triggerRef = useRef(null);
@@ -175,7 +175,7 @@ export function PaginationMenuAndPopover(
const { triggerProps, overlayProps } = useOverlayTrigger( const { triggerProps, overlayProps } = useOverlayTrigger(
{ type: "dialog" }, { type: "dialog" },
state, state,
triggerRef triggerRef,
); );
return ( return (

16
src/components/pagination/pagination.test.tsx
View File

@@ -1,5 +1,5 @@
import { render } from "@testing-library/preact"; import { render } from "@testing-library/preact";
import { Pagination } from './pagination'; import { Pagination } from "./pagination";
test("Pagination renders", () => { test("Pagination renders", () => {
const { baseElement, getByText } = render( const { baseElement, getByText } = render(
@@ -8,7 +8,7 @@ test("Pagination renders", () => {
currentPage: 3, currentPage: 3,
lastPage: 8, lastPage: 8,
}} }}
/> />,
); );
expect(baseElement).toBeInTheDocument(); expect(baseElement).toBeInTheDocument();
@@ -22,7 +22,7 @@ test("when there is only one page, nothing is rendered", () => {
currentPage: 1, currentPage: 1,
lastPage: 1, lastPage: 1,
}} }}
/> />,
); );
expect(container.childNodes).toHaveLength(0); expect(container.childNodes).toHaveLength(0);
@@ -35,7 +35,7 @@ test("when there is more than one page, the pages are rendered", () => {
currentPage: 1, currentPage: 1,
lastPage: 2, lastPage: 2,
}} }}
/> />,
); );
expect(container.childNodes).not.toHaveLength(0); expect(container.childNodes).not.toHaveLength(0);
@@ -50,7 +50,7 @@ test("when page 1 is selected, its button has the selected state", () => {
currentPage: 1, currentPage: 1,
lastPage: 11, lastPage: 11,
}} }}
/> />,
); );
const button1 = getByText("1"); const button1 = getByText("1");
@@ -67,7 +67,7 @@ test("when the previous button is clicked, softNavigate is called for the previo
lastPage: 11, lastPage: 11,
}} }}
softNavigate={softNavigate} softNavigate={softNavigate}
/> />,
); );
const previous = getByTestId("pagination-previous"); const previous = getByTestId("pagination-previous");
@@ -86,7 +86,7 @@ test("when the next button is clicked, softNavigate is called for the next page"
lastPage: 11, lastPage: 11,
}} }}
softNavigate={softNavigate} softNavigate={softNavigate}
/> />,
); );
const next = getByTestId("pagination-next"); const next = getByTestId("pagination-next");
@@ -105,7 +105,7 @@ test("when a page button is clicked, softNavigate is called for its page", () =>
lastPage: 11, lastPage: 11,
}} }}
softNavigate={softNavigate} softNavigate={softNavigate}
/> />,
); );
const button5 = getByText("5"); const button5 = getByText("5");

18
src/components/pagination/pagination.tsx
View File

@@ -3,7 +3,10 @@ import forward from "src/icons/arrow_right.svg?raw";
import back from "src/icons/arrow_left.svg?raw"; import back from "src/icons/arrow_left.svg?raw";
import { PaginationMenuAndPopover } from "components/pagination/pagination-popover"; import { PaginationMenuAndPopover } from "components/pagination/pagination-popover";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import { PaginationButtonProps, PaginationProps } from "components/pagination/types"; import {
PaginationButtonProps,
PaginationProps,
} from "components/pagination/types";
import { usePagination } from "./use-pagination"; import { usePagination } from "./use-pagination";
import { onSoftNavClick } from "./on-click-base"; import { onSoftNavClick } from "./on-click-base";
@@ -14,11 +17,18 @@ function PaginationButton({
selected, selected,
softNavigate, softNavigate,
}: PaginationButtonProps) { }: PaginationButtonProps) {
const pageOptionalMin = Math.min(Math.max(1, pageInfo.currentPage - 1), pageInfo.lastPage - 3); const pageOptionalMin = Math.min(
Math.max(1, pageInfo.currentPage - 1),
pageInfo.lastPage - 3,
);
const isOptional = pageNum < pageOptionalMin || pageNum > pageOptionalMin + 3; const isOptional = pageNum < pageOptionalMin || pageNum > pageOptionalMin + 3;
return ( return (
<li className={`${styles.paginationItem} ${isOptional ? styles.paginationItemExtra : ''}`}> <li
className={`${styles.paginationItem} ${
isOptional ? styles.paginationItemExtra : ""
}`}
>
<a <a
className={`text-style-body-medium-bold ${styles.paginationButton} ${ className={`text-style-body-medium-bold ${styles.paginationButton} ${
selected ? styles.selected : "" selected ? styles.selected : ""
@@ -38,7 +48,7 @@ function PaginationButton({
* This prevents the pagination menu from rendering on SSR, which throws errors * This prevents the pagination menu from rendering on SSR, which throws errors
*/ */
function PaginationMenuWrapper( function PaginationMenuWrapper(
props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate"> props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate">,
) { ) {
const [shouldRender, setShouldRender] = useState(false); const [shouldRender, setShouldRender] = useState(false);

4
src/components/pagination/use-pagination.ts
View File

@@ -16,7 +16,7 @@ export function usePagination(page: PageInfo) {
const firstPageNum = Math.max( const firstPageNum = Math.max(
2, 2,
Math.min(page.lastPage - PAGE_BUTTON_COUNT, page.currentPage - 1) Math.min(page.lastPage - PAGE_BUTTON_COUNT, page.currentPage - 1),
); );
const pages = [ const pages = [
@@ -32,7 +32,7 @@ export function usePagination(page: PageInfo) {
page.lastPage, page.lastPage,
].filter( ].filter(
// ensure that displayed pages are within the desired range // ensure that displayed pages are within the desired range
(i) => (i === "..." && isDotsEnabled) || (+i > 0 && +i <= page.lastPage) (i) => (i === "..." && isDotsEnabled) || (+i > 0 && +i <= page.lastPage),
); );
return { return {

7
src/components/post-card/post-card-grid.tsx
View File

@@ -26,9 +26,12 @@ export function PostCardGrid({ postsToDisplay, ...props }: PostGridProps) {
unicornProfilePicMap={props.unicornProfilePicMap} unicornProfilePicMap={props.unicornProfilePicMap}
/> />
) : ( ) : (
<PostCard post={post} unicornProfilePicMap={props.unicornProfilePicMap} /> <PostCard
post={post}
unicornProfilePicMap={props.unicornProfilePicMap}
/>
); );
})} })}
</ul> </ul>
) );
} }

3
src/components/post-card/post-card.module.scss
View File

@@ -119,7 +119,8 @@
text-decoration: none; text-decoration: none;
} }
.authorName:hover, .authorName:focus { .authorName:hover,
.authorName:focus {
text-decoration: underline; text-decoration: underline;
} }

4
src/components/select/select.module.scss
View File

@@ -11,7 +11,9 @@
--popup_item_padding: var(--spc-2x); --popup_item_padding: var(--spc-2x);
--popup_item_label_padding: var(--spc-1x); --popup_item_label_padding: var(--spc-1x);
--popup_item_min-height: var(--min-target-size_m); --popup_item_min-height: var(--min-target-size_m);
--popup_item_corner-radius: calc(var(--popup_corner-radius) - var(--popup_padding)); --popup_item_corner-radius: calc(
var(--popup_corner-radius) - var(--popup_padding)
);
--popup_item_icon-size: var(--icon-size_dense); --popup_item_icon-size: var(--icon-size_dense);
--popup_item_background-color_hovered: var(--surface_primary_emphasis-medium); --popup_item_background-color_hovered: var(--surface_primary_emphasis-medium);

36
src/components/select/select.tsx
View File

@@ -21,25 +21,29 @@ import { Node } from "@react-types/shared";
export { Item, Section } from "react-stately"; export { Item, Section } from "react-stately";
interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> { interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
state: OverlayTriggerState; state: OverlayTriggerState;
} }
function Popover({ children, state, ...props }: PropsWithChildren<PopoverProps>) { function Popover({
children,
state,
...props
}: PropsWithChildren<PopoverProps>) {
const popoverRef = useRef(null); const popoverRef = useRef(null);
const { popoverProps, underlayProps } = usePopover({ const { popoverProps, underlayProps } = usePopover(
{
...props, ...props,
offset: 8, offset: 8,
popoverRef popoverRef,
}, state); },
state,
);
return ( return (
<Overlay> <Overlay>
<div {...underlayProps} className={styles.underlay} /> <div {...underlayProps} className={styles.underlay} />
<div <div {...popoverProps} ref={popoverRef}>
{...popoverProps}
ref={popoverRef}
>
<DismissButton onDismiss={state.close} /> <DismissButton onDismiss={state.close} />
{children} {children}
<DismissButton onDismiss={state.close} /> <DismissButton onDismiss={state.close} />
@@ -65,11 +69,11 @@ export function Select<T extends object>({
const { labelProps, triggerProps, valueProps, menuProps } = useSelect( const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
props, props,
state, state,
ref ref,
); );
return ( return (
<div style={{ display: 'inline-block' }}> <div style={{ display: "inline-block" }}>
<div {...labelProps} class={"visually-hidden"}> <div {...labelProps} class={"visually-hidden"}>
Post sort order Post sort order
</div> </div>
@@ -92,7 +96,9 @@ export function Select<T extends object>({
{...triggerProps} {...triggerProps}
rightIcon={ rightIcon={
<span <span
style={{transform: state.isOpen ? 'rotate(-180deg)' : 'rotate(0deg)'}} style={{
transform: state.isOpen ? "rotate(-180deg)" : "rotate(0deg)",
}}
className={styles.downSpan} className={styles.downSpan}
dangerouslySetInnerHTML={{ __html: down }} dangerouslySetInnerHTML={{ __html: down }}
></span> ></span>
@@ -145,7 +151,7 @@ export function Option({ item, state }: OptionProps) {
key: item.key, key: item.key,
}, },
state, state,
ref ref,
); );
return ( return (
@@ -154,7 +160,9 @@ export function Option({ item, state }: OptionProps) {
ref={ref} ref={ref}
class={`${styles.option} ${isSelected ? styles.selected : ""}`} class={`${styles.option} ${isSelected ? styles.selected : ""}`}
> >
<span className={`text-style-button-regular ${styles.optionText}`}>{item.rendered}</span> <span className={`text-style-button-regular ${styles.optionText}`}>
{item.rendered}
</span>
{isSelected && ( {isSelected && (
<span <span
className={styles.checkmark} className={styles.checkmark}

29
src/components/subheader/subheader.tsx
View File

@@ -9,18 +9,31 @@ type SubHeaderProps = PropsWithOptionalChildren<{
text: string; text: string;
}>; }>;
export function SubHeader({ tag, children, text, class: className, ...props }: SubHeaderProps) { export function SubHeader({
const Heading = (props: any) => createElement(tag, { tag,
children,
text,
class: className,
...props
}: SubHeaderProps) {
const Heading = (props: any) =>
createElement(
tag,
{
...props, ...props,
}, props.children); },
props.children,
);
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Heading className={[ <Heading
styles.heading, className={[styles.heading, "text-style-headline-4", className]
"text-style-headline-4", .filter((c) => !!c)
className .join(" ")}
].filter(c => !!c).join(" ")}>{text}</Heading> >
{text}
</Heading>
{children} {children}
</div> </div>
); );

6
src/global.scss
View File

@@ -68,7 +68,8 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--foreground_emphasis-high); color: var(--foreground_emphasis-high);
transition: color $animStyle $animSpeed, transition:
color $animStyle $animSpeed,
background-color $animStyle $animSpeed; background-color $animStyle $animSpeed;
} }
@@ -94,7 +95,8 @@ body {
height: auto; height: auto;
} }
img.circleImg, .circleImg img { img.circleImg,
.circleImg img {
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
border-radius: 50%; border-radius: 50%;

4
src/pages/rss.xml.ts
View File

@@ -5,7 +5,7 @@ import { ExtendedPostInfo } from "types/index";
const postImportResult = import.meta.glob<MarkdownInstance<ExtendedPostInfo>>( const postImportResult = import.meta.glob<MarkdownInstance<ExtendedPostInfo>>(
"../../content/blog/**/*.md", "../../content/blog/**/*.md",
{ eager: true } { eager: true },
); );
const posts = Object.values(postImportResult); const posts = Object.values(postImportResult);
@@ -30,7 +30,7 @@ export const get = () => {
.sort((a, b) => .sort((a, b) =>
new Date(b.frontmatter.published) > new Date(a.frontmatter.published) new Date(b.frontmatter.published) > new Date(a.frontmatter.published)
? 1 ? 1
: -1 : -1,
) )
.forEach((post) => { .forEach((post) => {
const nodeUrl = `${siteUrl}/posts/${post.frontmatter.slug}`; const nodeUrl = `${siteUrl}/posts/${post.frontmatter.slug}`;

6
src/styles/markdown/blockquote.scss
View File

@@ -8,12 +8,14 @@ blockquote:not([class]) {
position: relative; position: relative;
margin: var(--site-spacing) 0; margin: var(--site-spacing) 0;
padding: 0; padding: 0;
padding-left: calc(var(--blockquote_border-width) + var(--blockquote_padding-start)); padding-left: calc(
var(--blockquote_border-width) + var(--blockquote_padding-start)
);
color: var(--foreground_emphasis-medium); color: var(--foreground_emphasis-medium);
&::before { &::before {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;

9
src/styles/markdown/codeblock.scss
View File

@@ -4,7 +4,10 @@
:root { :root {
--code-block_padding: var(--spc-2x); --code-block_padding: var(--spc-2x);
--code-block_corner-radius: var(--corner-radius_l); --code-block_corner-radius: var(--corner-radius_l);
--code-block_inner-corner-radius: calc(var(--code-block_corner-radius) - var(--code-block_padding) - var(--code-block_border_width)); --code-block_inner-corner-radius: calc(
var(--code-block_corner-radius) - var(--code-block_padding) -
var(--code-block_border_width)
);
--code-block_header_gap: var(--spc-4x); --code-block_header_gap: var(--spc-4x);
--code-block_header_min-height: var(--min-target-size_xl); --code-block_header_min-height: var(--min-target-size_xl);
@@ -30,7 +33,9 @@ pre.shiki {
color: var(--code-block_header_title_color); color: var(--code-block_header_title_color);
min-height: calc(var(--code-block_header_min-height) - 2*var(--code-block_padding)); min-height: calc(
var(--code-block_header_min-height) - 2 * var(--code-block_padding)
);
padding: 0 var(--code-block_header_title_margin-horizontal); padding: 0 var(--code-block_header_title_margin-horizontal);
display: flex; display: flex;

22
src/styles/markdown/embed.scss
View File

@@ -6,12 +6,16 @@
--embed_corner-radius: var(--corner-radius_l); --embed_corner-radius: var(--corner-radius_l);
--embed-iframe_margin: calc(var(--embed_header_padding) / 2); --embed-iframe_margin: calc(var(--embed_header_padding) / 2);
--embed-iframe_corner-radius: calc( var(--embed_corner-radius) - var(--embed-iframe_margin) ); --embed-iframe_corner-radius: calc(
var(--embed_corner-radius) - var(--embed-iframe_margin)
);
--embed-iframe_border-width: var(--border-width_s); --embed-iframe_border-width: var(--border-width_s);
--embed_background-color: var(--surface_primary_emphasis-none); --embed_background-color: var(--surface_primary_emphasis-none);
--embed_favicon_container_size: var(--min-target-size_m); --embed_favicon_container_size: var(--min-target-size_m);
--embed_favicon_container_background-color: var(--surface_primary_emphasis-low); --embed_favicon_container_background-color: var(
--surface_primary_emphasis-low
);
--embed_favicon_icon-size: var(--icon-size_regular); --embed_favicon_icon-size: var(--icon-size_regular);
--embed_favicon_icon_color: var(--primary_on-variant); --embed_favicon_icon_color: var(--primary_on-variant);
--embed_iframe_background-color: var(--surface_primary_emphasis-low); --embed_iframe_background-color: var(--surface_primary_emphasis-low);
@@ -41,12 +45,16 @@
width: var(--embed_favicon_container_size); width: var(--embed_favicon_container_size);
height: var(--embed_favicon_container_size); height: var(--embed_favicon_container_size);
flex-shrink: 0; flex-shrink: 0;
padding: calc((var(--embed_favicon_container_size) - var(--embed_favicon_icon-size)) / 2); padding: calc(
(var(--embed_favicon_container_size) - var(--embed_favicon_icon-size)) /
2
);
background-color: var(--embed_favicon_container_background-color); background-color: var(--embed_favicon_container_background-color);
border-radius: 50%; border-radius: 50%;
& picture, & img { & picture,
& img {
width: var(--embed_favicon_icon-size); width: var(--embed_favicon_icon-size);
height: var(--embed_favicon_icon-size); height: var(--embed_favicon_icon-size);
} }
@@ -89,7 +97,8 @@
&__placeholder { &__placeholder {
background-color: var(--embed_iframe_background-color); background-color: var(--embed_iframe_background-color);
border: var(--embed-iframe_border-width) solid var(--embed_iframe_border_color); border: var(--embed-iframe_border-width) solid
var(--embed_iframe_border_color);
border-radius: var(--embed-iframe_corner-radius); border-radius: var(--embed-iframe_corner-radius);
margin: var(--embed-iframe_margin); margin: var(--embed-iframe_margin);
@@ -110,7 +119,8 @@
& > iframe { & > iframe {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
border: var(--embed-iframe_border-width) solid var(--embed_iframe_border_color); border: var(--embed-iframe_border-width) solid
var(--embed_iframe_border_color);
border-radius: var(--embed-iframe_corner-radius); border-radius: var(--embed-iframe_corner-radius);
margin: var(--embed-iframe_margin); margin: var(--embed-iframe_margin);
overflow: hidden; overflow: hidden;

20
src/styles/markdown/hints.scss
View File

@@ -9,7 +9,9 @@
--hint-container_corner-radius_expanded: var(--corner-radius_m); --hint-container_corner-radius_expanded: var(--corner-radius_m);
// We calculate the content radius off of two tokens so they update accordingly if any of the values is changed // We calculate the content radius off of two tokens so they update accordingly if any of the values is changed
--hint-content_corner-radius: calc(var(--hint-container_corner-radius_expanded) - var(--hint-container_padding)); --hint-content_corner-radius: calc(
var(--hint-container_corner-radius_expanded) - var(--hint-container_padding)
);
--hint-content_background-color: var(--background_primary); --hint-content_background-color: var(--background_primary);
--hint-content_padding: var(--spc-4x); --hint-content_padding: var(--spc-4x);
@@ -20,8 +22,12 @@
--hint-header_gap: var(--spc-2x); --hint-header_gap: var(--spc-2x);
--hint-container_background-color: var(--surface_primary_emphasis-low); --hint-container_background-color: var(--surface_primary_emphasis-low);
--hint-container_background-color_hovered: var(--surface_primary_emphasis-medium); --hint-container_background-color_hovered: var(
--hint-container_background-color_pressed: var(--surface_primary_emphasis-high); --surface_primary_emphasis-medium
);
--hint-container_background-color_pressed: var(
--surface_primary_emphasis-high
);
--hint-container_background-color_focused: var(--background_focus); --hint-container_background-color_focused: var(--background_focus);
--hint-container_foreground-color: var(--foreground_emphasis-high); --hint-container_foreground-color: var(--foreground_emphasis-high);
@@ -57,7 +63,7 @@
& > .hint__title { & > .hint__title {
&::marker { &::marker {
content: ''; content: "";
} }
display: flex; display: flex;
@@ -107,7 +113,8 @@
@supports selector(:has(*)) { @supports selector(:has(*)) {
&:has(.hint__title:focus-visible) { &:has(.hint__title:focus-visible) {
background-color: var(--hint-container_background-color_focused); background-color: var(--hint-container_background-color_focused);
outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color); outline: var(--hint_focus-outline_width) solid
var(--hint_focus-outline_color);
} }
} }
@@ -117,7 +124,8 @@
@supports not selector(:has(*)) { @supports not selector(:has(*)) {
&:focus-within { &:focus-within {
background-color: var(--hint-container_background-color_focused); background-color: var(--hint-container_background-color_focused);
outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color); outline: var(--hint_focus-outline_width) solid
var(--hint_focus-outline_color);
} }
} }
} }

15
src/styles/markdown/lists.scss
View File

@@ -8,7 +8,10 @@
// should match public/icons/list-bowtie-*.svg // should match public/icons/list-bowtie-*.svg
--list_bowtie_size: 16px; --list_bowtie_size: 16px;
--list_bowtie_top: calc((var(--list_item_padding-vertical) / 2) + ((var(--p_medium_line-height) - var(--list_bowtie_size)) / 2)) --list_bowtie_top: calc(
(var(--list_item_padding-vertical) / 2) +
((var(--p_medium_line-height) - var(--list_bowtie_size)) / 2)
);
} }
.post-body ul:not([class]) { .post-body ul:not([class]) {
@@ -18,12 +21,16 @@
padding-left: var(--list_padding-start); padding-left: var(--list_padding-start);
& > li { & > li {
background: url('/icons/list-bowtie-light.svg') no-repeat 0 var(--list_bowtie_top); background: url("/icons/list-bowtie-light.svg") no-repeat 0
var(--list_bowtie_top);
padding: calc(var(--list_item_padding-vertical) / 2) 0; padding: calc(var(--list_item_padding-vertical) / 2) 0;
padding-left: calc(var(--list_bowtie_size) + var(--list_item_padding-start)); padding-left: calc(
var(--list_bowtie_size) + var(--list_item_padding-start)
);
@include darkTheme { @include darkTheme {
background: url('/icons/list-bowtie-dark.svg') no-repeat 0 var(--list_bowtie_top); background: url("/icons/list-bowtie-dark.svg") no-repeat 0
var(--list_bowtie_top);
} }
& > *:first-child { & > *:first-child {

35
src/styles/markdown/table.scss
View File

@@ -7,7 +7,9 @@
--table_header_padding: var(--spc-3x); --table_header_padding: var(--spc-3x);
--table_grid-wrapper_cell-gap: var(--border-width_s); --table_grid-wrapper_cell-gap: var(--border-width_s);
--table_grid-wrapper_corner-radius: calc(var(--table_corner-radius) - var(--table_padding-horizontal)); --table_grid-wrapper_corner-radius: calc(
var(--table_corner-radius) - var(--table_padding-horizontal)
);
--table_cell_padding-horizontal: var(--spc-3x); --table_cell_padding-horizontal: var(--spc-3x);
--table_cell_padding-vertical: var(--spc-2x); --table_cell_padding-vertical: var(--spc-2x);
@@ -101,7 +103,7 @@ thead {
position: relative; position: relative;
&:not(:last-child)::after { &:not(:last-child)::after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -121,17 +123,31 @@ tbody {
border-radius: var(--table_grid-wrapper_corner-radius); border-radius: var(--table_grid-wrapper_corner-radius);
td { td {
padding: var(--table_cell_padding-vertical) var(--table_cell_padding-horizontal); padding: var(--table_cell_padding-vertical)
background: linear-gradient(var(--table_cell_background-color), var(--table_cell_background-color)), var(--table_cell_padding-horizontal);
linear-gradient(var(--table_grid-wrapper_background-color), var(--table_grid-wrapper_background-color)); background: linear-gradient(
var(--table_cell_background-color),
var(--table_cell_background-color)
),
linear-gradient(
var(--table_grid-wrapper_background-color),
var(--table_grid-wrapper_background-color)
);
border: var(--table_grid-wrapper_cell-gap) solid var(--table_grid-wrapper_background-color); border: var(--table_grid-wrapper_cell-gap) solid
var(--table_grid-wrapper_background-color);
} }
tr:nth-child(even) { tr:nth-child(even) {
td { td {
background: linear-gradient(var(--table_cell-alternate_background-color), var(--table_cell-alternate_background-color)), background: linear-gradient(
linear-gradient(var(--table_grid-wrapper_background-color), var(--table_grid-wrapper_background-color)); var(--table_cell-alternate_background-color),
var(--table_cell-alternate_background-color)
),
linear-gradient(
var(--table_grid-wrapper_background-color),
var(--table_grid-wrapper_background-color)
);
} }
} }
@@ -152,6 +168,7 @@ tbody {
} }
} }
th > code, td > code { th > code,
td > code {
word-break: break-word; word-break: break-word;
} }

9
src/styles/markdown/tabs.scss
View File

@@ -50,7 +50,8 @@
user-select: none; user-select: none;
} }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-selected=""] { .tabs__tab[aria-selected="true"],
.tabs__tab[aria-selected=""] {
background-color: var(--tab_background-color_selected); background-color: var(--tab_background-color_selected);
color: var(--tab_foreground-color_selected); color: var(--tab_foreground-color_selected);
} }
@@ -76,7 +77,8 @@
background-color: var(--tabbed-wrapper_background-color); background-color: var(--tabbed-wrapper_background-color);
} }
.tabs__tab-panel[aria-hidden="true"], .tabs__tab-panel[aria-hidden=""] { .tabs__tab-panel[aria-hidden="true"],
.tabs__tab-panel[aria-hidden=""] {
display: none; display: none;
} }
@@ -111,7 +113,8 @@
grid-row-start: 2; grid-row-start: 2;
grid-column: 1 / 3; grid-column: 1 / 3;
&[aria-hidden="true"], &[aria-hidden=""] { &[aria-hidden="true"],
&[aria-hidden=""] {
display: block; display: block;
visibility: hidden; visibility: hidden;
} }

2
src/styles/markdown/tooltips.scss
View File

@@ -61,5 +61,3 @@
} }
} }
} }

22
src/styles/post-body.scss
View File

@@ -57,16 +57,21 @@
color: var(--foreground_emphasis-high); color: var(--foreground_emphasis-high);
h1, .text-style-headline-1, h1,
h2, .text-style-headline-2, .text-style-headline-1,
h3, .text-style-headline-3, h2,
h4, .text-style-headline-4, .text-style-headline-2,
h5, .text-style-headline-5, h3,
h6, .text-style-headline-6 { .text-style-headline-3,
h4,
.text-style-headline-4,
h5,
.text-style-headline-5,
h6,
.text-style-headline-6 {
color: var(--foreground_emphasis-high); color: var(--foreground_emphasis-high);
} }
// Fix autolink-headings anchors positioning // Fix autolink-headings anchors positioning
.anchor { .anchor {
line-height: 1; line-height: 1;
@@ -135,7 +140,8 @@
background-color: #eee; background-color: #eee;
border-radius: 3px; border-radius: 3px;
border: 1px solid #b4b4b4; border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), box-shadow:
0 1px 1px rgba(0, 0, 0, 0.2),
0 2px 0 0 rgba(255, 255, 255, 0.7) inset; 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
color: #333; color: #333;
display: inline-block; display: inline-block;

48
src/styles/text-styles.scss
View File

@@ -1,28 +1,32 @@
@import "src/tokens/index"; @import "src/tokens/index";
@font-face { @font-face {
font-family: 'Figtree'; font-family: "Figtree";
src: url('/fonts/Figtree/Figtree-VariableFont_wght.ttf') format("truetype-variations"); src: url("/fonts/Figtree/Figtree-VariableFont_wght.ttf")
format("truetype-variations");
font-weight: 1 999; font-weight: 1 999;
} }
@font-face { @font-face {
font-family: 'Figtree'; font-family: "Figtree";
font-style: italic; font-style: italic;
src: url('/fonts/Figtree/Figtree-Italic-VariableFont_wght.ttf') format("truetype-variations"); src: url("/fonts/Figtree/Figtree-Italic-VariableFont_wght.ttf")
format("truetype-variations");
font-weight: 1 999; font-weight: 1 999;
} }
@font-face { @font-face {
font-family: 'Roboto Mono'; font-family: "Roboto Mono";
src: url('/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format("truetype-variations"); src: url("/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf")
format("truetype-variations");
font-weight: 1 999; font-weight: 1 999;
} }
@font-face { @font-face {
font-family: 'Roboto Mono'; font-family: "Roboto Mono";
font-style: italic; font-style: italic;
src: url('/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf') format("truetype-variations"); src: url("/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf")
format("truetype-variations");
font-weight: 1 999; font-weight: 1 999;
} }
@@ -35,49 +39,56 @@
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
} }
h1, .text-style-headline-1 { h1,
.text-style-headline-1 {
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
font-size: var(--h1_font-size); font-size: var(--h1_font-size);
font-weight: var(--weight_black); font-weight: var(--weight_black);
line-height: var(--h1_line-height); line-height: var(--h1_line-height);
} }
h2, .text-style-headline-2 { h2,
.text-style-headline-2 {
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
font-size: var(--h2_font-size); font-size: var(--h2_font-size);
font-weight: var(--weight_extrabold); font-weight: var(--weight_extrabold);
line-height: var(--h2_line-height); line-height: var(--h2_line-height);
} }
h3, .text-style-headline-3 { h3,
.text-style-headline-3 {
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
font-size: var(--h3_font-size); font-size: var(--h3_font-size);
font-weight: var(--weight_bold); font-weight: var(--weight_bold);
line-height: var(--h3_line-height); line-height: var(--h3_line-height);
} }
h4, .text-style-headline-4 { h4,
.text-style-headline-4 {
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
font-size: var(--h4_font-size); font-size: var(--h4_font-size);
font-weight: var(--weight_bold); font-weight: var(--weight_bold);
line-height: var(--h4_line-height); line-height: var(--h4_line-height);
} }
h5, .text-style-headline-5 { h5,
.text-style-headline-5 {
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
font-size: var(--h5_font-size); font-size: var(--h5_font-size);
font-weight: var(--weight_bold); font-weight: var(--weight_bold);
line-height: var(--h5_line-height); line-height: var(--h5_line-height);
} }
h6, .text-style-headline-6 { h6,
.text-style-headline-6 {
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
font-size: var(--h6_font-size); font-size: var(--h6_font-size);
font-weight: var(--weight_bold); font-weight: var(--weight_bold);
line-height: var(--h6_line-height); line-height: var(--h6_line-height);
} }
p, .text-style-body-large { p,
.text-style-body-large {
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
font-size: var(--p_large_font-size); font-size: var(--p_large_font-size);
font-weight: var(--weight_regular); font-weight: var(--weight_regular);
@@ -124,7 +135,8 @@ p, .text-style-body-large {
margin: 0; margin: 0;
} }
button, .text-style-button-regular { button,
.text-style-button-regular {
font-family: var(--uu-font-family); font-family: var(--uu-font-family);
font-size: var(--button_regular_font-size); font-size: var(--button_regular_font-size);
font-weight: var(--weight_semibold); font-weight: var(--weight_semibold);
@@ -132,7 +144,9 @@ button, .text-style-button-regular {
margin: 0; margin: 0;
} }
pre, code, .text-style-code { pre,
code,
.text-style-code {
@extend .text-style-body-large; @extend .text-style-body-large;
font-family: var(--uu-font-family-code); font-family: var(--uu-font-family-code);
} }

2
src/styles/variables/fonts.scss
View File

@@ -52,7 +52,6 @@
--button_block-padding-vertical: var(--spc-3x); --button_block-padding-vertical: var(--spc-3x);
--button_large_font-size: #{pxToRem(16)}; --button_large_font-size: #{pxToRem(16)};
--button_large_line-height: #{pxToRem(20)}; --button_large_line-height: #{pxToRem(20)};
@@ -60,7 +59,6 @@
--button_regular_line-height: #{pxToRem(20)}; --button_regular_line-height: #{pxToRem(20)};
@include from($desktopSmall) { @include from($desktopSmall) {
--h1_font-size: #{pxToRem(48)}; --h1_font-size: #{pxToRem(48)};
--h1_line-height: 100%; --h1_line-height: 100%;
--h1_block-padding-top: #{pxToRem(24)}; --h1_block-padding-top: #{pxToRem(24)};

2
src/styles/variables/icons.scss
View File

@@ -12,4 +12,4 @@
*/ */
--icon-size_dense: 1.25rem; --icon-size_dense: 1.25rem;
--icon-size-dense-padding: 0.0625rem; --icon-size-dense-padding: 0.0625rem;
}; }

2
src/styles/variables/max_widths.scss
View File

@@ -4,4 +4,4 @@
--max-width_m: 960px; --max-width_m: 960px;
--max-width_l: 1280px; --max-width_l: 1280px;
--max-width_xl: 1920px; --max-width_xl: 1920px;
}; }

12
src/styles/variables/shadows.scss
View File

@@ -1,6 +1,10 @@
:root { :root {
--shadow_sticker_light: 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 0.5px 0px rgba(0, 0, 0, 0.12); --shadow_sticker_light: 0px 1px 1.5px rgba(0, 0, 0, 0.24),
--shadow_popup_light: 0px 8px 16px rgba(79, 97, 109, 0.24), 0px 4px 6px rgba(79, 97, 109, 0.24); 0px 0.5px 0px rgba(0, 0, 0, 0.12);
--shadow_sticker_dark: 0px 1px 1.5px rgba(0, 0, 0, 0.72), 0px 0.5px 0px rgba(0, 0, 0, 0.36); --shadow_popup_light: 0px 8px 16px rgba(79, 97, 109, 0.24),
--shadow_popup_dark: 0px 8px 16px rgba(0, 0, 0, 0.72), 0px 4px 6px rgba(0, 0, 0, 0.72); 0px 4px 6px rgba(79, 97, 109, 0.24);
--shadow_sticker_dark: 0px 1px 1.5px rgba(0, 0, 0, 0.72),
0px 0.5px 0px rgba(0, 0, 0, 0.36);
--shadow_popup_dark: 0px 8px 16px rgba(0, 0, 0, 0.72),
0px 4px 6px rgba(0, 0, 0, 0.72);
} }

6
src/utils/api.ts
View File

@@ -8,16 +8,16 @@ export function getPostsByLang(language: Languages): PostInfo[] {
export function getPostsByUnicorn( export function getPostsByUnicorn(
authorId: string, authorId: string,
language: Languages language: Languages,
): PostInfo[] { ): PostInfo[] {
return getPostsByLang(language).filter((post) => return getPostsByLang(language).filter((post) =>
post.authors.find((postAuthor) => postAuthor === authorId) post.authors.find((postAuthor) => postAuthor === authorId),
); );
} }
export function getPostsByCollection( export function getPostsByCollection(
collection: string, collection: string,
language: Languages language: Languages,
): PostInfo[] { ): PostInfo[] {
return getPostsByLang(language) return getPostsByLang(language)
.filter((post) => post.collection === collection) .filter((post) => post.collection === collection)

18
src/utils/data.ts
View File

@@ -48,12 +48,12 @@ const fullUnicorns: UnicornInfo[] = unicornsRaw.map((unicorn) => {
*/ */
const relativeServerPath = getFullRelativePath( const relativeServerPath = getFullRelativePath(
"/content/data/", "/content/data/",
unicorn.profileImg unicorn.profileImg,
); );
const profileImgSize = getImageSize( const profileImgSize = getImageSize(
unicorn.profileImg, unicorn.profileImg,
dataDirectory, dataDirectory,
dataDirectory dataDirectory,
); );
// Mutation go BRR // Mutation go BRR
@@ -68,7 +68,7 @@ const fullUnicorns: UnicornInfo[] = unicornsRaw.map((unicorn) => {
}; };
newUnicorn.rolesMeta = unicorn.roles.map( newUnicorn.rolesMeta = unicorn.roles.map(
(role) => rolesRaw.find((rRole) => rRole.id === role)! as RolesEnum (role) => rolesRaw.find((rRole) => rRole.id === role)! as RolesEnum,
); );
// normalize social links - if a URL or "@name" is entered, only preserve the last part // normalize social links - if a URL or "@name" is entered, only preserve the last part
@@ -99,7 +99,7 @@ function getCollections(): CollectionInfo[] {
return files.map((file, i): CollectionInfo => { return files.map((file, i): CollectionInfo => {
const fileContents = fs.readFileSync( const fileContents = fs.readFileSync(
join(collectionsDirectory, slug, file), join(collectionsDirectory, slug, file),
"utf8" "utf8",
); );
const frontmatter = matter(fileContents).data as RawCollectionInfo; const frontmatter = matter(fileContents).data as RawCollectionInfo;
@@ -107,7 +107,7 @@ function getCollections(): CollectionInfo[] {
const coverImgSize = getImageSize( const coverImgSize = getImageSize(
frontmatter.coverImg, frontmatter.coverImg,
join(collectionsDirectory, slug), join(collectionsDirectory, slug),
join(collectionsDirectory, slug) join(collectionsDirectory, slug),
); );
const coverImgMeta = { const coverImgMeta = {
@@ -116,13 +116,13 @@ function getCollections(): CollectionInfo[] {
relativePath: frontmatter.coverImg, relativePath: frontmatter.coverImg,
relativeServerPath: getFullRelativePath( relativeServerPath: getFullRelativePath(
`/content/collections/${slug}`, `/content/collections/${slug}`,
frontmatter.coverImg frontmatter.coverImg,
), ),
absoluteFSPath: join(collectionsDirectory, slug, frontmatter.coverImg), absoluteFSPath: join(collectionsDirectory, slug, frontmatter.coverImg),
}; };
const authorsMeta = frontmatter.authors.map((authorId) => const authorsMeta = frontmatter.authors.map((authorId) =>
fullUnicorns.find((u) => u.id === authorId) fullUnicorns.find((u) => u.id === authorId),
); );
return { return {
@@ -155,7 +155,7 @@ function getPosts(): Array<PostInfo> {
return files.map((file, i): PostInfo => { return files.map((file, i): PostInfo => {
const fileContents = fs.readFileSync( const fileContents = fs.readFileSync(
join(postsDirectory, slug, file), join(postsDirectory, slug, file),
"utf8" "utf8",
); );
const frontmatter = matter(fileContents).data as RawPostInfo; const frontmatter = matter(fileContents).data as RawPostInfo;
@@ -175,7 +175,7 @@ function getPosts(): Array<PostInfo> {
locales, locales,
locale: locales[i], locale: locales[i],
authorsMeta: frontmatter.authors.map((authorId) => authorsMeta: frontmatter.authors.map((authorId) =>
fullUnicorns.find((u) => u.id === authorId) fullUnicorns.find((u) => u.id === authorId),
), ),
wordCount: (counts.InlineCodeWords || 0) + (counts.WordNode || 0), wordCount: (counts.InlineCodeWords || 0) + (counts.WordNode || 0),
publishedMeta: publishedMeta:

6
src/utils/get-suggested-articles.ts
View File

@@ -57,13 +57,13 @@ const getOrderRange = (arr: PostInfo[]) => {
{ {
largest: null as PostInfo, largest: null as PostInfo,
smallest: null as PostInfo, smallest: null as PostInfo,
} },
); );
}; };
export const getSuggestedArticles = ( export const getSuggestedArticles = (
postNode: ExtendedPostInfo, postNode: ExtendedPostInfo,
lang: Languages lang: Languages,
) => { ) => {
const suggestedPosts = getPostsByLang(lang); const suggestedPosts = getPostsByLang(lang);
@@ -119,7 +119,7 @@ export const getSuggestedArticles = (
} }
const howManyTagsSimilar = howManySimilarBetween( const howManyTagsSimilar = howManySimilarBetween(
post.tags, post.tags,
postNode.tags || [] postNode.tags || [],
); );
if (howManyTagsSimilar > 0) { if (howManyTagsSimilar > 0) {
similarTags.push({ post, howManyTagsSimilar }); similarTags.push({ post, howManyTagsSimilar });

2
src/utils/get-unicorn-profile-pic-map.ts
View File

@@ -16,7 +16,7 @@ const unicornProfilePicMap = Promise.all(
alt: "", alt: "",
})), })),
id: unicorn.id, id: unicorn.id,
})) })),
); );
export const getUnicornProfilePicMap = async () => { export const getUnicornProfilePicMap = async () => {

2
src/utils/markdown/file-tree/file-list.tsx
View File

@@ -26,7 +26,7 @@ const FolderIcon = makeSVGIcon(
`<svg viewBox="0 0 20 20"> `<svg viewBox="0 0 20 20">
<path d="M4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H16C17.1046 17 18 16.1046 18 15V8C18 6.89543 17.1046 6 16 6H11L10.0528 4.10557C9.714 3.428 9.02148 3 8.26393 3H4Z"/> <path d="M4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H16C17.1046 17 18 16.1046 18 15V8C18 6.89543 17.1046 6 16 6H11L10.0528 4.10557C9.714 3.428 9.02148 3 8.26393 3H4Z"/>
</svg> </svg>
` `,
); );
export interface File { export interface File {

2
src/utils/markdown/get-picture-hack.ts
View File

@@ -6,7 +6,7 @@ import {
import squoosh_service from "../../../node_modules/@astrojs/image/dist/loaders/squoosh.js"; import squoosh_service from "../../../node_modules/@astrojs/image/dist/loaders/squoosh.js";
export function getPicture( export function getPicture(
params: GetPictureParams params: GetPictureParams,
): Promise<GetPictureResult> { ): Promise<GetPictureResult> {
// HACK: This is a hack that heavily relies on `getImage`'s internals :( // HACK: This is a hack that heavily relies on `getImage`'s internals :(
globalThis.astroImage = { globalThis.astroImage = {

6
src/utils/markdown/hints/hints.tsx
View File

@@ -8,7 +8,7 @@ const chevron_down = await fs.readFile("src/icons/chevron_down.svg", "utf8");
interface HintProps { interface HintProps {
title: string; title: string;
children: Node[]; children: Node[];
}; }
/** @jsxImportSource hastscript */ /** @jsxImportSource hastscript */
export function Hint({ title, children }: HintProps): Element { export function Hint({ title, children }: HintProps): Element {
@@ -20,9 +20,7 @@ export function Hint({ title, children }: HintProps): Element {
{title} {title}
</summary> </summary>
<div class="hint__content"> <div class="hint__content">{children}</div>
{children}
</div>
</details> </details>
</div> </div>
) as never; ) as never;

12
src/utils/markdown/iframes/iframe-placeholder.tsx
View File

@@ -16,7 +16,11 @@ export interface IFramePlaceholderProps {
} }
/** @jsxImportSource hastscript */ /** @jsxImportSource hastscript */
export function IFramePlaceholder({ height, width, ...props }: IFramePlaceholderProps): Element { export function IFramePlaceholder({
height,
width,
...props
}: IFramePlaceholderProps): Element {
return ( return (
<div class="embed"> <div class="embed">
<div class="embed__header"> <div class="embed__header">
@@ -26,7 +30,7 @@ export function IFramePlaceholder({ height, width, ...props }: IFramePlaceholder
<source {...source} /> <source {...source} />
))} ))}
<img <img
{...props.pageIcon.image as any} {...(props.pageIcon.image as any)}
alt="" alt=""
loading="lazy" loading="lazy"
decoding="async" decoding="async"
@@ -54,9 +58,7 @@ export function IFramePlaceholder({ height, width, ...props }: IFramePlaceholder
target="_blank" target="_blank"
> >
<div class="buttonIcon">{fromHtml(launch)}</div> <div class="buttonIcon">{fromHtml(launch)}</div>
<div class="innerText"> <div class="innerText">New tab</div>
New tab
</div>
</a> </a>
</div> </div>
<div <div

2
src/utils/markdown/iframes/iframe-script.ts
View File

@@ -3,7 +3,7 @@
*/ */
export const iFrameClickToRun = () => { export const iFrameClickToRun = () => {
const iframeButtons: HTMLElement[] = document.querySelectorAll( const iframeButtons: HTMLElement[] = document.querySelectorAll(
"[data-iframeurl] > button" "[data-iframeurl] > button",
) as never; ) as never;
[...iframeButtons].forEach((el) => { [...iframeButtons].forEach((el) => {

12
src/utils/markdown/iframes/rehype-transform.ts
View File

@@ -40,7 +40,7 @@ function fetchPageIcon(src: URL, srcHast: Root): Promise<GetPictureResult> {
// <link rel="manifest" href="/manifest.json"> // <link rel="manifest" href="/manifest.json">
const manifestPath: Element = find( const manifestPath: Element = find(
srcHast, srcHast,
(node: unknown) => (node as Element)?.properties?.rel?.[0] === "manifest" (node: unknown) => (node as Element)?.properties?.rel?.[0] === "manifest",
); );
let iconLink: string; let iconLink: string;
@@ -63,8 +63,10 @@ function fetchPageIcon(src: URL, srcHast: Root): Promise<GetPictureResult> {
if (!iconLink) { if (!iconLink) {
// fetch `favicon.ico` // fetch `favicon.ico`
// <link rel="shortcut icon" type="image/png" href="https://example.com/img.png"> // <link rel="shortcut icon" type="image/png" href="https://example.com/img.png">
const favicon: Element = find(srcHast, (node: unknown) => const favicon: Element = find(
(node as Element)?.properties?.rel?.toString()?.includes("icon") srcHast,
(node: unknown) =>
(node as Element)?.properties?.rel?.toString()?.includes("icon"),
); );
if (favicon) { if (favicon) {
@@ -155,7 +157,7 @@ export const rehypeUnicornIFrameClickToRun: Plugin<
const width = iframeNode.properties.width ?? EMBED_SIZE.w; const width = iframeNode.properties.width ?? EMBED_SIZE.w;
const height = iframeNode.properties.height ?? EMBED_SIZE.h; const height = iframeNode.properties.height ?? EMBED_SIZE.h;
const info: PageInfo = (await fetchPageInfo( const info: PageInfo = (await fetchPageInfo(
iframeNode.properties.src.toString() iframeNode.properties.src.toString(),
).catch(() => null)) || { icon: await fetchDefaultPageIcon() }; ).catch(() => null)) || { icon: await fetchDefaultPageIcon() };
const iframeReplacement = IFramePlaceholder({ const iframeReplacement = IFramePlaceholder({
@@ -167,7 +169,7 @@ export const rehypeUnicornIFrameClickToRun: Plugin<
}); });
Object.assign(iframeNode, iframeReplacement); Object.assign(iframeNode, iframeReplacement);
}) }),
); );
}; };
}; };

2
src/utils/markdown/rehype-unicorn-element-map.ts
View File

@@ -25,7 +25,7 @@ export const rehypeUnicornElementMap: Plugin<[], Root> = () => {
"/content/", "/content/",
parentFolder, parentFolder,
slug, slug,
node.properties.src.toString() node.properties.src.toString(),
); );
} }

2
src/utils/markdown/tables/tables-script.ts
View File

@@ -4,7 +4,7 @@ export const enableTables = () => {
(e.target as HTMLElement).dataset.sticky = (e.target as HTMLElement).dataset.sticky =
e.intersectionRatio < 1 ? "pinned" : ""; e.intersectionRatio < 1 ? "pinned" : "";
}, },
{ threshold: [1] } { threshold: [1] },
); );
document.querySelectorAll("thead").forEach((e) => observer.observe(e)); document.querySelectorAll("thead").forEach((e) => observer.observe(e));

8
src/utils/markdown/tabs/rehype-transform.ts
View File

@@ -33,7 +33,7 @@ const getApproxLineCount = (nodes: Node[], inParagraph?: boolean): number => {
if ("children" in n) { if ("children" in n) {
lines += getApproxLineCount( lines += getApproxLineCount(
(n as Parent).children as Node[], (n as Parent).children as Node[],
isInParagraph isInParagraph,
); );
} }
// assume that any div/p/br causes a line break // assume that any div/p/br causes a line break
@@ -125,7 +125,7 @@ export const rehypeTabs: Plugin<[], Root> = () => {
// Determine if the set of tabs should use a constant height (via the "tabs-small" class) // Determine if the set of tabs should use a constant height (via the "tabs-small" class)
const tabHeights = tabs.map(({ contents }) => const tabHeights = tabs.map(({ contents }) =>
getApproxLineCount(contents) getApproxLineCount(contents),
); );
const isSmall = const isSmall =
// all tabs must be <= 30 approx. lines (less than the height of most desktop viewports) // all tabs must be <= 30 approx. lines (less than the height of most desktop viewports)
@@ -145,13 +145,13 @@ export const rehypeTabs: Plugin<[], Root> = () => {
tree, tree,
{ type: "raw", value: "<!-- tabs:start -->" } as never, { type: "raw", value: "<!-- tabs:start -->" } as never,
{ type: "raw", value: "<!-- tabs:end -->" } as never, { type: "raw", value: "<!-- tabs:end -->" } as never,
replaceTabNodes replaceTabNodes,
); );
replaceAllBetween( replaceAllBetween(
tree, tree,
{ type: "comment", value: " tabs:start " } as never, { type: "comment", value: " tabs:start " } as never,
{ type: "comment", value: " tabs:end " } as never, { type: "comment", value: " tabs:end " } as never,
replaceTabNodes replaceTabNodes,
); );
return tree; return tree;
}; };

2
src/utils/markdown/tabs/tabs-script.ts
View File

@@ -85,7 +85,7 @@ export const enableTabs = () => {
tabs.forEach((tab) => { tabs.forEach((tab) => {
const panel = parent.querySelector<HTMLElement>( const panel = parent.querySelector<HTMLElement>(
`#${tab.getAttribute("aria-controls")}` `#${tab.getAttribute("aria-controls")}`,
); );
entry.set(tab.dataset.tabname, { entry.set(tab.dataset.tabname, {
tab, tab,

6
src/utils/markdown/tabs/tabs.tsx
View File

@@ -14,7 +14,7 @@ export interface TabInfo {
interface TabsProps { interface TabsProps {
tabs: TabInfo[]; tabs: TabInfo[];
isSmall: boolean; isSmall: boolean;
}; }
/** @jsxImportSource hastscript */ /** @jsxImportSource hastscript */
export function Tabs({ tabs, isSmall }: TabsProps): Element { export function Tabs({ tabs, isSmall }: TabsProps): Element {
@@ -46,9 +46,7 @@ export function Tabs({ tabs, isSmall }: TabsProps): Element {
aria-labelledby={`tab-${index}`} aria-labelledby={`tab-${index}`}
aria-hidden={index === 0 ? undefined : true} aria-hidden={index === 0 ? undefined : true}
> >
<div class="tabs__tab-panel__inner"> <div class="tabs__tab-panel__inner">{contents}</div>
{contents}
</div>
</div> </div>
))} ))}
</div> </div>

6
src/utils/markdown/tooltips/tooltips.tsx
View File

@@ -10,7 +10,7 @@ interface TooltipProps {
icon: "info" | "warning"; icon: "info" | "warning";
title: string; title: string;
children: Node[]; children: Node[];
}; }
/** @jsxImportSource hastscript */ /** @jsxImportSource hastscript */
export function Tooltip({ icon, title, children }: TooltipProps): Element { export function Tooltip({ icon, title, children }: TooltipProps): Element {
@@ -20,9 +20,7 @@ export function Tooltip({ icon, title, children }: TooltipProps): Element {
{icon === "info" ? fromHtml(info) : fromHtml(warning)} {icon === "info" ? fromHtml(info) : fromHtml(warning)}
<p>{title}</p> <p>{title}</p>
</div> </div>
<div class="tooltip__content"> <div class="tooltip__content">{children}</div>
{children}
</div>
</blockquote> </blockquote>
) as never; ) as never;
} }

12
src/utils/translations.test.ts
View File

@@ -32,7 +32,7 @@ describe("utils/translations.ts", () => {
test("returns 'fr' from '/posts/test/index.fr.md'", () => { test("returns 'fr' from '/posts/test/index.fr.md'", () => {
const lang = translations.getLanguageFromFilename( const lang = translations.getLanguageFromFilename(
"/posts/test/index.fr.md" "/posts/test/index.fr.md",
); );
expect(lang).toBe("fr"); expect(lang).toBe("fr");
}); });
@@ -42,7 +42,7 @@ describe("utils/translations.ts", () => {
test("returns an initial prefix", () => { test("returns an initial prefix", () => {
const expected: Languages = "fr"; const expected: Languages = "fr";
const actual = translations.getPrefixLanguageFromPath( const actual = translations.getPrefixLanguageFromPath(
`/${expected}/something/extra/en/fr/hi` `/${expected}/something/extra/en/fr/hi`,
); );
expect(actual).toEqual(expected); expect(actual).toEqual(expected);
@@ -51,7 +51,7 @@ describe("utils/translations.ts", () => {
test("returns an initial prefix with no preceding slash", () => { test("returns an initial prefix with no preceding slash", () => {
const expected: Languages = "fr"; const expected: Languages = "fr";
const actual = translations.getPrefixLanguageFromPath( const actual = translations.getPrefixLanguageFromPath(
`${expected}/something/extra/en/fr/hi` `${expected}/something/extra/en/fr/hi`,
); );
expect(actual).toEqual(expected); expect(actual).toEqual(expected);
@@ -69,7 +69,7 @@ describe("utils/translations.ts", () => {
test("removes an initial prefix", () => { test("removes an initial prefix", () => {
const lang: Languages = "fr"; const lang: Languages = "fr";
const actual = translations.removePrefixLanguageFromPath( const actual = translations.removePrefixLanguageFromPath(
`/${lang}/something/extra/hi` `/${lang}/something/extra/hi`,
); );
expect(actual).toEqual("/something/extra/hi"); expect(actual).toEqual("/something/extra/hi");
@@ -78,7 +78,7 @@ describe("utils/translations.ts", () => {
test("removes an initial prefix with no preceding slash", () => { test("removes an initial prefix with no preceding slash", () => {
const lang: Languages = "fr"; const lang: Languages = "fr";
const actual = translations.removePrefixLanguageFromPath( const actual = translations.removePrefixLanguageFromPath(
`${lang}/something/extra/hi` `${lang}/something/extra/hi`,
); );
expect(actual).toEqual("something/extra/hi"); expect(actual).toEqual("something/extra/hi");
@@ -94,7 +94,7 @@ describe("utils/translations.ts", () => {
test("is not confused by prefixes that appear after the start of the path", () => { test("is not confused by prefixes that appear after the start of the path", () => {
const lang: Languages = "en"; const lang: Languages = "en";
const actual = translations.removePrefixLanguageFromPath( const actual = translations.removePrefixLanguageFromPath(
`/${lang}/${lang}/es/fr/something/hi` `/${lang}/${lang}/es/fr/something/hi`,
); );
expect(actual).toEqual(`/${lang}/es/fr/something/hi`); expect(actual).toEqual(`/${lang}/es/fr/something/hi`);

14
src/utils/translations.ts
View File

@@ -14,7 +14,7 @@ function isLanguageKey(str: string): str is Languages {
* code handles the parsing and converting of translation formats * code handles the parsing and converting of translation formats
*/ */
export function fileToOpenGraphConverter<T extends Languages>( export function fileToOpenGraphConverter<T extends Languages>(
lang: T lang: T,
): T extends `${infer Lang}-${infer Region}` ): T extends `${infer Lang}-${infer Region}`
? `${Lang}_${Uppercase<Region>}` ? `${Lang}_${Uppercase<Region>}`
: T { : T {
@@ -89,7 +89,7 @@ export function removePrefixLanguageFromPath(path: string) {
*/ */
export function getTranslatedPage( export function getTranslatedPage(
astro: { url: URL }, astro: { url: URL },
glob: MarkdownInstance<Record<string, unknown>>[] glob: MarkdownInstance<Record<string, unknown>>[],
): { ): {
locales: Languages[]; locales: Languages[];
page: MarkdownInstance<Record<string, unknown>>; page: MarkdownInstance<Record<string, unknown>>;
@@ -98,7 +98,7 @@ export function getTranslatedPage(
const lang = getPrefixLanguageFromPath(astro.url.pathname); const lang = getPrefixLanguageFromPath(astro.url.pathname);
const matchedResult = globResults.find((md) => const matchedResult = globResults.find((md) =>
md.file.endsWith(`${lang}.md`) md.file.endsWith(`${lang}.md`),
); );
const enResult = globResults.find((md) => md.file.split(".")[1] === "md"); const enResult = globResults.find((md) => md.file.split(".")[1] === "md");
@@ -128,8 +128,8 @@ const i18n: Partial<Record<Languages, Map<string, string>>> =
([file, content]: [string, { default: Record<string, string> }]) => [ ([file, content]: [string, { default: Record<string, string> }]) => [
basename(file).split(".")[0], basename(file).split(".")[0],
new Map(Object.entries(content.default)), new Map(Object.entries(content.default)),
] ],
) ),
); );
// warn about any values that do not have full translations // warn about any values that do not have full translations
@@ -140,7 +140,7 @@ for (const key of i18n.en?.keys() || []) {
if (missing.length) { if (missing.length) {
console.log( console.log(
`i18n: key "${key}" is missing from /content/data/i18n for languages: ${missing}` `i18n: key "${key}" is missing from /content/data/i18n for languages: ${missing}`,
); );
} }
} }
@@ -157,7 +157,7 @@ export function translate(astro: { url: URL }, key: string, ...args: string[]) {
if (!value) { if (!value) {
console.warn( console.warn(
`Translation key "${key}" is not specified in /content/data/i18n/${lang}.json` `Translation key "${key}" is not specified in /content/data/i18n/${lang}.json`,
); );
value = i18n.en?.get(key); value = i18n.en?.get(key);
} }

2
src/views/about/about.module.scss
View File

@@ -28,7 +28,7 @@
margin: var(--spc-2x); margin: var(--spc-2x);
background-color: #FFF; background-color: #fff;
border-radius: var(--corner-radius_s); border-radius: var(--corner-radius_s);
overflow: hidden; overflow: hidden;
} }

2
src/views/base/translations/translations-header.module.scss
View File

@@ -2,7 +2,7 @@
.text { .text {
margin: 0 !important; margin: 0 !important;
margin-left: var(--spc-2x) !important;; margin-left: var(--spc-2x) !important;
} }
.card { .card {

14
src/views/blog-post/article-nav/article-nav.module.scss
View File

@@ -15,8 +15,12 @@
--article-nav_item_overline-color: var(--primary_default); --article-nav_item_overline-color: var(--primary_default);
--article-nav_item_background-color: var(--transparent); --article-nav_item_background-color: var(--transparent);
--article-nav_item_background-color_hovered: var(--surface_primary_emphasis-low); --article-nav_item_background-color_hovered: var(
--article-nav_item_background-color_pressed: var(--surface_primary_emphasis-low); --surface_primary_emphasis-low
);
--article-nav_item_background-color_pressed: var(
--surface_primary_emphasis-low
);
--article-nav_item_background-color_focused: var(--background_focus); --article-nav_item_background-color_focused: var(--background_focus);
--article-nav_item_border_color: var(--surface_primary_emphasis-low); --article-nav_item_border_color: var(--surface_primary_emphasis-low);
@@ -42,10 +46,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--article-nav_item_gap); gap: var(--article-nav_item_gap);
padding: var(--article-nav_item_padding-vertical) var(--article-nav_item_padding-horizontal); padding: var(--article-nav_item_padding-vertical)
var(--article-nav_item_padding-horizontal);
background-color: var(--article-nav_item_background-color); background-color: var(--article-nav_item_background-color);
border: var(--article-nav_item_border-width) solid var(--article-nav_item_border_color); border: var(--article-nav_item_border-width) solid
var(--article-nav_item_border_color);
border-radius: var(--article-nav_item_corner-radius); border-radius: var(--article-nav_item_corner-radius);
@include transition(background-color border-color); @include transition(background-color border-color);

18
src/views/blog-post/article-nav/article-nav.tsx
View File

@@ -16,9 +16,7 @@ function ArticleNavItem({ post, type }: ArticleNavItemProps) {
class={`${style.item} ${style[`item--${type}`]}`} class={`${style.item} ${style[`item--${type}`]}`}
data-navigation-path={href} data-navigation-path={href}
> >
{ {type === "previous" ? (
type === "previous"
? (
<span class={`${style.item__overline} text-style-button-regular`}> <span class={`${style.item__overline} text-style-button-regular`}>
<span <span
class={`${style.icon}`} class={`${style.icon}`}
@@ -26,8 +24,7 @@ function ArticleNavItem({ post, type }: ArticleNavItemProps) {
/> />
Previous article Previous article
</span> </span>
) ) : (
: (
<span class={`${style.item__overline} text-style-button-regular`}> <span class={`${style.item__overline} text-style-button-regular`}>
Next article Next article
<span <span
@@ -35,11 +32,12 @@ function ArticleNavItem({ post, type }: ArticleNavItemProps) {
dangerouslySetInnerHTML={{ __html: arrow_right }} dangerouslySetInnerHTML={{ __html: arrow_right }}
/> />
</span> </span>
) )}
} <a href={href} class="text-style-body-medium-bold">
<a href={href} class="text-style-body-medium-bold">{getShortTitle(post)}</a> {getShortTitle(post)}
</a>
</div> </div>
) );
} }
export interface ArticleNavProps { export interface ArticleNavProps {
@@ -57,5 +55,5 @@ export function ArticleNav({ post, postSeries }: ArticleNavProps) {
{prevPost && <ArticleNavItem post={prevPost} type="previous" />} {prevPost && <ArticleNavItem post={prevPost} type="previous" />}
{nextPost && <ArticleNavItem post={nextPost} type="next" />} {nextPost && <ArticleNavItem post={nextPost} type="next" />}
</div> </div>
) );
} }

5
src/views/blog-post/blog-post-layout/blog-post-layout.module.scss
View File

@@ -14,7 +14,8 @@
padding: var(--site-spacing); padding: var(--site-spacing);
} }
.sidebarLeft, .sidebarRight { .sidebarLeft,
.sidebarRight {
flex-basis: 25%; flex-basis: 25%;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@@ -42,8 +43,6 @@
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;

5
src/views/blog-post/post-title-header/post-title-header.module.scss
View File

@@ -33,7 +33,8 @@
padding: var(--article-header_details_padding-vertical) 0; padding: var(--article-header_details_padding-vertical) 0;
.date, .authors { .date,
.authors {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -59,7 +60,7 @@
color: var(--article-header_details_date_edited_color); color: var(--article-header_details_date_edited_color);
&::before { &::before {
content: '•'; content: "•";
margin-left: var(--article-header_details_date-gap); margin-left: var(--article-header_details_date-gap);
padding-right: var(--article-header_details_date-gap); padding-right: var(--article-header_details_date-gap);
} }

2
src/views/blog-post/series/base.ts
View File

@@ -16,7 +16,7 @@ interface ActivePostMeta extends ExtendedPostInfo {
export function findActivePost( export function findActivePost(
post: ExtendedPostInfo, post: ExtendedPostInfo,
seriesPosts: ExtendedPostInfo[] seriesPosts: ExtendedPostInfo[],
) { ) {
const newPosts = [...seriesPosts] as ActivePostMeta[]; const newPosts = [...seriesPosts] as ActivePostMeta[];

1
src/views/blog-post/series/series-toc.module.scss
View File

@@ -147,7 +147,6 @@
height: 100%; height: 100%;
width: var(--series-nav_chapter-item_border_width); width: var(--series-nav_chapter-item_border_width);
background: var(--series-nav_chapter-item_border_color_selected); background: var(--series-nav_chapter-item_border_color_selected);
} }
.navigationItem[data-is-active]::after { .navigationItem[data-is-active]::after {

66
src/views/blog-post/table-of-contents/table-of-contents.module.scss
View File

@@ -1,7 +1,6 @@
@import "src/tokens/index"; @import "src/tokens/index";
:root { :root {
--toc_header_padding-top: var(--site-spacing); --toc_header_padding-top: var(--site-spacing);
--toc_header_padding-horizontal: var(--site-spacing); --toc_header_padding-horizontal: var(--site-spacing);
--toc_header_padding-bottom: var(--spc-4x); --toc_header_padding-bottom: var(--spc-4x);
@@ -63,7 +62,8 @@
} }
.tocTitle { .tocTitle {
margin: var(--toc_header_padding-top) var(--toc_header_padding-horizontal) var(--toc_header_padding-bottom); margin: var(--toc_header_padding-top) var(--toc_header_padding-horizontal)
var(--toc_header_padding-bottom);
} }
.tableList { .tableList {
@@ -89,7 +89,8 @@
} }
.tableListItem:not(.depth2) > a { .tableListItem:not(.depth2) > a {
padding: var(--toc_item_padding-vertical) var(--toc_item_padding-end) var(--toc_item_padding-vertical) var(--toc_item_padding-start); padding: var(--toc_item_padding-vertical) var(--toc_item_padding-end)
var(--toc_item_padding-vertical) var(--toc_item_padding-start);
} }
.tableListItem:hover > a { .tableListItem:hover > a {
@@ -105,7 +106,8 @@
pointer-events: none; pointer-events: none;
} }
.tableListItem:hover > a > *, :global(.toc-is-active) .tableListItemLinkInner { .tableListItem:hover > a > *,
:global(.toc-is-active) .tableListItemLinkInner {
color: var(--foreground_emphasis-high); color: var(--foreground_emphasis-high);
} }
@@ -113,7 +115,10 @@
} }
.depth2 > a > * { .depth2 > a > * {
margin-left: calc(var(--toc_sub-item_dot_size) + var(--toc_sub-item_dot_margin-end) + var(--toc_sub-item_padding-start)); margin-left: calc(
var(--toc_sub-item_dot_size) + var(--toc_sub-item_dot_margin-end) +
var(--toc_sub-item_padding-start)
);
position: relative; position: relative;
} }
@@ -122,41 +127,64 @@
border: none !important; border: none !important;
} }
.depth2:not(:global(.toc-is-active)):not(:hover):not(:active) > a:not(:focus-visible) > *::before { .depth2:not(:global(.toc-is-active)):not(:hover):not(:active)
> a:not(:focus-visible)
> *::before {
content: " "; content: " ";
background: var(--toc_divider_color); background: var(--toc_divider_color);
height: 100%; height: 100%;
width: 2px; width: 2px;
position: absolute; position: absolute;
left: calc(-2px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size) / 2)); left: calc(
-2px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size) /
2)
);
top: 0; top: 0;
} }
/* Extended line */ /* Extended line */
@supports selector(:has(*)) { @supports selector(:has(*)) {
.depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(:has(:focus-visible)) .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(
+ .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(:has(:focus-visible)) :has(:focus-visible)
> a > *::before { )
+ .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(
:has(:focus-visible)
)
> a
> *::before {
content: " "; content: " ";
background: var(--toc_divider_color); background: var(--toc_divider_color);
height: calc(100% + var(--toc_item_min-height)); height: calc(100% + var(--toc_item_min-height));
width: 2px; width: 2px;
position: absolute; position: absolute;
left: calc(-2px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size) / 2)); left: calc(
-2px - var(--toc_sub-item_padding-start) - calc(var(
--toc_sub-item_dot_size
) / 2)
);
bottom: 0; bottom: 0;
top: unset; top: unset;
} }
} }
@supports not selector(:has(*)) { @supports not selector(:has(*)) {
.depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(:focus-within) .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(
+ .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(:focus-within) :focus-within
> a > *::before { )
+ .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(
:focus-within
)
> a
> *::before {
content: " "; content: " ";
background: var(--toc_divider_color); background: var(--toc_divider_color);
height: calc(100% + var(--toc_item_min-height)); height: calc(100% + var(--toc_item_min-height));
width: 2px; width: 2px;
position: absolute; position: absolute;
left: calc(-2px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size) / 2)); left: calc(
-2px - var(--toc_sub-item_padding-start) - calc(var(
--toc_sub-item_dot_size
) / 2)
);
bottom: 0; bottom: 0;
top: unset; top: unset;
} }
@@ -174,7 +202,9 @@
height: 100%; height: 100%;
width: var(--toc_sub-item_dot_size); width: var(--toc_sub-item_dot_size);
position: absolute; position: absolute;
left: calc(0px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size))); left: calc(
0px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size))
);
top: 0; top: 0;
} }
@@ -192,7 +222,9 @@
height: 100%; height: 100%;
width: var(--toc_sub-item_dot_size); width: var(--toc_sub-item_dot_size);
position: absolute; position: absolute;
left: calc(0px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size))); left: calc(
0px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size))
);
top: 0; top: 0;
} }

5
src/views/collections/collection-page.module.scss
View File

@@ -26,7 +26,9 @@
--collection-page_author_description_padding-top: var(--spc-4x); --collection-page_author_description_padding-top: var(--spc-4x);
--collection-page_author_name_color: var(--foreground_emphasis-high); --collection-page_author_name_color: var(--foreground_emphasis-high);
--collection-page_author_count-articles_color: var(--foreground_emphasis-high); --collection-page_author_count-articles_color: var(
--foreground_emphasis-high
);
--collection-page_author_count-words_color: var(--foreground_emphasis-medium); --collection-page_author_count-words_color: var(--foreground_emphasis-medium);
--collection-page_author_dot_color: var(--foreground_emphasis-medium); --collection-page_author_dot_color: var(--foreground_emphasis-medium);
--collection-page_author_description_color: var(--foreground_emphasis-high); --collection-page_author_description_color: var(--foreground_emphasis-high);
@@ -106,7 +108,6 @@
gap: var(--collection-page_content_gap); gap: var(--collection-page_content_gap);
margin-top: var(--collection-page_content_gap); margin-top: var(--collection-page_content_gap);
@include from($tabletSmall) { @include from($tabletSmall) {
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 2; grid-row: 2;

11
src/views/collections/framework-field-guide/components/pricing-card.module.scss
View File

@@ -6,8 +6,8 @@
padding: var(--section-ver-padding) var(--section-hor-padding); padding: var(--section-ver-padding) var(--section-hor-padding);
border-radius: var(--pricing-container-radius); border-radius: var(--pricing-container-radius);
background: var(--pricing-container_default); background: var(--pricing-container_default);
transition: background var(--color-transition-time) transition:
var(--color-transition-ease), background var(--color-transition-time) var(--color-transition-ease),
color var(--color-transition-time) var(--color-transition-ease); color var(--color-transition-time) var(--color-transition-ease);
position: relative; position: relative;
} }
@@ -162,8 +162,11 @@ input[type="checkbox"].enterpriseToggle::before {
top: 50%; top: 50%;
left: var(--pricing-toggle-gap); left: var(--pricing-toggle-gap);
transform: translateY(-50%); transform: translateY(-50%);
transition: left 150ms ease-in-out, background-color 150ms ease-in-out, transition:
height 150ms ease-in-out, width 150ms ease-in-out; left 150ms ease-in-out,
background-color 150ms ease-in-out,
height 150ms ease-in-out,
width 150ms ease-in-out;
content: " "; content: " ";
width: var(--pricing-toggle-thumb-size); width: var(--pricing-toggle-thumb-size);
height: var(--pricing-toggle-thumb-size); height: var(--pricing-toggle-thumb-size);

1
src/views/collections/framework-field-guide/components/prominent-quote.module.scss
View File

@@ -69,7 +69,6 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.quotePersonTitle { .quotePersonTitle {
margin-top: 4px; margin-top: 4px;
margin-bottom: 0; margin-bottom: 0;

6
src/views/collections/framework-field-guide/components/quotes-container.module.scss
View File

@@ -51,7 +51,8 @@
pointer-events: none; pointer-events: none;
} }
.showMoreButton, .showLessButton { .showMoreButton,
.showLessButton {
position: absolute !important; position: absolute !important;
bottom: 1rem; bottom: 1rem;
left: 50%; left: 50%;
@@ -61,7 +62,8 @@
.quotesScrim { .quotesScrim {
background: var(--section-background); background: var(--section-background);
transition: background var(--color-transition-time) var(--color-transition-ease); transition: background var(--color-transition-time)
var(--color-transition-ease);
height: 100%; height: 100%;
position: absolute; position: absolute;
inset: 0; inset: 0;

11
src/views/collections/framework-field-guide/components/shared-section-styling.scss
View File

@@ -4,7 +4,8 @@
.book-section { .book-section {
padding: var(--section-ver-padding) 0; padding: var(--section-ver-padding) 0;
text-align: center; text-align: center;
transition: background-color var(--color-transition-time) var(--color-transition-ease); transition: background-color var(--color-transition-time)
var(--color-transition-ease);
will-change: transition; will-change: transition;
} }
@@ -20,7 +21,8 @@
.book-title { .book-title {
background: var(--text-gradient); background: var(--text-gradient);
transition: background var(--color-transition-time) var(--color-transition-ease); transition: background var(--color-transition-time)
var(--color-transition-ease);
will-change: transition; will-change: transition;
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
@@ -35,7 +37,7 @@
} }
.book-bio { .book-bio {
color: var(--on-dark-emphasis-high) color: var(--on-dark-emphasis-high);
} }
.book-ctas { .book-ctas {
@@ -72,7 +74,8 @@
margin: 0; margin: 0;
} }
.text-style-main-text-only, .section-metric-asterisk { .text-style-main-text-only,
.section-metric-asterisk {
background: var(--text-gradient); background: var(--text-gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;

6
src/views/collections/framework-field-guide/components/signup-form.module.scss
View File

@@ -53,8 +53,10 @@
color: white; color: white;
padding: var(--form-padding-vertical) 0 var(--form-padding-vertical) padding: var(--form-padding-vertical) 0 var(--form-padding-vertical)
var(--form-padding-horizontal); var(--form-padding-horizontal);
transition: background var(--btn-state-transition-duration) transition:
var(--btn-state-transition-easing), border-color var(--btn-state-transition-duration) background var(--btn-state-transition-duration)
var(--btn-state-transition-easing),
border-color var(--btn-state-transition-duration)
var(--btn-state-transition-easing); var(--btn-state-transition-easing);
} }

4
src/views/collections/framework-field-guide/cover-layers/ecosystem/forest_background.tsx
View File

@@ -3,10 +3,10 @@ import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
import { RepeatBackground } from "../shared/repeat-background"; import { RepeatBackground } from "../shared/repeat-background";
export const ForestBackground = () => { export const ForestBackground = () => {
const forestBackgroundColor = useCSSPropertyValue('--ecos-700', "#366E47"); const forestBackgroundColor = useCSSPropertyValue("--ecos-700", "#366E47");
const svg = useMemo(() => { const svg = useMemo(() => {
return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g><path fill='${forestBackgroundColor}' fill-rule='evenodd' d='M0 0v1342l8 5c1 2 10 6 20 9 15 5 20 13 41 69 14 35 29 64 31 68 32 60-76 427-76 427h26c27-81 52-191 73-285 19-82 35-150 45-174 15-27 75-97 81-93 3 2 12-4 21-13 8-9 20-17 27-18 6-1 17-8 23-15 9-11 11-12 11-3 0 6 5 10 12 10a539 539 0 0 1 121 257c18 107 21 121 28 118 8-2 8-56 0-201-6-100-6-100 8-125 13-23 28-32 32-20 1 3 10 9 20 13 23 11 25 25 30 169 4 101 60 258 60 258h20s-53-175-58-241c-7-88-2-182 7-198 7-15 12-18 22-14 7 2 18 8 23 13 10 8 11 8 11-1 0-8 11-16 33-24 22 8 33 16 33 24 0 9 1 9 11 1 5-5 16-11 23-13 10-4 15-1 22 14 9 16 9 28 3 111-8 96 17 410 45 410 10 10-26-151-19-340 5-144 7-158 30-169 10-4 19-10 20-13 4-12 19-3 32 20 14 25 14 25 8 125-8 145 20 385 28 388 22 3-18-198 0-305 12-71 34-129 77-201 23-40 36-56 44-56 7 0 12-4 12-10 0-9 2-8 11 3 6 7 17 14 23 15 7 1 19 9 27 18 9 9 18 15 21 13 6-4 66 66 81 93 10 24 26 92 45 174 21 94 46 204 73 285h26s-108-367-76-427c2-4 18-33 31-68 21-56 26-64 41-69 10-3 19-7 20-9l15-9c7-4 12-13 12-22 1-19 8-27 14-17 3 5 8 7 13 4 12-8 35-9 35-1 0 4 2 4 7-1 9-9 16-9 16 1 0 5 4 8 8 8 27-1 45 3 44 9-1 3 9 9 22 12 42 11 66 46 94 137 26 87 169 427 169 427l35 4s-119-279-158-395c-29-88-32-103-30-137 2-39 15-58 33-51 7 3 8-1 6-15-3-18 0-19 19-4 14 12 35 17 35 8 0-5 5-11 11-15 9-6 13-5 19 2 4 5 12 8 18 6 5-1 11 0 12 3s15 9 31 13c29 7 30 8 31 31 18 241 217 558 217 558h20s-224-376-201-573c8-13 21-11 16 3-2 5 1 8 6 8 4 0 8-2 8-5 0-7 29-19 36-15 3 2 8-2 12-9 6-8 12-11 21-8 9 2 14 1 14-5 0-5 1-6 7 0 13 13 22 7 26-16 2-16 6-22 11-20 4 1 14-1 21-5 8-4 16-7 19-6 2 0 6-3 8-8 1-5 7-9 11-9h3c4 8 10 9 26 8 12-1 18 0 14 3-10 7 1 17 22 20 8 1 15 6 17 13 1 6 7 17 14 24 10 12 14 13 21 7 6-5 10-5 15 2 5 8 17 15 33 20 23 8 35 17 35 25 0 9 1 9 11 1 5-5 16-11 23-13 10-4 15-1 22 14 9 16 21 175 21 307 0 127-30 169-11 169 49 0 13-421 49-464 6-7 19-10 20-13 4-12 19-3 32 20 14 25 11 76 11 131 0 70-11 277 23 394h19s-33-224-14-338c12-72 31-108 74-180 23-40 36-56 44-56 7 0 12-4 12-10 0-9 2-8 11 3 6 7 17 14 23 15 7 1 19 9 27 18 9 9 18 15 21 13 6-4 66 66 81 93 10 24 26 92 45 174 21 94 46 204 73 285h26s-108-367-76-427c2-4 18-33 31-68 21-56 26-64 41-69 10-3 19-7 20-9l8-5V0H0Zm397 1334c-5 2-3 7 6 20 9 14 13 16 17 10 8-12 6-17-3-13-5 2-9-1-10-8s-6-11-10-9Zm58 18c0 4-4 5-8 3-5-1-11 4-15 15-7 15-5 21 13 57l21 41v-57c0-32-2-59-5-61-4-2-6-1-6 2Zm-368 15c-12 7-12 7 4 51l16 44v-48c0-27-1-50-4-51-2-1-10 1-16 4Zm916-33c5 2 3 7-6 20-9 14-13 16-17 10-8-12-6-17 3-13 5 2 9-1 10-8s6-11 10-9Zm-58 18c0 4 4 5 8 3 5-1 11 4 15 15 7 15 5 21-13 57l-21 41s3-47 0-69c-4-29 2-47 5-49 4-2 6-1 6 2Zm368 15c12 7 12 7-4 51l-16 44v-48c0-27 1-50 4-51 2-1 10 1 16 4Zm1306-13c9-13 11-18 6-20-4-2-9 2-10 9s-5 10-10 8c-9-4-11 1-3 13 4 6 8 4 17-10Zm-44 1c-4 2-8 1-8-3 0-3-2-4-6-2-3 2-5 29-5 61v57l21-41c18-36 20-42 13-57-4-11-10-16-15-15Zm356 63c16-44 16-44 4-51-6-3-14-5-16-4-3 1-4 24-4 51v48l16-44Z' clip-rule='evenodd'></path></g></svg>` return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g><path fill='${forestBackgroundColor}' fill-rule='evenodd' d='M0 0v1342l8 5c1 2 10 6 20 9 15 5 20 13 41 69 14 35 29 64 31 68 32 60-76 427-76 427h26c27-81 52-191 73-285 19-82 35-150 45-174 15-27 75-97 81-93 3 2 12-4 21-13 8-9 20-17 27-18 6-1 17-8 23-15 9-11 11-12 11-3 0 6 5 10 12 10a539 539 0 0 1 121 257c18 107 21 121 28 118 8-2 8-56 0-201-6-100-6-100 8-125 13-23 28-32 32-20 1 3 10 9 20 13 23 11 25 25 30 169 4 101 60 258 60 258h20s-53-175-58-241c-7-88-2-182 7-198 7-15 12-18 22-14 7 2 18 8 23 13 10 8 11 8 11-1 0-8 11-16 33-24 22 8 33 16 33 24 0 9 1 9 11 1 5-5 16-11 23-13 10-4 15-1 22 14 9 16 9 28 3 111-8 96 17 410 45 410 10 10-26-151-19-340 5-144 7-158 30-169 10-4 19-10 20-13 4-12 19-3 32 20 14 25 14 25 8 125-8 145 20 385 28 388 22 3-18-198 0-305 12-71 34-129 77-201 23-40 36-56 44-56 7 0 12-4 12-10 0-9 2-8 11 3 6 7 17 14 23 15 7 1 19 9 27 18 9 9 18 15 21 13 6-4 66 66 81 93 10 24 26 92 45 174 21 94 46 204 73 285h26s-108-367-76-427c2-4 18-33 31-68 21-56 26-64 41-69 10-3 19-7 20-9l15-9c7-4 12-13 12-22 1-19 8-27 14-17 3 5 8 7 13 4 12-8 35-9 35-1 0 4 2 4 7-1 9-9 16-9 16 1 0 5 4 8 8 8 27-1 45 3 44 9-1 3 9 9 22 12 42 11 66 46 94 137 26 87 169 427 169 427l35 4s-119-279-158-395c-29-88-32-103-30-137 2-39 15-58 33-51 7 3 8-1 6-15-3-18 0-19 19-4 14 12 35 17 35 8 0-5 5-11 11-15 9-6 13-5 19 2 4 5 12 8 18 6 5-1 11 0 12 3s15 9 31 13c29 7 30 8 31 31 18 241 217 558 217 558h20s-224-376-201-573c8-13 21-11 16 3-2 5 1 8 6 8 4 0 8-2 8-5 0-7 29-19 36-15 3 2 8-2 12-9 6-8 12-11 21-8 9 2 14 1 14-5 0-5 1-6 7 0 13 13 22 7 26-16 2-16 6-22 11-20 4 1 14-1 21-5 8-4 16-7 19-6 2 0 6-3 8-8 1-5 7-9 11-9h3c4 8 10 9 26 8 12-1 18 0 14 3-10 7 1 17 22 20 8 1 15 6 17 13 1 6 7 17 14 24 10 12 14 13 21 7 6-5 10-5 15 2 5 8 17 15 33 20 23 8 35 17 35 25 0 9 1 9 11 1 5-5 16-11 23-13 10-4 15-1 22 14 9 16 21 175 21 307 0 127-30 169-11 169 49 0 13-421 49-464 6-7 19-10 20-13 4-12 19-3 32 20 14 25 11 76 11 131 0 70-11 277 23 394h19s-33-224-14-338c12-72 31-108 74-180 23-40 36-56 44-56 7 0 12-4 12-10 0-9 2-8 11 3 6 7 17 14 23 15 7 1 19 9 27 18 9 9 18 15 21 13 6-4 66 66 81 93 10 24 26 92 45 174 21 94 46 204 73 285h26s-108-367-76-427c2-4 18-33 31-68 21-56 26-64 41-69 10-3 19-7 20-9l8-5V0H0Zm397 1334c-5 2-3 7 6 20 9 14 13 16 17 10 8-12 6-17-3-13-5 2-9-1-10-8s-6-11-10-9Zm58 18c0 4-4 5-8 3-5-1-11 4-15 15-7 15-5 21 13 57l21 41v-57c0-32-2-59-5-61-4-2-6-1-6 2Zm-368 15c-12 7-12 7 4 51l16 44v-48c0-27-1-50-4-51-2-1-10 1-16 4Zm916-33c5 2 3 7-6 20-9 14-13 16-17 10-8-12-6-17 3-13 5 2 9-1 10-8s6-11 10-9Zm-58 18c0 4 4 5 8 3 5-1 11 4 15 15 7 15 5 21-13 57l-21 41s3-47 0-69c-4-29 2-47 5-49 4-2 6-1 6 2Zm368 15c12 7 12 7-4 51l-16 44v-48c0-27 1-50 4-51 2-1 10 1 16 4Zm1306-13c9-13 11-18 6-20-4-2-9 2-10 9s-5 10-10 8c-9-4-11 1-3 13 4 6 8 4 17-10Zm-44 1c-4 2-8 1-8-3 0-3-2-4-6-2-3 2-5 29-5 61v57l21-41c18-36 20-42 13-57-4-11-10-16-15-15Zm356 63c16-44 16-44 4-51-6-3-14-5-16-4-3 1-4 24-4 51v48l16-44Z' clip-rule='evenodd'></path></g></svg>`;
}, [forestBackgroundColor]); }, [forestBackgroundColor]);
return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />; return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;

4
src/views/collections/framework-field-guide/cover-layers/ecosystem/forest_foreground.tsx
View File

@@ -3,10 +3,10 @@ import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
import { RepeatBackground } from "../shared/repeat-background"; import { RepeatBackground } from "../shared/repeat-background";
export const ForestForeground = () => { export const ForestForeground = () => {
const forestForegroundColor = useCSSPropertyValue('--ecos-900', "#153D29"); const forestForegroundColor = useCSSPropertyValue("--ecos-900", "#153D29");
const svg = useMemo(() => { const svg = useMemo(() => {
return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g ><path fill='${forestForegroundColor}' fill-rule='evenodd' d='M0 763s4 0 7-5c3-4 8-5 19-5 11-1 20 1 20 4 0 4 4 4 12 0 10-5 13-5 17 0 3 6 10 5 33-2l35-9c12 0 57-25 56-31-1-3 9-6 23-6 19-1 25 1 28 9v16c-5 7 4 12 14 6 5-3 11-3 15 0 4 4 8 4 10 0 2-3 9-4 17 0 8 3 21 4 30 3 17-2 18 0 56 76l39 78-18 72c-48 196-49 375-3 547 23 87 23 87 12 78-9-7-11-7-19 4-7 10-13 12-26 10-11-2-25 2-37 8-21 12-39 15-33 6 2-4-3-3-11 0-8 4-14 9-13 11 0 1-5 9-12 16-13 13-28 12-37-1-3-4-7-2-13 5-5 7-9 9-9 7 0-3-4-2-8 2-6 5-9 5-9 1s-4-7-9-7c-10 0-20 12-43 12-12 0-17-9-21-6-5 4-7 3-7-4 0-8-2-9-9-3-13 11-60 14-60 4 0-6-6-8-20-7-12 2-17-12-26-12v280h3022v-280c0-18-10-24-30-30-8-2-28-18-30-24-2-3-5-3-7-1-7 4-29-15-29-25 0-4-2-7-5-7-4 0-6 3-6 6 0 4-4 5-9 3s-14-1-20 3c-9 4-11 4-11-3 0-5-4-9-9-9s-8-2-8-5c0-7-23-5-38 3-14 8-51 6-51-3 0-4-3-7-6-7s-8-4-10-8c-3-6-11-7-28-5-24 3-40 14-47 31-2 6-4 5-7-5-5-18-14-15-14 5 0 9-2 17-6 17-3 0-5-3-4-7 1-3-2-7-6-9-5-2-7 0-4 4 3 6 1 7-26 8-14 1-23 10-23 23 0 15-25 44-38 44l-25 3c-20 2-81-13-86-21-4-5-5-6-5-1 0 3-8 8-18 10-14 4-20 2-24-6-3-6-12-16-19-23-11-10-14-18-14-46 0-78-33-234-74-354l-27-81c-3-14 32-89 68-144 27-41 60-65 153-112 46-23 60-28 63-22 4 6 9 7 23 2 15-5 18-5 23 4 4 6 6 7 6 1 0-4 4-6 8-4 5 1 13-2 18-8 12-13 23-15 18-3-2 6 0 9 5 9s8-5 8-12c0-6 4-13 8-14 5-2 10-9 12-16 4-12 4-12 8-1 4 13 33 18 45 8 4-4 8-4 10 0s9 4 17 1c10-4 15-4 17 1s4 5 7 1c8-9 25-14 25-7 0 4 7 5 17 3 13-3 18-2 18 5 0 11 7 10 20-3 13-15 20-15 20 1 0 12 0 12 14-3 17-18 19-19 33-6 10 10 11 10 18-1 6-11 7-14 8-30 1-7 53-8 53 0 0 9 14 4 21-7V0H0v763Zm383-24 16-17 17-17 16 16c13 14 16 15 29 7 24-12 30 0 16 33-6 15-16 41-21 58l-2 4c-4 12-6 19-9 20-5 0-13-14-33-50l-5-9-24-45Zm870 20c2 1 13-2 24-8 23-12 34-14 34-5 0 3 5 7 11 9 12 5 24 17 24 24 0 3 10 9 21 13 12 4 30 15 41 26 19 19 35 25 35 13 0-10 22 17 24 30 1 7 5 13 9 12s7 1 7 4 4 4 8 3c4-2 10 1 12 7 3 9 5 8 13-4 7-10 16-15 29-15 10-1 18 1 18 4s6 5 12 5 11 2 11 5c0 8 60 1 67-8 3-4 10-8 15-8s10-3 11-6 12-7 25-8c12-1 27-4 33-6 7-3 10-2 10 5 0 8 2 8 12 3 9-5 13-5 16 1 4 5 8 4 18-3 17-12 18-12 37 5 9 8 23 16 31 18 11 2 22 16 42 49 42 69 122 173 184 238l54 57 12 103c23 204 26 253 18 261-7 6-7 5-4-3 4-12-11-14-15-2-2 5-13 7-31 6-15 0-34 3-41 7-7 5-19 7-27 4-11-2-14-1-14 6 0 14-10 11-31-10-15-15-23-19-34-17-12 3-15 1-16-10l-2-12-14 12c-8 7-17 12-22 12-4 0-7 3-7 6s-6 8-14 12c-7 3-16 15-20 25-4 11-9 20-11 20l-17 4c-8 2-13 0-13-4 0-3 3-5 6-3s6 0 6-5-4-9-9-9-8-3-8-6-8-6-17-6c-10 0-19-3-21-6s-7-5-12-3c-4 2-8 1-8-2s-3-6-8-6-11-4-14-9c-4-7-9-9-23-6-12 2-18 1-18-3s-10 3-22 15-24 19-26 16c-4-7-16-6-27 2-19 15-23 15-19 2 3-11 2-12-7-9-26 11-30 11-30-2 0-14-10-15-32-4-11 6-21 7-38 3-12-3-29-5-38-4-18 2-32-5-27-13 2-3 1-5-2-5s-8 3-10 6-8 4-14 2c-9-3-11 0-11 14 0 22-16 37-30 27-6-4-10-10-10-14s-4-5-10-2a402 402 0 0 1-68 26c-6 6-15 5-11-1a7 7 0 1 0-11-7c-4 6-41 5-47-1-2-2-11 0-20 5-15 7-17 7-20 0-5-14-17-11-29 5a41 41 0 0 1-49 15c-10-4-16-2-26 7s-13 10-13 3c0-6-4-9-14-8-9 1-14-1-16-8-2-8-11-11-37-14-20-2-39-2-44 0-6 2-9 0-9-6 0-11-4-11-28-3-10 4-18 10-18 15 0 11-10 10-27-4-9-7-22-11-34-10-10 0-20 0-22-2-1-2 2-26 9-54 24-111 30-183 31-343v-155l30-46 50-83c28-50 35-58 45-54s51-10 94-31c13-7 32-12 42-12 13 0 19-3 23-15 5-12 8-15 21-12 11 2 23-3 48-20 18-12 34-26 36-31s5-8 8-6Zm-685 51c-13 15-15 12-13-16 2-26 4-28 20-22 10 3 6 23-7 38Zm-18 87c0-37 1-39 21-57l21-18 19 22c11 13 19 28 19 33 0 7 5 12 13 13 12 1 13 5 16 47a511 511 0 0 1-51 275c-6 3-25-61-37-123-12-56-21-144-21-192Zm1838-7c7-14 50-49 65-53s44-4 44 0a450 450 0 0 1-109 53Zm-450 36-25-40c-8-13-11-20-6-17s15 4 23 3c19-2 28 17 23 48l-3 23-12-17Zm404-31c0-5 7-14 16-19 20-13 26-13 19 0-11 18-42 50-38 39 2-5 3-14 3-20Zm-52 24c1-3 8-9 16-12 16-5 16-4 18 16 1 17-3 29-20 55-11 18-29 51-40 74-15 33-19 38-23 29l-20-48c-9-21-16-39-16-42 0-9 33-40 35-33 5 13 50-22 50-39Zm-291 92c-38-51-41-68-16-80 7-3 14-3 15-1 1 3 5 5 10 5 4 0 8 2 8 6 0 3 5 4 11 2 8-3 12-1 12 6 0 5 2 7 6 5 3-2 9 0 14 4 4 3 12 5 17 3 6-2 11 2 15 12 8 22 32 124 38 163 5 29 4 32-3 26-13-10-87-99-127-151ZM834 952c-1 0-4-42-2-48s10 3 13 3c2 0 19-8-3 33-3 7-7 12-8 12Z' clip-rule='evenodd'></path></g></svg>` return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g ><path fill='${forestForegroundColor}' fill-rule='evenodd' d='M0 763s4 0 7-5c3-4 8-5 19-5 11-1 20 1 20 4 0 4 4 4 12 0 10-5 13-5 17 0 3 6 10 5 33-2l35-9c12 0 57-25 56-31-1-3 9-6 23-6 19-1 25 1 28 9v16c-5 7 4 12 14 6 5-3 11-3 15 0 4 4 8 4 10 0 2-3 9-4 17 0 8 3 21 4 30 3 17-2 18 0 56 76l39 78-18 72c-48 196-49 375-3 547 23 87 23 87 12 78-9-7-11-7-19 4-7 10-13 12-26 10-11-2-25 2-37 8-21 12-39 15-33 6 2-4-3-3-11 0-8 4-14 9-13 11 0 1-5 9-12 16-13 13-28 12-37-1-3-4-7-2-13 5-5 7-9 9-9 7 0-3-4-2-8 2-6 5-9 5-9 1s-4-7-9-7c-10 0-20 12-43 12-12 0-17-9-21-6-5 4-7 3-7-4 0-8-2-9-9-3-13 11-60 14-60 4 0-6-6-8-20-7-12 2-17-12-26-12v280h3022v-280c0-18-10-24-30-30-8-2-28-18-30-24-2-3-5-3-7-1-7 4-29-15-29-25 0-4-2-7-5-7-4 0-6 3-6 6 0 4-4 5-9 3s-14-1-20 3c-9 4-11 4-11-3 0-5-4-9-9-9s-8-2-8-5c0-7-23-5-38 3-14 8-51 6-51-3 0-4-3-7-6-7s-8-4-10-8c-3-6-11-7-28-5-24 3-40 14-47 31-2 6-4 5-7-5-5-18-14-15-14 5 0 9-2 17-6 17-3 0-5-3-4-7 1-3-2-7-6-9-5-2-7 0-4 4 3 6 1 7-26 8-14 1-23 10-23 23 0 15-25 44-38 44l-25 3c-20 2-81-13-86-21-4-5-5-6-5-1 0 3-8 8-18 10-14 4-20 2-24-6-3-6-12-16-19-23-11-10-14-18-14-46 0-78-33-234-74-354l-27-81c-3-14 32-89 68-144 27-41 60-65 153-112 46-23 60-28 63-22 4 6 9 7 23 2 15-5 18-5 23 4 4 6 6 7 6 1 0-4 4-6 8-4 5 1 13-2 18-8 12-13 23-15 18-3-2 6 0 9 5 9s8-5 8-12c0-6 4-13 8-14 5-2 10-9 12-16 4-12 4-12 8-1 4 13 33 18 45 8 4-4 8-4 10 0s9 4 17 1c10-4 15-4 17 1s4 5 7 1c8-9 25-14 25-7 0 4 7 5 17 3 13-3 18-2 18 5 0 11 7 10 20-3 13-15 20-15 20 1 0 12 0 12 14-3 17-18 19-19 33-6 10 10 11 10 18-1 6-11 7-14 8-30 1-7 53-8 53 0 0 9 14 4 21-7V0H0v763Zm383-24 16-17 17-17 16 16c13 14 16 15 29 7 24-12 30 0 16 33-6 15-16 41-21 58l-2 4c-4 12-6 19-9 20-5 0-13-14-33-50l-5-9-24-45Zm870 20c2 1 13-2 24-8 23-12 34-14 34-5 0 3 5 7 11 9 12 5 24 17 24 24 0 3 10 9 21 13 12 4 30 15 41 26 19 19 35 25 35 13 0-10 22 17 24 30 1 7 5 13 9 12s7 1 7 4 4 4 8 3c4-2 10 1 12 7 3 9 5 8 13-4 7-10 16-15 29-15 10-1 18 1 18 4s6 5 12 5 11 2 11 5c0 8 60 1 67-8 3-4 10-8 15-8s10-3 11-6 12-7 25-8c12-1 27-4 33-6 7-3 10-2 10 5 0 8 2 8 12 3 9-5 13-5 16 1 4 5 8 4 18-3 17-12 18-12 37 5 9 8 23 16 31 18 11 2 22 16 42 49 42 69 122 173 184 238l54 57 12 103c23 204 26 253 18 261-7 6-7 5-4-3 4-12-11-14-15-2-2 5-13 7-31 6-15 0-34 3-41 7-7 5-19 7-27 4-11-2-14-1-14 6 0 14-10 11-31-10-15-15-23-19-34-17-12 3-15 1-16-10l-2-12-14 12c-8 7-17 12-22 12-4 0-7 3-7 6s-6 8-14 12c-7 3-16 15-20 25-4 11-9 20-11 20l-17 4c-8 2-13 0-13-4 0-3 3-5 6-3s6 0 6-5-4-9-9-9-8-3-8-6-8-6-17-6c-10 0-19-3-21-6s-7-5-12-3c-4 2-8 1-8-2s-3-6-8-6-11-4-14-9c-4-7-9-9-23-6-12 2-18 1-18-3s-10 3-22 15-24 19-26 16c-4-7-16-6-27 2-19 15-23 15-19 2 3-11 2-12-7-9-26 11-30 11-30-2 0-14-10-15-32-4-11 6-21 7-38 3-12-3-29-5-38-4-18 2-32-5-27-13 2-3 1-5-2-5s-8 3-10 6-8 4-14 2c-9-3-11 0-11 14 0 22-16 37-30 27-6-4-10-10-10-14s-4-5-10-2a402 402 0 0 1-68 26c-6 6-15 5-11-1a7 7 0 1 0-11-7c-4 6-41 5-47-1-2-2-11 0-20 5-15 7-17 7-20 0-5-14-17-11-29 5a41 41 0 0 1-49 15c-10-4-16-2-26 7s-13 10-13 3c0-6-4-9-14-8-9 1-14-1-16-8-2-8-11-11-37-14-20-2-39-2-44 0-6 2-9 0-9-6 0-11-4-11-28-3-10 4-18 10-18 15 0 11-10 10-27-4-9-7-22-11-34-10-10 0-20 0-22-2-1-2 2-26 9-54 24-111 30-183 31-343v-155l30-46 50-83c28-50 35-58 45-54s51-10 94-31c13-7 32-12 42-12 13 0 19-3 23-15 5-12 8-15 21-12 11 2 23-3 48-20 18-12 34-26 36-31s5-8 8-6Zm-685 51c-13 15-15 12-13-16 2-26 4-28 20-22 10 3 6 23-7 38Zm-18 87c0-37 1-39 21-57l21-18 19 22c11 13 19 28 19 33 0 7 5 12 13 13 12 1 13 5 16 47a511 511 0 0 1-51 275c-6 3-25-61-37-123-12-56-21-144-21-192Zm1838-7c7-14 50-49 65-53s44-4 44 0a450 450 0 0 1-109 53Zm-450 36-25-40c-8-13-11-20-6-17s15 4 23 3c19-2 28 17 23 48l-3 23-12-17Zm404-31c0-5 7-14 16-19 20-13 26-13 19 0-11 18-42 50-38 39 2-5 3-14 3-20Zm-52 24c1-3 8-9 16-12 16-5 16-4 18 16 1 17-3 29-20 55-11 18-29 51-40 74-15 33-19 38-23 29l-20-48c-9-21-16-39-16-42 0-9 33-40 35-33 5 13 50-22 50-39Zm-291 92c-38-51-41-68-16-80 7-3 14-3 15-1 1 3 5 5 10 5 4 0 8 2 8 6 0 3 5 4 11 2 8-3 12-1 12 6 0 5 2 7 6 5 3-2 9 0 14 4 4 3 12 5 17 3 6-2 11 2 15 12 8 22 32 124 38 163 5 29 4 32-3 26-13-10-87-99-127-151ZM834 952c-1 0-4-42-2-48s10 3 13 3c2 0 19-8-3 33-3 7-7 12-8 12Z' clip-rule='evenodd'></path></g></svg>`;
}, [forestForegroundColor]); }, [forestForegroundColor]);
return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />; return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;

4
src/views/collections/framework-field-guide/cover-layers/ecosystem/forest_middleground.tsx
View File

@@ -3,10 +3,10 @@ import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
import { RepeatBackground } from "../shared/repeat-background"; import { RepeatBackground } from "../shared/repeat-background";
export const ForestMiddleground = () => { export const ForestMiddleground = () => {
const forestMiddlegroundColor = useCSSPropertyValue('--ecos-800', "#245538"); const forestMiddlegroundColor = useCSSPropertyValue("--ecos-800", "#245538");
const svg = useMemo(() => { const svg = useMemo(() => {
return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g ><path fill='${forestMiddlegroundColor}' fill-rule='evenodd' d='M3022 0v1104s-23 11-35 13c-17 3-22 9-22 19 0 4 2 5 6 3 12-8-3 18-18 32-10 8-23 13-35 12-11-1-27 5-43 16-14 9-28 14-31 11-3-2-9-3-14-1-12 4-40-11-40-21 0-13-11-10-15 3-3 11-19 13-34 4-5-3-20 7-48 35l-39 40-7 115c-8 128-3 330 8 349 4 6 16 15 26 19 11 4 25 14 32 21 7 8 22 16 32 18 13 3 23 11 31 26 6 11 14 21 18 21s13 5 19 11c13 11 15 31 6 56l-4 14H0v-130c0-12 9-18 14-16 5 1 13-6 21-19 12-20 25-28 25-14 0 5 3 5 9-1 5-4 10-11 10-16 0-8 4-9 31-11 5 0 10-5 11-11s10-12 23-14c11-2 22-7 23-10s10-7 20-9c10-1 27-5 37-9s20-5 24-1c9 7 30 7 25 0-1-3 1-6 7-6 5 0 12-4 15-10 6-11 7-10 7 0 0 11 2 10 16-4 9-9 19-15 22-13s5 0 5-4 6-6 15-3c9 2 17 1 19-3 3-3 8-4 12-2 4 3 12 6 18 7h6c6-2 9-17 22-96l1-5 20-116 7-41-27-36a853 853 0 0 0-113-133c-10-6-14-5-21 4-5 7-13 9-23 7-9-1-10 1-13 3-7 4-16-4-20-2-15 7-39 5-45-5-3-4-6-5-9-2-6 11-59-2-77-19-10-9-19-17-22-17s-16-9-30-21-33-23-44-25c-10-3-19-8-21-11V0h3022ZM1262 1074c-27 3-54 2-58-4-2-3 0-6 5-6 4-1-1-3-11-6-13-3-21-1-26 5-5 5-8 6-11 2-6-10-49-9-73 1-11 5-35 8-52 8l-33-1-16 53c-9 29-30 87-47 129-36 91-40 113-31 167 12 66 45 176 52 171 4-2 10 2 15 8 6 9 10 10 13 4 3-4 16-8 28-9 13 0 23-3 23-7s7 1 15 10c15 17 34 18 34 1 0-10 16-12 22-3s52 7 55-3c5-12 21-11 28 1 3 7 7 8 10 4 2-4 8-5 13-4 6 3 9 0 9-9 0-12 2-13 12-7l3 1c27-172 31-375 21-506Zm342 473c8 0 17 3 21 7 5 5 10 5 16 1 14-12 98-3 98 10 0 5 5 6 36 7 8 0 14 4 14 11 0 9 1 9 8 0 9-12 29-5 29 11 0 5 3 8 6 5 4-2 11 1 16 6s14 7 22 5c12-3 13-1 10 11-2 8-2 12 0 10s8 0 12 3c6 6 9 5 9 0s5-7 12-5 15 0 17-4c7-13 43-5 47 10 3 8 7 11 13 9 7-2 10 0 10 5s3 10 7 10c3 0 5 2 2 6-2 3-1 6 3 6 6 0 21 37 14 38-2 0 1 3 7 6 6 4 11 9 11 13 0 3 5 14 12 22 7 9 13 13 13 10s13-6 29-6l38-2c8 0 9-17 5-104-8-223-14-239-164-432-40-51-75-90-81-91-30-2-42-5-46-10-3-4-12-3-23 2-16 6-21 6-29-2-5-5-7-11-4-14 2-2-2-2-10 0-9 3-14 0-19-5l-27 44-22 35-63 101-15 97c-10 62-21 119-34 174Zm68-495c23-7 38-2 56 16l7 6v1c-1 17-12 33-35 67l-1 1c-22 34-38 54-37 45a1326 1326 0 0 0 10-136Zm-245-42c3 0 6 3 9 8 5 10 8 11 12 4 2-3 4-4 6-3 12 4 17 20 21 58l4 43-5 8c-29-29-53-57-57-67-6-15-2-52 9-51h1Zm-13 86 1 61v69l45-75-46-55Zm58 70c-10 15-21 35-34 58-23 41-24 46-29 123-3 45-7 99-10 120-3 35-3 38 5 27 7-8 11-9 14-4 2 4 7 5 10 3s6-1 6 2 11 5 25 5c19 0 30 3 39 13 10 10 16 12 21 7 6-4 8-3 8 4 0 6 2 8 7 9 12-48 32-153 40-209 2-14-49-90-102-158Zm16-23c39 39 82 77 93 74 9-3 11-30 16-98l1-14 2-36c-6-6-27 3-58 23-21 14-37 28-54 51Zm-625-66c-3-3-12-7-18-8-25-6-42-5-50 4-5 5-12 10-16 11-4 2 10 37 36 89l43 86 10-18c11-21 54-144 54-153 0-4-3-4-9 1s-10 5-12 0c-3-3-11-6-18-6-8 0-17-3-20-6Zm-139 76a443 443 0 0 0-39-76c-14 1-55 17-53 22 1 6 92 59 92 54Zm67 133c-22-46-30-53-139-111-30-16-57-28-60-25-18 18-106 467-95 484 4 7 23 2 28-6 2-3 35-6 73-7s67-4 65-7 7-4 21-1c13 2 25 7 26 10 2 4 6 3 11-1s9-5 9-2 4-1 10-9c6-9 13-13 21-10 6 2 14 0 16-5 8-13 25-17 34-9 6 6 6 6 3 0-6-11 2-10 13 2 19 19 30 8 28-29-1-18-5-46-8-62l-15-80c-9-58-13-69-41-132Zm-302-36 11-54c0-6-8-7-29-6-16 2-30 5-30 8s9 27 19 52l18 46 11-46Zm-32 60c0-6-39-95-46-107-9-13-39-16-36-3 1 7 82 115 82 110Zm1790-268c6 0 15-2 20-5 23-15 41 22 35 67-11 78-26 118-63 166-30 39-37 45-41 36l-26-84-23-73 13-22c7-11 18-22 24-24 7-2 13-11 16-26 2-12 7-21 10-19s9-1 14-6c6-5 15-10 21-10Zm-704 22c6-8 15-16 20-17l12-4c1 0 2 2 2 5s-10 11-22 18l-22 13 10-15Zm-53 21c0-11 5-21 14-27 28-20 31-9 5 22l-19 21v-16Zm842 68c-1-2 10-68 14-79 3-7 4-8 8-2 3 5 9 6 15 4 5-2 11 1 13 7 3 6-5 21-22 40l-28 30Zm-282 39c-32-37-51-68-47-75 5-7 16-8 27-1 4 3 14 26 23 51l15 46-18-21Zm102-78c0 4-4 15-5 15-3 0-5-25 0-25 3 0 5 7 5 10Zm88 279c19-33 101-138 163-210 26-30 49-52 51-49 2 2 12 5 22 6 21 2 43 25 67 68l14 26-17 89c-26 136-32 198-32 318 0 103-2 122-13 104-3-4-10-5-16-4-7 2-12 1-12-2 0-4-9-5-22-2-19 3-22 2-29-12-7-16-8-16-20-6-7 6-10 8-8 4 8-13-10-17-19-5-7 10-9 11-14 3-6-10-54-10-67 1-6 5-8 3-8-9 0-8-12-78-28-155l-27-139 15-26Zm314-225c-10-14-19-27-19-29s5-3 10-3 9 4 9 9 6 10 13 13c8 2 11 7 9 13-2 5-3 12-3 16s-9-5-19-19Zm108 40c2-6 4-19 4-28 0-16 1-16 10-4 11 16 11 18-5 32-13 11-13 11-9 0Z' clip-rule='evenodd'></path></g></svg>` return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g ><path fill='${forestMiddlegroundColor}' fill-rule='evenodd' d='M3022 0v1104s-23 11-35 13c-17 3-22 9-22 19 0 4 2 5 6 3 12-8-3 18-18 32-10 8-23 13-35 12-11-1-27 5-43 16-14 9-28 14-31 11-3-2-9-3-14-1-12 4-40-11-40-21 0-13-11-10-15 3-3 11-19 13-34 4-5-3-20 7-48 35l-39 40-7 115c-8 128-3 330 8 349 4 6 16 15 26 19 11 4 25 14 32 21 7 8 22 16 32 18 13 3 23 11 31 26 6 11 14 21 18 21s13 5 19 11c13 11 15 31 6 56l-4 14H0v-130c0-12 9-18 14-16 5 1 13-6 21-19 12-20 25-28 25-14 0 5 3 5 9-1 5-4 10-11 10-16 0-8 4-9 31-11 5 0 10-5 11-11s10-12 23-14c11-2 22-7 23-10s10-7 20-9c10-1 27-5 37-9s20-5 24-1c9 7 30 7 25 0-1-3 1-6 7-6 5 0 12-4 15-10 6-11 7-10 7 0 0 11 2 10 16-4 9-9 19-15 22-13s5 0 5-4 6-6 15-3c9 2 17 1 19-3 3-3 8-4 12-2 4 3 12 6 18 7h6c6-2 9-17 22-96l1-5 20-116 7-41-27-36a853 853 0 0 0-113-133c-10-6-14-5-21 4-5 7-13 9-23 7-9-1-10 1-13 3-7 4-16-4-20-2-15 7-39 5-45-5-3-4-6-5-9-2-6 11-59-2-77-19-10-9-19-17-22-17s-16-9-30-21-33-23-44-25c-10-3-19-8-21-11V0h3022ZM1262 1074c-27 3-54 2-58-4-2-3 0-6 5-6 4-1-1-3-11-6-13-3-21-1-26 5-5 5-8 6-11 2-6-10-49-9-73 1-11 5-35 8-52 8l-33-1-16 53c-9 29-30 87-47 129-36 91-40 113-31 167 12 66 45 176 52 171 4-2 10 2 15 8 6 9 10 10 13 4 3-4 16-8 28-9 13 0 23-3 23-7s7 1 15 10c15 17 34 18 34 1 0-10 16-12 22-3s52 7 55-3c5-12 21-11 28 1 3 7 7 8 10 4 2-4 8-5 13-4 6 3 9 0 9-9 0-12 2-13 12-7l3 1c27-172 31-375 21-506Zm342 473c8 0 17 3 21 7 5 5 10 5 16 1 14-12 98-3 98 10 0 5 5 6 36 7 8 0 14 4 14 11 0 9 1 9 8 0 9-12 29-5 29 11 0 5 3 8 6 5 4-2 11 1 16 6s14 7 22 5c12-3 13-1 10 11-2 8-2 12 0 10s8 0 12 3c6 6 9 5 9 0s5-7 12-5 15 0 17-4c7-13 43-5 47 10 3 8 7 11 13 9 7-2 10 0 10 5s3 10 7 10c3 0 5 2 2 6-2 3-1 6 3 6 6 0 21 37 14 38-2 0 1 3 7 6 6 4 11 9 11 13 0 3 5 14 12 22 7 9 13 13 13 10s13-6 29-6l38-2c8 0 9-17 5-104-8-223-14-239-164-432-40-51-75-90-81-91-30-2-42-5-46-10-3-4-12-3-23 2-16 6-21 6-29-2-5-5-7-11-4-14 2-2-2-2-10 0-9 3-14 0-19-5l-27 44-22 35-63 101-15 97c-10 62-21 119-34 174Zm68-495c23-7 38-2 56 16l7 6v1c-1 17-12 33-35 67l-1 1c-22 34-38 54-37 45a1326 1326 0 0 0 10-136Zm-245-42c3 0 6 3 9 8 5 10 8 11 12 4 2-3 4-4 6-3 12 4 17 20 21 58l4 43-5 8c-29-29-53-57-57-67-6-15-2-52 9-51h1Zm-13 86 1 61v69l45-75-46-55Zm58 70c-10 15-21 35-34 58-23 41-24 46-29 123-3 45-7 99-10 120-3 35-3 38 5 27 7-8 11-9 14-4 2 4 7 5 10 3s6-1 6 2 11 5 25 5c19 0 30 3 39 13 10 10 16 12 21 7 6-4 8-3 8 4 0 6 2 8 7 9 12-48 32-153 40-209 2-14-49-90-102-158Zm16-23c39 39 82 77 93 74 9-3 11-30 16-98l1-14 2-36c-6-6-27 3-58 23-21 14-37 28-54 51Zm-625-66c-3-3-12-7-18-8-25-6-42-5-50 4-5 5-12 10-16 11-4 2 10 37 36 89l43 86 10-18c11-21 54-144 54-153 0-4-3-4-9 1s-10 5-12 0c-3-3-11-6-18-6-8 0-17-3-20-6Zm-139 76a443 443 0 0 0-39-76c-14 1-55 17-53 22 1 6 92 59 92 54Zm67 133c-22-46-30-53-139-111-30-16-57-28-60-25-18 18-106 467-95 484 4 7 23 2 28-6 2-3 35-6 73-7s67-4 65-7 7-4 21-1c13 2 25 7 26 10 2 4 6 3 11-1s9-5 9-2 4-1 10-9c6-9 13-13 21-10 6 2 14 0 16-5 8-13 25-17 34-9 6 6 6 6 3 0-6-11 2-10 13 2 19 19 30 8 28-29-1-18-5-46-8-62l-15-80c-9-58-13-69-41-132Zm-302-36 11-54c0-6-8-7-29-6-16 2-30 5-30 8s9 27 19 52l18 46 11-46Zm-32 60c0-6-39-95-46-107-9-13-39-16-36-3 1 7 82 115 82 110Zm1790-268c6 0 15-2 20-5 23-15 41 22 35 67-11 78-26 118-63 166-30 39-37 45-41 36l-26-84-23-73 13-22c7-11 18-22 24-24 7-2 13-11 16-26 2-12 7-21 10-19s9-1 14-6c6-5 15-10 21-10Zm-704 22c6-8 15-16 20-17l12-4c1 0 2 2 2 5s-10 11-22 18l-22 13 10-15Zm-53 21c0-11 5-21 14-27 28-20 31-9 5 22l-19 21v-16Zm842 68c-1-2 10-68 14-79 3-7 4-8 8-2 3 5 9 6 15 4 5-2 11 1 13 7 3 6-5 21-22 40l-28 30Zm-282 39c-32-37-51-68-47-75 5-7 16-8 27-1 4 3 14 26 23 51l15 46-18-21Zm102-78c0 4-4 15-5 15-3 0-5-25 0-25 3 0 5 7 5 10Zm88 279c19-33 101-138 163-210 26-30 49-52 51-49 2 2 12 5 22 6 21 2 43 25 67 68l14 26-17 89c-26 136-32 198-32 318 0 103-2 122-13 104-3-4-10-5-16-4-7 2-12 1-12-2 0-4-9-5-22-2-19 3-22 2-29-12-7-16-8-16-20-6-7 6-10 8-8 4 8-13-10-17-19-5-7 10-9 11-14 3-6-10-54-10-67 1-6 5-8 3-8-9 0-8-12-78-28-155l-27-139 15-26Zm314-225c-10-14-19-27-19-29s5-3 10-3 9 4 9 9 6 10 13 13c8 2 11 7 9 13-2 5-3 12-3 16s-9-5-19-19Zm108 40c2-6 4-19 4-28 0-16 1-16 10-4 11 16 11 18-5 32-13 11-13 11-9 0Z' clip-rule='evenodd'></path></g></svg>`;
}, [forestMiddlegroundColor]); }, [forestMiddlegroundColor]);
return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />; return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;

16
src/views/collections/framework-field-guide/cover-layers/fundamentals/background_repeat.tsx
View File

@@ -3,14 +3,20 @@ import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
import { RepeatBackground } from "../shared/repeat-background"; import { RepeatBackground } from "../shared/repeat-background";
export const BackgroundRepeat = () => { export const BackgroundRepeat = () => {
const groundColor = useCSSPropertyValue('--fund-900', "#17383F"); const groundColor = useCSSPropertyValue("--fund-900", "#17383F");
const svg = useMemo(() => { const svg = useMemo(() => {
return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 6400 1680'><path fill='${groundColor}' d='m2871 980-21 2c-40 4-117 11-152 9-32-1-79 6-128 13-43 6-87 12-124 14-24 1-46 6-46 6l-64 2-33-2s-11-5-23-6c-19-2-42-8-64-14-25-7-50-14-66-13-18 2-58-5-78-9l-11-2-12-1c-17-2-45-5-53-8-11-4-95-14-105-14-9 0-93 10-104 14-9 3-37 6-53 8l-12 1-11 2c-20 4-60 11-78 9-17-1-41 6-66 13-22 6-45 12-64 14-12 1-24 6-24 6l-786 50-25-4-46-8a3657 3657 0 0 0-168 8c-7 3-48 7-82 11a669 669 0 0 0-55 6l-51-1h-23v1l-198-1H0v594h6400v-594c-96 0-303 9-325 0l-47-5c-34-4-75-8-82-11-12-4-161-8-168-8l-46 8-27 5-700-52v-1s-11-3-23-4c-19-1-42-6-64-11-25-5-49-11-65-10-18 0-58-6-79-9l-10-1-12-1-53-7c-11-3-95-12-104-13a1690 1690 0 0 0-158 9h-12l-11 1c-21 2-61 5-79 3-16-1-40 2-66 6-22 3-45 7-64 7-12 0-23 3-23 3l-394 3c-33-5-63-8-86-7a1532 1532 0 0 1-196-12c-33-2-86-5-103-8-21-4-185-14-203-14s-182 10-203 14c-17 3-70 6-103 8l-23 1Z'/></svg>` return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 6400 1680'><path fill='${groundColor}' d='m2871 980-21 2c-40 4-117 11-152 9-32-1-79 6-128 13-43 6-87 12-124 14-24 1-46 6-46 6l-64 2-33-2s-11-5-23-6c-19-2-42-8-64-14-25-7-50-14-66-13-18 2-58-5-78-9l-11-2-12-1c-17-2-45-5-53-8-11-4-95-14-105-14-9 0-93 10-104 14-9 3-37 6-53 8l-12 1-11 2c-20 4-60 11-78 9-17-1-41 6-66 13-22 6-45 12-64 14-12 1-24 6-24 6l-786 50-25-4-46-8a3657 3657 0 0 0-168 8c-7 3-48 7-82 11a669 669 0 0 0-55 6l-51-1h-23v1l-198-1H0v594h6400v-594c-96 0-303 9-325 0l-47-5c-34-4-75-8-82-11-12-4-161-8-168-8l-46 8-27 5-700-52v-1s-11-3-23-4c-19-1-42-6-64-11-25-5-49-11-65-10-18 0-58-6-79-9l-10-1-12-1-53-7c-11-3-95-12-104-13a1690 1690 0 0 0-158 9h-12l-11 1c-21 2-61 5-79 3-16-1-40 2-66 6-22 3-45 7-64 7-12 0-23 3-23 3l-394 3c-33-5-63-8-86-7a1532 1532 0 0 1-196-12c-33-2-86-5-103-8-21-4-185-14-203-14s-182 10-203 14c-17 3-70 6-103 8l-23 1Z'/></svg>`;
}, [groundColor]); }, [groundColor]);
return <RepeatBackground aspectRatio={"6400/1680"} svg={svg} javascriptEnabledStyle={{ return (
<RepeatBackground
aspectRatio={"6400/1680"}
svg={svg}
javascriptEnabledStyle={{
height: "1px", height: "1px",
flexGrow: '1', flexGrow: "1",
}} />; }}
/>
);
}; };

7
src/views/collections/framework-field-guide/cover-layers/fundamentals/ground_and_man.tsx
View File

@@ -1,6 +1,11 @@
export const GroundAndManSvg = () => { export const GroundAndManSvg = () => {
return ( return (
<svg class="nofill colorTransitionSVG" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1680 1680"> <svg
class="nofill colorTransitionSVG"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 1680 1680"
>
<g> <g>
<path <path
fill="var(--fund-900)" fill="var(--fund-900)"

4
src/views/collections/framework-field-guide/cover-layers/fundamentals/mountains.tsx
View File

@@ -3,10 +3,10 @@ import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
import { RepeatBackground } from "../shared/repeat-background"; import { RepeatBackground } from "../shared/repeat-background";
export const Mountains = () => { export const Mountains = () => {
const mountainColor = useCSSPropertyValue('--fund-300', "#94CEDB"); const mountainColor = useCSSPropertyValue("--fund-300", "#94CEDB");
const svg = useMemo(() => { const svg = useMemo(() => {
return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3200 1680'><path fill='${mountainColor}' d='M325 1067h2550s-73-219-79-229c-19-33-96-137-98-138l-23-11a953 953 0 0 1-79-59l-26-22-26-24c-18-15-30-27-42-42-7-10-14-18-25-28l-20-23c-7-11-10-13-24-21l-17-13a654 654 0 0 0-63-64l-14-14-13-14c-7-10-14-16-23-23-6-5-9-9-17-22-5-10-7-12-11-12-3 0-10 4-18 11a593 593 0 0 0-52 60l-13 15c-6 8-11 14-15 15-2 1-4 0-10-3-4-2-10-5-14-5-9-3-13-5-19-11-8-9-12-7-32 16-14 16-20 22-20 20s-9 5-19 15l-10 11-4-4-12-5-13-9c-7-6-20-14-24-14l-12 4c-14 5-15 5-20 3-6-2-8-2-11 3-6 9-11 22-13 29l-6 17c-3 8-5 10-8 12l-8 8-10 11-22 31c-3 6-5 8-10 9-6 2-9 5-13 12l-15 25-8 8c-17 13-25 21-30 29-3 5-6 8-9 10l-10 6-9 6h-8c-5 0-7 0-12 4l-10 10c-6 8-14 13-23 14-13 2-14 3-23 12-8 8-9 9-16 11l-15 7c-9 7-15 9-22 9-6 0-6 0-10 5l-6 10c-3 7-19 22-31 30l-16 12-10 7c-2 1-5 0-13-2l-24-6-28-7c-21-6-28-8-49-12l-58-15a2012 2012 0 0 0-114-33c-10-4-71-33-80-39l-21-15-25-18c-6-4-17-11-23-17l-20-17-22-18a431 431 0 0 0-57-46 462 462 0 0 0-44-33l-10-8c-3-1-3-1-8 2l-14 10c-10 10-17 15-29 23-10 6-32 23-46 34-15 12-28 21-53 38a534 534 0 0 0-103 85l-20 18c-14 13-18 16-41 30a157 157 0 0 0-63 57c-2 6-4 9-8 12l-15 15a44799 44799 0 0 0-34 39l-17 16c-12 11-21 18-31 24l-14 10-13 11c-12 9-32 27-38 35l-17 14-29 27a1334 1334 0 0 0-26 27l-10 8-17 16c-10 9-17 17-20 21l-5 7Z'/></svg>` return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3200 1680'><path fill='${mountainColor}' d='M325 1067h2550s-73-219-79-229c-19-33-96-137-98-138l-23-11a953 953 0 0 1-79-59l-26-22-26-24c-18-15-30-27-42-42-7-10-14-18-25-28l-20-23c-7-11-10-13-24-21l-17-13a654 654 0 0 0-63-64l-14-14-13-14c-7-10-14-16-23-23-6-5-9-9-17-22-5-10-7-12-11-12-3 0-10 4-18 11a593 593 0 0 0-52 60l-13 15c-6 8-11 14-15 15-2 1-4 0-10-3-4-2-10-5-14-5-9-3-13-5-19-11-8-9-12-7-32 16-14 16-20 22-20 20s-9 5-19 15l-10 11-4-4-12-5-13-9c-7-6-20-14-24-14l-12 4c-14 5-15 5-20 3-6-2-8-2-11 3-6 9-11 22-13 29l-6 17c-3 8-5 10-8 12l-8 8-10 11-22 31c-3 6-5 8-10 9-6 2-9 5-13 12l-15 25-8 8c-17 13-25 21-30 29-3 5-6 8-9 10l-10 6-9 6h-8c-5 0-7 0-12 4l-10 10c-6 8-14 13-23 14-13 2-14 3-23 12-8 8-9 9-16 11l-15 7c-9 7-15 9-22 9-6 0-6 0-10 5l-6 10c-3 7-19 22-31 30l-16 12-10 7c-2 1-5 0-13-2l-24-6-28-7c-21-6-28-8-49-12l-58-15a2012 2012 0 0 0-114-33c-10-4-71-33-80-39l-21-15-25-18c-6-4-17-11-23-17l-20-17-22-18a431 431 0 0 0-57-46 462 462 0 0 0-44-33l-10-8c-3-1-3-1-8 2l-14 10c-10 10-17 15-29 23-10 6-32 23-46 34-15 12-28 21-53 38a534 534 0 0 0-103 85l-20 18c-14 13-18 16-41 30a157 157 0 0 0-63 57c-2 6-4 9-8 12l-15 15a44799 44799 0 0 0-34 39l-17 16c-12 11-21 18-31 24l-14 10-13 11c-12 9-32 27-38 35l-17 14-29 27a1334 1334 0 0 0-26 27l-10 8-17 16c-10 9-17 17-20 21l-5 7Z'/></svg>`;
}, [mountainColor]); }, [mountainColor]);
return <RepeatBackground aspectRatio={"3200/1680"} svg={svg} />; return <RepeatBackground aspectRatio={"3200/1680"} svg={svg} />;

7
src/views/collections/framework-field-guide/cover-layers/fundamentals/sign_ground_reflection.tsx
View File

@@ -1,6 +1,11 @@
export const SignGroundReflection = () => { export const SignGroundReflection = () => {
return ( return (
<svg class="nofill colorTransitionSVG" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1680 1680"> <svg
class="nofill colorTransitionSVG"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 1680 1680"
>
<g> <g>
<path <path
fill="var(--fund-300)" fill="var(--fund-300)"

15
src/views/collections/framework-field-guide/cover-layers/internals/bear_center.tsx
View File

@@ -1,13 +1,22 @@
export const BearCenter = () => { export const BearCenter = () => {
return ( return (
<svg xmlns="http://www.w3.org/2000/svg" class="nofill colorTransitionSVG" fill="none" viewBox="0 0 1280 1280"> <svg
xmlns="http://www.w3.org/2000/svg"
class="nofill colorTransitionSVG"
fill="none"
viewBox="0 0 1280 1280"
>
<g> <g>
<path fill="var(--inter-900)" <path
fill="var(--inter-900)"
fill-rule="evenodd" fill-rule="evenodd"
d="m175 949-7 4c-3 0-5 1-5 2h-3c-3 0-4 1-5 2-1 2-2 2-3 2l-3 2-2 2-16 11c1 1 0 2-2 4l-6 8-4 5-1 3-2 3-1 2-5 5-4 5-3 5a132 132 0 0 0-15 36l-6 16c-4 8-5 11-7 12l-2 5c-2 9-6 18-10 25-4 8-7 16-7 21 0 3 4 9 9 14 4 4 5 4 9 4 6 0 20-2 22-4h2c2 1 2 0 2-1-1-1-5-4-10-4-2-1-2-2-2-4 0-3 7-11 13-16a126 126 0 0 0 26-24l11-12 2-3 4 1c10 3 14 8 22 23l8 12c4 5 6 9 10 18 1 4 2 8 4 10 4 7 4 7 30 6a3555 3555 0 0 1 69-1l5-1 1-1c0-3-4-4-9-5-4 0-13-5-14-8-2-6 0-21 4-27 1-3 4-5 4-4 0 2 13 11 22 14 7 3 11 5 15 9l5 5-2 4c-2 5-2 8-1 11v3c-2 2-1 4 3 3 4 0 10-7 13-13l6-9c3-5 3-7 4-14v-7l-4-3c-11-8-14-12-17-19l-3-10c0-4 4-14 7-20 2-1 3-5 4-8l4-6c2-1 10-2 24-2 20-2 22-1 26 0l14 1 11-2 3-1 4-2 4-3c1 0 6-5 6-7l-5-4-9-8c-4-4-5-5-6-14l-6-8a253 253 0 0 1-17-23c-1-5-2-5-9-2-3 2-6 2-7 2l-6-1-6-2-15-5-4-1-2-1h-2l-7-2-3-2h-4c-3-3-9-5-13-6-6-1-18 1-22 3l-15 3-18 1c-10 2-43-2-47-5-1-1-5-2-12-2l-12-1-4 1Zm59 128-7 2-7 2-4 1v8l2 11 1 10 1 16c1 6 2 7 5 9l7 1 7 1 3 1 1-10-1-22-2-21c0-12 0-12-6-9Z" d="m175 949-7 4c-3 0-5 1-5 2h-3c-3 0-4 1-5 2-1 2-2 2-3 2l-3 2-2 2-16 11c1 1 0 2-2 4l-6 8-4 5-1 3-2 3-1 2-5 5-4 5-3 5a132 132 0 0 0-15 36l-6 16c-4 8-5 11-7 12l-2 5c-2 9-6 18-10 25-4 8-7 16-7 21 0 3 4 9 9 14 4 4 5 4 9 4 6 0 20-2 22-4h2c2 1 2 0 2-1-1-1-5-4-10-4-2-1-2-2-2-4 0-3 7-11 13-16a126 126 0 0 0 26-24l11-12 2-3 4 1c10 3 14 8 22 23l8 12c4 5 6 9 10 18 1 4 2 8 4 10 4 7 4 7 30 6a3555 3555 0 0 1 69-1l5-1 1-1c0-3-4-4-9-5-4 0-13-5-14-8-2-6 0-21 4-27 1-3 4-5 4-4 0 2 13 11 22 14 7 3 11 5 15 9l5 5-2 4c-2 5-2 8-1 11v3c-2 2-1 4 3 3 4 0 10-7 13-13l6-9c3-5 3-7 4-14v-7l-4-3c-11-8-14-12-17-19l-3-10c0-4 4-14 7-20 2-1 3-5 4-8l4-6c2-1 10-2 24-2 20-2 22-1 26 0l14 1 11-2 3-1 4-2 4-3c1 0 6-5 6-7l-5-4-9-8c-4-4-5-5-6-14l-6-8a253 253 0 0 1-17-23c-1-5-2-5-9-2-3 2-6 2-7 2l-6-1-6-2-15-5-4-1-2-1h-2l-7-2-3-2h-4c-3-3-9-5-13-6-6-1-18 1-22 3l-15 3-18 1c-10 2-43-2-47-5-1-1-5-2-12-2l-12-1-4 1Zm59 128-7 2-7 2-4 1v8l2 11 1 10 1 16c1 6 2 7 5 9l7 1 7 1 3 1 1-10-1-22-2-21c0-12 0-12-6-9Z"
clip-rule="evenodd" clip-rule="evenodd"
/> />
<path fill="var(--inter-900)" d="M627 1143h30l11-1 29-1 31-2a516 516 0 0 1 47-1l24-1a2314 2314 0 0 1 96 0l25 1a693 693 0 0 1 23 2 794 794 0 0 0 100 4l72-2 159 5h21l7 1h98l11 2 11 3h5c5 0 19 6 35 12 16 7 34 15 42 15 1 0 72 9 83 14 28 14 60 38 60 39 4 0 9 5 14 9l5 4h1c30 3 53 6 53 34H-440c0-28 23-31 53-34h1l5-4c5-4 10-9 14-9 0-1 32-25 60-39 11-5 82-14 83-14 8 0 26-8 42-15 16-6 30-12 35-12h5l11-3 11-2h98l7-1H6l159-5 72 2 16 1a794 794 0 0 0 107-7l25-1a2314 2314 0 0 1 96 0l25 1a692 692 0 0 1 10 0c10 1 28 2 36 1l31 2a687 687 0 0 0 40 2h4Z" /> <path
fill="var(--inter-900)"
d="M627 1143h30l11-1 29-1 31-2a516 516 0 0 1 47-1l24-1a2314 2314 0 0 1 96 0l25 1a693 693 0 0 1 23 2 794 794 0 0 0 100 4l72-2 159 5h21l7 1h98l11 2 11 3h5c5 0 19 6 35 12 16 7 34 15 42 15 1 0 72 9 83 14 28 14 60 38 60 39 4 0 9 5 14 9l5 4h1c30 3 53 6 53 34H-440c0-28 23-31 53-34h1l5-4c5-4 10-9 14-9 0-1 32-25 60-39 11-5 82-14 83-14 8 0 26-8 42-15 16-6 30-12 35-12h5l11-3 11-2h98l7-1H6l159-5 72 2 16 1a794 794 0 0 0 107-7l25-1a2314 2314 0 0 1 96 0l25 1a692 692 0 0 1 10 0c10 1 28 2 36 1l31 2a687 687 0 0 0 40 2h4Z"
/>
</g> </g>
</svg> </svg>
); );

4
src/views/collections/framework-field-guide/cover-layers/internals/clouds_fourth_layer.tsx
View File

@@ -3,10 +3,10 @@ import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
import { RepeatBackground } from "../shared/repeat-background"; import { RepeatBackground } from "../shared/repeat-background";
export const CloudsFourthLayer = () => { export const CloudsFourthLayer = () => {
const cloudFourthColor = useCSSPropertyValue('--inter-800', "#261456"); const cloudFourthColor = useCSSPropertyValue("--inter-800", "#261456");
const svg = useMemo(() => { const svg = useMemo(() => {
return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1631 1280'><path fill='${cloudFourthColor}' d='M0 1280V391l1 1c6-4 14-6 22-6 28 0 50 23 50 50 12 0 24 5 32 12a101 101 0 0 1 174 6 100 100 0 0 1 109-18 55 55 0 0 1 80-36 126 126 0 0 1 240 48 86 86 0 0 1 126 14 86 86 0 0 1 114 3 86 86 0 0 1 41-8 86 86 0 0 1 102-33c5-8 12-15 19-21a86 86 0 0 1 85-97c46 0 83 36 86 81 11 9 20 21 25 35a86 86 0 0 1 91 30c12-7 26-11 41-12a121 121 0 0 1 193-49v889H0Z'/></svg>` return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1631 1280'><path fill='${cloudFourthColor}' d='M0 1280V391l1 1c6-4 14-6 22-6 28 0 50 23 50 50 12 0 24 5 32 12a101 101 0 0 1 174 6 100 100 0 0 1 109-18 55 55 0 0 1 80-36 126 126 0 0 1 240 48 86 86 0 0 1 126 14 86 86 0 0 1 114 3 86 86 0 0 1 41-8 86 86 0 0 1 102-33c5-8 12-15 19-21a86 86 0 0 1 85-97c46 0 83 36 86 81 11 9 20 21 25 35a86 86 0 0 1 91 30c12-7 26-11 41-12a121 121 0 0 1 193-49v889H0Z'/></svg>`;
}, [cloudFourthColor]); }, [cloudFourthColor]);
return <RepeatBackground aspectRatio={"1631/1280"} svg={svg} />; return <RepeatBackground aspectRatio={"1631/1280"} svg={svg} />;

5
src/views/collections/framework-field-guide/cover-layers/internals/clouds_second_layer.tsx
View File

@@ -3,12 +3,11 @@ import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
import { RepeatBackground } from "../shared/repeat-background"; import { RepeatBackground } from "../shared/repeat-background";
export const CloudsSecondLayer = () => { export const CloudsSecondLayer = () => {
const cloudSecondColor = useCSSPropertyValue('--inter-500', "#38154A3"); const cloudSecondColor = useCSSPropertyValue("--inter-500", "#38154A3");
const svg = useMemo(() => { const svg = useMemo(() => {
return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1631 1280'><path fill='${cloudSecondColor}' d='M1631 1280V679l-1 1c-6-4-14-6-22-6-28 0-50 23-50 50-12 0-24 5-32 12a101 101 0 0 0-174 6 100 100 0 0 0-109-18 55 55 0 0 0-80-36 126 126 0 0 0-240 48 86 86 0 0 0-126 14 86 86 0 0 0-114 3 86 86 0 0 0-41-8 86 86 0 0 0-102-33c-5-8-12-15-19-21l1-11a86 86 0 0 0-172-5c-11 9-20 21-25 35a86 86 0 0 0-91 30c-12-7-26-11-41-12A121 121 0 0 0 0 679v601h1631Z'/></svg>` return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1631 1280'><path fill='${cloudSecondColor}' d='M1631 1280V679l-1 1c-6-4-14-6-22-6-28 0-50 23-50 50-12 0-24 5-32 12a101 101 0 0 0-174 6 100 100 0 0 0-109-18 55 55 0 0 0-80-36 126 126 0 0 0-240 48 86 86 0 0 0-126 14 86 86 0 0 0-114 3 86 86 0 0 0-41-8 86 86 0 0 0-102-33c-5-8-12-15-19-21l1-11a86 86 0 0 0-172-5c-11 9-20 21-25 35a86 86 0 0 0-91 30c-12-7-26-11-41-12A121 121 0 0 0 0 679v601h1631Z'/></svg>`;
}, [cloudSecondColor]); }, [cloudSecondColor]);
return <RepeatBackground aspectRatio={"1631/1280"} svg={svg} />; return <RepeatBackground aspectRatio={"1631/1280"} svg={svg} />;
}; };

4
src/views/collections/framework-field-guide/cover-layers/internals/clouds_third_layer.tsx
View File

@@ -3,10 +3,10 @@ import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
import { RepeatBackground } from "../shared/repeat-background"; import { RepeatBackground } from "../shared/repeat-background";
export const CloudsThirdLayer = () => { export const CloudsThirdLayer = () => {
const cloudThirdColor = useCSSPropertyValue('--inter-700', "#422474"); const cloudThirdColor = useCSSPropertyValue("--inter-700", "#422474");
const svg = useMemo(() => { const svg = useMemo(() => {
return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1432 1280'><path fill='${cloudThirdColor}' d='M0 512v768h1432V512a82 82 0 0 0-114 1 65 65 0 0 0-51 7 103 103 0 0 0-196 43 95 95 0 0 0-114 50 60 60 0 0 0-46-6 75 75 0 0 0-96-8 82 82 0 0 0-132-20 59 59 0 0 0-109 12 75 75 0 0 0-18 2 76 76 0 0 0-132-34 89 89 0 0 0-97-7 127 127 0 0 0-251-16 50 50 0 0 0-76-24Z'/></svg>` return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1432 1280'><path fill='${cloudThirdColor}' d='M0 512v768h1432V512a82 82 0 0 0-114 1 65 65 0 0 0-51 7 103 103 0 0 0-196 43 95 95 0 0 0-114 50 60 60 0 0 0-46-6 75 75 0 0 0-96-8 82 82 0 0 0-132-20 59 59 0 0 0-109 12 75 75 0 0 0-18 2 76 76 0 0 0-132-34 89 89 0 0 0-97-7 127 127 0 0 0-251-16 50 50 0 0 0-76-24Z'/></svg>`;
}, [cloudThirdColor]); }, [cloudThirdColor]);
return <RepeatBackground aspectRatio={"1432/1280"} svg={svg} />; return <RepeatBackground aspectRatio={"1432/1280"} svg={svg} />;

7
src/views/collections/framework-field-guide/cover-layers/shared/repeat-background.tsx
View File

@@ -10,7 +10,10 @@ import {
interface RepeatBackgroundProps { interface RepeatBackgroundProps {
svg: string; svg: string;
fallbackStyle?: Omit<JSX.HTMLAttributes<HTMLElement>["style"], string>; fallbackStyle?: Omit<JSX.HTMLAttributes<HTMLElement>["style"], string>;
javascriptEnabledStyle?: Omit<JSX.HTMLAttributes<HTMLElement>["style"], string>; javascriptEnabledStyle?: Omit<
JSX.HTMLAttributes<HTMLElement>["style"],
string
>;
aspectRatio: string; aspectRatio: string;
} }
@@ -29,7 +32,7 @@ export const RepeatBackground = ({
if (hasSet || !el) return; if (hasSet || !el) return;
setHasSet(true); setHasSet(true);
const repeatLocal = Math.ceil( const repeatLocal = Math.ceil(
window.innerWidth / el.getBoundingClientRect().width window.innerWidth / el.getBoundingClientRect().width,
); );
setRepeat(repeatLocal); setRepeat(repeatLocal);
}, []); }, []);

3
src/views/collections/framework-field-guide/fonts/changa-one.css
View File

@@ -3,7 +3,8 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url("/fonts/Changa_One/ChangaOne-Regular.woff2") format("woff2"), src:
url("/fonts/Changa_One/ChangaOne-Regular.woff2") format("woff2"),
url("/fonts/Changa_One/ChangaOne-Regular.ttf") format("truetype"); url("/fonts/Changa_One/ChangaOne-Regular.ttf") format("truetype");
} }

3
src/views/collections/framework-field-guide/fonts/fira-code.css
View File

@@ -3,6 +3,7 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url("/fonts/Fira_Code/FiraCode-Regular.woff2") format("woff2"), src:
url("/fonts/Fira_Code/FiraCode-Regular.woff2") format("woff2"),
url("/fonts/Fira_Code/FiraCode-Regular.ttf") format("truetype"); url("/fonts/Fira_Code/FiraCode-Regular.ttf") format("truetype");
} }

29
src/views/collections/framework-field-guide/fonts/plus-jakarta-sans.css
View File

@@ -3,9 +3,11 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.woff2") src:
url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.woff2")
format("woff2"), format("woff2"),
url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.ttf") format("truetype"); url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.ttf")
format("truetype");
} }
@font-face { @font-face {
@@ -13,9 +15,10 @@
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
src: url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.woff2") src:
format("woff2"), url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.woff2") format("woff2"),
url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.ttf") format("truetype"); url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.ttf")
format("truetype");
} }
@font-face { @font-face {
@@ -23,9 +26,11 @@
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
src: url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-SemiBold.woff2") src:
url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-SemiBold.woff2")
format("woff2"), format("woff2"),
url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-SemiBold.ttf") format("truetype"); url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-SemiBold.ttf")
format("truetype");
} }
@font-face { @font-face {
@@ -33,8 +38,8 @@
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
src: url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Bold.woff2") src:
format("woff2"), url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Bold.woff2") format("woff2"),
url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Bold.ttf") format("truetype"); url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Bold.ttf") format("truetype");
} }
@@ -43,9 +48,11 @@
font-style: normal; font-style: normal;
font-weight: 800; font-weight: 800;
font-display: swap; font-display: swap;
src: url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-ExtraBold.woff2") src:
url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-ExtraBold.woff2")
format("woff2"), format("woff2"),
url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-ExtraBold.ttf") format("truetype"); url("/fonts/Plus_Jakarta_Sans/PlusJakartaSans-ExtraBold.ttf")
format("truetype");
} }
@font-face { @font-face {

48
src/views/collections/framework-field-guide/scripts/color-change-listener.ts
View File

@@ -13,7 +13,7 @@ function throttle(callback, limit) {
export const enableColorChangeListeners = () => { export const enableColorChangeListeners = () => {
const colorContainers: HTMLElement[] = Array.from( const colorContainers: HTMLElement[] = Array.from(
document.querySelectorAll("[data-change-color-to]") document.querySelectorAll("[data-change-color-to]"),
); );
const containerPairs = colorContainers; const containerPairs = colorContainers;
@@ -62,16 +62,16 @@ export const enableColorChangeListeners = () => {
const computedStyle = window.getComputedStyle(document.documentElement); const computedStyle = window.getComputedStyle(document.documentElement);
const initialInterTokenValues = interTokens.map((token) => const initialInterTokenValues = interTokens.map((token) =>
computedStyle.getPropertyValue(token) computedStyle.getPropertyValue(token),
); );
const initialEcosTokenValues = ecosTokens.map((token) => const initialEcosTokenValues = ecosTokens.map((token) =>
computedStyle.getPropertyValue(token) computedStyle.getPropertyValue(token),
); );
const initialFundTokenValues = fundTokens.map((token) => const initialFundTokenValues = fundTokens.map((token) =>
computedStyle.getPropertyValue(token) computedStyle.getPropertyValue(token),
); );
const initialSlateTokenValues = slateTokens.map((token) => const initialSlateTokenValues = slateTokens.map((token) =>
computedStyle.getPropertyValue(token) computedStyle.getPropertyValue(token),
); );
let windowsInnerHeight = window.innerHeight; let windowsInnerHeight = window.innerHeight;
@@ -81,32 +81,32 @@ export const enableColorChangeListeners = () => {
}); });
function changeColorSetTo( function changeColorSetTo(
colorSetToChangeTo: "fund" | "ecos" | "slate" | "inter" colorSetToChangeTo: "fund" | "ecos" | "slate" | "inter",
) { ) {
switch (colorSetToChangeTo) { switch (colorSetToChangeTo) {
case "fund": { case "fund": {
fundTokens.forEach((tokenName, index) => { fundTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialFundTokenValues[index] initialFundTokenValues[index],
); );
}); });
interTokens.forEach((tokenName, index) => { interTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialFundTokenValues[index] initialFundTokenValues[index],
); );
}); });
ecosTokens.forEach((tokenName, index) => { ecosTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialFundTokenValues[index] initialFundTokenValues[index],
); );
}); });
slateTokens.forEach((tokenName, index) => { slateTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialFundTokenValues[index] initialFundTokenValues[index],
); );
}); });
break; break;
@@ -115,25 +115,25 @@ export const enableColorChangeListeners = () => {
ecosTokens.forEach((tokenName, index) => { ecosTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialEcosTokenValues[index] initialEcosTokenValues[index],
); );
}); });
interTokens.forEach((tokenName, index) => { interTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialEcosTokenValues[index] initialEcosTokenValues[index],
); );
}); });
fundTokens.forEach((tokenName, index) => { fundTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialEcosTokenValues[index] initialEcosTokenValues[index],
); );
}); });
slateTokens.forEach((tokenName, index) => { slateTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialEcosTokenValues[index] initialEcosTokenValues[index],
); );
}); });
break; break;
@@ -142,25 +142,25 @@ export const enableColorChangeListeners = () => {
interTokens.forEach((tokenName, index) => { interTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialInterTokenValues[index] initialInterTokenValues[index],
); );
}); });
ecosTokens.forEach((tokenName, index) => { ecosTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialInterTokenValues[index] initialInterTokenValues[index],
); );
}); });
fundTokens.forEach((tokenName, index) => { fundTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialInterTokenValues[index] initialInterTokenValues[index],
); );
}); });
slateTokens.forEach((tokenName, index) => { slateTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialInterTokenValues[index] initialInterTokenValues[index],
); );
}); });
break; break;
@@ -170,25 +170,25 @@ export const enableColorChangeListeners = () => {
slateTokens.forEach((tokenName, index) => { slateTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialSlateTokenValues[index] initialSlateTokenValues[index],
); );
}); });
ecosTokens.forEach((tokenName, index) => { ecosTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialSlateTokenValues[index] initialSlateTokenValues[index],
); );
}); });
fundTokens.forEach((tokenName, index) => { fundTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialSlateTokenValues[index] initialSlateTokenValues[index],
); );
}); });
interTokens.forEach((tokenName, index) => { interTokens.forEach((tokenName, index) => {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
tokenName, tokenName,
initialSlateTokenValues[index] initialSlateTokenValues[index],
); );
}); });
break; break;
@@ -221,7 +221,7 @@ export const enableColorChangeListeners = () => {
const throttledPassiveScrollColorChange = throttle( const throttledPassiveScrollColorChange = throttle(
checkPassiveScrollPositionAndColor, checkPassiveScrollPositionAndColor,
20 20,
); );
function onResize() { function onResize() {
@@ -243,7 +243,7 @@ export const enableColorChangeListeners = () => {
window.removeEventListener("scroll", throttledPassiveScrollColorChange); window.removeEventListener("scroll", throttledPassiveScrollColorChange);
window.removeEventListener( window.removeEventListener(
"touchmove", "touchmove",
throttledPassiveScrollColorChange throttledPassiveScrollColorChange,
); );
window.removeEventListener("resize", onResize); window.removeEventListener("resize", onResize);
} else { } else {

2
src/views/collections/framework-field-guide/scripts/parallax-scrolling.ts
View File

@@ -26,7 +26,7 @@ function easeOutExpo(x: number): number {
export const enableParallaxScrolling = () => { export const enableParallaxScrolling = () => {
const els = Array.from( const els = Array.from(
document.querySelectorAll("[data-move-on-scroll-by]") document.querySelectorAll("[data-move-on-scroll-by]"),
) as HTMLElement[]; ) as HTMLElement[];
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

8
src/views/collections/framework-field-guide/segments/adventure-continues.module.scss
View File

@@ -26,7 +26,7 @@
gap: var(--grid-gap); gap: var(--grid-gap);
.gridItem:last-child { .gridItem:last-child {
grid-column: span 2 grid-column: span 2;
} }
@include from($desktop) { @include from($desktop) {
@@ -47,14 +47,16 @@
border-color: var(--outline); border-color: var(--outline);
border-width: var(--grid-item-border-width); border-width: var(--grid-item-border-width);
border-radius: var(--grid-item-corner-radius); border-radius: var(--grid-item-corner-radius);
padding: var(--grid-item-padding_top) var(--grid-item-padding_horizontal) var(--grid-item-padding_bottom); padding: var(--grid-item-padding_top) var(--grid-item-padding_horizontal)
var(--grid-item-padding_bottom);
} }
.gridItem svg { .gridItem svg {
position: absolute; position: absolute;
left: 50%; left: 50%;
background: var(--section-background); background: var(--section-background);
transition: background var(--color-transition-time) var(--color-transition-ease); transition: background var(--color-transition-time)
var(--color-transition-ease);
padding-left: var(--grid-icon-padding); padding-left: var(--grid-icon-padding);
padding-right: var(--grid-icon-padding); padding-right: var(--grid-icon-padding);
height: var(--grid-icon-size) !important; height: var(--grid-icon-size) !important;

3
src/views/collections/framework-field-guide/segments/code-block.scss
View File

@@ -68,7 +68,8 @@ ul.tabs__tab-list:has(> .tabs__tab:first-child[aria-selected="true"])
border-radius: var(--code-block-corner-radius_inner) border-radius: var(--code-block-corner-radius_inner)
var(--code-block-corner-radius_inner) 0 0; var(--code-block-corner-radius_inner) 0 0;
background: var(--code-block-container_outer); background: var(--code-block-container_outer);
transition: background var(--btn-state-transition-duration) transition:
background var(--btn-state-transition-duration)
var(--btn-state-transition-easing), var(--btn-state-transition-easing),
color var(--btn-state-transition-duration) color var(--btn-state-transition-duration)
var(--btn-state-transition-easing); var(--btn-state-transition-easing);

2
src/views/collections/framework-field-guide/segments/pricing.module.scss
View File

@@ -51,7 +51,7 @@
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
margin-top: var(--spc-6x) margin-top: var(--spc-6x);
} }
.fundamentalsPricingCard { .fundamentalsPricingCard {

4
src/views/collections/framework-field-guide/segments/the-rest-container.module.scss
View File

@@ -2,7 +2,9 @@
padding: var(--spc-6x) 0; padding: var(--spc-6x) 0;
background: var(--section-background); background: var(--section-background);
color: var(--on-dark-emphasis-high); color: var(--on-dark-emphasis-high);
transition: background var(--color-transition-time) var(--color-transition-ease), color var(--color-transition-time) var(--color-transition-ease); transition:
background var(--color-transition-time) var(--color-transition-ease),
color var(--color-transition-time) var(--color-transition-ease);
will-change: transition; will-change: transition;
margin-top: -4px; margin-top: -4px;
} }

3
src/views/collections/framework-field-guide/styles/buttons.css
View File

@@ -5,7 +5,8 @@
-webkit-user-select: none; -webkit-user-select: none;
display: inline-block; display: inline-block;
border-style: solid; border-style: solid;
transition: color var(--btn-state-transition-duration) transition:
color var(--btn-state-transition-duration)
var(--btn-state-transition-easing), var(--btn-state-transition-easing),
background var(--btn-state-transition-duration) background var(--btn-state-transition-duration)
var(--btn-state-transition-easing); var(--btn-state-transition-easing);

3
src/views/collections/framework-field-guide/styles/global-ffg.css
View File

@@ -26,7 +26,8 @@ body {
text-decoration: none; text-decoration: none;
background: none; background: none;
border: none; border: none;
transition: background var(--animSpeed) var(--animStyle), transition:
background var(--animSpeed) var(--animStyle),
box-shadow var(--animSpeed) var(--animStyle), box-shadow var(--animSpeed) var(--animStyle),
border-color var(--animSpeed) var(--animStyle), border-color var(--animSpeed) var(--animStyle),
color var(--animStyle) var(--animSpeed); color var(--animStyle) var(--animSpeed);

3
src/views/collections/framework-field-guide/tokens/adventure.scss
View File

@@ -2,7 +2,6 @@
@import "./utils"; @import "./utils";
:root { :root {
--grid-item-border-width: var(--border-1x); --grid-item-border-width: var(--border-1x);
--grid-item-corner-radius: var(--corner-radius-2x); --grid-item-corner-radius: var(--corner-radius-2x);
--grid-item-padding_top: var(--spc-3x); --grid-item-padding_top: var(--spc-3x);
@@ -12,11 +11,9 @@
--grid-icon-size: 24px; --grid-icon-size: 24px;
--grid-icon-padding: var(--spc-1x); --grid-icon-padding: var(--spc-1x);
--grid-gap: var(--spc-3x); --grid-gap: var(--spc-3x);
} }
@include from($desktop) { @include from($desktop) {
:root { :root {
--grid-item-corner-radius: var(--corner-radius-3x); --grid-item-corner-radius: var(--corner-radius-3x);
--grid-item-padding_top: var(--spc-5x); --grid-item-padding_top: var(--spc-5x);

Some files were not shown because too many files have changed in this diff Show More