make dropcap switchable between ascender/descender

.astro/collections/posts.schema.json

@@ -28,8 +28,12 @@
           "default": false
         },
         "dropcap": {
-          "type": "boolean",
-          "default": true
+          "type": "string",
+          "enum": [
+            "ascender",
+            "descender"
+          ],
+          "default": "descender"
         },
         "toc": {
           "type": "boolean",

.astro/content-modules.mjs

@@ -1,6 +1,6 @@
 
 export default new Map([
 ["posts/after.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=posts%2Fafter.mdx&astroContentModuleFlag=true")],
-["posts/before.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=posts%2Fbefore.mdx&astroContentModuleFlag=true")],
-["posts/test.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=posts%2Ftest.mdx&astroContentModuleFlag=true")]]);
+["posts/test.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=posts%2Ftest.mdx&astroContentModuleFlag=true")],
+["posts/before.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=posts%2Fbefore.mdx&astroContentModuleFlag=true")]]);
 		

src/components/Post.astro

@@ -47,7 +47,7 @@ h1 {
 .subtitle {
     font-size: 0.85em;
     font-style: italic;
-    margin-top: -1rem;
+    margin-top: -0.5rem;
 }
 
 .post {
@@ -76,15 +76,25 @@ footer {
     }
 }
 
-article :global(section.post::first-letter) {
-    initial-letter: 2;
-    margin-right: 0.5rem;
-    color: var(--accent-color);
-    font-family: 'Baskervville';
+article {
+    & :global(section.post::first-letter) {
+        font-family: 'Baskervville';
+        color: var(--accent-color);
+    }
+
+    &[data-dropcap-style="descender"] :global(section.post::first-letter) {
+        initial-letter: 2;
+        margin-right: 0.5rem;
+    }
+
+    &[data-dropcap-style="ascender"] :global(section.post::first-letter) {
+        font-size: 2em;
+        line-height: 1;
+    }
 }
 </style>
 
-<article class="prose">
+<article class="prose" data-dropcap-style={entry.data.dropcap}>
     <header class="title">
         <h1>
             <!-- <SmallCaps text={entry.data.title} upperWeight={500} lowerWeight={800} /> -->

src/content.config.ts

@@ -11,7 +11,7 @@ const posts = defineCollection({
         title: z.string(),
         date: z.date(),
         draft: z.boolean().default(false),
-        dropcap: z.boolean().default(true),
+        dropcap: z.enum(['ascender', 'descender']).default('descender'),
         toc: z.boolean().default(true),
     })
 });