feat: references

Signed-off-by: Filipe Medeiros <hello@filipesm.eu>

frontend/src/components/BlogPostFootnotes.astro

@@ -34,7 +34,6 @@ for (const block of blocksWithFootnotes) {
             value={footnote}
             components={{
               mark: {
-                // @ts-expect-error
                 link: InlineLink,
               },
             }}

frontend/src/components/portableText/BlogPostContent.astro

@@ -1,5 +1,6 @@
 ---
 import { PortableText } from 'astro-portabletext';
+import type { SomePortableTextComponents } from '../../../node_modules/astro-portabletext/lib/types';
 import type { PortableTextBlock } from '@portabletext/types';
 
 import ShowableFigure from './components/ShowableFigure.astro';
@@ -17,12 +18,13 @@ import Heading5 from './components/Heading5.astro';
 import Heading6 from './components/Heading6.astro';
 import Paragraph from './components/Paragraph.astro';
 import FootnoteMark from './components/FootnoteMark.astro';
+import ReferenceMark from './components/ReferenceMark.astro';
 
 export interface Props {
   content: PortableTextBlock[];
 }
 
-const components = {
+const components: SomePortableTextComponents = {
   type: {
     image: ShowableFigure,
   },
@@ -39,6 +41,7 @@ const components = {
     code: InlineCode,
     link: InlineLink,
     footnote: FootnoteMark,
+    referenceToSource: ReferenceMark,
   },
   list: {
     bullet: BulletList,
@@ -54,6 +57,5 @@ const { content } = Astro.props;
 ---
 
 <div class="text-justify">
-  {/* @ts-expect-error */}
   <PortableText components={components} value={content} />
 </div>

frontend/src/components/portableText/components/FootnoteMark.astro

@@ -3,10 +3,6 @@ import type { PortableTextListItemBlock } from '@portabletext/types';
 import InlineLink from '../../InlineLink.astro';
 import langToFootnoteString from '../../../lib/langToFootnoteString';
 
-export interface Props {
-  node: PortableTextListItemBlock;
-}
-
 const footnoteString = langToFootnoteString(Astro);
 
 // This is an incredible hack!! Ahah

frontend/src/components/portableText/components/NumberListItem.astro

@@ -1,8 +1,8 @@
 ---
-import type { PortableTextListItemBlock } from '@portabletext/types';
+import type { ListItem } from '../../../../node_modules/astro-portabletext/lib/types';
 
 export interface Props {
-  node: PortableTextListItemBlock;
+  node: ListItem;
 }
 
 const { node: value } = Astro.props;

frontend/src/components/portableText/components/ReferenceMark.astro

@@ -0,0 +1,27 @@
+---
+import InlineLink from '../../InlineLink.astro';
+
+export interface ReferenceMark {
+  linkToReference: string;
+  authors: string;
+  dateOfPublication: string;
+  notes: string;
+  title: string;
+}
+
+export interface Props {
+  node: { markDef: ReferenceMark };
+}
+
+const ref = Astro.props.node.markDef;
+---
+
+<slot /><InlineLink
+  class="ml-1 text-sm no-underline"
+  href={ref.linkToReference}
+  title={ref.title}
+>
+  [{ref.authors}{ref.dateOfPublication ? `, ${ref.dateOfPublication}` : ''}{
+    ref.notes ? ` - ${ref.notes}` : ''
+  }]
+</InlineLink>

studio/schemas/blogPost.ts

@@ -1,4 +1,4 @@
-import {DocumentTextIcon, LinkIcon, InsertBelowIcon} from '@sanity/icons'
+import {DocumentTextIcon, LinkIcon, InsertBelowIcon, BookIcon} from '@sanity/icons'
 import {defineType} from 'sanity'
 
 const blogPost = defineType({
@@ -102,6 +102,41 @@ const blogPost = defineType({
                   },
                 ],
               },
+              {
+                title: 'Reference',
+                name: 'referenceToSource',
+                type: 'object',
+                icon: BookIcon,
+                fields: [
+                  {
+                    title: 'Author(s)',
+                    name: 'authors',
+                    type: 'string',
+                    validation: (r) => r.required(),
+                  },
+                  {
+                    title: 'Date of publication',
+                    name: 'dateOfPublication',
+                    type: 'string',
+                  },
+                  {
+                    title: 'Link to reference',
+                    name: 'linkToReference',
+                    type: 'url',
+                  },
+                  {
+                    title: 'Title',
+                    name: 'title',
+                    type: 'string',
+                  },
+
+                  {
+                    title: 'Notes',
+                    name: 'notes',
+                    type: 'string',
+                  },
+                ],
+              },
             ],
           },
         },