upgrade to gatsby 3, add gatsby image component

This commit is contained in:
neri 2021-05-15 22:08:57 +02:00
parent 35947778ce
commit b80faa6f50
17 changed files with 7004 additions and 5165 deletions

View File

@ -5,28 +5,45 @@
*/ */
module.exports = { module.exports = {
pathPrefix: `/ctdo`, pathPrefix: '/ctdo',
plugins: [ plugins: [
{ {
resolve: `gatsby-source-filesystem`, resolve: 'gatsby-source-filesystem',
options: { options: {
name: `pages`, name: 'pages',
path: `${__dirname}/src/webpages`, path: `${__dirname}/src/webpages`,
}, },
}, },
{ {
resolve: `gatsby-source-filesystem`, resolve: 'gatsby-source-filesystem',
options: { options: {
name: `blog`, name: 'blog',
path: `${__dirname}/blog`, path: `${__dirname}/blog`,
}, },
}, },
{ {
resolve: `gatsby-plugin-mdx`, resolve: `gatsby-source-filesystem`,
options: { options: {
extensions: [`.mdx`, `.md`], path: `${__dirname}/src/images`,
gatsbyRemarkPlugins: [], },
},
{
resolve: 'gatsby-plugin-mdx',
options: {
extensions: ['.mdx', '.md'],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1000,
pathPrefix: '/ctdo',
}, },
}, },
], ],
},
},
'gatsby-plugin-sharp',
'gatsby-plugin-image',
`gatsby-plugin-react-helmet`,
],
} }

View File

@ -16,14 +16,19 @@
"dependencies": { "dependencies": {
"@mdx-js/mdx": "^1.5.1", "@mdx-js/mdx": "^1.5.1",
"@mdx-js/react": "^1.5.1", "@mdx-js/react": "^1.5.1",
"gatsby": "^2.18.8", "gatsby": "^3.5.0",
"gatsby-plugin-mdx": "^1.0.62", "gatsby-plugin-image": "^1.5.0",
"gatsby-source-filesystem": "^2.1.42", "gatsby-plugin-mdx": "^2.5.0",
"gatsby-transformer-remark": "^2.6.42", "gatsby-plugin-react-helmet": "^4.5.0",
"react": "^16.12.0", "gatsby-plugin-sharp": "^3.5.0",
"react-dom": "^16.12.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",
"react-helmet": "^6.1.0"
}, },
"devDependencies": { "devDependencies": {
"prettier": "^1.19.1" "prettier": "^2.3.0"
} }
} }

View File

@ -1,7 +1,7 @@
import React from "react" import React from "react"
import accordionStyles from "./accordion.module.css" import * as accordionStyles from "./accordion.module.css"
export default ({ title, children }) => { export default function Accordion({ title, children }) {
return ( return (
<div> <div>
<input type="checkbox" id={`tab-${title}`} name={`tab-${title}`} /> <input type="checkbox" id={`tab-${title}`} name={`tab-${title}`} />

View File

@ -1,8 +1,9 @@
import React from "react" import React from "react"
import footerStyles from "./footer.module.css" import * as footerStyles from "./footer.module.css"
import { Link } from "gatsby" import { Link } from "gatsby"
export default ({ editLink }) => ( export default function Footer({ editLink }) {
return (
<footer className={footerStyles.footer}> <footer className={footerStyles.footer}>
<div className={footerStyles.footerContent}> <div className={footerStyles.footerContent}>
{editLink ? ( {editLink ? (
@ -23,4 +24,5 @@ export default ({ editLink }) => (
</Link> </Link>
</div> </div>
</footer> </footer>
) )
}

View File

@ -1,9 +1,10 @@
import React from 'react' import React from 'react'
import Nav from '../components/nav' import Nav from '../components/nav'
import Footer from '../components/footer' import Footer from '../components/footer'
import layoutStyles from './layout.module.css' import * as layoutStyles from './layout.module.css'
export default ({ path, editLink, children }) => ( export default function Layout({ path, editLink, children }) {
return (
<> <>
<Nav path={path} /> <Nav path={path} />
<main className={layoutStyles.layout}> <main className={layoutStyles.layout}>
@ -11,4 +12,5 @@ export default ({ path, editLink, children }) => (
</main> </main>
<Footer editLink={editLink} /> <Footer editLink={editLink} />
</> </>
) )
}

View File

@ -1,18 +1,19 @@
import React from 'react' import React from 'react'
import navStyles from './nav.module.css' import * as navStyles from './nav.module.css'
import { Link } from 'gatsby' import { Link } from 'gatsby'
import { StaticImage } from "gatsby-plugin-image"
let pages = [ let pages = [
['home', '/', navStyles.desktopOnly], ['home', '/', navStyles.desktopOnly],
['zeiten & location', '/treff', ''], ['zeiten & location', '/treff/', ''],
['events', '/events', ''], ['events', '/events/', ''],
['über uns', '/about', ''], ['über uns', '/about/', ''],
['kontakt', '/kontakt', ''], ['kontakt', '/kontakt/', ''],
['verein', '/verein', ''], ['verein', '/verein/', ''],
['supporte uns', '/support', ''], ['supporte uns', '/support/', ''],
] ]
export default ({ 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'
const activeClasses = link => const activeClasses = link =>
@ -23,8 +24,15 @@ export default ({ path }) => {
<header className={navStyles.header}> <header className={navStyles.header}>
<Link to="/"> <Link to="/">
<div className={navStyles.headerContent}> <div className={navStyles.headerContent}>
{/* todo: fix image links in prod by using the gatsby component */} <span className={navStyles.logoContainer}>
<img alt="CTDO-Logo" width="80rem" src="/logo_ctdo.svg" /> <StaticImage
className={navStyles.logo}
src="../images/logo_ctdo.svg"
alt="CTDO-Logo"
loading="eager"
placeholder="none"
/>
</span>
<span> <span>
<span className={navStyles.chaos}>Chaostreff</span> Dortmund <span className={navStyles.chaos}>Chaostreff</span> Dortmund
</span> </span>

View File

@ -11,12 +11,13 @@
align-items: center; align-items: center;
} }
.headerContent img { .logo {
margin-right: 1rem; margin-right: 1rem;
width: 5rem;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.headerContent img { .logoContainer {
display: none; display: none;
} }
} }

View File

@ -5,7 +5,7 @@ const WEEK = 7
// for easier mocking in tests // for easier mocking in tests
var today = new Date() var today = new Date()
export default () => { export default function NextTopic() {
// don't put the nextTopic date in the staticly generated html // don't put the nextTopic date in the staticly generated html
// because it would be outdated rather quickly // because it would be outdated rather quickly
const isSSR = typeof window === "undefined" const isSSR = typeof window === "undefined"

View File

@ -1,7 +1,7 @@
import React from "react" import React from "react"
import mapStyles from "./osmMap.module.css" import * as mapStyles from "./osmMap.module.css"
export default () => { export default function OsmMap() {
return ( return (
<> <>
<iframe <iframe
@ -11,7 +11,11 @@ export default () => {
></iframe> ></iframe>
<br /> <br />
<small> <small>
<a href="https://www.openstreetmap.org/?mlat=51.52769&amp;mlon=7.46500#map=19/51.52769/7.46500"> <a
href="https://www.openstreetmap.org/?mlat=51.52769&amp;mlon=7.46500#map=19/51.52769/7.46500"
target="_blank"
rel="noreferrer"
>
In OpenStreetMap öffnen In OpenStreetMap öffnen
</a> </a>
</small> </small>

View File

@ -7,7 +7,7 @@ const roomStateData = {
error: { text: 'laut API kaputt', color: '#ee3333' }, error: { text: 'laut API kaputt', color: '#ee3333' },
} }
export default () => { export default function RoomState() {
const [openState, setOpenState] = useState('loading') const [openState, setOpenState] = useState('loading')
useEffect(() => { useEffect(() => {

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

View File

@ -2,6 +2,7 @@
font-family: "Space Mono"; font-family: "Space Mono";
font-style: bold; font-style: bold;
font-weight: 700; font-weight: 700;
font-display: swap;
src: url("../../static/fonts/space-mono-v5-latin-700.eot"); /* IE9 Compat Modes */ src: url("../../static/fonts/space-mono-v5-latin-700.eot"); /* IE9 Compat Modes */
src: local("Space Mono"), local("SpaceMono-Regular"), src: local("Space Mono"), local("SpaceMono-Regular"),
url("../../static/fonts/space-mono-v5-latin-700.eot?#iefix") url("../../static/fonts/space-mono-v5-latin-700.eot?#iefix")
@ -21,6 +22,7 @@
font-family: "Source Sans Pro"; font-family: "Source Sans Pro";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap;
src: url("../../static/fonts/source-sans-pro-v13-latin-regular.eot"); /* IE9 Compat Modes */ src: url("../../static/fonts/source-sans-pro-v13-latin-regular.eot"); /* IE9 Compat Modes */
src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
url("../../static/fonts/source-sans-pro-v13-latin-regular.eot?#iefix") url("../../static/fonts/source-sans-pro-v13-latin-regular.eot?#iefix")
@ -43,6 +45,7 @@
font-family: "Source Sans Pro"; font-family: "Source Sans Pro";
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
font-display: swap;
src: url("../../static/fonts/source-sans-pro-v13-latin-italic.eot"); /* IE9 Compat Modes */ src: url("../../static/fonts/source-sans-pro-v13-latin-italic.eot"); /* IE9 Compat Modes */
src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"), src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
url("../../static/fonts/source-sans-pro-v13-latin-italic.eot?#iefix") url("../../static/fonts/source-sans-pro-v13-latin-italic.eot?#iefix")
@ -65,6 +68,7 @@
font-family: "Source Sans Pro"; font-family: "Source Sans Pro";
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap;
src: url("../../static/fonts/source-sans-pro-v13-latin-700.eot"); /* IE9 Compat Modes */ src: url("../../static/fonts/source-sans-pro-v13-latin-700.eot"); /* IE9 Compat Modes */
src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
url("../../static/fonts/source-sans-pro-v13-latin-700.eot?#iefix") url("../../static/fonts/source-sans-pro-v13-latin-700.eot?#iefix")

View File

@ -1,8 +1,9 @@
import React, { useEffect } from 'react' import React from 'react'
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import Layout from '../components/layout' import Layout from '../components/layout'
import { MDXRenderer } from 'gatsby-plugin-mdx' import { MDXRenderer } from 'gatsby-plugin-mdx'
import { MDXProvider } from '@mdx-js/react' import { MDXProvider } from '@mdx-js/react'
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>
@ -24,17 +25,21 @@ export default function Template({
body, body,
} = data.mdx } = data.mdx
useEffect(() => {
document.title = `ctdo - ${title.toLowerCase()}`
}, [title])
return ( return (
<>
<Helmet
htmlAttributes={{
lang: 'de',
}}
title={`ctdo - ${title.toLowerCase()}`}
/>
<Layout path={path}> <Layout path={path}>
<MdLeakH1>{title}</MdLeakH1> <MdLeakH1>{title}</MdLeakH1>
<MDXProvider components={components}> <MDXProvider components={components}>
<MDXRenderer>{body}</MDXRenderer> <MDXRenderer>{body}</MDXRenderer>
</MDXProvider> </MDXProvider>
</Layout> </Layout>
</>
) )
} }

View File

@ -1,8 +1,9 @@
import React, { useEffect } from 'react' import React from 'react'
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import Layout from '../components/layout' import Layout from '../components/layout'
import { MDXRenderer } from 'gatsby-plugin-mdx' import { MDXRenderer } from 'gatsby-plugin-mdx'
import { MDXProvider } from '@mdx-js/react' import { MDXProvider } from '@mdx-js/react'
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/'
@ -27,18 +28,22 @@ export default function Template({
body, body,
} = data.mdx } = data.mdx
useEffect(() => {
document.title = `ctdo - ${title.toLowerCase()}`
}, [title])
const editLink = edit ? ide + edit : null const editLink = edit ? ide + edit : null
return ( return (
<>
<Helmet
htmlAttributes={{
lang: 'de',
}}
title={`ctdo - ${title.toLowerCase()}`}
/>
<Layout path={path} editLink={editLink}> <Layout path={path} editLink={editLink}>
<MDXProvider components={components}> <MDXProvider components={components}>
<MDXRenderer>{body}</MDXRenderer> <MDXRenderer>{body}</MDXRenderer>
</MDXProvider> </MDXProvider>
</Layout> </Layout>
</>
) )
} }

View File

@ -7,9 +7,7 @@ edit: 'home.md'
import { Link } from "gatsby" import { Link } from "gatsby"
import RoomState from "../components/roomState.js" import RoomState from "../components/roomState.js"
<!-- todo: fix image links in prod by using the gatsby component --> ![Raum 2 mit gemütlichen Sofas](../images/header.jpg)
<img width="100%" alt="Raum 2 mit gemütlichen Sofas" src="/header.jpg"></img>
# Räume sind <RoomState/> # Räume sind <RoomState/>

11936
yarn.lock

File diff suppressed because it is too large Load Diff