update portable-text ui element

apps/astro/src/components/ui/portable-text/Block.astro

@@ -0,0 +1 @@
+<slot />

apps/astro/src/components/ui/portable-text/Mark.astro

@@ -0,0 +1,21 @@
+---
+import type { Props as $, Mark as MarkType } from 'astro-portabletext/types'
+import { Mark as PortableTextMark } from 'astro-portabletext/components'
+
+export type Props = $<MarkType<never>>
+
+const { node, ...props } = Astro.props
+
+const { href, type } = node.markDef as { href: string; type: 'external' | 'internal' }
+const isExternal = type === 'external'
+---
+
+{
+  node.markType === 'link' ? (
+    <a href={href} {...(isExternal && { target: '_blank', rel: 'noreferrer' })} {...props}>
+      <slot />
+    </a>
+  ) : (
+    PortableTextMark
+  )
+}

apps/astro/src/components/ui/portable-text/index.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { PortableText } from 'astro-portabletext'
+import type { PortableTextProps } from 'astro-portabletext/types'
+import Mark from './Mark.astro'
+import Block from './Block.astro'
+
+export type PortableTextValue = PortableTextProps['value']
+
+type Props = {
+  value: PortableTextValue
+  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+} & HTMLAttributes<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>
+
+const { heading: HeadingTag, value, ...props } = Astro.props
+
+const valueArray = Array.isArray(value) ? value : [value]
+---
+
+{
+  HeadingTag ? (
+    <HeadingTag {...props}>
+      {valueArray.map((value: PortableTextValue, index: number) =>
+        index > 0 ? (
+          <span {...props}>{<PortableText value={value} components={{ block: Block, mark: Mark }} />}</span>
+        ) : (
+          <PortableText value={value} components={{ block: Block, mark: Mark }} />
+        )
+      )}
+    </HeadingTag>
+  ) : (
+    <div {...props}>
+      <PortableText value={value} components={{ mark: Mark }} />
+    </div>
+  )
+}

apps/astro/src/components/ui/portable-text/index.ts

@@ -0,0 +1,15 @@
+export { default, type PortableTextValue } from './index.astro';
+
+export const PortableTextQuery = (name: string) => `
+  ${name}[] {
+    ...,
+    markDefs[] {
+      _type == "link" => {
+        _type,
+        _key,
+        type,
+        "href": select(type == "internal" => internal -> slug.current, type == "external" => external, "#"),
+      },
+    },
+  },
+`