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..ee76c5c
--- /dev/null
+++ b/src/components/Article/Content/MarkdocRenderer/MarkdocRenderer.module.css
@@ -0,0 +1,23 @@
+.wrapper {
+ @mixin mx auto;
+ @mixin px var(--spacing-comfortable);
+
+ max-width: 90ch;
+ font-size: clamp(1rem, 2.5vw, 1.5rem);
+}
+
+.hasMargin {
+ @media screen and (--bp-margin) {
+ @mixin px 0;
+
+ display: flex;
+ gap: var(--spacing-generous);
+ max-width: none;
+
+ & .content {
+ flex: 1 1 auto;
+ min-width: 50ch;
+ 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..2cc2047
--- /dev/null
+++ b/src/components/Article/Content/MarkdocRenderer/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Markdoc from '@markdoc/markdoc';
+import type { Node } from '@markdoc/markdoc';
+
+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';
+
+import { Column } from '@/components/Content/Grid/Column';
+import { Row } from '@/components/Content/Grid/Row';
+import Sidenote from '@/components/Content/Sidenote/Item';
+import SidenoteContainer from '@/components/Content/Sidenote/Container';
+
+interface MarkdocRendererProps {
+ content: () => Promise<{ node: Node }>;
+ className?: string;
+}
+
+const MARGIN_COMPONENTS = ['Sidenote'];
+
+export default async function MarkdocRenderer({
+ content,
+ className,
+}: MarkdocRendererProps) {
+ const components = {
+ Column,
+ Row,
+ Sidenote,
+ };
+
+ 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 })}
+
+
+ {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..e69de29
diff --git a/src/components/Article/Header/Overline/index.tsx b/src/components/Article/Header/Overline/index.tsx
new file mode 100644
index 0000000..b5a085f
--- /dev/null
+++ b/src/components/Article/Header/Overline/index.tsx
@@ -0,0 +1,46 @@
+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..e69de29
diff --git a/src/components/Article/Header/Title/index.tsx b/src/components/Article/Header/Title/index.tsx
new file mode 100644
index 0000000..a856bd3
--- /dev/null
+++ b/src/components/Article/Header/Title/index.tsx
@@ -0,0 +1,14 @@
+import styles from './Title.module.css';
+import { JSX } from 'react';
+
+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}
+
+ {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..c02c251
--- /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 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..8067b2b
--- /dev/null
+++ b/src/components/Content/Sidenote/Container/Container.module.css
@@ -0,0 +1,63 @@
+.container {
+ flex: 1 0 auto;
+ min-width: 16rem;
+}
+
+.wrapper {
+ @media screen and (--bp-margin) {
+ position: absolute;
+ top: anchor(top);
+ }
+}
+
+.note {
+ position: relative;
+ min-width: 16rem;
+ font-family: var(--font-mono);
+
+ @media screen and (--bp-margin) {
+ @mixin text-xs;
+
+ margin-right: var(--spacing-generous);
+ 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 {
+ text-align: left;
+}
+
+.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..c4c38ea
--- /dev/null
+++ b/src/components/Content/Sidenote/Container/index.tsx
@@ -0,0 +1,33 @@
+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..adbb11d
--- /dev/null
+++ b/src/components/Content/Sidenote/Item/Item.module.css
@@ -0,0 +1,11 @@
+.ref {
+ @mixin px var(--spacing-tight);
+
+ display: inline-block;
+ font-weight: var(--typo-weight-black);
+ 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..e6bb94b
--- /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/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/meta/article.ts b/src/keystatic/collections/meta/article.ts
new file mode 100644
index 0000000..af64f39
--- /dev/null
+++ b/src/keystatic/collections/meta/article.ts
@@ -0,0 +1,13 @@
+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' },
+ 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/grid.ts b/src/keystatic/components/general/grid.ts
new file mode 100644
index 0000000..b96a536
--- /dev/null
+++ b/src/keystatic/components/general/grid.ts
@@ -0,0 +1,61 @@
+import { grid2X2Icon } from '@keystar/ui/icon/icons/grid2X2Icon';
+import { fields } from '@keystatic/core';
+import { repeating, wrapper } from '@keystatic/core/content-components';
+
+export 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,
+ }),
+ }),
+ },
+ }),
+};
diff --git a/src/keystatic/components/general/index.ts b/src/keystatic/components/general/index.ts
new file mode 100644
index 0000000..5010687
--- /dev/null
+++ b/src/keystatic/components/general/index.ts
@@ -0,0 +1,4 @@
+import { gridComponents } from '@/keystatic/components/general/grid';
+import { sidenoteComponents } from '@/keystatic/components/general/sidenote';
+
+export const generalComponents = { ...gridComponents, ...sidenoteComponents };
diff --git a/src/keystatic/components/general/sidenote.ts b/src/keystatic/components/general/sidenote.ts
new file mode 100644
index 0000000..0ef273e
--- /dev/null
+++ b/src/keystatic/components/general/sidenote.ts
@@ -0,0 +1,59 @@
+import { panelRightDashedIcon } from '@keystar/ui/icon/icons/panelRightDashedIcon';
+import { fields } from '@keystatic/core';
+import { inline } from '@keystatic/core/content-components';
+
+export 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',
+ }),
+ },
+ }),
+};
diff --git a/src/keystatic/fields/article.ts b/src/keystatic/fields/article.ts
new file mode 100644
index 0000000..17ce3d3
--- /dev/null
+++ b/src/keystatic/fields/article.ts
@@ -0,0 +1,26 @@
+import { fields } from '@keystatic/core';
+
+import { createContentField } from '@/keystatic/fields/content';
+import { createSEOField } from '@/keystatic/fields/seo';
+import { createMetaField } from '@/keystatic/fields/meta';
+
+export const createArticleField = (imageSubfolder: string) => ({
+ title: fields.slug({ name: { label: 'Title' } }),
+ summary: fields.text({ label: 'Summary', multiline: true }),
+ 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/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