DAVE! DAVE! Do Not Let Us Die In The Dark Night Of This Cold Winter!
-Background / Image effects
-
-
-
-
-
-
- Overexposure Blast
-
- 
-
-
-
-
-
- Contrast Slam
-
- 
-
-
-
-
-
- Colorbleed
-
- 
-
-
-
-
-
- Film Burn
-
- 
-
-
-
-
-
- Photocopier Malfunction
-
- 
-
-
-
-
-
- Toner Starvation
-
- 
-
-
-
-
-
- Digital Corruption
-
- 
-
-
-
-
- Stark Flash
-
- 
-
-
-
-
- Instructions
-- Hover over each image to see the effect. These are designed to work - with your base filter: -
-filter: grayscale(1) contrast(150%) brightness(120%)
- - You can replace the demo images with your own by changing the src - attributes. All effects use stepped animations or sharp transitions to - maintain that industrial, non-digital feel. -
-- The effects range from subtle (Contrast Slam) to more dramatic - (Digital Corruption). Choose based on how aggressive you want the - interaction to feel. -
-Link Effects
-
- {/* Your Ideas */}
-
-
-
- Strikethrough Mark (Marker)
-- This is some text with a{' '} - - strikethrough link - {' '} - in the middle of it. -
-
-
- Strikethrough Mark (Industrial)
-- This is some text with a{' '} - - strikethrough link - {' '} - in the middle of it. -
-
-
-
- {/* Stamping/Punching Effects */}
- Marker Highlight [Industrial]
-- This is some text with a{' '} - - marker highlight link - {' '} - in the middle of it. -
-
-
-
- Label Maker
-- This is some text with a{' '} - - label maker link - {' '} - in the middle of it. -
-
-
-
- {/* Industrial/Mechanical */}
- Rubber Stamp
-- This is some text with a{' '} - - rubber stamp link - {' '} - in the middle of it. -
-
-
-
- Press/Stamp
-- This is some text with a{' '} - - pressed link - {' '} - in the middle of it. -
-
-
-
- Typewriter Underline
-- This is some text with a{' '} - - typewriter link - {' '} - in the middle of it. -
-
-
-
- {/* Marking/Annotation */}
- Hard Invert
-- This is some text with a{' '} - - hard invert link - {' '} - in the middle of it. -
-
-
-
- Bracket Annotation
-- This is some text with a{' '} - - bracket link - {' '} - in the middle of it. -
-
-
-
- {/* Glitch/Digital */}
- Corner Box
-- This is some text with a{' '} - - corner box link - {' '} - in the middle of it. -
-
-
-
- Character Glitch
-- This is some text with a{' '} - - glitch link - {' '} - in the middle of it. -
-
-
-
- {/* Extra Ideas */}
- Pixel Shift
-- This is some text with a{' '} - - shifting link - {' '} - in the middle of it. -
-
-
-
- Redacted/Censored
-- This is some text with a{' '} - - redacted link - {' '} - in the middle of it. -
-
-
- X-Ray/Negative
-- This is some text with an{' '} - - x-ray link - {' '} - in the middle of it. -
-
-
-
-
-
-
);
}
diff --git a/src/components/Article/Article.module.css b/src/components/Article/Article.module.css
new file mode 100644
index 0000000..b253f8f
--- /dev/null
+++ b/src/components/Article/Article.module.css
@@ -0,0 +1,3 @@
+.article {
+ @mixin layout-wrapper;
+}
\ No newline at end of file
diff --git a/src/components/Article/Content/MarkdocRenderer/MarkdocRenderer.module.css b/src/components/Article/Content/MarkdocRenderer/MarkdocRenderer.module.css
new file mode 100644
index 0000000..2ceff99
--- /dev/null
+++ b/src/components/Article/Content/MarkdocRenderer/MarkdocRenderer.module.css
@@ -0,0 +1,30 @@
+.wrapper {
+ @mixin mx auto;
+ @mixin px var(--spacing-comfortable);
+
+ max-width: 90ch;
+ font-size: clamp(1rem, 2.5vw, 1.5rem);
+}
+
+.hasMargin {
+ @supports (anchor-name: --test) {
+ @media screen and (--bp-margin) {
+ @mixin px 0;
+
+ position: relative;
+
+ display: flex;
+ gap: var(--spacing-generous);
+
+ max-width: none;
+
+ font-size: clamp(1rem, 2.5vw, 1.25rem);
+
+ & .content {
+ flex: 1 1 auto;
+ min-width: 40ch;
+ max-width: 75ch;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/Article/Content/MarkdocRenderer/index.tsx b/src/components/Article/Content/MarkdocRenderer/index.tsx
new file mode 100644
index 0000000..c83f5fa
--- /dev/null
+++ b/src/components/Article/Content/MarkdocRenderer/index.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Markdoc from '@markdoc/markdoc';
+import type { Node } from '@markdoc/markdoc';
+
+import ContentComponents from '@/components/Content';
+import SidenoteContainer from '@/components/Content/Sidenote/Container';
+
+import styles from './MarkdocRenderer.module.css';
+
+import { nodes } from '@/lib/markdoc/nodes';
+import { tags } from '@/lib/markdoc/tags';
+
+import { collectSideNotes, hasComponents } from '@/lib/markdoc/utils';
+
+interface MarkdocRendererProps {
+ content: () => Promise<{ node: Node }>;
+ className?: string;
+}
+
+const MARGIN_COMPONENTS = ['Sidenote'];
+
+export default async function MarkdocRenderer({
+ content,
+ className,
+}: MarkdocRendererProps) {
+ const { node } = await content();
+ const errors = Markdoc.validate(node, { tags, nodes });
+
+ if (errors.length) {
+ console.error('Markdoc validation errors:', errors);
+ throw new Error('Invalid Content');
+ }
+
+ const renderable = Markdoc.transform(node, { tags, nodes });
+ const sidenotes = collectSideNotes(renderable);
+ const showMargin = hasComponents(renderable, MARGIN_COMPONENTS);
+
+ return (
+ - Successful Isildur's brink again throttle flank tightening splash. -
-- Help illusion embrace liquor tightening intelligence Maggot's whips - bit forests. 17 sing impassable helps Southrons beheading. What's the - Elvish word for 'friend'? -
-Give Hobbitses lend yours lads picking uniting sometime.
-- Inferno shaken skin undo wars close circles verse suck Dwarves. I gave - you the chance of aiding me willingly, but you have elected the way of - pain! Precautions tower tied Rivendell everyone agents wouldn't? -
-Doorway Mithrandir clearing wielder strengths floor?
-- Pillaged pointy-eared mix charm Grond confounded able-bodied tact - glimpse instruction open dear. Suffering powerful capable gulls - famousest stroke breathes Bilbo squeaked pace chances. Let the - Ring-bearer decide. -
--
-
- Mirkwood. -
- Tom. -
- Bilbo's. -
- Gandalf's. -
- Dwarvish. -
-
-
- Queen wants Oin loose heads decay piety! -
- Large happening arrived owes legends wit war bled Durin's. -
- - Pursuit exactly during relief mission meats cause Noldorin ablaze - tracked. - -
- Darken knife midday meat Goblinses. -
- - Your Rabble-rousers greatest could beast thirty-four t wizards - slumbers reforge. - -
Late vagabond knowing Ent legends there flattened cultured?
-- Swords are no more use here. Deny Chubbs restored. Scare rebuild - Argonath tracked day's large. -
--
-
- Easterlings! -
- Bill. -
- Dúnedain! -
- Gandalf. -
- Orcrist. -
-
-
- Answers feelings Elrond conjurer runs. -
- Sul nudge powerless jelly dumping hair grows log forgave? -
- - Retaken succumbed funeral courtyard Glóin incident mere somewhere - commander assistance? - -
- Bore outrun stead fight Athelas guardroom willing contains. -
- Hunted Angmar wager noose arguing? -
Elros next own wisp whence cakehole right!
-- Thank hid its lessened lined tells prefers were Stone-Giants thousand - troubles. Earendil staff pines bog finest mushroom consumption. - Mistaken streaming fates paths arts puppet Barad-dûr uniting? You - shall not pass! -
-| - | Ales | -Deeply | -Mortality | -Open | -Single-handedly | -
|---|---|---|---|---|---|
| Band | -appeared | -waited | -whose | -plate | -marshaling | -
| Meat | -nest | -thatched | -rallying | -claimed | -hungers | -
| Mouse | -also | -birdses | -moons | -strain | -brightest | -
| Hate | -different | -arrangements | -chiefest | -think | -try | -
| Something's | -task | -here's | -decent | -someone | -uses | -
| Shirt | -tonight | -bay | -beautifully | -tad | -cloaks | -
| revenge | -teaching | -mischief | -shores | -dreams | -tested | -
Stage dishcloth 20 horses Tooks souls crawl crime.
-- Approve Sul wilderness grave embellishment greatly over these rack - struggle. End ringing bell Anor halls pairs thirst fortress curtain - cleared? Dwelt language 1296 Underhill nasty. I gave you the chance of - aiding me willingly, but you have elected the way of pain! -
---You are full of surprises, Master Baggins.
- -
- Sung outscoring fingers Fundin reaction inquiries buggers deadliest. -
-- Mustn't powerless pierces Muil sorry crossing diamond brandy. Rip - rockets hinder Braga go had web ought sakes hail. A wizard is never - late, Frodo Baggins. Nor is he early. He arrives precisely when he - means to. Ashes tie Gamgee dicky! -
-- Rhudaur fancy tilled heart beggars. Dwarf nothing talked foot club. - Slaughtered flatten Hobbit journey's four-day? --
Pearl tact tomb bits Arwen Evenstar worry?
-
- Times unspoiled Silvan.{' '}
- Sigrid Pippin Gandalf thin stubbornness noises easily
- spread. Eldar warriors won answered filth yourself
- pocket. Showing store consistency M crevice. Decision
- feverfew giving Misty Mountain lord supplant. Gorgoroth{' '}
- load born fulfilled plenty fates serpent. Doorstep Pippin's{' '}
- pity bridge long weak weep? Brightest Chubbs{' '}
- jewels understand. Somewhat Erebor noise squealing moved?
- Pippin's feels overrun hours brown burns. Anor{' '}
- turning pick prophecy. Surrounded entered needlessly weary
vile
- hmm Bagshot Row. Consent outwitted dotage slug Homely hear.
- Parapet protected favored defied roam quiet Dori sick
- bent. Homage store hurricane prove ferret Helm's Deep
- lately? Excellent regret fun often returned Wood-elves
- apocalypse. Théodred's rights rat drawing{' '}
- examine dared bygone residence deeply.{' '}
- Greenway Girion Rohirrim trammel waiting edge.
-
-
-
-
- Turn -
- - Bare protuberance arrived forging funny salvage Cair except first - banners. - -
- Foes -
- Bore river large house shadows it's Tuckborough warn. -
- - Stirring Greenwood nest sapphire grant gob flagon famous mean! - -
- Unprepared -
- - Single-handed wriggling creatures lock canopy anytime horses defense - Hobbit's? - -
- - Nûmenor dungeons achieving encourage fretting dines believes - understand. - -
- Ease love shine legs wee harbor Udùn adventure tumble stays. -
+
+ );
+}
diff --git a/src/components/Article/Content/index.tsx b/src/components/Article/Content/index.tsx
new file mode 100644
index 0000000..8338705
--- /dev/null
+++ b/src/components/Article/Content/index.tsx
@@ -0,0 +1,10 @@
+import MarkdocRenderer from '@/components/Article/Content/MarkdocRenderer';
+import { ArticleContent } from '@/lib/types/content';
+
+interface ContentProps {
+ article: ArticleContent;
+}
+
+export default function Content({ article }: ContentProps) {
+ return
+ {Markdoc.renderers.react(renderable, React, {
+ components: ContentComponents,
+ })}
+
+
+ {cover.caption ? (
+ {cover.caption}
+ ) : (
+ {cover.src}
+ )}
+
+
+ {author && (
+
+ );
+}
diff --git a/src/components/Article/Header/Overline/Overline.module.css b/src/components/Article/Header/Overline/Overline.module.css
new file mode 100644
index 0000000..c470030
--- /dev/null
+++ b/src/components/Article/Header/Overline/Overline.module.css
@@ -0,0 +1,42 @@
+.overline {
+ @mixin px var(--spacing-comfortable);
+
+ background-color: var(--color-surface-inverse);
+}
+
+.wrapper {
+ @mixin py var(--spacing-snug);
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: var(--typo-size-responsive);
+}
+
+.breadcrumbs {
+ display: flex;
+ font-family: var(--font-mono);
+ font-size: var(--typo-size-sm);
+ color: var(--color-text-inverse);
+}
+
+.current {
+ font-weight: var(--typo-weight-bold);
+ color: var(--color-primary);
+}
+
+.link {
+ color: var(--color-text-inverse);
+ transition: color 0.5s ease-in-out;
+
+ &:hover {
+ color: var(--color-tertiary);
+ }
+}
+
+.publicationDate {
+ font-family: var(--font-mono), monospace;
+ font-size: var(--typo-size-xs);
+ font-weight: var(--typo-weight-bold);
+ color: var(--color-text-inverse);
+}
diff --git a/src/components/Article/Header/Overline/index.tsx b/src/components/Article/Header/Overline/index.tsx
new file mode 100644
index 0000000..6c6cbeb
--- /dev/null
+++ b/src/components/Article/Header/Overline/index.tsx
@@ -0,0 +1,48 @@
+import Link from 'next/link';
+
+import styles from './Overline.module.css';
+import { toMilitaryDTG } from '@/lib/utils/date';
+
+interface OverlineProps {
+ breadcrumbs?: string[];
+ publicationDate: string;
+}
+
+export default function Overline({
+ breadcrumbs = [],
+ publicationDate,
+}: OverlineProps) {
+ const breadcrumber = breadcrumbs.map((crumb, index) => {
+ const isLast = index === breadcrumbs.length - 1;
+ const href = `/${breadcrumbs.slice(0, index + 1).join('/')}`;
+ return (
+
+ Author
+
+ {author.name}
+
+
+ )}
+ {tags && tags.length > 0 && (
+
+ Tags
+
+ )}
+ {publicationDate && (
+ -
+ {tags.map((tag) => (
+
- + + {tag.name} + + + ))} +
+ Last Update
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/Article/Header/Title/Title.module.css b/src/components/Article/Header/Title/Title.module.css
new file mode 100644
index 0000000..462c7aa
--- /dev/null
+++ b/src/components/Article/Header/Title/Title.module.css
@@ -0,0 +1,13 @@
+.wrapper {
+ @mixin py var(--spacing-cozy);
+}
+
+.title {
+ font-family: var(--el-h1-font-family), serif;
+ font-size: var(--el-h1-font-size);
+ font-weight: var(--el-h1-font-weight);
+ line-height: var(--el-h1-line-height);
+ color: var(--el-h1-color);
+ text-transform: var(--el-h1-text-transform);
+ letter-spacing: var(--el-h1-letter-spacing);
+}
\ No newline at end of file
diff --git a/src/components/Article/Header/Title/index.tsx b/src/components/Article/Header/Title/index.tsx
new file mode 100644
index 0000000..74754fb
--- /dev/null
+++ b/src/components/Article/Header/Title/index.tsx
@@ -0,0 +1,13 @@
+import styles from './Title.module.css';
+
+interface TitleProps {
+ title: string;
+}
+
+export default function Title({ title }: TitleProps) {
+ return (
+
+
+ -
+
- + + dave-dmg.de + + + {breadcrumber} +
+
+ );
+}
diff --git a/src/components/Article/Header/index.tsx b/src/components/Article/Header/index.tsx
new file mode 100644
index 0000000..bda65cb
--- /dev/null
+++ b/src/components/Article/Header/index.tsx
@@ -0,0 +1,41 @@
+import { ArticleContent } from '@/lib/types/content';
+import { Author, Tag } from '@/lib/types/taxonomy';
+import { isValidCover } from '@/lib/utils/guards';
+
+import styles from './Header.module.css';
+import Overline from '@/components/Article/Header/Overline';
+import Title from '@/components/Article/Header/Title';
+import Meta from '@/components/Article/Header/Meta';
+import Cover from '@/components/Article/Header/Cover';
+
+interface HeaderProps {
+ article: ArticleContent;
+ breadcrumbs?: string[];
+ author: Author | null;
+ tags: Tag[];
+}
+
+export default function Header({
+ article,
+ breadcrumbs,
+ author,
+ tags,
+}: HeaderProps) {
+ const { title, meta, cover } = article;
+ return (
+ {title}
+ setIsOpen(e.currentTarget.open)}
+ >
+
+ );
+}
diff --git a/src/components/Content/Accordion/index.tsx b/src/components/Content/Accordion/index.tsx
new file mode 100644
index 0000000..628a175
--- /dev/null
+++ b/src/components/Content/Accordion/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import styles from './Accordion.module.css';
+
+interface AccordionProps {
+ children: React.ReactNode;
+}
+
+export default function Accordion({ children }: AccordionProps) {
+ return { + e.preventDefault(); + setIsOpen(!isOpen); + }} + > + {title} +
+
+
+ {children}
+ {children}
;
+}
diff --git a/src/components/Content/Blockquote/Blockquote.module.css b/src/components/Content/Blockquote/Blockquote.module.css
new file mode 100644
index 0000000..951a0ae
--- /dev/null
+++ b/src/components/Content/Blockquote/Blockquote.module.css
@@ -0,0 +1,27 @@
+.container {
+ margin-block: var(--el-p-vspace-top) var(--el-p-vspace-bottom);
+ padding: var(--spacing-snug) 0 var(--spacing-snug) var(--spacing-comfortable);
+ border-left: var(--size-4) solid var(--color-text-tertiary);
+}
+
+.quote {
+ font-family: var(--el-blockquote-font-family), serif;
+ font-size: var(--el-blockquote-font-size);
+ font-weight: var(--el-blockquote-font-weight);
+ font-style: var(--el-blockquote-font-style);
+ line-height: var(--el-blockquote-line-height);
+ color: var(--el-blockquote-color);
+}
+
+.attribution,
+.source {
+ font-family: var(--font-mono);
+}
+
+.link {
+ @mixin anim-txt-typewriter;
+
+ &:hover {
+ color: var(--color-primary);
+ }
+}
\ No newline at end of file
diff --git a/src/components/Content/Blockquote/index.tsx b/src/components/Content/Blockquote/index.tsx
new file mode 100644
index 0000000..f781f89
--- /dev/null
+++ b/src/components/Content/Blockquote/index.tsx
@@ -0,0 +1,70 @@
+import { marked } from 'marked';
+
+import styles from './Blockquote.module.css';
+
+interface BlockquoteProps {
+ quote: string;
+ attribution?: string;
+ source?: string;
+ url?: string;
+}
+
+export default function Blockquote({
+ quote,
+ attribution,
+ source,
+ url,
+}: BlockquoteProps) {
+ const hasAttribution = !!attribution;
+ const hasSource = !!source;
+ const hasUrl = !!url;
+ const showFooter = hasSource || hasAttribution;
+ const attributionLinked = hasAttribution && hasUrl && !hasSource;
+ const sourceLinked = hasSource && hasUrl;
+ return (
+ + + {showFooter && ( + + )} ++ ); +} diff --git a/src/components/Content/Callout/Callout.module.css b/src/components/Content/Callout/Callout.module.css new file mode 100644 index 0000000..a1be2a6 --- /dev/null +++ b/src/components/Content/Callout/Callout.module.css @@ -0,0 +1,144 @@ +@layer component { + .container { + --callout-bg: var(--color-surface-inverse); + --callout-fg: var(--color-text-inverse); + --callout-symbol: ""; + --callout-symbol-color: var(--color-text-inverse); + + @mixin my var(--spacing-cozy); + + position: relative; + padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ; + border: var(--size-1) solid var(--color-surface-inverse); + box-shadow: 2px 2px 0 oklch(from var(--color-surface-inverse) calc(l - 0.075) c h), 4px 4px 0 oklch(from var(--color-surface-inverse) calc(l - 0.2) c h); + + &::before { + @mixin pt 0.425em; + + content: var(--callout-symbol); + + position: absolute; + top: 0; + left: 0; + + display: flex; + align-items: flex-start; + justify-content: center; + + width: var(--size-8); + height: 100%; + + font-size: 1.5em; + color: var(--callout-symbol-color); + + background-color: var(--color-surface-inverse); + + } + } + + .title { + @mixin text-xl; + + font-family: var(--font-header); + font-weight: var(--typo-weight-black); + } + + .badge { + position: absolute; + top: 0; + right: 0; + + padding: 0.2em 0.5em; + + font-family: var(--font-mono); + font-size: var(--typo-size-xs); + font-weight: var(--typo-weight-black); + color: var(--callout-fg); + + background: var(--callout-bg); + } + + .example { + --callout-bg: var(--color-palette-fuchsia); + --callout-symbol: "◆"; + } + + .info { + --callout-bg: var(--color-state-info); + --callout-symbol: "‽"; + } + + .warning { + --callout-bg: var(--color-state-warning); + --callout-symbol: "‼"; + } + + .tip { + --callout-bg: var(--color-palette-lime-green); + --callout-symbol: "★"; + } + + .spoiler { + & .label { + @mixin text-xl; + + font-family: var(--font-header); + font-weight: var(--typo-weight-black); + + &::before { + content: "[REDACTED] "; + color: var(--color-state-error); + } + + &:hover { + cursor: pointer; + } + } + + & .content { + pointer-events: none; + position: relative; + min-height: 3em; + + &::after { + content: '████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████'; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + overflow: hidden; + + font-family: var(--font-mono); + line-height: inherit; + color: var(--color-text-primary); + letter-spacing: -0.15em; + word-break: break-all; + white-space: pre-wrap; + + background: var(--color-text-primary); + } + } + + & .toggle { + @util hide-visually; + + &:checked { + & ~ .label { + &::before { + content: '[REVEALED] '; + color: var(--color-state-success); + } + } + + & ~ .content { + &::after { + content: none; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/components/Content/Callout/index.tsx b/src/components/Content/Callout/index.tsx new file mode 100644 index 0000000..8196459 --- /dev/null +++ b/src/components/Content/Callout/index.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import styles from './Callout.module.css'; + +interface CalloutProps { + type: 'default' | 'example' | 'info' | 'warning' | 'tip' | 'spoiler'; + title?: string; + children: React.ReactNode; +} + +export default function Callout({ type, title, children }: CalloutProps) { + const isSpoiler = type === 'spoiler'; + const spoilerID = isSpoiler + ? `spoiler-${Math.random().toString(36).substr(2, 9)}` + : undefined; + return ( +
+ {isSpoiler ? (
+ <>
+
+
+
+ ) : (
+
+ );
+}
diff --git a/src/components/Content/DefinitionList/DefinitionItem/DefinitionItem.module.css b/src/components/Content/DefinitionList/DefinitionItem/DefinitionItem.module.css
new file mode 100644
index 0000000..d66c7b8
--- /dev/null
+++ b/src/components/Content/DefinitionList/DefinitionItem/DefinitionItem.module.css
@@ -0,0 +1,24 @@
+.term {
+ margin-block: var(--el-dt-vspace-top) var(--el-dt-vspace-bottom);
+ padding: var(--el-dt-padding);
+
+ font-family: var(--el-dt-font-family), serif;
+ font-size: var(--el-dt-font-size);
+ font-weight: var(--el-dt-font-weight);
+ line-height: var(--el-dt-line-height);
+ color: var(--el-dt-color);
+ text-transform: var(--el-dt-text-transform);
+ letter-spacing: var(--el-dt-letter-spacing);
+
+ background: var(--el-dt-background);
+}
+
+.def {
+ margin-block: var(--el-dd-vspace-top) var(--el-dd-vspace-bottom);
+ padding: var(--el-dd-indent);
+
+ font-family: var(--el-dd-font-family), sans-serif;
+ font-size: var(--el-dd-font-size);
+ line-height: var(--el-dd-line-height);
+ color: var(--el-dd-color);
+}
\ No newline at end of file
diff --git a/src/components/Content/DefinitionList/DefinitionItem/index.tsx b/src/components/Content/DefinitionList/DefinitionItem/index.tsx
new file mode 100644
index 0000000..fb47f9a
--- /dev/null
+++ b/src/components/Content/DefinitionList/DefinitionItem/index.tsx
@@ -0,0 +1,28 @@
+import { marked } from 'marked';
+
+import styles from './DefinitionItem.module.css';
+
+interface DefinitionItemProps {
+ term: string;
+ definitions: string[];
+}
+
+export default function DefinitionItem({
+ term,
+ definitions,
+}: DefinitionItemProps) {
+ return (
+ <>
+ {title}
+ )} + {type.toUpperCase()} +{children}
+ - {children}
+ {children}
+
+ );
+}
diff --git a/src/components/Content/Grid/Row/Row.module.css b/src/components/Content/Grid/Row/Row.module.css
new file mode 100644
index 0000000..48a2289
--- /dev/null
+++ b/src/components/Content/Grid/Row/Row.module.css
@@ -0,0 +1,3 @@
+.row {
+ display: grid;
+}
\ No newline at end of file
diff --git a/src/components/Content/Grid/Row/index.tsx b/src/components/Content/Grid/Row/index.tsx
new file mode 100644
index 0000000..4470354
--- /dev/null
+++ b/src/components/Content/Grid/Row/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import styles from './Row.module.css';
+
+interface RowProps {
+ style: {
+ cols: number;
+ gap: string;
+ align: string;
+ justify: string;
+ };
+ children: React.ReactNode;
+}
+
+export default function Row({ style, children }: RowProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/Content/Sidenote/Container/Container.module.css b/src/components/Content/Sidenote/Container/Container.module.css
new file mode 100644
index 0000000..652a213
--- /dev/null
+++ b/src/components/Content/Sidenote/Container/Container.module.css
@@ -0,0 +1,69 @@
+.container {
+ flex: 1 0 auto;
+ min-width: var(--size-96);
+}
+
+.wrapper {
+ @supports (anchor-name: --test) {
+ @media screen and (--bp-margin) {
+ position: absolute;
+ top: anchor(top);
+ }
+ }
+}
+
+.note {
+ @mixin text-xs;
+ @mixin my var(--spacing-cozy);
+
+ position: relative;
+ padding-left: var(--size-12);
+ font-family: var(--font-mono);
+
+ @supports (anchor-name: --test) {
+ @media screen and (--bp-margin) {
+ min-width: var(--size-64);
+ margin-top: 0;
+ padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ;
+ border: var(--size-1) solid var(--color-surface-inverse);
+
+ background: var(--color-surface-elevated-1);
+ box-shadow: 2px 2px 0 var(--color-palette-woodsmoke), 4px 4px 0 var(--color-palette-charcoal-gray);
+ }
+ }
+}
+
+.marker {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: var(--size-8);
+
+ font-size: var(--typo-size-3xl);
+ font-weight: var(--typo-weight-black);
+ color: var(--color-text-inverse);
+
+ background-color: var(--color-surface-inverse);
+}
+
+.content {
+ display: contents;
+}
+
+.ref {
+ @mixin ml var(--spacing-snug);
+ @mixin anim-txt-characterglitch;
+
+ font-weight: var(--typo-weight-black);
+ color: var(--color-text-quarternary);
+
+ &:hover {
+ color: var(--color-primary);
+ }
+}
\ No newline at end of file
diff --git a/src/components/Content/Sidenote/Container/index.tsx b/src/components/Content/Sidenote/Container/index.tsx
new file mode 100644
index 0000000..84def77
--- /dev/null
+++ b/src/components/Content/Sidenote/Container/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { marked } from 'marked';
+
+import type { Sidenote } from '@/lib/types/components';
+import styles from './Container.module.css';
+
+interface ContainerProps {
+ items: Sidenote[];
+}
+
+export default function Container({ items }: ContainerProps) {
+ return (
+
+ );
+}
diff --git a/src/components/Content/Sidenote/Item/Item.module.css b/src/components/Content/Sidenote/Item/Item.module.css
new file mode 100644
index 0000000..caa8c3b
--- /dev/null
+++ b/src/components/Content/Sidenote/Item/Item.module.css
@@ -0,0 +1,16 @@
+.ref {
+ @mixin px var(--spacing-tight);
+
+ scroll-margin-top: calc(var(--el-header-height) + var(--spacing-comfortable));
+
+ display: inline-block;
+
+ font-weight: var(--typo-weight-black);
+ color: var(--color-secondary);
+
+ transition: color 0.5s ease-in-out;
+
+ &:hover {
+ color: var(--color-primary);
+ }
+}
\ No newline at end of file
diff --git a/src/components/Content/Sidenote/Item/index.tsx b/src/components/Content/Sidenote/Item/index.tsx
new file mode 100644
index 0000000..6f6a952
--- /dev/null
+++ b/src/components/Content/Sidenote/Item/index.tsx
@@ -0,0 +1,17 @@
+import type { Sidenote } from '@/lib/types/components';
+import styles from './Item.module.css';
+
+export default function SidenoteItem({ id, marker, content, type }: Sidenote) {
+ return (
+
+
+ [{marker}]
+
+
+ );
+}
diff --git a/src/components/Content/index.ts b/src/components/Content/index.ts
new file mode 100644
index 0000000..4ecab74
--- /dev/null
+++ b/src/components/Content/index.ts
@@ -0,0 +1,25 @@
+import Row from '@/components/Content/Grid/Row';
+import Column from '@/components/Content/Grid/Column';
+import Sidenote from '@/components/Content/Sidenote/Item';
+import DefinitionList from '@/components/Content/DefinitionList';
+import DefinitionItem from '@/components/Content/DefinitionList/DefinitionItem';
+import Accordion from '@/components/Content/Accordion';
+import AccordionItem from '@/components/Content/Accordion/AccordionItem';
+import Blockquote from '@/components/Content/Blockquote';
+import Figure from '@/components/Content/Figure';
+import Callout from '@/components/Content/Callout';
+
+const ContentComponents = {
+ Column,
+ Row,
+ Sidenote,
+ DefinitionList,
+ DefinitionItem,
+ Accordion,
+ AccordionItem,
+ Blockquote,
+ Figure,
+ Callout,
+};
+
+export default ContentComponents;
diff --git a/src/components/Page/Header/Header.module.css b/src/components/Page/Header/Header.module.css
index b5f7ecd..6528a10 100644
--- a/src/components/Page/Header/Header.module.css
+++ b/src/components/Page/Header/Header.module.css
@@ -14,7 +14,7 @@
}
.inner {
- @mixin responsive-wrapper;
+ @mixin layout-wrapper;
display: flex;
flex-direction: row;
diff --git a/src/components/Page/Menu/MenuArea/MenuArea.module.css b/src/components/Page/Menu/MenuArea/MenuArea.module.css
index d43f901..3b02e29 100644
--- a/src/components/Page/Menu/MenuArea/MenuArea.module.css
+++ b/src/components/Page/Menu/MenuArea/MenuArea.module.css
@@ -60,7 +60,8 @@
--area-bg-animation-keyframe: none;
--area-bg--animation-duration: 0s;
--area-bg--animation-timing: linear;
- --area-bg-filter: grayscale(100%) contrast(150) brightness(150);
+ --area-bg-filter: grayscale(100%) contrast(10) brightness(250);
+ --area-bg-blendmode: color-dodge;
position: absolute;
z-index: -1;
@@ -70,6 +71,7 @@
object-fit: cover;
filter: var(--area-bg-filter);
+ mix-blend-mode: var(--area-bg-blendmode);
@media screen and (--bp-tablet-down) {
display: none;
@@ -93,27 +95,10 @@
--subtitle-transition: all 0.3s ease-in-out;
--title-transition: color 0.3s ease-in-out;
- &::before {
- content: "";
-
- position: absolute;
- z-index: -1;
-
- width: 100%;
- height: 100%;
-
- opacity: 0;
- background: alpharize(var(--grid-bg), 0.66);
- }
-
&:hover {
--divider-color: var(--color-tertiary);
--title-color: var(--color-tertiary);
--subtitle-color: var(--color-tertiary);
-
- &::before {
- opacity: 1;
- }
}
}
}
diff --git a/src/components/Page/Menu/MenuGrid/MenuGrid.module.css b/src/components/Page/Menu/MenuGrid/MenuGrid.module.css
index 6e22f62..a8eec5d 100644
--- a/src/components/Page/Menu/MenuGrid/MenuGrid.module.css
+++ b/src/components/Page/Menu/MenuGrid/MenuGrid.module.css
@@ -2,6 +2,7 @@
.menu {
--grid-bg: var(--color-palette-charcoal-gray);
--grid-fg: var(--color-palette-light-silver);
+ --area-blendmode: normal;
/* === MenuTitle Vars === */
--title-color: var(--grid-fg);
@@ -40,13 +41,14 @@
--divider-width: var(--size-12);
--divider-height: var(--size-2);
--divider-font: var(--font-mono);
- --divider-font-size: var(--typo-size-2xl);
+ --divider-line-height: 1;
+ --divider-font-size: var(--typo-size-3xl);
--divider-padding: 0 var(--typo-spacing-cozy);
--subtitle-font: var(--font-mono);
--subtitle-color: var(--grid-fg);
--subtitle-font-size: var(--typo-size-xl);
--subtitle-text-transform: uppercase;
- --subtitle-letter-spacing: var(--typo-spacing-cozy);
+ --subtitle-letter-spacing: var(--typo-spacing-snug);
--subtitle-transition: none;
pointer-events: none;
diff --git a/src/keystatic/collections/awq/article.ts b/src/keystatic/collections/awq/article.ts
new file mode 100644
index 0000000..ee45cf7
--- /dev/null
+++ b/src/keystatic/collections/awq/article.ts
@@ -0,0 +1,14 @@
+import { collection } from '@keystatic/core';
+
+import { createArticleField } from '@/keystatic/fields/article';
+
+export default collection({
+ label: 'AWQ - Posts',
+ slugField: 'title',
+ path: 'content/awq/articles/*',
+ format: { contentField: 'content' },
+ entryLayout: 'content',
+ schema: {
+ ...createArticleField('awq/articles', 'awq'),
+ },
+});
diff --git a/src/keystatic/collections/awq/index.ts b/src/keystatic/collections/awq/index.ts
new file mode 100644
index 0000000..2f972ea
--- /dev/null
+++ b/src/keystatic/collections/awq/index.ts
@@ -0,0 +1,7 @@
+import posts from '@/keystatic/collections/awq/article';
+
+const awqCollections = {
+ awq_posts: posts,
+};
+
+export default awqCollections;
diff --git a/src/keystatic/collections/meta/article.ts b/src/keystatic/collections/meta/article.ts
new file mode 100644
index 0000000..01ed778
--- /dev/null
+++ b/src/keystatic/collections/meta/article.ts
@@ -0,0 +1,14 @@
+import { collection } from '@keystatic/core';
+
+import { createArticleField } from '@/keystatic/fields/article';
+
+export default collection({
+ label: 'Meta - Posts',
+ slugField: 'title',
+ path: 'content/meta/*',
+ format: { contentField: 'content' },
+ entryLayout: 'content',
+ schema: {
+ ...createArticleField('meta'),
+ },
+});
diff --git a/src/keystatic/collections/taxonomy/authors.ts b/src/keystatic/collections/taxonomy/authors.ts
new file mode 100644
index 0000000..89098e8
--- /dev/null
+++ b/src/keystatic/collections/taxonomy/authors.ts
@@ -0,0 +1,46 @@
+import { collection, fields } from '@keystatic/core';
+
+export default collection({
+ label: 'Authors',
+ slugField: 'name',
+ path: 'content/taxonomy/authors/*',
+ format: { data: 'json' },
+ schema: {
+ name: fields.slug({ name: { label: 'Name' } }),
+ avatar: fields.image({
+ label: 'Avatar',
+ directory: 'public/images/authors',
+ publicPath: '/images/authors',
+ }),
+ description: fields.text({ label: 'Description', multiline: true }),
+ contacts: fields.array(
+ fields.object({
+ type: fields.select({
+ label: 'Contact Type',
+ defaultValue: 'email',
+ options: [
+ {
+ value: 'email',
+ label: 'E-Mail',
+ },
+ {
+ value: 'discord',
+ label: 'Discord',
+ },
+ {
+ value: 'other',
+ label: 'Other',
+ },
+ ],
+ }),
+ url: fields.text({
+ label: 'URL',
+ }),
+ }),
+ {
+ label: 'Contact Type',
+ itemLabel: (props) => `${props.fields.type.value}`,
+ }
+ ),
+ },
+});
diff --git a/src/keystatic/collections/taxonomy/tags.ts b/src/keystatic/collections/taxonomy/tags.ts
new file mode 100644
index 0000000..5ec4011
--- /dev/null
+++ b/src/keystatic/collections/taxonomy/tags.ts
@@ -0,0 +1,41 @@
+import { collection, fields } from '@keystatic/core';
+
+export default collection({
+ label: 'Tags',
+ slugField: 'name',
+ path: 'content/taxonomy/tags/*',
+ format: { data: 'json' },
+ schema: {
+ name: fields.slug({ name: { label: 'Name' } }),
+ icon: fields.conditional(
+ fields.select({
+ label: 'Icon Type',
+ defaultValue: 'none',
+ options: [
+ {
+ value: 'none',
+ label: 'None',
+ },
+ {
+ value: 'glyph',
+ label: 'Glyph',
+ },
+ {
+ value: 'img',
+ label: 'Image',
+ },
+ ],
+ }),
+ {
+ none: fields.empty(),
+ glyph: fields.text({ label: 'Glyph' }),
+ img: fields.image({
+ label: 'icon',
+ publicPath: '/images/icons',
+ directory: 'public/images/icons',
+ }),
+ }
+ ),
+ description: fields.text({ label: 'Description', multiline: true }),
+ },
+});
diff --git a/src/keystatic/components/general/accordion.ts b/src/keystatic/components/general/accordion.ts
new file mode 100644
index 0000000..53b17fd
--- /dev/null
+++ b/src/keystatic/components/general/accordion.ts
@@ -0,0 +1,32 @@
+import { listCollapseIcon } from '@keystar/ui/icon/icons/listCollapseIcon';
+import { repeating, wrapper } from '@keystatic/core/content-components';
+import { fields } from '@keystatic/core';
+
+const accordionComponents = {
+ Accordion: repeating({
+ label: 'Accordion',
+ icon: listCollapseIcon,
+ children: ['AccordionItem'],
+ schema: {},
+ }),
+ AccordionItem: wrapper({
+ label: 'Accordion Item',
+ forSpecificLocations: true,
+ schema: {
+ title: fields.text({
+ label: 'Title',
+ validation: {
+ length: {
+ min: 1,
+ },
+ },
+ }),
+ defaultOpen: fields.checkbox({
+ label: 'Open by default',
+ defaultValue: false,
+ }),
+ },
+ }),
+};
+
+export default accordionComponents;
diff --git a/src/keystatic/components/general/blockquote.ts b/src/keystatic/components/general/blockquote.ts
new file mode 100644
index 0000000..4fca6f2
--- /dev/null
+++ b/src/keystatic/components/general/blockquote.ts
@@ -0,0 +1,34 @@
+import { textQuoteIcon } from '@keystar/ui/icon/icons/textQuoteIcon';
+import { block } from '@keystatic/core/content-components';
+import { fields } from '@keystatic/core';
+
+const blockquoteComponent = {
+ Blockquote: block({
+ label: 'Blockquote',
+ icon: textQuoteIcon,
+ schema: {
+ quote: fields.text({
+ label: 'Quote',
+ multiline: true,
+ validation: {
+ length: {
+ min: 1,
+ },
+ },
+ }),
+ attribution: fields.text({
+ label: 'Attribution',
+ description: 'Author or Speaker',
+ }),
+ source: fields.text({
+ label: 'Source',
+ description: 'Book, article, or document [optional]',
+ }),
+ url: fields.url({
+ label: 'Source URL',
+ }),
+ },
+ }),
+};
+
+export default blockquoteComponent;
diff --git a/src/keystatic/components/general/callout.ts b/src/keystatic/components/general/callout.ts
new file mode 100644
index 0000000..01533cf
--- /dev/null
+++ b/src/keystatic/components/general/callout.ts
@@ -0,0 +1,47 @@
+import { wrapper } from '@keystatic/core/content-components';
+import { fields } from '@keystatic/core';
+import { megaphoneIcon } from '@keystar/ui/icon/icons/megaphoneIcon';
+
+const calloutComponent = {
+ Callout: wrapper({
+ label: 'Callout',
+ icon: megaphoneIcon,
+ schema: {
+ type: fields.select({
+ label: 'Type',
+ defaultValue: 'default',
+ options: [
+ {
+ label: 'Default',
+ value: 'default',
+ },
+ {
+ label: 'Example',
+ value: 'example',
+ },
+ {
+ label: 'Info',
+ value: 'info',
+ },
+ {
+ label: 'Warning',
+ value: 'warning',
+ },
+ {
+ label: 'Tip',
+ value: 'tip',
+ },
+ {
+ label: 'Spoiler',
+ value: 'spoiler',
+ },
+ ],
+ }),
+ title: fields.text({
+ label: 'Title',
+ }),
+ },
+ }),
+};
+
+export default calloutComponent;
diff --git a/src/keystatic/components/general/definitionlist.ts b/src/keystatic/components/general/definitionlist.ts
new file mode 100644
index 0000000..4ea95b5
--- /dev/null
+++ b/src/keystatic/components/general/definitionlist.ts
@@ -0,0 +1,28 @@
+import { listTreeIcon } from '@keystar/ui/icon/icons/listTreeIcon';
+import { fields } from '@keystatic/core';
+import { repeating, block } from '@keystatic/core/content-components';
+
+const definitionlistComponents = {
+ DefinitionList: repeating({
+ label: 'Definition List',
+ icon: listTreeIcon,
+ children: ['DefinitionItem'],
+ schema: {},
+ }),
+ DefinitionItem: block({
+ label: 'Definition Item',
+ forSpecificLocations: true,
+ schema: {
+ term: fields.text({ label: 'Term' }),
+ definitions: fields.array(
+ fields.text({ label: 'Definition', multiline: true }),
+ {
+ label: 'Definitions',
+ itemLabel: (props) => props.value || 'Definition',
+ }
+ ),
+ },
+ }),
+};
+
+export default definitionlistComponents;
diff --git a/src/keystatic/components/general/figure.ts b/src/keystatic/components/general/figure.ts
new file mode 100644
index 0000000..aba44b7
--- /dev/null
+++ b/src/keystatic/components/general/figure.ts
@@ -0,0 +1,35 @@
+import { imageIcon } from '@keystar/ui/icon/icons/imageIcon';
+import { block } from '@keystatic/core/content-components';
+import { fields } from '@keystatic/core';
+
+const figureComponent = {
+ Figure: block({
+ label: 'Figure',
+ icon: imageIcon,
+ schema: {
+ src: fields.image({
+ label: 'Image',
+ directory: 'public/images/figures',
+ publicPath: '/images/figures',
+ }),
+ alt: fields.text({
+ label: 'Alt Text',
+ validation: {
+ length: {
+ min: 1,
+ },
+ },
+ }),
+ caption: fields.text({
+ label: 'Caption',
+ multiline: true,
+ }),
+ credit: fields.text({
+ label: 'Credit/Attribution',
+ description: 'Photographer, artist, or source',
+ }),
+ },
+ }),
+};
+
+export default figureComponent;
diff --git a/src/keystatic/components/general/grid.ts b/src/keystatic/components/general/grid.ts
new file mode 100644
index 0000000..2484101
--- /dev/null
+++ b/src/keystatic/components/general/grid.ts
@@ -0,0 +1,62 @@
+import { grid2X2Icon } from '@keystar/ui/icon/icons/grid2X2Icon';
+import { fields } from '@keystatic/core';
+import { repeating, wrapper } from '@keystatic/core/content-components';
+
+const gridComponents = {
+ Row: repeating({
+ label: 'Row',
+ icon: grid2X2Icon,
+ children: ['Column'], // This defines what can go inside
+ schema: {
+ style: fields.object({
+ cols: fields.integer({
+ label: 'Columns',
+ defaultValue: 2,
+ validation: { min: 2, max: 12 },
+ }),
+ gap: fields.text({
+ label: 'Gap',
+ description: 'Enter a variable or value',
+ }),
+ align: fields.select({
+ label: 'Align Items',
+ defaultValue: 'flex-start',
+ options: [
+ { label: 'Start', value: 'flex-start' },
+ { label: 'End', value: 'flex-end' },
+ { label: 'Center', value: 'center' },
+ { label: 'Baseline', value: 'baseline' },
+ { label: 'Stretch', value: 'stretch' },
+ ],
+ }),
+ justify: fields.select({
+ label: 'Justify Content',
+ defaultValue: 'flex-start',
+ options: [
+ { label: 'Start', value: 'flex-start' },
+ { label: 'End', value: 'flex-end' },
+ { label: 'Center', value: 'center' },
+ { label: 'Space Between', value: 'space-between' },
+ { label: 'Space Around', value: 'space-around' },
+ { label: 'Evenly', value: 'evenly' },
+ { label: 'Stretch', value: 'stretch' },
+ { label: 'Baseline', value: 'baseline' },
+ ],
+ }),
+ }),
+ },
+ }),
+ Column: wrapper({
+ label: 'Column',
+ forSpecificLocations: true,
+ schema: {
+ style: fields.object({
+ colspan: fields.integer({
+ label: 'Colspan',
+ defaultValue: 1,
+ }),
+ }),
+ },
+ }),
+};
+export default gridComponents;
diff --git a/src/keystatic/components/general/index.ts b/src/keystatic/components/general/index.ts
new file mode 100644
index 0000000..c0f4e09
--- /dev/null
+++ b/src/keystatic/components/general/index.ts
@@ -0,0 +1,17 @@
+import gridComponents from '@/keystatic/components/general/grid';
+import sidenoteComponents from '@/keystatic/components/general/sidenote';
+import definitionlistComponents from '@/keystatic/components/general/definitionlist';
+import accordionComponents from '@/keystatic/components/general/accordion';
+import blockquoteComponent from '@/keystatic/components/general/blockquote';
+import figureComponent from '@/keystatic/components/general/figure';
+import calloutComponent from '@/keystatic/components/general/callout';
+
+export const generalComponents = {
+ ...gridComponents,
+ ...sidenoteComponents,
+ ...definitionlistComponents,
+ ...accordionComponents,
+ ...blockquoteComponent,
+ ...figureComponent,
+ ...calloutComponent,
+};
diff --git a/src/keystatic/components/general/sidenote.ts b/src/keystatic/components/general/sidenote.ts
new file mode 100644
index 0000000..08bcad7
--- /dev/null
+++ b/src/keystatic/components/general/sidenote.ts
@@ -0,0 +1,61 @@
+import { panelRightDashedIcon } from '@keystar/ui/icon/icons/panelRightDashedIcon';
+import { fields } from '@keystatic/core';
+import { inline } from '@keystatic/core/content-components';
+
+const sidenoteComponents = {
+ Sidenote: inline({
+ label: 'Sidenote',
+ icon: panelRightDashedIcon,
+ schema: {
+ id: fields.text({
+ label: 'ID',
+ description: 'Unique Identifier (Auto-generated)',
+ }),
+ marker: fields.text({
+ label: 'Marker',
+ description: 'Number or Glyph for reference',
+ defaultValue: '⋄',
+ validation: {
+ length: {
+ min: 1,
+ max: 3,
+ },
+ },
+ }),
+ content: fields.text({
+ label: 'Note Content',
+ multiline: true,
+ validation: {
+ length: {
+ min: 1,
+ },
+ },
+ }),
+ type: fields.select({
+ label: 'Type',
+ description: 'Visual Style',
+ options: [
+ {
+ label: 'Default',
+ value: 'default',
+ },
+ {
+ label: 'Lore',
+ value: 'lore',
+ },
+ {
+ label: 'Crunch',
+ value: 'crunch',
+ },
+ {
+ label: 'Example',
+ value: 'example',
+ },
+ ],
+ defaultValue: 'default',
+ }),
+ },
+ }),
+};
+
+export default sidenoteComponents;
diff --git a/src/keystatic/fields/article.ts b/src/keystatic/fields/article.ts
new file mode 100644
index 0000000..20b6b4b
--- /dev/null
+++ b/src/keystatic/fields/article.ts
@@ -0,0 +1,31 @@
+import { fields } from '@keystatic/core';
+
+import { createContentField } from '@/keystatic/fields/content';
+import { createPathField } from '@/keystatic/fields/general';
+import { createSEOField } from '@/keystatic/fields/seo';
+import { createMetaField } from '@/keystatic/fields/meta';
+
+export const createArticleField = (
+ imageSubfolder: string,
+ defaultPath: string = ''
+) => ({
+ title: fields.slug({ name: { label: 'Title' } }),
+ summary: fields.text({ label: 'Summary', multiline: true }),
+ path: createPathField(defaultPath),
+ cover: fields.object({
+ src: fields.image({
+ label: 'Cover Image',
+ directory: `public/images/covers/${imageSubfolder}`,
+ publicPath: `/images/covers/${imageSubfolder}`,
+ }),
+ alt: fields.text({ label: 'Alt' }),
+ caption: fields.text({ label: 'Caption', multiline: true }),
+ showInHeader: fields.checkbox({
+ label: 'Show in Header',
+ defaultValue: false,
+ }),
+ }),
+ meta: createMetaField(),
+ seo: createSEOField(),
+ content: createContentField(imageSubfolder),
+});
diff --git a/src/keystatic/fields/awq/general.ts b/src/keystatic/fields/awq/general.ts
new file mode 100644
index 0000000..7107f58
--- /dev/null
+++ b/src/keystatic/fields/awq/general.ts
@@ -0,0 +1,304 @@
+import { type ComponentSchema, fields } from '@keystatic/core';
+import { createOperatorField } from '@/keystatic/fields/general';
+
+export const createCharacteristicReferenceField = (): ComponentSchema =>
+ fields.select({
+ label: 'Characteristic',
+ options: [
+ { label: 'Weapon Skill', value: 'ws' },
+ { label: 'Ballistic Skill', value: 'bs' },
+ { label: 'Strength', value: 's' },
+ { label: 'Toughness', value: 't' },
+ { label: 'Initiative', value: 'i' },
+ { label: 'Dexterity', value: 'dex' },
+ { label: 'Agility', value: 'ag' },
+ { label: 'Intelligence', value: 'int' },
+ { label: 'Willpower', value: 'wp' },
+ { label: 'Fellowship', value: 'fel' },
+ ],
+ defaultValue: 'ws',
+ });
+
+export const createSkillReferenceField = (): ComponentSchema =>
+ fields.select({
+ label: 'Skill',
+ options: [
+ {
+ label: 'Melee',
+ value: 'melee',
+ },
+ {
+ label: 'Defence',
+ value: 'defence',
+ },
+ {
+ label: 'Shooting',
+ value: 'shooting',
+ },
+ {
+ label: 'Throwing',
+ value: 'throwing',
+ },
+ {
+ label: 'Brawn',
+ value: 'brawn',
+ },
+ {
+ label: 'Toil',
+ value: 'toil',
+ },
+ {
+ label: 'Consume Alcohol',
+ value: 'consume-alcohol',
+ },
+ {
+ label: 'Endurance',
+ value: 'endurance',
+ },
+ {
+ label: 'Perception',
+ value: 'perception',
+ },
+ {
+ label: 'Dodge',
+ value: 'dodge',
+ },
+ {
+ label: 'Skullduggery',
+ value: 'skullduggery',
+ },
+ {
+ label: 'Tradecraft',
+ value: 'tradecraft',
+ },
+ {
+ label: 'Stealth',
+ value: 'stealth',
+ },
+ {
+ label: 'Athletics',
+ value: 'athletics',
+ },
+ {
+ label: 'Intuition',
+ value: 'intuition',
+ },
+ {
+ label: 'Education',
+ value: 'education',
+ },
+ {
+ label: 'Discipline',
+ value: 'discipline',
+ },
+ {
+ label: 'Animal Handling',
+ value: 'animal-handling',
+ },
+ {
+ label: 'Leadership',
+ value: 'leadership',
+ },
+ {
+ label: 'Charm',
+ value: 'charm',
+ },
+ ],
+ defaultValue: 'melee',
+ });
+
+export const createSizeReferenceField = (): ComponentSchema =>
+ fields.select({
+ label: 'Size',
+ options: [
+ {
+ label: 'Tiny',
+ value: 'tiny',
+ },
+ {
+ label: 'Little',
+ value: 'little',
+ },
+ {
+ label: 'Small',
+ value: 'small',
+ },
+ {
+ label: 'Average',
+ value: 'average',
+ },
+ {
+ label: 'Large',
+ value: 'large',
+ },
+ {
+ label: 'Enormous',
+ value: 'enormous',
+ },
+ {
+ label: 'Monstrous',
+ value: 'monstrous',
+ },
+ ],
+ defaultValue: 'average',
+ });
+
+export const createPsychologyReferenceField = (): ComponentSchema =>
+ fields.object({
+ type: fields.select({
+ label: 'Psychology Type',
+ defaultValue: 'animosity',
+ options: [
+ { label: 'Animosity', value: 'animosity' },
+ { label: 'Fear', value: 'fear' },
+ { label: 'Frenzy', value: 'frenzy' },
+ { label: 'Hatred', value: 'hatred' },
+ { label: 'Prejudice', value: 'prejudice' },
+ { label: 'Terror', value: 'terror' },
+ ],
+ }),
+ target: fields.text({
+ label: 'Target',
+ description: 'e.g. Elves, Undead, Chaos',
+ }),
+ rating: fields.number({
+ label: 'Rating',
+ description: 'Fear/Terror Only',
+ }),
+ });
+
+export const createRequirementsField = () =>
+ fields.blocks(
+ {
+ characteristic: {
+ label: 'Characteristic',
+ schema: fields.object({
+ characteristic: createCharacteristicReferenceField(),
+ operator: createOperatorField(),
+ value: fields.number({ label: 'Value', defaultValue: 3 }),
+ }),
+ },
+ skill: {
+ label: 'Skill',
+ schema: fields.object({
+ skill: createSkillReferenceField(),
+ operator: createOperatorField(),
+ value: fields.number({ label: 'Value', defaultValue: 3 }),
+ }),
+ },
+ status: {
+ label: 'Status',
+ schema: fields.multiselect({
+ label: 'Status Tier',
+ options: [
+ {
+ value: 'copper',
+ label: 'Copper',
+ },
+ {
+ value: 'silver',
+ label: 'Silver',
+ },
+ {
+ value: 'gold',
+ label: 'gold',
+ },
+ ],
+ defaultValue: ['copper'],
+ }),
+ },
+ talent: {
+ label: 'Talent',
+ schema: fields.relationship({
+ label: 'Talent',
+ collection: 'awq_talents',
+ }),
+ },
+ lore: {
+ label: 'Lore',
+ schema: fields.relationship({
+ label: 'Lore',
+ collection: 'awq_lores',
+ }),
+ },
+ },
+ { label: 'Requirements' }
+ );
+
+export const createTraitsField = (): ComponentSchema =>
+ fields.array(
+ fields.object({
+ name: fields.text({
+ label: 'Trait name',
+ }),
+ description: fields.text({
+ label: 'Description',
+ multiline: true,
+ }),
+ grants: fields.blocks(
+ {
+ talent: {
+ label: 'Talent',
+ schema: fields.relationship({
+ label: 'Talent',
+ collection: 'awq_talents',
+ }),
+ },
+ talent_options: {
+ label: 'Talent Options',
+ schema: fields.object({
+ choices: fields.number({
+ label: 'Number to choose',
+ defaultValue: 1,
+ }),
+ options: fields.array(
+ fields.relationship({
+ label: 'Talent Options',
+ collection: 'awq_talents',
+ })
+ ),
+ }),
+ },
+ talent_random: {
+ label: 'Random Talent',
+ schema: fields.object({
+ rolls: fields.number({
+ label: 'Rolls',
+ defaultValue: 1,
+ }),
+ table: fields.array(
+ fields.object({
+ roll: fields.object({
+ min: fields.number({ label: 'Min' }),
+ max: fields.number({ label: 'Max' }),
+ }),
+ talent: fields.relationship({
+ label: 'Talent',
+ collection: 'awq_talents',
+ }),
+ })
+ ),
+ }),
+ },
+ psychology: {
+ label: 'Psychology',
+ schema: createPsychologyReferenceField(),
+ },
+ custom: {
+ label: 'Custom Effect',
+ schema: fields.text({
+ label: 'Custom Effect',
+ multiline: true,
+ }),
+ },
+ },
+ {
+ label: 'Trait Grants',
+ }
+ ),
+ }),
+ {
+ label: 'Traits',
+ itemLabel: (props) => props.fields.name.value || 'Unnamed Trait',
+ }
+ );
diff --git a/src/keystatic/fields/content.ts b/src/keystatic/fields/content.ts
new file mode 100644
index 0000000..3f6e652
--- /dev/null
+++ b/src/keystatic/fields/content.ts
@@ -0,0 +1,22 @@
+import { fields } from '@keystatic/core';
+import type { ContentComponent } from '@keystatic/core/content-components';
+
+import { generalComponents } from '@/keystatic/components/general';
+
+export const createContentField = (
+ imageSubfolder: string,
+ additionalComponents?: Record