Break apart CounterLink into IntrasiteLink and CounterDisplay

data/counter-components/冊.tsx

@@ -3,7 +3,8 @@
 // Modifications will be lost if they are made manually and not through the database.
 
 import React from "react";
-import CounterLink from "@jyosuushi/ui/components/CounterLink";
+import CounterDisplay from "@jyosuushi/ui/data-components/CounterDisplay";
+import IntrasiteLink from "@jyosuushi/ui/data-components/IntrasiteLink";
 
 export function CounterNotes(): React.ReactElement {
   return (
@@ -28,9 +29,12 @@ export function CounterNotes(): React.ReactElement {
           <rt>ほん</rt>
           <rp>)</rp>
         </ruby>
-        ) not counted with <CounterLink counterId="本" />? Prior to the
-        invention of paper, there was not a large corpus of writing in the
-        Japanese language.
+        ) not counted with{" "}
+        <IntrasiteLink id="本">
+          <CounterDisplay primaryText="" reading="" />
+        </IntrasiteLink>
+        ? Prior to the invention of paper, there was not a large corpus of
+        writing in the Japanese language.
         <sup id="fnref-1">
           <a className="footnote-ref" href="#fn-1">
             1

data/counter-components/口.tsx

@@ -3,7 +3,8 @@
 // Modifications will be lost if they are made manually and not through the database.
 
 import React from "react";
-import CounterLink from "@jyosuushi/ui/components/CounterLink";
+import CounterDisplay from "@jyosuushi/ui/data-components/CounterDisplay";
+import IntrasiteLink from "@jyosuushi/ui/data-components/IntrasiteLink";
 
 export function CounterNotes(): React.ReactElement {
   return (
@@ -106,7 +107,10 @@ export function CounterNotes(): React.ReactElement {
           <rp>)</rp>
         </ruby>{" "}
         or 振り, counting swords with the kanji 口 is typically a writing-only
-        style; when speaking, it's better to use <CounterLink counterId="本" />{" "}
+        style; when speaking, it's better to use{" "}
+        <IntrasiteLink id="本">
+          <CounterDisplay primaryText="" reading="" />
+        </IntrasiteLink>{" "}
         or 振り.
         <sup id="fnref-3">
           <a className="footnote-ref" href="#fn-3">

data/counter-components/本.tsx

@@ -3,7 +3,8 @@
 // Modifications will be lost if they are made manually and not through the database.
 
 import React from "react";
-import CounterLink from "@jyosuushi/ui/components/CounterLink";
+import CounterDisplay from "@jyosuushi/ui/data-components/CounterDisplay";
+import IntrasiteLink from "@jyosuushi/ui/data-components/IntrasiteLink";
 
 export function CounterNotes(): React.ReactElement {
   return (
@@ -135,7 +136,11 @@ export function CounterNotes(): React.ReactElement {
         </sup>
       </p>
       <p>
-        So, why are books counted with <CounterLink counterId="冊" /> instead of{" "}
+        So, why are books counted with{" "}
+        <IntrasiteLink id="冊">
+          <CounterDisplay primaryText="" reading="" />
+        </IntrasiteLink>{" "}
+        instead of{" "}
         <ruby>
           本<rp>(</rp>
           <rt>ほん</rt>
@@ -156,8 +161,11 @@ export function CounterNotes(): React.ReactElement {
           <rp>)</rp>
         </ruby>
         ; the legacy of this is seen today by the continued counting of all
-        books (regardless of style) using <CounterLink counterId="冊" />. The
-        meaning of "book" was a much later association with{" "}
+        books (regardless of style) using{" "}
+        <IntrasiteLink id="冊">
+          <CounterDisplay primaryText="" reading="" />
+        </IntrasiteLink>
+        . The meaning of "book" was a much later association with{" "}
         <ruby>
           本<rp>(</rp>
           <rt>ほん</rt>
@@ -217,7 +225,10 @@ export function CounterNotes(): React.ReactElement {
         as a counter is the image of something long and skinny. This provides a
         specific image to listeners when it is used. For example, buildings can
         be counted with a number of other counters, such as{" "}
-        <CounterLink counterId="軒" />; by choosing to refer to buildings with{" "}
+        <IntrasiteLink id="軒">
+          <CounterDisplay primaryText="" reading="" />
+        </IntrasiteLink>
+        ; by choosing to refer to buildings with{" "}
         <ruby>
           本<rp>(</rp>
           <rt>ほん</rt>

data/counter-components/歳.tsx

@@ -3,7 +3,8 @@
 // Modifications will be lost if they are made manually and not through the database.
 
 import React from "react";
-import CounterLink from "@jyosuushi/ui/components/CounterLink";
+import CounterDisplay from "@jyosuushi/ui/data-components/CounterDisplay";
+import IntrasiteLink from "@jyosuushi/ui/data-components/IntrasiteLink";
 
 export function CounterNotes(): React.ReactElement {
   return (
@@ -122,12 +123,15 @@ export function CounterNotes(): React.ReactElement {
       </p>
       <p>
         The only thing that this counter counts is age in years; to measure age
-        in months, you would use <CounterLink counterId="ヶ月" />. One minor
-        point worth mentioning is that newborn children enter life at ０歳.
-        Additionally, this counter can be used for both humans and animals:
-        animals will have their ages counted with 歳 as well, and there do not
-        appear to be any nuances around which kanji is used for non-humans.
-        However,{" "}
+        in months, you would use{" "}
+        <IntrasiteLink id="ヶ月">
+          <CounterDisplay primaryText="" reading="" />
+        </IntrasiteLink>
+        . One minor point worth mentioning is that newborn children enter life
+        at ０歳. Additionally, this counter can be used for both humans and
+        animals: animals will have their ages counted with 歳 as well, and there
+        do not appear to be any nuances around which kanji is used for
+        non-humans. However,{" "}
         <ruby>
           歳<rp>(</rp>
           <rt>さい</rt>

data/fence.json

@@ -1,6 +1,6 @@
 {
   "tags": ["data"],
   "exports": ["counters", "items"],
-  "imports": ["client"],
+  "imports": ["client", "client-data-components"],
   "dependencies": ["react"]
 }

scripts/exporter/counter-components/write-file.ts

@@ -16,9 +16,16 @@ function writeCounterComponentsFile(
 
   // Write out imports
   stream.write('import React from "react";\n');
-  if (componentUsage.counterLink) {
+
+  if (componentUsage.counterDisplay) {
+    stream.write(
+      'import CounterDisplay from "@jyosuushi/ui/data-components/CounterDisplay";\n'
+    );
+  }
+
+  if (componentUsage.intrasiteLink) {
     stream.write(
-      'import CounterLink from "@jyosuushi/ui/components/CounterLink";\n'
+      'import IntrasiteLink from "@jyosuushi/ui/data-components/IntrasiteLink";\n'
     );
   }
 

scripts/markdown/jsx-compiler/compiler.ts

@@ -31,7 +31,8 @@ function compileHastNodeToJsx(
   if (node.type === "text") {
     return {
       componentUsage: {
-        counterLink: false,
+        counterDisplay: false,
+        intrasiteLink: false,
       },
       jsx: isInsideReactNode ? node.value : `<>${node.value}</>`,
     };

scripts/markdown/jsx-compiler/utils.ts

@@ -1,7 +1,8 @@
 import { JsxComponentUsage } from "../types";
 
 const BASE_COMPONENT_USAGE: JsxComponentUsage = {
-  counterLink: false,
+  counterDisplay: false,
+  intrasiteLink: false,
 };
 
 export function mergeComponentUsages(

scripts/markdown/jsx-compiler/write-node-as-jsx.ts

@@ -1,8 +1,12 @@
 import {
+  COUNTER_DISPLAY_HAST_NODE_NAME,
+  COUNTER_DISPLAY_PROPS_KEY,
+  isCounterDisplayProperties,
   INTRASITE_LINK_HAST_NODE_NAME,
+  INTRASITE_LINK_PROPS_KEY,
   isIntrasiteLinkProperties,
 } from "../parsing/custom-nodes";
-import { JsxRepresentation } from "../types";
+import { JsxComponentUsage, JsxRepresentation } from "../types";
 
 import { mergeComponentUsages } from "./utils";
 
@@ -13,16 +17,30 @@ export function writeNodeAsJsx(
 ): JsxRepresentation {
   // Interpret the JSX tag
   let jsxTag: string;
-  let isCounterLink: boolean;
+  let ownComponentUsage: JsxComponentUsage;
   switch (tagName) {
+    case COUNTER_DISPLAY_HAST_NODE_NAME: {
+      jsxTag = "CounterDisplay";
+      ownComponentUsage = {
+        counterDisplay: true,
+        intrasiteLink: false,
+      };
+      break;
+    }
     case INTRASITE_LINK_HAST_NODE_NAME: {
-      jsxTag = "CounterLink";
-      isCounterLink = true;
+      jsxTag = "IntrasiteLink";
+      ownComponentUsage = {
+        counterDisplay: false,
+        intrasiteLink: true,
+      };
       break;
     }
     default: {
       jsxTag = tagName;
-      isCounterLink = false;
+      ownComponentUsage = {
+        counterDisplay: false,
+        intrasiteLink: false,
+      };
       break;
     }
   }
@@ -55,27 +73,20 @@ export function writeNodeAsJsx(
     openingTagPieces.push(`alt="${properties.alt}"`);
   }
 
-  if (isIntrasiteLinkProperties(properties.intrasiteLink)) {
-    openingTagPieces.push(`counterId="${properties.intrasiteLink.counterId}"`);
-
-    if (properties.intrasiteLink.specificKanji) {
-      openingTagPieces.push(
-        `specificKanji="${properties.intrasiteLink.specificKanji}"`
-      );
-    }
+  const intrasiteLinkProps = properties[INTRASITE_LINK_PROPS_KEY];
+  if (isIntrasiteLinkProperties(intrasiteLinkProps)) {
+    openingTagPieces.push(`id="${intrasiteLinkProps.id}"`);
+  }
 
-    if (properties.intrasiteLink.specificReading) {
-      openingTagPieces.push(
-        `specificReading="${properties.intrasiteLink.specificReading}"`
-      );
-    }
+  const counterDisplayProps = properties[COUNTER_DISPLAY_PROPS_KEY];
+  if (isCounterDisplayProperties(counterDisplayProps)) {
+    openingTagPieces.push(`primaryText="${counterDisplayProps.primaryText}"`);
+    openingTagPieces.push(`reading="${counterDisplayProps.reading}"`);
   }
 
   // Determine the component usage for this tree
   const allComponentUsages = children.map((child) => child.componentUsage);
-  allComponentUsages.push({
-    counterLink: isCounterLink,
-  });
+  allComponentUsages.push(ownComponentUsage);
   const combinedComponentUsage = mergeComponentUsages(allComponentUsages);
 
   // Handle children

scripts/markdown/parsing/custom-nodes.ts

@@ -1,31 +1,49 @@
 import { isIndexableObject } from "../utils";
 
-export const INTRASITE_LINK_HAST_NODE_NAME = "intrasiteLink";
+export const COUNTER_DISPLAY_HAST_NODE_NAME = "counterDisplay";
+export const COUNTER_DISPLAY_PROPS_KEY = "counterDisplay";
 
-export interface IntrasiteLinkProperties {
-  counterId: string;
-  specificKanji: string | null;
-  specificReading: string | null;
+export interface CounterDisplayProperties {
+  primaryText: string;
+  reading: string;
 }
 
-export function isIntrasiteLinkProperties(
+export function isCounterDisplayProperties(
   obj: unknown
-): obj is IntrasiteLinkProperties {
+): obj is CounterDisplayProperties {
   if (!isIndexableObject(obj)) {
     return false;
   }
 
-  if (typeof obj.counterId !== "string") {
+  if (typeof obj.primaryText !== "string") {
+    return false;
+  }
+
+  if (typeof obj.reading !== "string") {
     return false;
   }
 
-  if (obj.specificKanji !== null && typeof obj.specificKanji !== "string") {
+  return true;
+}
+
+export const INTRASITE_LINK_HAST_NODE_NAME = "intrasiteLink";
+export const INTRASITE_LINK_PROPS_KEY = "intrasiteLink";
+
+export interface IntrasiteLinkProperties {
+  id: string;
+  type: "counter";
+}
+
+export function isIntrasiteLinkProperties(
+  obj: unknown
+): obj is IntrasiteLinkProperties {
+  if (!isIndexableObject(obj)) {
     return false;
   }
 
-  if (obj.specificReading !== null && typeof obj.specificReading !== "string") {
+  if (obj.type !== "counter") {
     return false;
   }
 
-  return true;
+  return typeof obj.id === "string" && !!obj.id;
 }

scripts/markdown/parsing/intrasite-link-plugin.ts

@@ -5,7 +5,11 @@ import { Eat, RemarkParser } from "./interfaces";
 import PluginWarningsCollector from "./PluginWarningsCollector";
 
 import {
+  COUNTER_DISPLAY_HAST_NODE_NAME,
+  COUNTER_DISPLAY_PROPS_KEY,
+  CounterDisplayProperties,
   INTRASITE_LINK_HAST_NODE_NAME,
+  INTRASITE_LINK_PROPS_KEY,
   IntrasiteLinkProperties,
 } from "./custom-nodes";
 
@@ -115,13 +119,17 @@ function intrasiteLinkMarkdownPlugin(
 
       let isContentExported: boolean;
       let intrasiteLinkProps: IntrasiteLinkProperties;
+      let childProps: CounterDisplayProperties;
       switch (definition.type) {
         case "counter": {
           isContentExported = config.exportedCounterIds.has(definition.id);
           intrasiteLinkProps = {
-            counterId: definition.id,
-            specificKanji: definition.specificKanji,
-            specificReading: definition.specificReading,
+            id: definition.id,
+            type: "counter",
+          };
+          childProps = {
+            primaryText: definition.specificKanji || "", // TODO
+            reading: definition.specificReading || "", // TODO
           };
           break;
         }
@@ -145,11 +153,22 @@ function intrasiteLinkMarkdownPlugin(
       }
 
       return eat(value.substring(0, endMarkerIndex + 1))({
-        children: [],
+        children: [
+          {
+            children: [],
+            data: {
+              hName: COUNTER_DISPLAY_HAST_NODE_NAME,
+              hProperties: {
+                [COUNTER_DISPLAY_PROPS_KEY]: childProps,
+              },
+            },
+            type: "element",
+          },
+        ],
         data: {
           hName: INTRASITE_LINK_HAST_NODE_NAME,
           hProperties: {
-            intrasiteLink: intrasiteLinkProps,
+            [INTRASITE_LINK_PROPS_KEY]: intrasiteLinkProps,
           },
         },
         type: "intrasite-link",

scripts/markdown/types.ts

@@ -44,7 +44,8 @@ export enum MarkdownStyle {
 }
 
 export interface JsxComponentUsage {
-  counterLink: boolean;
+  counterDisplay: boolean;
+  intrasiteLink: boolean;
 }
 
 export interface JsxRepresentation {

src/client/fence.json

@@ -3,7 +3,7 @@
   "exports": [
     "interfaces",
     {
-      "modules": "ui/components/CounterLink",
+      "modules": "ui/data-components/**/*",
       "accessibleTo": ["data"]
     }
   ],