re-use aside and cloud-image components and renderers

Thinkmill · Aug 31, 2023 · 0803511 · 0803511
1 parent 45ac6b4
commit 0803511
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
@@ -246,7 +246,8 @@ export default config({
 
           // This will be replaced with a cloudImage field soon...
           componentBlocks: {
-            image: cloudImage({ label: 'Image' }),
+            aside: componentBlocks['aside'],
+            'cloud-image': componentBlocks['cloud-image'],
             // image: component({
             //   label: 'Image',
             //   preview: () => null,

diff --git a/docs/src/components/document-renderer.tsx b/docs/src/components/document-renderer.tsx
@@ -50,14 +50,14 @@ const getRenderers = (
   inline: {
     bold: ({ children }) => <strong>{children}</strong>,
     code: ({ children }) => (
-      <code className="font-mono bg-neutral-100 text-sm text-black px-1 py-0.5 rounded-md border border-neutral-200">
+      <code className="rounded-md border border-neutral-200 bg-neutral-100 px-1 py-0.5 font-mono text-sm text-black">
         {children}
       </code>
     ),
     link: ({ href, children }) => {
       return (
         <Link
-          className="cursor-pointer underline font-medium hover:no-underline"
+          className="cursor-pointer font-medium underline hover:no-underline"
           href={href}
         >
           {children}
@@ -95,15 +95,15 @@ const getRenderers = (
 
       return (
         <div
-          className="[&>pre]:whitespace-break-spaces [&>pre]:break-all [&>pre]:px-6 [&>pre]:py-4 [&>pre]:rounded-lg [&>pre]:border [&>pre]:border-keystatic-gray [&>pre]:bg-white text-sm my-2"
+          className="my-2 text-sm [&>pre]:whitespace-break-spaces [&>pre]:break-all [&>pre]:rounded-lg [&>pre]:border [&>pre]:border-keystatic-gray [&>pre]:bg-white [&>pre]:px-6 [&>pre]:py-4"
           dangerouslySetInnerHTML={{ __html: codeBlock }}
         />
       );
     },
     list: ({ type, children }) => {
       if (type === 'ordered') {
         return (
-          <ol className="text-keystatic-gray-dark list-decimal list-inside mt-2">
+          <ol className="mt-2 list-inside list-decimal text-keystatic-gray-dark">
             {children.map((child, index) => (
               <li key={index} className="mb-2">
                 {child}
@@ -113,7 +113,7 @@ const getRenderers = (
         );
       }
       return (
-        <ul className="text-keystatic-gray-dark list-disc ml-4 mt-2">
+        <ul className="ml-4 mt-2 list-disc text-keystatic-gray-dark">
           {children.map((child, index) => (
             <li key={index} className="mb-2">
               {child}
@@ -123,11 +123,11 @@ const getRenderers = (
       );
     },
     divider: () => {
-      return <hr className="border-keystatic-gray my-8 peer" />;
+      return <hr className="peer my-8 border-keystatic-gray" />;
     },
     layout: ({ children }) => {
       return (
-        <div className="grid gap-6 my-2 grid-cols-1 sm:grid-cols-2">
+        <div className="my-2 grid grid-cols-1 gap-6 sm:grid-cols-2">
           {children.map((element, index) => (
             <div
               key={index}
@@ -147,8 +147,8 @@ const componentBlockRenderers: InferRenderersForComponentBlocks<
 > = {
   aside: props => {
     return (
-      <div className="flex flex-col sm:flex-row gap-4 rounded-lg bg-keystatic-gray-light px-4 py-6 my-2">
-        <div className="flex text-3xl h-6 items-center">{props.icon}</div>
+      <div className="not-prose my-2 flex flex-col gap-4 rounded-lg bg-keystatic-gray-light px-4 py-6 sm:flex-row">
+        <div className="flex h-6 items-center text-3xl">{props.icon}</div>
         <div className="flex flex-col gap-3">{props.content}</div>
       </div>
     );
@@ -162,7 +162,7 @@ const componentBlockRenderers: InferRenderersForComponentBlocks<
         src={src}
         height={height ?? undefined}
         width={width ?? imgMaxWidthPx}
-        className="rounded-lg my-2"
+        className="my-2 rounded-lg"
       />
     );
   },
@@ -174,7 +174,7 @@ const componentBlockRenderers: InferRenderersForComponentBlocks<
             key={index}
             className={`${getTagClasses(
               index
-            )} rounded-full px-2 py-1 font-medium text-[0.6875rem] leading-none uppercase self-start inline`}
+            )} inline self-start rounded-full px-2 py-1 text-[0.6875rem] font-medium uppercase leading-none`}
           >
             {tag}
           </div>

diff --git a/docs/src/content/projects/better-dev-screencasts.mdoc b/docs/src/content/projects/better-dev-screencasts.mdoc
@@ -14,7 +14,7 @@ Better Dev Screencasts was possibly the **very first Keystatic website in produc
 
 To this date, Keystatic powers the site's `posts` content types, which support custom components for YouTube videos and Tweet embeds.
 
-{% image
+{% cloud-image
    src="https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui"
    alt="Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website"
    height=1878
@@ -57,4 +57,6 @@ posts: collection({
 }),
 ```
 
+{% aside icon="☝️" %}
 The API for the `componentBlocks` is slightly outdated and likely to change in the future, so we won't share the code snippet here —&nbsp;but you can find it on the project's [GitHub repo](https://github.com/simonswiss/better-dev/blob/main/component-blocks.tsx) which is public!
+{% /aside %}