苦行記事のための変更

src/app/blog/_components/OriginalMarkdownComponent.tsx

@@ -2,24 +2,7 @@ import * as React from 'react'
 
 import { ParseWithBudouX } from '@/lib/wordSplit'
 
-import { conversationParts } from '@blog/_components/article-parts/Conversation'
-import {
-  cautionParts,
-  infoboxParts,
-  titledFrameParts,
-} from '@blog/_components/article-parts/HighlightedBoxes'
-import { horizontalImagesParts } from '@blog/_components/article-parts/HorizontalImages'
-import { horizontalScrollParts } from '@blog/_components/article-parts/HorizontalScroll'
-import { linkEmbedParts } from '@blog/_components/article-parts/LinkEmbed'
-import { profileCardParts } from '@blog/_components/article-parts/ProfileCards'
-import { showAllParts } from '@blog/_components/article-parts/ShowAll'
-import { twitterParts } from '@blog/_components/article-parts/Twitter'
-import { twitterArchiveParts } from '@blog/_components/article-parts/TwitterArchive'
-import { walkingResultBoxParts } from '@blog/_components/article-parts/WalkingResultBox'
-import {
-  autoYouTubeParts,
-  youTubeParts,
-} from '@blog/_components/article-parts/YouTube'
+import * as parts from '@blog/_components/article-parts'
 import { ArticleRenderer } from '@blog/_renderer/ArticleRenderer'
 
 import {
@@ -30,20 +13,7 @@ import {
 import { PageTransferButton } from './PageNavigation'
 
 const extraCodeBlockComponents = [
-  conversationParts,
-  cautionParts,
-  infoboxParts,
-  titledFrameParts,
-  profileCardParts,
-  showAllParts,
-  twitterParts,
-  twitterArchiveParts,
-  walkingResultBoxParts,
-  youTubeParts,
-  autoYouTubeParts,
-  horizontalImagesParts,
-  horizontalScrollParts,
-  linkEmbedParts,
+  ...Object.values(parts),
   {
     name: 'next-page',
     Component: ({ content, entry }) => {

src/app/blog/_components/PostAttributes/index.tsx

@@ -83,7 +83,7 @@ export const PostAttributes = ({ post }: Props) => {
         分
       </Content>
 
-      {['徒歩', '登山', '旅行', 'ドライブ'].some(e =>
+      {['徒歩', '登山', '旅行', 'ドライブ', '自転車'].some(e =>
         post.tags.includes(e),
       ) && (
         <Content icon={faImages} title={'写真の枚数'}>

src/app/blog/_components/Tag/index.tsx

@@ -11,6 +11,7 @@ const getTagEmoji = (tag: string) => {
     徒歩: '🚶‍',
     登山: '⛰',
     ドライブ: '🚗',
+    自転車: '🚲',
     技術: '💻',
     日記: '📔',
     月報: '🗓',

src/app/blog/_components/article-parts/CustomComponents.tsx

@@ -0,0 +1,56 @@
+import yaml from 'js-yaml'
+
+import { ErrorFallback } from '@/components/atoms/ErrorFallback'
+
+import { ArticleParts } from '@blog/_components/ArticleParts'
+import { ArticleRenderer } from '@blog/_renderer/ArticleRenderer'
+
+const definedComponents: Record<string, Function> = {}
+
+export const defineComponentParts = {
+  name: 'define-component',
+  Component: ({ content, entry }) => {
+    const [name, ...templateLines] = content.split('\n')
+    try {
+      definedComponents[`${entry?.slug}/${name}`] = Function(
+        'props',
+        templateLines.join('\n'),
+      )
+    } catch (e) {
+      console.error(e)
+      definedComponents[`${entry?.slug}/${name}`] = () => {
+        throw e
+      }
+    }
+    return <></>
+  },
+} as const satisfies ArticleParts
+
+export const useDefinedComponentParts = {
+  name: 'use-defined-component',
+  Component: ({ content, entry }) => {
+    const { use: name, ...props } = yaml.load(content) as {
+      use?: string
+    } & Record<string, string>
+
+    const template = definedComponents[`${entry?.slug}/${name}`]
+    if (!template) {
+      if (process.env.NODE_ENV === 'development') {
+        return <ErrorFallback title={`Component ${name} not found`} />
+      } else {
+        return <></>
+      }
+    }
+    try {
+      const rendered = template(props)
+      return <ArticleRenderer toRender={rendered} entry={entry} />
+    } catch (e) {
+      console.error(e)
+      if (process.env.NODE_ENV === 'development') {
+        return <ErrorFallback title={`Something went wrong in "${name}"`} />
+      } else {
+        return <></>
+      }
+    }
+  },
+} as const satisfies ArticleParts

src/app/blog/_components/article-parts/UseEffect/MarkdownUseEffect.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function MarkdownUseEffect({ code }: { code: string }) {
+  useEffect(() => {
+    const userFunction = Function(code)
+    const cleanup = userFunction()
+    if (cleanup instanceof Function) {
+      return cleanup
+    }
+  }, [code])
+  return <></>
+}

src/app/blog/_components/article-parts/UseEffect/index.tsx

@@ -0,0 +1,9 @@
+import { MarkdownUseEffect } from '@blog/_components/article-parts/UseEffect/MarkdownUseEffect'
+import { ArticleParts } from '@blog/_components/ArticleParts'
+
+export const markdownUseEffectParts = {
+  name: 'use-effect',
+  Component: async function InnerLinkEmbed({ content }) {
+    return <MarkdownUseEffect code={content} />
+  },
+} as const satisfies ArticleParts

src/app/blog/_components/article-parts/index.ts

@@ -0,0 +1,20 @@
+export { horizontalImagesParts } from './HorizontalImages'
+export { horizontalScrollParts } from './HorizontalScroll'
+export { linkEmbedParts } from './LinkEmbed'
+export { profileCardParts } from './ProfileCards'
+export { showAllParts } from './ShowAll'
+export { twitterParts } from './Twitter'
+export { twitterArchiveParts } from './TwitterArchive'
+export { markdownUseEffectParts } from './UseEffect'
+export { walkingResultBoxParts } from './WalkingResultBox'
+export { conversationParts } from './Conversation'
+export {
+  cautionParts,
+  infoboxParts,
+  titledFrameParts,
+} from './HighlightedBoxes'
+export { autoYouTubeParts, youTubeParts } from './YouTube'
+export {
+  defineComponentParts,
+  useDefinedComponentParts,
+} from './CustomComponents'

src/app/blog/_lib/computeReadTimeSecondFrom.ts

@@ -4,6 +4,9 @@ function isUtilityCodeBlock(name: string): boolean {
   const ignoreTarget: string[] = [
     'twitter',
     'ignore-read-count',
+    'define-component',
+    'use-defined-component',
+    'use-effect',
   ] satisfies ExtraCodeBlockComponentName[]
   return !ignoreTarget.includes(name)
 }

src/app/blog/_lib/preprocessMarkdown.ts

@@ -76,6 +76,16 @@ export const preprocessMarkdown = (
 ): string[] => {
   const pageBreakRegex = /<!--+ page break --+>/g
   const windowBreakRegex = /<!--+ window break --+>/g
+  const beginHeadRegex = /<!--+ begin head --+>/g
+  const endHeadRegex = /<!--+ end head --+>/g
+
+  let head = ''
+  if (markdown.match(beginHeadRegex) && markdown.match(endHeadRegex)) {
+    const [beforeHead, tmp] = markdown.split(beginHeadRegex)
+    const [_head, afterHead] = tmp.split(endHeadRegex)
+    head = _head
+    markdown = beforeHead + afterHead
+  }
 
   if (!options.pageIdx1Indexed && !options.concatenateAllPages) {
     throw new Error(
@@ -97,6 +107,7 @@ export const preprocessMarkdown = (
     ? 0
     : (options.pageIdx1Indexed ?? 1) - 1
 
-  const page = markdown.split(pageBreakRegex)[targetPageIdx]
+  const page = head + markdown.split(pageBreakRegex)[targetPageIdx]
+
   return page.split(windowBreakRegex).map(parseFootnote)
 }

src/components/organisms/LinkCard/ClientLinkCard.tsx

@@ -24,11 +24,7 @@ export function ClientLinkCard(props: ClientLinkCardProps) {
   }
 
   if (error || !data) {
-    return (
-      <div {...rest}>
-        <a href={href}>{href}</a>
-      </div>
-    )
+    return <LinkCard title={href} href={href} {...rest} />
   }
 
   return (

src/components/organisms/LinkCard/ServerLinkCard.tsx

@@ -9,25 +9,41 @@ export type LinkCardProps = Omit<
   'children'
 > & {
   href: string
+  fallbackToClient?: boolean
 }
 
 export async function ServerLinkCard(props: LinkCardProps) {
   const { href, ...rest } = props
 
-  const result = await fetchOGP(href).catch(() => null)
-  if (!result) {
-    return <ClientLinkCard href={href} {...rest} />
+  try {
+    const result = await fetchOGP(href).catch(() => null)
+    if (!result) {
+      throw new Error('OGP not found')
+    }
+    return (
+      <LinkCard
+        title={result.ogTitle ?? ''}
+        description={result.ogDescription}
+        href={href}
+        imageUrl={result.ogImage?.[0]?.url}
+        favicon={result.favicon}
+        themeColor={result.customMetaTags?.themeColor}
+        {...rest}
+      />
+    )
+  } catch (e) {
+    if (props.fallbackToClient) {
+      return <ClientLinkCard href={href} {...rest} />
+    } else {
+      return (
+        <LinkCard
+          title={href}
+          href={href}
+          description={href}
+          {...rest}
+          skeleton={false}
+        />
+      )
+    }
   }
-
-  return (
-    <LinkCard
-      title={result.ogTitle ?? ''}
-      description={result.ogDescription}
-      href={href}
-      imageUrl={result.ogImage?.[0]?.url}
-      favicon={result.favicon}
-      themeColor={result.customMetaTags?.themeColor}
-      {...rest}
-    />
-  )
 }

src/posts/sugadaira-travel.md

@@ -6,6 +6,7 @@ held: '2023-10-14'
 tags:
   - 日記
   - 旅行
+  - 長編記事
 description: '徒歩は怒りと共に #ファスト合宿'
 thumbnail: https://res.cloudinary.com/trpfrog/image/upload/v1702824337/blog/sugadaira-travel/thumbnail.jpg