test wiki style reference for production

astro.config.mjs

@@ -4,6 +4,7 @@ import tailwind from '@astrojs/tailwind';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import {remarkReplaceLinks} from './src/plugins/remark-replace-links.ts';
+import {remarkReplaceTooltips} from './src/plugins/remark-dictionary-tooltips.ts';
 import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
@@ -12,7 +13,7 @@ export default defineConfig({
   site: 'https://freymaurer.github.io',
   base: 'astro-poc',
   markdown: {
-    remarkPlugins: [remarkReplaceLinks()],
+    remarkPlugins: [remarkReplaceLinks(), remarkReplaceTooltips()],
     rehypePlugins: [
       rehypeSlug,
       [

package.json

@@ -18,7 +18,8 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "unist-builder": "^4.0.0"
   },
   "devDependencies": {
     "daisyui": "^4.12.10"

src/pages/details/tools-and-services.md

@@ -10,12 +10,6 @@ image:
 tags: ["tools", "services", "community"]
 ---
 
-PLACEHOLDER
-
-<div class="tooltip" data-tip="hello">
-  <p class="underline decoration-dotted">Hover me</p>
-</div>
-
 [Back home]({{Internal_Home}})
 
 Here is some placeholder content in Markdown format for testing purposes. It includes various Markdown elements to ensure that your styling covers a wide range of formatting options.

src/pages/dictionary/annotation-table.md

@@ -0,0 +1,62 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: 'Annotation Table'
+pubDate: 2024-09-12
+description: 'Annotation tables are built from building blocks.'
+author: 'Kevin Frey'
+image:
+    url: 'https://docs.astro.build/assets/rose.webp'
+    alt: 'The Astro logo on a dark background with a pink glow.'
+tags: ["tools", "services", "community"]
+keywords: 'annotation table'
+url: 'annotation-table'
+---
+
+# Animis capillos carpitur papavera aquilam pronus sponte
+
+## Solis loquax me fila et cultro spicis
+
+Lorem markdownum mediam Argum ros quae nisi se saevior sonat, temptantes amanti,
+operis. Ire nomen et tamen pars longa sua dextera agros, tamen, illa ulta in
+tibi anxius *restatque nomen victam*. Fueris miram flumine, si iubemur quoque
+hoc desunt modo, *Vidi stare*, et dentibus *fuisti neque et*.
+
+1. Primo Stygii furor pellite
+2. Parentem canum
+3. Vos guttur collo erat oppressit picea unda
+
+## Retinet pulvere
+
+Spiramenta neve, pro ira perque Aurorae tota hominum sonuere. Sub perterrita
+iactis. Sed me ille inprudens alto **dimotis** sit vultus semper sic, sed hanc
+solum libasse famulus; consuetaque nuper silva. Esse cuncta o tamen securi
+addidit si Pelates vivit.
+
+- Non nec
+- Vellem meritis temptasse mutata
+- Nebulas clara arcum Peleu moenia
+- Parva Troiana hic tulit coniunx dextra
+- Area ferrea vulnerat isto sit resolutaque
+
+## Lignum inter maturus
+
+In nomen **aequora moenia**, lacu Minos neu ipse ergo. Modo *Iovem inmania
+monstri* experiar, habebam fugam Cereris. Quae mutatus pectora, sic oculos hic
+animi cur cervi, non si Iuppiter notatam. Reverentia facitis vivusque quanta.
+
+## Natasque per naiades si rudis meae pectora
+
+Firma procul mixtaeque movetur. Nunc Battum venenis. Poenas restatque mihi,
+eadem tradunt quid est eris **obstaret**; et vulnere mente: sub tauri carpens
+summam. Stricto unda est pondere votoque caespite; potentem frons.
+
+## Prensam adhuc illis thalamos ad viderat
+
+Est certe sunt manuum, vulnera arces spatium lacerat sanguine ingeniis velle
+iram multa ut poteram inducto Cerealia in ultima. Ocius iactatis. Valles et cum
+mea!
+
+Illa in viri aret est sic parte cognati stupuit, illa texerat illa agnus fama.
+Credere inhonestaque illius ne letalem facti alis sit sequuntur suae Cereris
+Thaumas: umquam. **Per** libido tamen siquid segnis cecidere primoque, ullo
+gemelliparae turbant Oresitrophos vocor.

src/pages/dictionary/building-block.md

@@ -0,0 +1,16 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: 'Building Block'
+pubDate: 2024-09-12
+description: 'Building blocks are cool!.'
+author: 'Kevin Frey'
+image:
+    url: 'https://docs.astro.build/assets/rose.webp'
+    alt: 'The Astro logo on a dark background with a pink glow.'
+tags: ["tools", "services", "community"]
+url: 'building-block'
+---
+
+In nomen **aequora moenia**, lacu Minos neu ipse ergo. Modo *Iovem inmania
+monstri* experiar, habebam fugam Cereris. Quae mutatus pectora, sic oculos hic
+animi cur cervi, non si Iuppiter notatam. Reverentia facitis vivusque quanta.

src/pages/dictionary/index.astro

@@ -0,0 +1,65 @@
+---
+import Layout from '../../layouts/BaseLayout.astro'
+const allVocabularies = await Astro.glob('./*.md');
+
+type Vocabulary = {
+  keyword: string;
+  title: string;
+  url: string | undefined;
+};
+
+// Initialize a map to categorize keywords by their starting letter
+const categorizedKeywords: Record<string, Vocabulary[]> = {};
+
+// Process each Markdown file
+allVocabularies.forEach((file) => {
+  // Extract necessary fields from the frontmatter of each file
+  let { title, keywords } = file.frontmatter;
+  const url = file.url;
+  // keywords can be null | string or string[]
+  if (!keywords) {
+    return;
+  } 
+  if (typeof keywords === 'string') {
+    keywords = [keywords];
+  }
+  // Map keywords to their respective title and URL
+  keywords.forEach((keyword: string) => {
+    const startingLetter = keyword[0].toUpperCase();
+
+    // Initialize the starting letter category if it doesn't exist
+    if (!categorizedKeywords[startingLetter]) {
+      categorizedKeywords[startingLetter] = [];
+    }
+
+    // Push the keyword information to its respective category
+    categorizedKeywords[startingLetter].push({ keyword, title, url });
+  });
+});
+
+// Sort the keywords in each category
+Object.keys(categorizedKeywords).forEach((letter) => {
+  categorizedKeywords[letter].sort((a, b) => a.keyword.localeCompare(b.keyword));
+});
+---
+
+<Layout title="Dictionary">
+  <div class="flex items-center flex-col grow p-3 py-5 lg:py-16">
+    <article class="prose lg:prose-lg w-full">
+      <ul>
+        {Object.keys(categorizedKeywords).sort().map((letter) => (
+          <li>
+            <strong>{letter}</strong>
+            <ul>
+              {categorizedKeywords[letter].map(({ keyword, title, url }) => (
+                <li>
+                  <strong>{keyword}</strong> <small><a href={url}>(↪{title})</a></small>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </article>
+  </div>
+</Layout>

src/pages/dictionary/json-ld.md

@@ -0,0 +1,62 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: 'json-ld'
+pubDate: 2024-09-12
+description: 'JSON-LD is a advanced json format.'
+author: 'Kevin Frey'
+image:
+    url: 'https://docs.astro.build/assets/rose.webp'
+    alt: 'The Astro logo on a dark background with a pink glow.'
+tags: ["tools", "services", "community"]
+keywords: ["json-ld", "testing"]
+url: "json-ld"
+---
+
+# Animis capillos carpitur papavera aquilam pronus sponte
+
+## Solis loquax me fila et cultro spicis
+
+Lorem markdownum mediam Argum ros quae nisi se saevior sonat, temptantes amanti,
+operis. Ire nomen et tamen pars longa sua dextera agros, tamen, illa ulta in
+tibi anxius *restatque nomen victam*. Fueris miram flumine, si iubemur quoque
+hoc desunt modo, *Vidi stare*, et dentibus *fuisti neque et*.
+
+1. Primo Stygii furor pellite
+2. Parentem canum
+3. Vos guttur collo erat oppressit picea unda
+
+## Retinet pulvere
+
+Spiramenta neve, pro ira perque Aurorae tota hominum sonuere. Sub perterrita
+iactis. Sed me ille inprudens alto **dimotis** sit vultus semper sic, sed hanc
+solum libasse famulus; consuetaque nuper silva. Esse cuncta o tamen securi
+addidit si Pelates vivit.
+
+- Non nec
+- Vellem meritis temptasse mutata
+- Nebulas clara arcum Peleu moenia
+- Parva Troiana hic tulit coniunx dextra
+- Area ferrea vulnerat isto sit resolutaque
+
+## Lignum inter maturus
+
+In nomen **aequora moenia**, lacu Minos neu ipse ergo. Modo *Iovem inmania
+monstri* experiar, habebam fugam Cereris. Quae mutatus pectora, sic oculos hic
+animi cur cervi, non si Iuppiter notatam. Reverentia facitis vivusque quanta.
+
+## Natasque per naiades si rudis meae pectora
+
+Firma procul mixtaeque movetur. Nunc Battum venenis. Poenas restatque mihi,
+eadem tradunt quid est eris **obstaret**; et vulnere mente: sub tauri carpens
+summam. Stricto unda est pondere votoque caespite; potentem frons.
+
+## Prensam adhuc illis thalamos ad viderat
+
+Est certe sunt manuum, vulnera arces spatium lacerat sanguine ingeniis velle
+iram multa ut poteram inducto Cerealia in ultima. Ocius iactatis. Valles et cum
+mea!
+
+Illa in viri aret est sic parte cognati stupuit, illa texerat illa agnus fama.
+Credere inhonestaque illius ne letalem facti alis sit sequuntur suae Cereris
+Thaumas: umquam. **Per** libido tamen siquid segnis cecidere primoque, ullo
+gemelliparae turbant Oresitrophos vocor.

src/plugins/remark-dictionary-tooltips.ts

@@ -0,0 +1,80 @@
+import yaml from 'yaml';
+import type { Root } from 'mdast';
+import type { Plugin, Transformer } from 'unified';
+import {findAndReplace, type FindAndReplaceList} from 'mdast-util-find-and-replace';
+import {u} from 'unist-builder';
+import { URLS } from '../statics';
+
+interface Frontmatter {
+  description: string;
+  url: string;
+}
+
+const postImportResult = import.meta.glob('/src/pages/dictionary/*.md', { eager: true, query: '?raw', import: 'default' });
+const entries = Object.values(postImportResult) as string[];
+
+function getFrontmatter(txt: string) {
+  const match = txt.match(/---\s*([\s\S]*?)\s*---/);
+  // frontmatter = frontmatter.join('\n');
+  // const yamlFrontmatter = yaml.parse(frontmatter);
+  if (match) {
+    // Extract the YAML part
+    const yamlFrontMatter = match[1].trim();
+    const frontMatterObject = yaml.parse(yamlFrontMatter); 
+    return frontMatterObject;
+  } else {
+    return;
+  }
+}
+
+const Tooltips = new Map<string, Frontmatter>();
+
+entries.map((entry: string) => { 
+  const frontmatter = getFrontmatter(entry);
+  // keywords can be string[] or string or null
+  if (!frontmatter || !frontmatter.keywords) {
+    return;
+  }
+  if (typeof frontmatter.keywords === 'string') {
+    const fMatterValue = {description: frontmatter.description, url: frontmatter.url};
+    Tooltips.set(frontmatter.keywords, fMatterValue);
+    return
+  } else if (Array.isArray(frontmatter.keywords)) {
+    frontmatter.keywords.map((keyword: string) => {
+      const fMatterValue = {description: frontmatter.description, url: frontmatter.url};
+      Tooltips.set(keyword, fMatterValue);
+    });
+  }
+});
+
+function createTooltip(key: string): string {
+  const tt: Frontmatter | undefined = Tooltips.get(key);
+  if (tt) {
+    return `<span class="tooltip" data-tip="${tt.description}">
+    <a href="${URLS.Internal_Home + "/dictionary/" + tt.url}" class="underline decoration-dotted">${key}</a>
+  </span>`;
+  } else {
+    return key;
+  }
+}
+
+// https://dev.to/ritek/the-power-of-remark-6h
+export function remarkReplaceTooltips(): Plugin<[], Root> {
+  const transformer: Transformer<Root> = (tree, file) => {
+
+    const replacements: FindAndReplaceList = Array.from(Tooltips.keys()).map(key => [
+      new RegExp(`\\b${key}\\b`, 'gi'), // Create a case-insensitive regex to match the keyword
+      (match: string) => {
+        // Use the key to create the tooltip HTML
+        return u('html', createTooltip(key));
+      }
+    ]);
+
+
+    findAndReplace(tree, replacements)
+	};
+
+	return function attacher() {
+		return transformer;
+	};
+}