Add random entries to frontpage

Closes #392

package.json

@@ -61,7 +61,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "node-mocks-http": "^1.16.0",
-    "old-norse-alphabet-sort": "^1.1.12",
+    "old-norse-alphabet-sort": "^1.1.13",
     "react-test-renderer": "^18.3.1",
     "spyrjari": "^1.0.4",
     "typescript": "^5.6.2",

src/components/WordLink/index.js → src/components/WordLink/index.tsx

@@ -1,7 +1,12 @@
 import Link from 'next/link'
+import type { DictionaryEntry } from 'lib/services/dictionary'
 import styles from './WordLink.module.scss'
 
-export default function WordLink({ data }) {
+interface WordLinkProps{
+  data: DictionaryEntry,
+}
+
+export default function WordLink({ data }: WordLinkProps) {
   const { slug, word } = data
 
   return (

src/components/WordList/index.tsx

@@ -0,0 +1,24 @@
+import WordLink from 'components/WordLink'
+import type { DictionaryEntry, DictionaryEntryDTO } from 'lib/services/dictionary'
+import { hasProperty } from 'spyrjari'
+import styles from './WordList.module.scss'
+
+interface WordListProps {
+  words: DictionaryEntryDTO[] | DictionaryEntry[],
+  showDefinition?: boolean
+}
+
+export default function WordList({ words, showDefinition = false }: WordListProps) {
+  return (
+    <ul className={styles.list}>
+      { words.map((word) => (
+        <li key={word.slug}>
+          <WordLink data={word} />
+          {showDefinition && hasProperty(word, 'definitions') && <p dangerouslySetInnerHTML={{
+            __html: word.definitions[0],
+          } } />}
+        </li>
+      )) }
+    </ul>
+  )
+}

src/lib/services/dictionary.ts

@@ -1,5 +1,6 @@
-import { getDictionary } from 'old-icelandic-zoega'
-import { DictionaryEntry as RawDictionaryEntry } from 'cleasby-vigfusson-dictionary'
+import { getDictionary, getNoMarkupDictionary } from 'old-icelandic-zoega'
+import { oldNorseSort } from 'old-norse-alphabet-sort'
+import type { DictionaryEntry as RawDictionaryEntry } from 'cleasby-vigfusson-dictionary'
 import { VALID_AS_FIRST } from 'old-norse-alphabet'
 import { slugifyWord, slugifyLetter } from '../utils/slugs'
 
@@ -59,6 +60,17 @@ export const getAllWords = (): DictionaryEntry[] => {
   return formattedWords
 }
 
+export const getAllWordsWithoutMarkup = (): DictionaryEntry[] => {
+  const words = getNoMarkupDictionary()
+
+  /**
+   * Add URL safe slugs.
+   */
+  const formattedWords = addSlugs(words)
+
+  return formattedWords
+}
+
 export const getByLetter = (letter: string): DictionaryEntryDTO[] => {
   const words = getAllWords()
   const byLetter = words
@@ -73,6 +85,16 @@ export const getWord = (slug: string): DictionaryEntry => (
   getAllWords().filter((entry) => entry.slug === slug)[0]
 )
 
+export const getRandomEntries = (): DictionaryEntry[] => (
+  // Return entries fit to be randomized "teasers"
+  // Therefore, content should be short, but not too short.
+  getAllWordsWithoutMarkup()
+    .sort(() => Math.random() - 0.5)
+    .filter((entry) => entry.definitions[0].length < 50 && entry.definitions[0].length > 15)
+    .slice(0, 36)
+    .sort((a, b) => oldNorseSort(a.word, b.word))
+)
+
 export const getAlphabet = (): AlphabetLetter[] => {
   const letters = [...VALID_AS_FIRST.filter((letter) => letter !== 'ǫ' && letter !== 'ø'), 'ö']
 

src/pages/index.tsx

@@ -1,14 +1,18 @@
 // Services.
 import Link from 'next/link'
-import { AlphabetLetter, getAlphabet } from 'lib/services/dictionary'
+import {
+  type AlphabetLetter, type DictionaryEntry, getAlphabet, getRandomEntries,
+} from 'lib/services/dictionary'
 
 // Components.
 import Layout from 'components/Layout'
 import ContentArea from 'components/ContentArea'
 import SampleText from 'components/SampleText'
+import WordList from 'components/WordList'
 
 interface IndexProps {
   letters: AlphabetLetter[]
+  words: DictionaryEntry[],
 }
 
 interface IndexStaticProps {
@@ -17,15 +21,17 @@ interface IndexStaticProps {
 
 export async function getStaticProps(): Promise<IndexStaticProps> {
   const letters = getAlphabet()
+  const randomEntries = getRandomEntries()
 
   return {
     props: {
       letters,
+      words: randomEntries,
     },
   }
 }
 
-export default function Index({ letters }: IndexProps) {
+export default function Index({ letters, words }: IndexProps) {
   return (
     <Layout letters={letters} type='page' content={null}>
       <ContentArea>
@@ -51,6 +57,9 @@ export default function Index({ letters }: IndexProps) {
 
         <SampleText />
       </ContentArea>
+
+      <h3>Random entries from the dictionary:</h3>
+      <WordList words={words} showDefinition={true}/>
     </Layout>
   )
 }