add quotes

Author: Alex Patterson

components/portable-text.tsx

@@ -21,6 +21,7 @@ import TwitterEmbed from "@/components/twitter-embed";
 import CodePenEmbed from "@/components/codepen-embed";
 import CodeSandboxEmbed from "./codesandbox-embed";
 import HTMLEmbed from "@/components/html-embed";
+import QuoteEmbed from "@/components/quote-embed";
 
 
 export default function CustomPortableText({
@@ -39,6 +40,7 @@ export default function CustomPortableText({
       codesandbox: ({ value }) => <CodeSandboxEmbed {...value} />,
       twitter: ({ value }) => <TwitterEmbed {...value} />,
       htmlBlock: ({ value }) => <HTMLEmbed {...value} />,
+      quote: ({ value }) => <QuoteEmbed {...value} />,
     },
     block: {
       h5: ({ children }) => (

components/quote-embed.tsx

@@ -0,0 +1,33 @@
+import {
+  PortableText,
+  type PortableTextComponents,
+} from "next-sanity";
+import Link from "next/link";
+
+export default function QuoteEmbed(props: any) {
+  const { content, url } = props;
+  if (!content) {
+    return null;
+  }
+  const components: PortableTextComponents = {
+    marks: {
+      link: ({ children, value }) => {
+        return (
+          <Link href={value?.href || "#"} rel="noreferrer noopener" target="_blank">
+            {children}
+          </Link>
+        );
+      },
+      internalLink: ({ children, value }) => {
+        return <Link href={value?.href || "#"}>{children}</Link>;
+      },
+    },
+  };
+  return (
+    <figure>
+      <blockquote cite={url || '#'} className="mt-6 border-l-2 pl-6 italic">
+        <PortableText components={components} value={content} />
+      </blockquote>
+    </figure>
+  )
+}

sanity/components/QuotePreview.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+// TODO: Add stronger typing
+const QuotePreview = (props: any) => {
+  const { text, url } = props;
+  if (!text) {
+    return null;
+  }
+  return (
+    <figure>
+      <blockquote cite={url}>
+        {text}
+      </blockquote>
+    </figure>
+  )
+};
+
+const preview = (props: any) => <QuotePreview {...props} />;
+
+export default preview;

sanity/schemas/custom/quote.ts

@@ -0,0 +1,35 @@
+import { defineArrayMember, defineField, defineType } from "sanity";
+import { FaQuoteLeft } from "react-icons/fa6";
+import preview from "../../components/QuotePreview";
+import externalLink from "./externalLink";
+import internalLink from "./internalLink";
+
+export default defineType({
+  name: "quote",
+  type: "object",
+  icon: FaQuoteLeft,
+  fields: [
+    defineField({
+      name: "content",
+      title: "Content",
+      type: "array",
+      of: [
+        defineArrayMember({
+          type: "block",
+          marks: {
+            annotations: [
+              defineArrayMember(externalLink),
+              defineArrayMember(internalLink),
+            ],
+          },
+        }),
+      ],
+    }),
+    defineField({
+      name: 'url',
+      type: 'url',
+      title: 'URL',
+      description: 'Source on the web',
+    })
+  ],
+});

sanity/schemas/partials/base.ts

@@ -14,6 +14,7 @@ import codepen from "../custom/codepen";
 import codesandbox from "../custom/codesandbox";
 import html from "../custom/html";
 import twitter from "../custom/twitter-embed";
+import quote from "../custom/quote";
 
 const baseType = defineType({
   name: "base",
@@ -96,6 +97,7 @@ const baseType = defineType({
         defineArrayMember(codesandbox),
         defineArrayMember(twitter),
         defineArrayMember(html),
+        defineArrayMember(quote),
       ],
     }),
   ],