feat: add component, add mark definition to portabletext, including f…

…ixes and refactoring (#144)

demo/.codesandbox/Dockerfile

@@ -1 +1 @@
-FROM node:18-bullseye
+FROM node:20-bullseye

demo/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "Node.js",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:20"
+}

demo/.stackblitzrc

@@ -1,4 +1,4 @@
 {
   "installDependencies": false,
-  "startCommand": "pnpm install astro astro-portabletext@latest && pnpm start"
+  "startCommand": "pnpm install && pnpm start"
 }

demo/package.json

@@ -11,12 +11,12 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "@astrojs/solid-js": "^3.0.3",
-    "@astrojs/svelte": "^5.0.3",
-    "astro": "^4.0.8",
+    "@astrojs/solid-js": "^4.1.0",
+    "@astrojs/svelte": "^5.4.0",
+    "astro": "^4.6.4",
     "astro-portabletext": "^0.9.9",
-    "solid-js": "^1.8.7",
-    "svelte": "^4.2.8"
+    "solid-js": "^1.8.17",
+    "svelte": "^4.2.15"
   },
   "engines": {
     "node": ">=20.10.0"

demo/src/components/FancyBorder.astro

@@ -1,22 +1,6 @@
----
-export type { Props } from "astro-portabletext/types";
-
-const props = Astro.props;
-
-const throwError = () => {
-  throw new Error("Space component can only be [block] not [inline]");
-};
----
-
-{
-  !props.isInline ? (
-    <div data-cmp="fancyborder">
-      <slot />
-    </div>
-  ) : (
-    throwError()
-  )
-}
+<div>
+  <slot />
+</div>
 
 <style>
   :root {
@@ -25,8 +9,7 @@ const throwError = () => {
     --borderPrimaryStyle: dashed;
     --borderImpactStyle: dotted;
   }
-
-  [data-cmp="fancyborder"] {
+  div {
     border: 2px;
     border-color: var(--borderPrimaryColor);
     border-style: var(--borderPrimaryStyle);

demo/src/components/ListItemStyleStar.astro

@@ -6,7 +6,7 @@ export type Props = $<ListItem>;
 const { node, index, isInline, ...attrs } = Astro.props;
 ---
 
-<li {...attrs} data-listitem><slot /></li>
+<li {...attrs}><slot /></li>
 
 <style>
   li {

demo/src/components/ListStyleStar.astro

@@ -9,7 +9,11 @@ const { node, index, isInline, ...attrs } = Astro.props;
 <ul {...attrs}><slot /></ul>
 
 <style>
-  li::before {
-    color: yellow;
+  ul {
+    background: lightyellow;
+    border: 1px solid;
+    border-radius: 1rem;
+    padding-block: 0.5rem;
+    filter: drop-shadow(2px 2px);
   }
 </style>

demo/src/components/counter/Counter.astro

@@ -0,0 +1,42 @@
+---
+import JsxCounter from "./JsxCounter.astro";
+import SvelteCounter from "./SvelteCounter.astro";
+
+const props = Astro.props;
+const typeIs = (type: string) => type === props.node._type;
+
+const error = () => {
+  if (import.meta.env.PROD) {
+    console.log("Unknown PortableText Counter type:", props.node._type);
+    return null;
+  }
+  throw new Error(`Unknown PortableText Counter type: ${props.node._type}`);
+};
+---
+
+{
+  typeIs("jsxCounter") ? (
+    <JsxCounter {...props} />
+  ) : typeIs("svelteCounter") ? (
+    <SvelteCounter {...props} />
+  ) : (
+    error()
+  )
+}
+
+<style>
+  [data-inline="true"] {
+    display: inline-block;
+    padding-inline: 1em;
+  }
+  [data-inline="false"] {
+    display: grid;
+    justify-content: center;
+    padding: 0.5rem;
+    text-align: center;
+  }
+  [data-inline="false"] :global(.counter__title) {
+    border: 2px dotted;
+    padding: 2px;
+  }
+</style>

demo/src/components/counter/JsxCounter.astro

@@ -5,19 +5,19 @@ import { Counter } from "./Counter";
 export type Props = $<TypedObject>;
 
 const props = Astro.props;
-const { isInline } = props;
+const { node, index, isInline, ...attrs } = props;
 ---
 
 {
   isInline ? (
-    <span data-cmp="counter">
-      <span>JSX Inline Counter</span>
+    <span {...attrs} data-inline={String(isInline)}>
+      JSX Inline Counter
       {` `}
       <Counter client:idle {...props} />
     </span>
   ) : (
-    <div>
-      <h4>JSX Block Counter</h4>
+    <div {...attrs} data-inline={String(isInline)}>
+      <h4 class="counter__title">JSX Block Counter</h4>
       <Counter client:idle {...props} />
     </div>
   )
@@ -28,19 +28,4 @@ const { isInline } = props;
   span {
     background: lightgreen;
   }
-  div {
-    display: grid;
-    justify-content: center;
-    padding: 0.5rem;
-    text-align: center;
-  }
-  span[data-cmp="counter"] {
-    display: inline-block;
-    min-width: 200px;
-    text-align: center;
-  }
-  h4 {
-    border: 2px dotted;
-    padding: 2px;
-  }
 </style>

demo/src/components/counter/SvelteCounter.astro

@@ -5,18 +5,19 @@ import Counter from "./Counter.svelte";
 export type Props = $<TypedObject>;
 
 const props = Astro.props;
-const { isInline } = props;
+const { node, index, isInline, ...attrs } = props;
 ---
 
 {
   isInline ? (
-    <span>
-      <span>Svelte Inline Counter</span>
+    <span {...attrs} data-inline={String(isInline)}>
+      Svelte Inline Counter
+      {` `}
       <Counter client:idle {...props} />
     </span>
   ) : (
-    <div>
-      <h4>Svelte Block Counter</h4>
+    <div {...attrs} data-inline={String(isInline)}>
+      <h4 class="counter__title">Svelte Block Counter</h4>
       <Counter client:idle {...props} />
     </div>
   )
@@ -27,14 +28,4 @@ const { isInline } = props;
   span {
     background: lightsteelblue;
   }
-  div {
-    display: grid;
-    justify-content: center;
-    padding: 0.5rem;
-    text-align: center;
-  }
-  h4 {
-    border: 2px dotted;
-    padding: 2px;
-  }
 </style>

demo/src/components/counter/index.ts

@@ -1,4 +1 @@
-import JsxCounter from "./JsxCounter.astro";
-import SvelteCounter from "./SvelteCounter.astro";
-
-export { JsxCounter, SvelteCounter };
+export { default as Counter } from "./Counter.astro";

demo/src/components/portabletext/Block.astro

@@ -11,3 +11,21 @@ const Cmp = styleIs("fancyBorder") ? FancyBorder : DefaultBlock;
 ---
 
 <Cmp {...props}><slot /></Cmp>
+
+<style>
+  h1 {
+    color: salmon;
+  }
+  h2 {
+    color: olivedrab;
+  }
+  h3 {
+    color: blueviolet;
+  }
+  blockquote {
+    border-left: 0.5rem solid #ccc;
+    margin-left: 0;
+    margin-right: 2rem;
+    padding-left: 2rem;
+  }
+</style>

demo/src/components/portabletext/List.astro

@@ -1,5 +1,5 @@
 ---
-import type { Props as $, List as List } from "astro-portabletext/types";
+import type { Props as $, List } from "astro-portabletext/types";
 import { List as DefaultList } from "astro-portabletext/components";
 import ListStyleStar from "../ListStyleStar.astro";
 

demo/src/components/portabletext/Mark.astro

@@ -12,3 +12,13 @@ const Cmp = markTypeIs("unicorn") ? Unicorn : DefaultMark;
 ---
 
 <Cmp {...props}><slot /></Cmp>
+
+<style>
+  code {
+    background: darkslategray;
+    border-radius: 0.25rem;
+    color: white;
+    display: block;
+    padding: 0.5rem;
+  }
+</style>

demo/src/components/portabletext/PortableText.astro

@@ -9,10 +9,7 @@ import Type from "./Type.astro";
 
 type PortableTextProps = Parameters<typeof PT>[0];
 
-export interface Props {
-  value: PortableTextProps["value"];
-  components?: PortableTextProps["components"];
-}
+export type Props = Pick<PortableTextProps, "value" | "components">;
 
 const defaultComponents = {
   block: Block,
@@ -22,12 +19,12 @@ const defaultComponents = {
   type: Type,
 };
 
-const { value, components = {}, ...attrs } = Astro.props;
+const { value, components = {} } = Astro.props;
 
 const portableTextProps = {
   value: value,
   components: mergeComponents(defaultComponents, components),
 };
 ---
 
-<PT {...portableTextProps} {...attrs} />
+<PT {...portableTextProps} />

demo/src/components/portabletext/Type.astro

@@ -1,18 +1,17 @@
 ---
 import type { Props as $, TypedObject } from "astro-portabletext/types";
 import { usePortableText } from "astro-portabletext/utils";
-import { JsxCounter, SvelteCounter } from "../counter";
+import { Counter } from "../counter";
 
 export type Props = $<TypedObject>;
 
 const props = Astro.props;
 const typeIs = (type: string) => type === props.node._type;
 const { getDefaultComponent } = usePortableText(props.node);
 
-const Cmp = typeIs("jsxCounter")
-  ? JsxCounter
-  : typeIs("svelteCounter")
-    ? SvelteCounter
+const Cmp =
+  typeIs("jsxCounter") || typeIs("svelteCounter")
+    ? Counter
     : getDefaultComponent();
 ---
 

demo/src/data/portabletext.json

@@ -65,7 +65,23 @@
     "children": [
       {
         "_type": "span",
-        "text": "metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam non nisi est sit"
+        "text": "metus vulputate eu scelerisque felis imperdiet proin "
+      },
+      {
+        "_type": "span",
+        "marks": ["link"],
+        "text": "fermentum"
+      },
+      {
+        "_type": "span",
+        "text": " leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam non nisi est sit"
+      }
+    ],
+    "markDefs": [
+      {
+        "_key": "link",
+        "_type": "link",
+        "href": "#"
       }
     ]
   },

demo/src/layouts/Default.astro

@@ -40,24 +40,13 @@ const packageName = "astro-portabletext";
         font-size: 2.5rem;
         margin: 2rem 0;
       }
+      .page-title a {
+        color: #310070;
+      }
       .intro {
         font-size: 1.5rem;
         text-align: center;
       }
     </style>
-    <style is:global>
-      h1 {
-        color: salmon;
-      }
-      h2 {
-        color: olivedrab;
-      }
-      blockquote {
-        border-left: 8px solid #ccc;
-        margin-left: 0;
-        margin-right: 2rem;
-        padding-left: 2rem;
-      }
-    </style>
   </body>
 </html>

demo/src/pages/index.astro

@@ -7,13 +7,3 @@ import value from "../data/portabletext.json";
 <Layout>
   <PortableText value={value} />
 </Layout>
-
-<style is:global>
-  code {
-    background: darkslategray;
-    border-radius: 0.25rem;
-    color: white;
-    display: block;
-    padding: 0.5rem;
-  }
-</style>