fix: Render error responses

src/components/layouts.tsx

@@ -38,6 +38,7 @@ export const AppLayout: FC<
   const jsUrls = [
     'https://unpkg.com/[email protected]',
     'https://unpkg.com/[email protected]/json-enc.js',
+    'https://unpkg.com/[email protected]/response-targets.js',
   ];
   return (
     <Layout title={props.title} cssUrls={cssFiles} jsUrls={jsUrls}>

src/routes/html.tsx

@@ -20,13 +20,14 @@ app.get('/', (c) => {
           <h1 class="title">Zenn Private Previwer</h1>
         </div>
       </section>
-      <section class="section">
+      <section class="section" hx-ext="response-targets">
         <div class="columns">
           <div class="column">
             <form
               hx-post="/app/content-url"
               hx-ext="json-enc"
               hx-target="#result"
+              hx-target-error="#result"
               hx-swap="innerHTML"
             >
               <Input name="owner" label="ユーザー/Org" />

src/routes/htmx.tsx

@@ -7,41 +7,40 @@ import { Hono } from 'hono';
 import type { StatusCode } from 'hono/utils/http-status';
 import { AppMessageBox } from '../components/layouts';
 import { zValidator } from '@hono/zod-validator';
-import { ContentAddress } from '../models';
+import { ContentAddress, makeSlug } from '../models';
+import { fetchContent, initClient } from '../client';
 
 const app = new Hono<{ Bindings: CloudflareBindings }>();
 
 app.post('/content-url', zValidator('json', ContentAddress), async (c) => {
-  const url = new URL(c.req.url);
-  url.pathname = '/api/content-url';
-  const resp = await fetch(url, {
-    method: 'post',
-    body: JSON.stringify(c.req.valid('json')),
-    headers: {
-      'content-type': 'application/json',
-    },
-  });
-  if (resp.ok) {
-    const data = await resp.json();
+  const addr = c.req.valid('json');
+  if (addr.ref === '') {
+    addr.ref = undefined;
+  }
+  try {
+    const octokit = initClient(c);
+    await fetchContent(octokit, addr);
     return c.html(
       <AppMessageBox title="OK!" type="link">
         <p>Content URL is created!</p>
         <p>
           Link is{' '}
-          <a href={`/view/${data.slug}`} target="_blank" rel="noreferrer">
+          <a href={`/view/${makeSlug(addr)}`} target="_blank" rel="noreferrer">
             here
           </a>
           .
         </p>
       </AppMessageBox>,
     );
+  } catch (error) {
+    console.error(error);
+    c.status(404);
+    return c.html(
+      <AppMessageBox title="Error!" type="danger">
+        <p>Content is not found.</p>
+      </AppMessageBox>,
+    );
   }
-  c.status(resp.status as StatusCode);
-  return c.html(
-    <AppMessageBox title="Error!" type="danger">
-      <p>{await resp.text()}</p>
-    </AppMessageBox>,
-  );
 });
 
 export default app;