Enable footnotes in blog posts (#35)

None yet, but it's nice to have the ability to add them.

commonmark.php

@@ -5,6 +5,7 @@
 use League\CommonMark\Extension\CommonMark\Node\Block\Heading;
 use League\CommonMark\Extension\CommonMark\Node\Block\ListBlock;
 use League\CommonMark\Extension\DefaultAttributes\DefaultAttributesExtension;
+use League\CommonMark\Extension\Footnote\FootnoteExtension;
 use League\CommonMark\Extension\HeadingPermalink\HeadingPermalinkExtension;
 use League\CommonMark\Node\Block\Paragraph;
 use Sven\CommonMark\ImageMediaQueries\ImageMediaQueriesExtension;
@@ -18,12 +19,14 @@
         'heading_permalink' => headingPermalinkConfig(),
         'default_attributes' => defaultAttributeConfig(),
         'image_media_queries' => imageMediaQueriesConfig(),
+        'footnote' => footnoteConfig(),
     ],
     'extensions' => [
         new HeadingPermalinkExtension(),
         new AttributesExtension(),
         new DefaultAttributesExtension(),
         $imageMediaQueriesExtension,
+        new FootnoteExtension(),
     ],
 ];
 
@@ -77,3 +80,12 @@ function imageMediaQueriesConfig(): array
         'picture_class' => '',
     ];
 }
+
+function footnoteConfig(): array
+{
+    return [
+        'backref_class' => 'text-sm font-bold',
+        'container_class' => 'footnotes',
+        'container_add_hr' => true,
+    ];
+}

source/_assets/css/main.css

@@ -17,3 +17,27 @@ a {
 .post pre code {
     @apply lg:-mx-8 my-4 bg-gray-50 dark:bg-gray-900 border;
 }
+
+.footnotes {
+    @apply text-gray-500 dark:text-gray-300
+}
+
+.footnotes hr {
+    @apply my-6 dark:border-gray-900
+}
+
+.footnotes ol {
+    @apply list-decimal ml-8 mb-4
+}
+
+.footnotes p {
+    @apply mb-2
+}
+
+.footnote-ref:before {
+    content: '['
+}
+
+.footnote-ref:after {
+    content: ']'
+}