Added images

src/lib/constants/figure.ts

@@ -0,0 +1,16 @@
+export const FIGURE_SIZES = [
+  {
+    label: 'Inline',
+    value: 'inline',
+  },
+  {
+    label: 'Wide',
+    value: 'wide',
+  },
+  {
+    label: 'Full',
+    value: 'full',
+  },
+]
+
+export type FigureSize = (typeof FIGURE_SIZES)[number]['value']

src/lib/content/assets.ts

@@ -1,6 +0,0 @@
-export const ASSET_ROOT = 'src/assets/content'
-
-export const assets = (collection: string) => ({
-  directory: `${ASSET_ROOT}/${collection}`,
-  publicPath: `/${ASSET_ROOT}/${collection}/`,
-})

src/lib/images/resolve.ts

@@ -0,0 +1,8 @@
+import type { ImageMetadata } from 'astro'
+
+const images = import.meta.glob<ImageMetadata>(
+  '/src/assets/content/**/*.{png,jpg,jpeg,webp,avif,gif,svg,PNG,JPG,JPEG,WEBP,AVIF,GIF,SVG}',
+  { eager: true, import: 'default' },
+)
+
+export const resolveImage = (src: string): ImageMetadata | undefined => images[decodeURI(src)]

src/lib/images/storage.ts

@@ -0,0 +1,15 @@
+import { slugify } from '../content/slug'
+
+export const ASSET_ROOT = 'src/assets/content'
+
+export function cleanFilename(filename: string): string {
+  const dot = filename.lastIndexOf('.')
+  if (dot <= 0) return slugify(filename)
+  return `${slugify(filename.slice(0, dot)) || 'image'}${filename.slice(dot).toLowerCase()}`
+}
+
+export const assets = (collection: string) => ({
+  directory: `${ASSET_ROOT}/${collection}`,
+  publicPath: `/${ASSET_ROOT}/${collection}/`,
+  transformFilename: cleanFilename,
+})

src/lib/markdoc/index.ts

@@ -2,6 +2,7 @@ import Markdoc from '@markdoc/markdoc'
 
 import { createDiagnostics } from '../diagnostics'
 import { createNodes } from './nodes'
+import { tags } from './tags'
 import type { NodeState, Renderable, Rendered } from './types'
 
 const LEVEL = {
@@ -18,6 +19,7 @@ export async function render({ collection, id, content }: Renderable): Promise<R
   }
   const config = {
     nodes: createNodes(state),
+    tags,
   }
   const problems = createDiagnostics()
 

src/lib/markdoc/nodes.ts

@@ -45,5 +45,19 @@ export function createNodes(state: NodeState): Record<string, Schema> {
         return new Tag('div', { class: 'table-scroll', tabindex: 0 }, [table])
       },
     },
+    image: {
+      ...Markdoc.nodes.image,
+      render: 'Image',
+      validate: (node) =>
+        node.attributes.alt
+          ? []
+          : [
+              {
+                id: 'image-alt',
+                level: 'warning',
+                message: 'An image has no alt text',
+              },
+            ],
+    },
   }
 }

src/lib/markdoc/tags.ts

@@ -0,0 +1,12 @@
+import { fields } from '@keystatic/core'
+
+import { generalBlocks } from '@/keystatic/blocks/general'
+
+export const tags = fields.markdoc.createMarkdocConfig({
+  components: generalBlocks('articles'),
+  render: {
+    tags: {
+      figure: 'Figure',
+    },
+  },
+}).tags