Replace younger-futhark with Riimut

Also parse runes on build / server instead of client side. Closes #391
stscoundrel · Nov 16, 2024 · a635299 · a635299
1 parent 273da46
commit a635299
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 25 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/package.json b/package.json
@@ -33,12 +33,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reset-css": "^5.0.2",
+    "riimut": "^0.9.1",
     "sass": "^1.79.4",
     "scandinavian-dictionary-crosslinker": "^0.7.0",
     "sitemap": "7.1.1",
     "slugify": "^1.6.6",
-    "teljari": "^1.1.1",
-    "younger-futhark": "^1.2.5"
+    "teljari": "^1.1.1"
   },
   "devDependencies": {
     "@types/cleasby-vigfusson-dictionary": "^1.0.2",

diff --git a/...nts/WordDefinition/WordDefinition.test.js → ...ts/WordDefinition/WordDefinition.test.tsx b/...nts/WordDefinition/WordDefinition.test.js → ...ts/WordDefinition/WordDefinition.test.tsx
@@ -32,26 +32,42 @@ const crosslinks = [
     source: 'old-norwegian',
   },
 ]
+const runes = 'ᛚᛁᚢᚾᛁᛏᚢᚱᚱ'
 
 describe('WordDefinition component', () => {
   test('Does not crash', () => {
     const div = document.createElement('div')
     const root = ReactDOM.createRoot(div)
     root.render(
-      <WordDefinition data={word} abbreviations={abbreviations} crosslinks={crosslinks} />,
+      <WordDefinition
+        entry={word}
+        abbreviations={abbreviations}
+        crosslinks={crosslinks}
+        runes={runes}
+      />,
     )
   })
 
   test('Matches snapshot', () => {
     const tree = renderer.create(
-      <WordDefinition data={word} abbreviations={abbreviations} crosslinks={crosslinks} />,
+      <WordDefinition
+        entry={word}
+        abbreviations={abbreviations}
+        crosslinks={crosslinks}
+        runes={runes}
+      />,
     ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
   test('Has correct label', () => {
     const tree = renderer.create(
-      <WordDefinition data={word} abbreviations={abbreviations} crosslinks={crosslinks} />,
+      <WordDefinition
+        entry={word}
+        abbreviations={abbreviations}
+        crosslinks={crosslinks}
+        runes={runes}
+      />,
     )
     const { root } = tree
 
@@ -60,7 +76,12 @@ describe('WordDefinition component', () => {
 
   test('Has correct amount of definitions', () => {
     const tree = renderer.create(
-      <WordDefinition data={word} abbreviations={abbreviations} crosslinks={crosslinks} />,
+      <WordDefinition
+        entry={word}
+        abbreviations={abbreviations}
+        crosslinks={crosslinks}
+        runes={runes}
+      />,
     )
     const { root } = tree
 

diff --git a/...__snapshots__/WordDefinition.test.js.snap → ..._snapshots__/WordDefinition.test.tsx.snap b/...__snapshots__/WordDefinition.test.js.snap → ..._snapshots__/WordDefinition.test.tsx.snap
diff --git a/src/components/WordDefinition/index.js → src/components/WordDefinition/index.tsx b/src/components/WordDefinition/index.js → src/components/WordDefinition/index.tsx
@@ -1,12 +1,22 @@
-import { lettersToRunes } from 'younger-futhark'
 import { capitalize } from 'lib/utils/strings'
-import { addAbbreviationsToContent } from 'lib/services/abbreviations'
+import { type Abbreviation, addAbbreviationsToContent } from 'lib/services/abbreviations'
 import Abbreviations from 'components/Abbreviations'
 import Crosslinks from 'components/Crosslinks'
+import type { DictionaryEntry } from 'lib/services/dictionary'
+import type { Crosslink } from 'scandinavian-dictionary-crosslinker'
 import styles from './WordDefinition.module.scss'
 
-export default function WordDefinition({ data, abbreviations, crosslinks }) {
-  const { word, definitions } = data
+interface WordDefinitionProps{
+  entry: DictionaryEntry,
+  abbreviations: Abbreviation[],
+  crosslinks: Crosslink[],
+  runes: string,
+}
+
+export default function WordDefinition({
+  entry, abbreviations, crosslinks, runes,
+}: WordDefinitionProps) {
+  const { word, definitions } = entry
 
   return (
     <article className={styles.section}>
@@ -30,12 +40,12 @@ export default function WordDefinition({ data, abbreviations, crosslinks }) {
             dangerouslySetInnerHTML={{
               __html: addAbbreviationsToContent(definition, abbreviations),
             } }
-          ></dd>
+          />
         </dl>
       ))}
 
       <p>Possible runic inscription in <em>Younger Futhark:</em>
-          <span className={styles.rune}>{ lettersToRunes(word) }</span>
+          <span className={styles.rune}>{ runes }</span>
         </p>
 
       <Abbreviations abbreviations={abbreviations} />

diff --git a/src/pages/word/[word].tsx b/src/pages/word/[word].tsx
@@ -2,9 +2,10 @@ import { useRouter } from 'next/router'
 
 // Services.
 import {
-  getWord, getAlphabet, DictionaryEntry, AlphabetLetter,
+  getWord, getAlphabet, type DictionaryEntry, type AlphabetLetter,
 } from 'lib/services/dictionary'
 import { getAbbreviations } from 'lib/services/abbreviations'
+import { youngerFuthark } from 'riimut'
 
 // Utils.
 import { redirect404 } from 'lib/utils/redirect-404'
@@ -13,7 +14,7 @@ import { redirect404 } from 'lib/utils/redirect-404'
 import Layout from 'components/Layout'
 import WordDefinition from 'components/WordDefinition'
 import Button from 'components/Button'
-import { Crosslink, getCrossLinks } from 'lib/services/crosslinks'
+import { type Crosslink, getCrossLinks } from 'lib/services/crosslinks'
 
 interface Abbreviation {
   abbreviation: string,
@@ -25,6 +26,7 @@ interface WordPageProps {
   letters: AlphabetLetter[],
   abbreviations: Abbreviation[], // TODO: real typing in service.
   crosslinks: Crosslink[],
+  runes: string,
 }
 
 export async function getStaticPaths() {
@@ -48,19 +50,21 @@ export async function getStaticProps({ params }) {
   const letters = getAlphabet()
   const abbreviations = getAbbreviations(entry)
   const crosslinks = getCrossLinks(entry)
+  const runes = youngerFuthark.lettersToRunes(entry.word)
 
   return {
     props: {
       entry,
       letters,
       abbreviations,
       crosslinks,
+      runes,
     },
   }
 }
 
 export default function Word({
-  entry, letters, abbreviations, crosslinks,
+  entry, letters, abbreviations, crosslinks, runes,
 }: WordPageProps) {
   const router = useRouter()
 
@@ -70,7 +74,12 @@ export default function Word({
 
   return (
     <Layout type="word" content={entry} letters={letters}>
-      <WordDefinition data={entry} abbreviations={abbreviations} crosslinks={crosslinks}/>
+      <WordDefinition
+        entry={entry}
+        abbreviations={abbreviations}
+        crosslinks={crosslinks}
+        runes={runes}
+      />
       <Button text="Back" action={() => router.back()} />
     </Layout>
   )

diff --git a/tests/unit/pages/word.test.tsx b/tests/unit/pages/word.test.tsx
@@ -50,6 +50,8 @@ describe('Word page: render & usage', () => {
     },
   ]
 
+  const runes = 'ᛚᛁᚢᚾᛁᛏᚢᚱᚱ'
+
   const alphabet = getAlphabet()
 
   test('Does not crash', () => {
@@ -61,6 +63,7 @@ describe('Word page: render & usage', () => {
         letters={alphabet}
         abbreviations={abbreviations}
         crosslinks={crosslinks}
+        runes={runes}
       />,
     )
   })
@@ -72,6 +75,7 @@ describe('Word page: render & usage', () => {
         letters={alphabet}
         abbreviations={abbreviations}
         crosslinks={crosslinks}
+        runes={runes}
       />,
     ).toJSON()
     expect(tree).toMatchSnapshot()
@@ -91,6 +95,7 @@ describe('Word page: render & usage', () => {
         letters={alphabet}
         abbreviations={abbreviations}
         crosslinks={crosslinks}
+        runes={runes}
       />,
     )
 
@@ -149,6 +154,7 @@ describe('Word page: data fetching', () => {
             url: 'https://old-norwegian-dictionary.vercel.app/word/leynidyrr',
           },
         ],
+        runes: 'ᛚᛁᚢᚾᛁᛏᚢᚱᚱ',
       },
     }
 

diff --git a/yarn.lock b/yarn.lock
@@ -5927,6 +5927,11 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
+riimut@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/riimut/-/riimut-0.9.1.tgz#1522970a62d1ac3dacdf405e18e25a244aac40fc"
+  integrity sha512-ifqTWJLoAjneRuhP7k54Nn2pHv7SbcaggXJjj0zaHHSWdxO5Yqs6w5xCKKVG7Ie2Uca7nlXqulxXzf+EH6tIYQ==
+
 rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -6268,7 +6273,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6357,7 +6371,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7079,7 +7100,7 @@ workbox-window@6.6.1, workbox-window@^6.5.4:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -7097,6 +7118,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -7174,8 +7204,3 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
-
-younger-futhark@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/younger-futhark/-/younger-futhark-1.2.5.tgz#45f9d7d1ee41511644649ef4375e70bce1c5c1a4"
-  integrity sha512-aYyruf0lsXHl8dgYPmogZnmXTYl/dM7TSCgg+J0/0KRHigJBp3a8UdsKmu5gNTuJcLQXbDGxuf+x7p/q0WiU7Q==