Compare commits
2 Commits
3d2f660f78
...
c111c4b9d5
Author | SHA1 | Date |
---|---|---|
xoy | c111c4b9d5 | |
neri | de06d2718d |
|
@ -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}`}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
After Width: | Height: | Size: 30 KiB |
|
@ -22,6 +22,11 @@ body {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #22bb22;
|
color: #22bb22;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue