Compare commits

..

2 Commits

Author SHA1 Message Date
xoy c111c4b9d5 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>
2022-11-05 14:41:14 +01:00
neri de06d2718d update dependecies
continuous-integration/drone/push Build is passing Details
2022-11-05 14:35:25 +01:00
8 changed files with 53 additions and 10 deletions

View File

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

View File

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

BIN
src/images/tuer_offen.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/images/tuer_zu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/images/warning.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View File

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

View File

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

View File

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