feature: add further reading links (#42)

split navigation for less repeated code remove string concatination downgrade json plugin for eslint fix structure in it.yml fixing stylelint style issues eslint fixes fix dark/light mode fixes idrinth-api-bench/issues#1085
idrinth-api-bench · Jun 2, 2024 · 8d7ee37 · 8d7ee37
1 parent 912c79d
commit 8d7ee37
Show file tree

Hide file tree

Showing 26 changed files with 317 additions and 250 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -18,6 +18,9 @@ ignorePatterns:
   - 'src/routes.tsx'
 root: true
 parser: "@typescript-eslint/parser"
+settings:
+  react:
+    version: detect
 rules:
   "react-refresh/only-export-components":
     - "warn"

diff --git a/index.html b/index.html
@@ -18,11 +18,12 @@
     <link rel="preload" href="/assets/socials/x.svg">
     <link rel="preload" href="/assets/socials/youtube.svg">
     <link rel="preload" href="node_modules/@idrinth-api-bench/assets/iab.svg"/>
-    <style>body,html{background: #333}@media screen and(prefers-color-scheme:light){body,html{background: #ccc}}head,style,script{display:none !important}</style>
+    <style id="defaults">body,html{background: #333}@media screen and(prefers-color-scheme:light){body,html{background: #ccc}}head,style,script{display:none !important}</style>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
     <script type="module" src="/src/tracking.ts"></script>
+    <script>setTimeout(()=>{const n=document.getElementById('defaults');n.parentNode.removeChild(n)}, 500)</script>
   </body>
 </html>
diff --git a/language/en.yml b/language/en.yml
@@ -52,6 +52,10 @@ socials:
   linkedin:
     title: "@idrinth/api-bench on LinkedIn"
     alt: "LinkedIn"
+    title0: "@idrinth-api-bench  user and maintainer group"
+    text0: "User-Group"
+    title1: "idrinth-api-bench organisation"
+    text1: "IAB Org"
   open-sauced:
     title: "@idrinth/api-bench projects on OpenSauced"
     alt: "OpenSauced"
@@ -584,8 +588,9 @@ cookie-consent:
       title: "YouTube"
       description: "We will load videos from www.youtube-nocookie.com to directly play on the site."
 
-language-switch:
-  aria: "Language switch"
+general:
+  language-switch: "Language switch"
+  more: "More here"
 
 languages:
   en: "English"

diff --git a/language/it.yml b/language/it.yml
@@ -326,19 +326,32 @@ middlewares:
   description: "I middleware utilizzano un percorso file assoluto per essere caricati. I seguenti caratteri verranno utilizzati per espandere short form:"
   provided:
     title: "Middleware forniti"
-    encoding: "JSON e form encode"
-    access: "gestione degli access token"
-    csrf: "gestione del csrf-header"
-    2xx: "controllo dello status 2xx"
-    403: "controllo dello status 403"
-    404: "controllo dello status 404"
-    user-agent: "user-agent"
-    cookies: "cookies"
-    json: "json-validator"
-    xml: "xml-validator"
-    silent-server-validator: "silent-server-validator"
-    success-check: "controllo della risposta success"
-    failure-check: "controllo della risposta failure"
+    encoding:
+      title: "JSON e form encode"
+    access:
+      title: "gestione degli access token"
+    csrf:
+      title: "gestione del csrf-header"
+    2xx:
+      title: "controllo dello status 2xx"
+    403:
+      title: "controllo dello status 403"
+    404:
+      title: "controllo dello status 404"
+    user-agent:
+      title: "user-agent"
+    cookies:
+      title: "cookies"
+    json:
+      title: "json-validator"
+    xml:
+      title: "xml-validator"
+    silent-server-validator:
+      title: "silent-server-validator"
+    success-check:
+      title: "controllo della risposta success"
+    failure-check:
+      title: "controllo della risposta failure"
   custom:
     title: "Middleware Personalizzato"
     description: "Per il middleware personalizzato, implementare la seguente interfaccia. La Prepare viene chiamata prima di inviare una richiesta, la Process dopo una richiesta. Se viene generato un errore durante la process, eventuali ulteriori convalide vengono ignorate."

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "@commitlint/cli": "^19.2.1",
     "@idrinth/duplicate-style-check": "^1.1.0",
     "@idrinth-api-bench/react-file-based-routes": "^1.3.0",
-    "@idrinth-api-bench/inline-critical-css": "^1.1.4",
+    "@idrinth-api-bench/inline-critical-css": "^1.1.5",
     "@idrinth-api-bench/rollup-plugin-react-modular-css": "^1.2.2",
     "@idrinth/typescript-language-from-yaml": "^1.3.0",
     "@types/chai": "^4.3.16",
@@ -85,7 +85,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-json": "^4.0.0",
+    "eslint-plugin-json": "^3.1.0",
     "fta-cli": "^2.0.0",
     "http-server": "^14.1.1",
     "knip": "^5.16.0",

diff --git a/src/components/Further.tsx b/src/components/Further.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import Lang from './lang.tsx';
+import {
+  NavLink,
+} from 'react-router-dom';
+
+const Further = ({
+  children,
+}: {children: string,},) => <NavLink to={children}>
+  <Lang lnkey={'general.more'}/>
+</NavLink>;
+
+export default Further;
diff --git a/src/components/code-unit.tsx b/src/components/code-unit.tsx
@@ -3,6 +3,7 @@ import languageKey from '../locales/language-key.ts';
 import Content from './content.tsx';
 import Code from './code.tsx';
 import Lang from './lang.tsx';
+import Further from './Further.tsx';
 
 interface CardProps {
   text: languageKey;
@@ -11,6 +12,7 @@ interface CardProps {
   language: 'bash' | 'typescript' | 'markdown';
   prefix?: languageKey;
   postfix?: languageKey;
+  more?: string;
 }
 
 const CodeUnit = ({
@@ -19,11 +21,13 @@ const CodeUnit = ({
   children,
   language,
   prefix,
+  more,
   postfix,
 }: CardProps,) => <Content level={level} text={text}>
   {prefix && <p><Lang lnkey={prefix}/></p>}
   <Code language={language}>{children}</Code>
   {postfix && <p><Lang lnkey={postfix}/></p>}
+  {more && <Further>{more}</Further>}
 </Content>;
 
 export default CodeUnit;
diff --git a/src/components/content-unit.tsx b/src/components/content-unit.tsx
@@ -4,17 +4,20 @@ import React, {
 import Lang from './lang.tsx';
 import languageKey from '../locales/language-key.ts';
 import Content from './content.tsx';
+import Further from './Further.tsx';
 
 interface CardProps {
   text: languageKey;
   level: 'h1'|'h2'|'h3'|'h4'|'h5'|'h6';
   children: string|languageKey;
+  more?: string;
 }
 
 const ContentUnit = ({
   text,
   level,
   children,
+  more,
 }: CardProps,) => {
   const GenerateContent = (): ReactNode => {
     const keys: languageKey[] = children.split(' ',) as languageKey[];
@@ -24,6 +27,7 @@ const ContentUnit = ({
   };
   return <Content level={level} text={text}>
     <GenerateContent/>
+    { more && <Further>{more}</Further>}
   </Content>;
 };
 

diff --git a/src/components/dark-mode-button.tsx b/src/components/dark-mode-button.tsx
@@ -49,7 +49,9 @@ const DarkModeButton = ({
     aria-label={isDarkMode ? 'Light Mode' : 'Dark Mode'}
     onClick={toggleLightDarkMode}
   >
-    {isDarkMode ? <IoSunny width={25} height={25}/> : <IoMoon width={25} height={25}/>}
+    {isDarkMode
+      ? <IoSunny width={25} height={25}/>
+      : <IoMoon width={25} height={25}/>}
   </button>;
 };
 export default DarkModeButton;
diff --git a/src/components/faq-item.scss b/src/components/faq-item.scss
@@ -5,6 +5,7 @@
 
   & > button {
     width: 100%;
+
     &:focus {
       box-shadow: 0 0 2em var(--shadow);
     }