Update help page

content/fit-standards/bedienungshilfe.md

@@ -9,11 +9,11 @@ Hier erfahren Sie mehr zur Bedienung dieser Informationsplattform.
 
 Diese Informationsplattform ist ein Schritt zu mehr Transparenz über die föderalen Standardisierungsvorhaben im Kontext des IT-Planungsrates.
 
-Hier finden Sie eine Auflistung aller Föderalen IT-Standards (FIT-Standards) mit Filterfunktionen, sobald diese durch in einem ersten Schritt – einer Bedarfsmeldung – angemeldet werden. Danach begleitet die Informationsplattform einen FIT-Standard bis zu seinem Lebensende und einer finalen Dekommissionierung. Dabei wird jeder mögliche Status wird in einen [Lebenszyklus](#_Beschreibung_Lebenszyklus) eingeordnet.
+Hier finden Sie eine Auflistung aller Föderalen IT-Standards (FIT-Standards) mit Filterfunktionen, sobald diese durch in einem ersten Schritt – einer Bedarfsmeldung – angemeldet werden. Danach begleitet die Informationsplattform einen FIT-Standard bis zu seinem Lebensende und einer finalen Dekommissionierung. Dabei wird jeder mögliche Status wird in einen [Lebenszyklus](#Beschreibung_Lebenszyklus) eingeordnet.
 
 Für jeden FIT-Standard sind sowohl eine Kurzbeschreibung als auch eine Detailseite verfügbar, die sukzessive weitere Informationen bieten – vom Bedarfsträger über das Umsetzungsteam bis zum späteren Betreiber. Kontaktdaten und weiterführende Informationen sowie zugehörige Artefakte ermöglichen eine umfassende Information über den FIT-Standard.
 
-## Was ist der Lebenszyklus?
+<h2 id="Beschreibung_Lebenszyklus">Was ist der Lebenszyklus?</h2>
 
 Zentrales Element der Standardisierungsagenda zur Darstellung des Status eines FIT-Standards ist der Lebenszyklus, wie er in der folgenden Grafik dargestellt ist:
 
@@ -47,7 +47,7 @@ _**Termine (bevorstehend/geplant)**_ und _**Termine (historisch)**_ tragen nach
 
 _ **Weiterführende Informationen** _ verlinkt zu Webseiten der Betreiber mit Zusatzinformationen und/oder entsprechenden Dokumenten-Downloads.
 
-Die rechte Seitenleiste stellt in der ersten Box _ **Kontaktinformationen** _ der Akteure/Rollen des FIT-Standards zur Verfügung. Hierbei kann es sich um Bedarfsträger, Umsetzungsteam oder Betreiber des FIT-Standards handeln.
+Die rechte Seitenleiste stellt in der ersten Box _**Kontaktinformationen**_ der Akteure/Rollen des FIT-Standards zur Verfügung. Hierbei kann es sich um Bedarfsträger, Umsetzungsteam oder Betreiber des FIT-Standards handeln.
 
 In der Box _ **Artefakte** _ können vorhandene/verfügbare Dokumente zum FIT-Standard aufgerufen und/oder heruntergeladen werden.
 

pages/fit-standards/hilfe.tsx

@@ -11,7 +11,7 @@ import loadAndPrepareHelpfileMarkdown from 'shared/fit-standards/get-helpfile-co
 
 export default function ({ contentsString }) {
     return (
-        <div className='container it-standards'>
+        <div className='container helpfile'>
             <div className="">
                 <div className="max-w-2xl mx-auto px-3 sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-12 lg:gap-8">
                     <div className="col-start-1 col-span-12 ">

shared/fit-standards/get-helpfile-content.ts

@@ -2,27 +2,61 @@
  * Reads the content from the markdown file /content/fit-standards/bedienungshilfe.md
  * and returns it as HTML string
  */
+
 import fs from 'fs'
 import path from 'path'
 import { remark } from 'remark'
 import html from 'remark-html'
 
-export default function loadAndPrepareHelpfileMarkdown() {
-    // Load content from Markdown file
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeDocument from 'rehype-document'
+import rehypeFormat from 'rehype-format'
+import rehypeStringify from 'rehype-stringify'
+import { read } from 'to-vfile'
+
+/*
+const result = unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeDocument)
+    .use(rehypeFormat)
+    .use(rehypeStringify)
+    .process( read(path.join(process.cwd(), 'content/fit-standards/bedienungshilfe.md'), )
+
+export default function loadAndPrepareMarkdown() {
+    return result
+}
+*/
+
+export default function loadAndPrepareMarkdown() {
+    const markdownFileContent: string = loadMarkdown()
+    const content: string = prepareContentFromMarkdown(markdownFileContent)
+    return content
+}
+
+function loadMarkdown() {
     const fullPath: string = path.join(process.cwd(), 'content/fit-standards/bedienungshilfe.md')
     const markdownContent: string = fs.readFileSync(fullPath, 'utf8')
+    return markdownContent
+}
 
+function prepareContentFromMarkdown(markdownContent: string) {
     // eslint-disable-next-line no-unused-vars
     const [header, metadata, text] = markdownContent.replace(/\r\n/g, '\n').split('---')
-
+    // const content: ServiceContent = parseMetadata(metadata)
     return parseTextToHTMLString(text)
 }
 
 function parseTextToHTMLString(markdownText: string) {
     const sanitizedMarkdownText: string = sanitizeMarkdownText(markdownText)
-    const processedContent = remark().use(html).processSync(sanitizedMarkdownText)
+    const processedContent = remark().use(html, { sanitize: false }).processSync(sanitizedMarkdownText)
     const htmlContent: string = processedContent.toString()
-    return htmlContent
+
+    // Add 'rel="noopener" target="_blank"' to external links
+    // return htmlContent
+    return htmlContent.replaceAll(/<a href="http(\S+)">/mg, '<a href="http$1" rel="noopener" target="_blank">')
 }
 
 function sanitizeMarkdownText(markdownText: string) {