Add favicons and custom JSX types

packages/typedoc-theme-client/scripts/module.ts

@@ -3,9 +3,9 @@ import * as binders from "./binders/index.js";
 import * as formatters from "./formatters/index.js";
 import * as services from "./services/index.js";
 import * as components from "./components/index.js";
-import { GjsifyTypedocModuleOptions } from "./types/index.js";
+import { TypedocModuleOptions } from "./types/index.js";
 
-export const gjsifyTypedocModule: RibaModule<GjsifyTypedocModuleOptions> = {
+export const gjsifyTypedocModule: RibaModule<TypedocModuleOptions> = {
   binders,
   services,
   formatters,

packages/typedoc-theme-client/scripts/types/jsx/jsx-member-signatures-props.ts

@@ -1,3 +1,3 @@
-import type { JsxHtmlGlobalProps } from "@ribajs/jsx";
+import type { JsxHtmlGlobalProps } from "@ribajs/jsx/src/types/index";
 
 export type JsxTsdMemberSignaturesProps = JsxHtmlGlobalProps;

packages/typedoc-theme-client/scripts/types/jsx/jsx-navbar-props.ts

@@ -1,3 +1,3 @@
-import type { JsxHtmlGlobalProps } from "@ribajs/jsx";
+import type { JsxHtmlGlobalProps } from "@ribajs/jsx/src/types/index";
 
 export type JsxTsdNavbarProps = JsxHtmlGlobalProps;

packages/typedoc-theme-client/scripts/types/jsx/jsx-navigation-primary-props.ts

@@ -1,4 +1,4 @@
-import type { JsxHtmlGlobalProps } from "@ribajs/jsx";
+import type { JsxHtmlGlobalProps } from "@ribajs/jsx/src/types/index";
 
 export interface JsxTsdNavigationPrimaryProps extends JsxHtmlGlobalProps {
   type: "list" | "dropdown";

packages/typedoc-theme-client/scripts/types/jsx/jsx-navigation-secondary-props.ts

@@ -1,3 +1,3 @@
-import type { JsxHtmlGlobalProps } from "@ribajs/jsx";
+import type { JsxHtmlGlobalProps } from "@ribajs/jsx/src/types/index";
 
 export type JsxTsdNavigationSecondaryProps = JsxHtmlGlobalProps;

packages/typedoc-theme-client/scripts/types/jsx/jsx-search-props.ts

@@ -1,4 +1,4 @@
-import type { JsxHtmlGlobalProps } from "@ribajs/jsx";
+import type { JsxHtmlGlobalProps } from "@ribajs/jsx/src/types/index";
 
 export interface JsxTsdSearchProps extends JsxHtmlGlobalProps {
   /** The base url of the remote search server */

packages/typedoc-theme-client/scripts/types/module-options.ts

@@ -1,5 +1,4 @@
-export interface GjsifyTypedocModuleOptions {
-    /** The base url of the remote search server */
-    serverBaseUrl?: string;
-  }
-
+export interface TypedocModuleOptions {
+  /** The base url of the remote search server */
+  serverBaseUrl?: string;
+}

packages/typedoc-theme/package.json

@@ -18,6 +18,7 @@
         "assets/*"
     ],
     "devDependencies": {
+        "@gjsify/typedoc-theme-client": "workspace:^",
         "typedoc": "^0.24.8",
         "typescript": "^5.1.3"
     },

packages/typedoc-theme/src/index.ts

@@ -1,3 +1,4 @@
+import "./jsx/index.js";
 import { Application } from "typedoc";
 import { GjsifyTheme } from "./theme.js";
 

packages/typedoc-theme/src/jsx/index.ts

@@ -0,0 +1,5 @@
+export * from "./intrinsic-elements";
+export * from "./jsx-children";
+export * from "./jsx-element";
+export * as JSX from "./jsx";
+export { Raw } from "./jsx";

packages/typedoc-theme/src/jsx/intrinsic-elements.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+/* eslint-disable @typescript-eslint/no-namespace */
+import type {
+  JsxHtmlGlobalProps,
+  BasicIntrinsicElements,
+} from "@ribajs/jsx/src/types/index";
+import type { Bs5IntrinsicElements } from "@ribajs/bs5/src/types/jsx";
+import type { RouterIntrinsicElements } from "@ribajs/router/src/types/jsx";
+import type { TsdIntrinsicElements } from "@gjsify/typedoc-theme-client";
+
+export type JsxTsdHeaderProps = JsxHtmlGlobalProps;
+
+export type JsxTsdFooterProps = JsxHtmlGlobalProps;
+
+export interface TsdThemeIntrinsicElements {
+  // Custom Elements
+  "tsd-header": JsxTsdHeaderProps;
+  "tsd-footer": JsxTsdFooterProps;
+}
+
+export interface IntrinsicElements
+  extends BasicIntrinsicElements,
+    TsdThemeIntrinsicElements,
+    TsdIntrinsicElements,
+    Bs5IntrinsicElements,
+    RouterIntrinsicElements {}

packages/typedoc-theme/src/jsx/jsx-children.ts

@@ -0,0 +1,5 @@
+import type { JsxElement } from "./jsx-element.js";
+import type { JsxChildren as RibaJsxChildren } from "@ribajs/jsx/dist/types/index";
+
+export declare type JsxChildren = RibaJsxChildren &
+  (JsxElement | string | number | null | undefined | JsxChildren[]);

packages/typedoc-theme/src/jsx/jsx-element.ts

@@ -0,0 +1,4 @@
+import type { JSX } from "typedoc";
+import type { JsxElement as RibaJsxElement } from "@ribajs/jsx/dist/types/index";
+
+export type JsxElement = JSX.Element & RibaJsxElement;

packages/typedoc-theme/src/jsx/jsx.ts

@@ -0,0 +1,62 @@
+/**
+ * This file is needed to define custom HTML elements for JSX.
+ * @see https://github.com/TypeStrong/typedoc/blob/master/src/lib/utils/jsx.elements.ts
+ */
+import { JSX as OJSX } from "typedoc";
+import { JsxElement } from "./jsx-element.js";
+import { IntrinsicElements as TsdIntrinsicElements } from "./intrinsic-elements.js";
+import { JsxChildren } from "./jsx-children.js";
+
+/**
+ * JSX factory function to create an "element" that can later be rendered with {@link renderElement}
+ * @param tag
+ * @param props
+ * @param children
+ */
+export const createElement = OJSX.createElement as (
+  tag: typeof OJSX.Fragment | string | OJSX.JsxComponent<any>,
+  props: object | null,
+  ...children: JsxChildren[]
+) => JsxElement;
+export const setRenderSettings = OJSX.setRenderSettings;
+export const renderElement = OJSX.renderElement as (
+  element: JsxElement | null | undefined
+) => string;
+
+export const Raw = OJSX.Raw;
+
+export type Element = JsxElement;
+
+export type Children = JsxChildren;
+
+/**
+ * TypeScript's rules for looking up the JSX.IntrinsicElements and JSX.Element
+ * interfaces are incredibly strange. It will find them if they are included as
+ * a namespace under the createElement function, or globally, or, apparently, if
+ * a JSX namespace is declared at the same scope as the factory function.
+ * Hide this in the docs, hopefully someday TypeScript improves this and allows
+ * looking adjacent to the factory function and we can get rid of this phantom namespace.
+ * @hidden
+ */
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export declare namespace JSX {
+  export {
+    TsdIntrinsicElements as IntrinsicElements,
+    JsxElement as Element,
+    JsxChildren as Children,
+  };
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    // This extends the IntrinsicElements interface defined in @ribajs/jsx
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface IntrinsicElements extends TsdIntrinsicElements {
+      //
+    }
+
+    export type Element = JsxElement;
+    export type Children = JsxChildren;
+  }
+}

packages/typedoc-theme/src/layouts/default.tsx

@@ -1,12 +1,10 @@
 import type { RenderTemplate } from "typedoc";
 import type { Reflection } from "typedoc";
-import { JSX } from "typedoc";
+import { JSX, Raw } from "../jsx/index.js";
 import type { PageEvent } from "typedoc";
 import { getDisplayName } from "../lib";
 import type { GjsifyThemeRenderContext } from "../theme-render-context";
 
-const Raw = JSX.Raw;
-
 export const defaultLayout = (
   context: GjsifyThemeRenderContext,
   template: RenderTemplate<PageEvent<Reflection>>,
@@ -28,13 +26,57 @@ export const defaultLayout = (
       />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+      {/* The page supports both light and dark color schemes, with light being default */}
+      <meta name="color-scheme" content="light dark" />
+
+      {/* Meta Theme Color is also supported on Safari and Chrome */}
+      <meta
+        name="theme-color"
+        content="#ffffff"
+        media="(prefers-color-scheme: light)"
+      />
+      <meta
+        name="theme-color"
+        content="#eeeeee"
+        media="(prefers-color-scheme: dark)"
+      />
+
+      <meta name="msapplication-TileColor" content="#4a86cf" />
+
       <link
-        rel="stylesheet"
-        href={context.relativeURL("assets/main.css", true)}
+        rel="shortcut icon"
+        href={context.relativeURL("assets/favicon.ico")}
+      />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href={context.relativeURL("assets/apple-touch-icon.png")}
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href={context.relativeURL("assets/favicon-32x32.png")}
       />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href={context.relativeURL("assets/favicon-16x16.png")}
+      />
+      <link
+        rel="manifest"
+        href={context.relativeURL("assets/site.webmanifest")}
+      />
+      <link
+        rel="mask-icon"
+        href={context.relativeURL("assets/safari-pinned-tab.svg")}
+        color="#4a86cf"
+      />
+
       <link
         rel="stylesheet"
-        href={context.relativeURL("assets/highlight.css", true)}
+        href={context.relativeURL("assets/main.css", true)}
       />
       {context.options.getValue("customCss") && (
         <link

packages/typedoc-theme/src/lib.tsx

@@ -10,7 +10,7 @@ import {
   SignatureReflection,
   TypeParameterReflection,
 } from "typedoc";
-import { JSX } from "typedoc";
+import { JSX } from "./jsx/index.js";
 
 export function stringify(data: unknown) {
   if (typeof data === "bigint") {
@@ -60,7 +60,7 @@ export function wbr(str: string): (string | JSX.Element)[] {
   let match: RegExpExecArray | null;
   let i = 0;
   while ((match = re.exec(str))) {
-    ret.push(match[0], <wbr />);
+    ret.push(match[0], (<wbr />) as JSX.Element);
     i += match[0].length;
   }
   ret.push(str.slice(i));
@@ -137,56 +137,59 @@ export function renderTypeParametersSignature(
   context: GjsifyThemeRenderContext,
   typeParameters: readonly TypeParameterReflection[] | undefined
 ): JSX.Element {
-  if (!typeParameters || typeParameters.length === 0) return <></>;
+  if (!typeParameters || typeParameters.length === 0)
+    return (<></>) as JSX.Element;
   const hideParamTypes = context.options.getValue("hideParameterTypesInTitle");
 
   if (hideParamTypes) {
     return (
       <>
         <span class="tsd-signature-symbol">{"<"}</span>
         {join(
-          <span class="tsd-signature-symbol">{", "}</span>,
+          (<span class="tsd-signature-symbol">{", "}</span>) as JSX.Element,
           typeParameters,
-          (item) => (
-            <>
-              {item.flags.isConst && "const "}
-              {item.varianceModifier ? `${item.varianceModifier} ` : ""}
-              <span class="tsd-signature-type tsd-kind-type-parameter">
-                {item.name}
-              </span>
-            </>
-          )
+          (item) =>
+            (
+              <>
+                {item.flags.isConst && "const "}
+                {item.varianceModifier ? `${item.varianceModifier} ` : ""}
+                <span class="tsd-signature-type tsd-kind-type-parameter">
+                  {item.name}
+                </span>
+              </>
+            ) as JSX.Element
         )}
         <span class="tsd-signature-symbol">{">"}</span>
       </>
-    );
+    ) as JSX.Element;
   }
 
   return (
     <>
       <span class="tsd-signature-symbol">{"<"}</span>
       {join(
-        <span class="tsd-signature-symbol">{", "}</span>,
+        (<span class="tsd-signature-symbol">{", "}</span>) as JSX.Element,
         typeParameters,
-        (item) => (
-          <>
-            {item.flags.isConst && "const "}
-            {item.varianceModifier ? `${item.varianceModifier} ` : ""}
-            <span class="tsd-signature-type tsd-kind-type-parameter">
-              {item.name}
-            </span>
-            {!!item.type && (
-              <>
-                <span class="tsd-signature-symbol"> extends </span>
-                {context.type(item.type)}
-              </>
-            )}
-          </>
-        )
+        (item) =>
+          (
+            <>
+              {item.flags.isConst && "const "}
+              {item.varianceModifier ? `${item.varianceModifier} ` : ""}
+              <span class="tsd-signature-type tsd-kind-type-parameter">
+                {item.name}
+              </span>
+              {!!item.type && (
+                <>
+                  <span class="tsd-signature-symbol"> extends </span>
+                  {context.type(item.type)}
+                </>
+              )}
+            </>
+          ) as JSX.Element
       )}
       <span class="tsd-signature-symbol">{">"}</span>
     </>
-  );
+  ) as JSX.Element;
 }
 
 export function camelToTitleCase(text: string) {

packages/typedoc-theme/src/partials/analytics.tsx

@@ -1,5 +1,5 @@
 import type { GjsifyThemeRenderContext } from "../theme-render-context";
-import { JSX } from "typedoc";
+import { JSX } from "../jsx/index.js";
 
 export function analytics(context: GjsifyThemeRenderContext) {
   const gaID = context.options.getValue("gaID");

packages/typedoc-theme/src/partials/anchor-icon.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "typedoc";
+import { JSX } from "../jsx/index.js";
 import type { GjsifyThemeRenderContext } from "../theme-render-context";
 
 export function anchorIcon(