Pfad-Link-Vergleich deckt nun mehr Möglichkeiten ab.

Raumstatusbild angefangen.

Prefix von Überschriften entfernt.

Links sind jetzt nur noch durch hovern unterstrichen.

Signed-off-by: xoy <felix@erstfeld.net>

gatsby-config.js

@@ -36,7 +36,7 @@ module.exports = {
             resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 1000,
-              pathPrefix: '/ctdo',
+              // pathPrefix: '/ctdo',
             },
           },
         ],

package.json

@@ -16,17 +16,17 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.5.1",
     "@mdx-js/react": "^1.5.1",
-    "gatsby": "^3.5.0",
-    "gatsby-plugin-catch-links": "^3.5.0",
-    "gatsby-plugin-image": "^1.5.0",
-    "gatsby-plugin-mdx": "^2.5.0",
-    "gatsby-plugin-react-helmet": "^4.5.0",
-    "gatsby-plugin-sharp": "^3.5.0",
-    "gatsby-remark-images": "^5.2.0",
-    "gatsby-source-filesystem": "^3.5.0",
-    "gatsby-transformer-remark": "^4.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "gatsby": "^4.16.0",
+    "gatsby-plugin-catch-links": "^4.16.0",
+    "gatsby-plugin-image": "^2.16.0",
+    "gatsby-plugin-mdx": "^3.16.0",
+    "gatsby-plugin-react-helmet": "^5.16.0",
+    "gatsby-plugin-sharp": "^4.16.0",
+    "gatsby-remark-images": "^6.16.0",
+    "gatsby-source-filesystem": "^4.16.0",
+    "gatsby-transformer-remark": "^5.16.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {

src/components/nav.js

@@ -13,6 +13,24 @@ let pages = [
   ['supporte uns', '/support/', ''],
 ]
 
+function PathCheck(path, link) {
+  if(path === link) {
+    return ' ' + navStyles.navItemActive
+  }
+
+  if(link !== '/' && path !== '/') {
+    if(path.includes(link)){
+      return ' ' + navStyles.navItemActive
+    }
+  
+    if(link.includes(path)){
+      return ' ' + navStyles.navItemActive
+    }
+  }
+
+  return ''
+}
+
 export default function Nav({ path }) {
   // nav items should always be active in the staticly generated html
   const isSSR = typeof window === 'undefined'
@@ -44,7 +62,7 @@ export default function Nav({ path }) {
           {pages.map(([title, link, device]) => (
             <Link
               key={title}
-              className={navStyles.navItem + activeClasses(link) + ' ' + device}
+              className={navStyles.navItem + PathCheck(path, link) + ' ' + device}
               activeClassName={navStyles.navItemActive}
               to={`${link}`}
             >

src/components/roomState.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { StaticImage } from 'gatsby-plugin-image'
 
 const roomStateData = {
   loading: { text: '...', color: 'white' },
@@ -7,6 +8,24 @@ const roomStateData = {
   error: { text: 'laut API kaputt', color: '#ee3333' },
 }
 
+function GetRightImage(openState) {
+  if(openState === 'loading') {
+    return <StaticImage src='../images/warning.png' width='250' height='250' alt='...' />
+  }
+  
+  if(openState === 'open'){
+    return <StaticImage src='../images/tuer_offen.png' width='250' height='250' alt='offen' />
+  }
+  
+  if(openState === 'closed'){
+    return <StaticImage src='../images/tuer_zu.png' width='250' height='250' alt='geschlossen' />
+  }
+  
+  if(openState === 'error'){
+    return <StaticImage src='../images/warning.png' width='250' height='250' alt='laut API kaputt' />
+  }
+}
+
 export default function RoomState() {
   const [openState, setOpenState] = useState('loading')
 
@@ -25,12 +44,13 @@ export default function RoomState() {
   }, [])
 
   const isSSR = typeof window === 'undefined'
+  const useIMG = false
   return (
     <a
       href="https://status.ctdo.de/"
       style={{ color: roomStateData[openState].color }}
     >
-      {isSSR ? '<Benötigt JavaScript>' : roomStateData[openState].text}
+      {isSSR ? '<Benötigt JavaScript>' : useIMG ? GetRightImage(openState) : roomStateData[openState].text}
     </a>
   )
 }

src/styles/global.css

@@ -22,6 +22,11 @@ body {
 
 a {
   color: #22bb22;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
 }
 
 a:visited {

src/templates/blogTemplate.js

@@ -5,10 +5,10 @@ import { MDXRenderer } from 'gatsby-plugin-mdx'
 import { MDXProvider } from '@mdx-js/react'
 import { Helmet } from 'react-helmet'
 
-const MdLeakH1 = (props) => <h2 {...props}># {props.children}</h2>
-const MdLeakH2 = (props) => <h3 {...props}>## {props.children}</h3>
-const MdLeakH3 = (props) => <h4 {...props}>### {props.children}</h4>
-const MdLeakH4 = (props) => <h5 {...props}>#### {props.children}</h5>
+const MdLeakH1 = (props) => <h2 {...props}>{props.children}</h2>
+const MdLeakH2 = (props) => <h3 {...props}>{props.children}</h3>
+const MdLeakH3 = (props) => <h4 {...props}>{props.children}</h4>
+const MdLeakH4 = (props) => <h5 {...props}>{props.children}</h5>
 
 const components = {
   h1: MdLeakH1,

src/templates/siteTemplate.js

@@ -8,10 +8,10 @@ import { Helmet } from 'react-helmet'
 const ide =
   'https://repos.ctdo.de/neri/ctdo-homepage/_edit/master/src/webpages/'
 
-const MdLeakH1 = (props) => <h2 {...props}># {props.children}</h2>
-const MdLeakH2 = (props) => <h3 {...props}>## {props.children}</h3>
-const MdLeakH3 = (props) => <h4 {...props}>### {props.children}</h4>
-const MdLeakH4 = (props) => <h5 {...props}>#### {props.children}</h5>
+const MdLeakH1 = (props) => <h2 {...props}>{props.children}</h2>
+const MdLeakH2 = (props) => <h3 {...props}>{props.children}</h3>
+const MdLeakH3 = (props) => <h4 {...props}>{props.children}</h4>
+const MdLeakH4 = (props) => <h5 {...props}>{props.children}</h5>
 
 const components = {
   h1: MdLeakH1,