Unverified Commit b25a1e09 authored by Hong Minhee's avatar Hong Minhee
Browse files

Use JSX in a JSR-compatible way

parent b5166915

CHANGES.md

+4 −0
Original line number Diff line number Diff line
@@ -16,6 +16,10 @@ To be released. 
     -  Added `importPkcs1()` function.

     -  Added `importPem()` function.



 -  Fixed a bug of the `fedify inbox` command where it had failed to render

    the web interface when the `fedify` command was installed using

    `deno install` command from JSR.



[#209]: https://github.com/fedify-dev/fedify/issues/209

cli/deno.json

+0 −5
Original line number Diff line number Diff line
@@ -17,17 +17,12 @@ 
    "@std/dotenv": "jsr:@std/dotenv@^0.225.2",

    "cli-highlight": "npm:cli-highlight@^2.1.11",

    "hono": "jsr:@hono/hono@^4.5.9",

    "hono/": "jsr:/@hono/hono@^4.5.9/",

    "icojs": "npm:icojs@^0.19.4",

    "jimp": "npm:jimp@^1.6.0",

    "json-preserve-indent": "npm:json-preserve-indent@^1.1.3",

    "ora": "npm:ora@^8.0.1",

    "shiki": "npm:shiki@^1.6.4"

  },

  "compilerOptions": {

    "jsx": "react-jsx",

    "jsxImportSource": "hono/jsx"

  },

  "exclude": [

    ".vscode",

    "fedify-cli-*.tar.xz",

cli/inbox.tsx

+2 −0
Original line number Diff line number Diff line 
/** @jsx react-jsx */

/** @jsxImportSource hono/jsx */

import { colors } from "@cliffy/ansi";

import { Command } from "@cliffy/command";

import { Cell, Table } from "@cliffy/table";

cli/inbox/test.tsx

+2 −0
Original line number Diff line number Diff line 
/** @jsx react-jsx */

/** @jsxImportSource hono/jsx */

// This script purposes to test the inbox web front-end.

// All data is dummy and does not reflect real-world data, but it is useful for

// testing the front-end.

cli/inbox/view.tsx

+16 −12
Original line number Diff line number Diff line 
/** @jsx react-jsx */

/** @jsxImportSource hono/jsx */

import type { LogRecord } from "@logtape/logtape";

import { getStatusText } from "@poppanator/http-constants";

import type { FC, PropsWithChildren } from "hono/jsx";

import { type FC, Fragment, type PropsWithChildren } from "hono/jsx";

import { getSingletonHighlighter } from "shiki";

import type { ActivityEntry } from "./entry.ts";

import {
@@ -23,8 +25,10 @@ const Layout: FC<PropsWithChildren<LayoutProps>> = ( 
        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>

          {props.title == null ? "" : <>{props.title} &mdash;{" "}</>}Fedify

          Ephemeral Inbox

          {props.title == null

            ? ""

            : <Fragment>{props.title} &mdash;{" "}</Fragment>}Fedify Ephemeral

          Inbox

        </title>

      </head>

      <body>
@@ -62,10 +66,10 @@ const Tab: FC<TabProps> = ( 
            {label}

            {badge != null

              ? (

                <>

                <Fragment>

                  {" "}

                  <span class="badge text-bg-secondary">{badge}</span>

                </>

                </Fragment>

              )

              : undefined}

          </span>
@@ -77,10 +81,10 @@ const Tab: FC<TabProps> = ( 
            {label}

            {badge != null

              ? (

                <>

                <Fragment>

                  {" "}

                  <span class="badge text-bg-secondary">{badge}</span>

                </>

                </Fragment>

              )

              : undefined}

          </a>
@@ -155,7 +159,7 @@ const Log: FC<LogProps> = ( 
        </time>

      </div>

      <small class="text-body-secondary">

        {category.map((c, i) => i < 1 ? c : <>{" "}/ {c}</>)}

        {category.map((c, i) => i < 1 ? c : <Fragment>{" "}/ {c}</Fragment>)}

      </small>

    </li>

  );
@@ -329,19 +333,19 @@ const ActivityList: FC<ActivityListProps> = ( 
              Request #{i}:{" "}

              <code>{entry.request.method} {url.pathname + url.search}</code>

              {entry.activity == null ? "" : (

                <>

                <Fragment>

                  {" "}&middot; <code>{entry.activity.constructor.name}</code>

                </>

                </Fragment>

              )}

              {entry.response == null ? "" : (

                <>

                <Fragment>

                  {" "}&rarr;{" "}

                  <code>

                    {entry.response.status} {entry.response.statusText === ""

                      ? getStatusText(entry.response.status)

                      : entry.response.statusText}

                  </code>

                </>

                </Fragment>

              )}

            </span>

            <time