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 = {
pathPrefix: `/ctdo`,
pathPrefix: '/ctdo',
plugins: [
{
resolve: `gatsby-source-filesystem`,
resolve: 'gatsby-source-filesystem',
options: {
name: `pages`,
name: 'pages',
path: `${__dirname}/src/webpages`,
},
},
{
resolve: `gatsby-source-filesystem`,
resolve: 'gatsby-source-filesystem',
options: {
name: `blog`,
name: 'blog',
path: `${__dirname}/blog`,
},
},
{
resolve: `gatsby-plugin-mdx`,
resolve: `gatsby-source-filesystem`,
options: {
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [],
path: `${__dirname}/src/images`,
},
},
{
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": {
"@mdx-js/mdx": "^1.5.1",
"@mdx-js/react": "^1.5.1",
"gatsby": "^2.18.8",
"gatsby-plugin-mdx": "^1.0.62",
"gatsby-source-filesystem": "^2.1.42",
"gatsby-transformer-remark": "^2.6.42",
"react": "^16.12.0",
"react-dom": "^16.12.0"
"gatsby": "^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",
"react-helmet": "^6.1.0"
},
"devDependencies": {
"prettier": "^1.19.1"
"prettier": "^2.3.0"
}
}

View File

@ -1,7 +1,7 @@
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 (
<div>
<input type="checkbox" id={`tab-${title}`} name={`tab-${title}`} />

View File

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

View File

@ -1,9 +1,10 @@
import React from 'react'
import Nav from '../components/nav'
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} />
<main className={layoutStyles.layout}>
@ -12,3 +13,4 @@ export default ({ path, editLink, children }) => (
<Footer editLink={editLink} />
</>
)
}

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
import React from "react"
import mapStyles from "./osmMap.module.css"
import * as mapStyles from "./osmMap.module.css"
export default () => {
export default function OsmMap() {
return (
<>
<iframe
@ -11,7 +11,11 @@ export default () => {
></iframe>
<br />
<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
</a>
</small>

View File

@ -7,7 +7,7 @@ const roomStateData = {
error: { text: 'laut API kaputt', color: '#ee3333' },
}
export default () => {
export default function RoomState() {
const [openState, setOpenState] = useState('loading')
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-style: bold;
font-weight: 700;
font-display: swap;
src: url("../../static/fonts/space-mono-v5-latin-700.eot"); /* IE9 Compat Modes */
src: local("Space Mono"), local("SpaceMono-Regular"),
url("../../static/fonts/space-mono-v5-latin-700.eot?#iefix")
@ -21,6 +22,7 @@
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../../static/fonts/source-sans-pro-v13-latin-regular.eot"); /* IE9 Compat Modes */
src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
url("../../static/fonts/source-sans-pro-v13-latin-regular.eot?#iefix")
@ -43,6 +45,7 @@
font-family: "Source Sans Pro";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../../static/fonts/source-sans-pro-v13-latin-italic.eot"); /* IE9 Compat Modes */
src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
url("../../static/fonts/source-sans-pro-v13-latin-italic.eot?#iefix")
@ -65,6 +68,7 @@
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../../static/fonts/source-sans-pro-v13-latin-700.eot"); /* IE9 Compat Modes */
src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
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 Layout from '../components/layout'
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>
@ -24,17 +25,21 @@ export default function Template({
body,
} = data.mdx
useEffect(() => {
document.title = `ctdo - ${title.toLowerCase()}`
}, [title])
return (
<>
<Helmet
htmlAttributes={{
lang: 'de',
}}
title={`ctdo - ${title.toLowerCase()}`}
/>
<Layout path={path}>
<MdLeakH1>{title}</MdLeakH1>
<MDXProvider components={components}>
<MDXRenderer>{body}</MDXRenderer>
</MDXProvider>
</Layout>
</>
)
}

View File

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

View File

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

11936
yarn.lock

File diff suppressed because it is too large Load Diff