upgrade to gatsby 3, add gatsby image component
This commit is contained in:
parent
35947778ce
commit
b80faa6f50
|
@ -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`,
|
||||
],
|
||||
}
|
||||
|
|
19
package.json
19
package.json
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}`} />
|
||||
|
|
|
@ -1,26 +1,28 @@
|
|||
import React from "react"
|
||||
import footerStyles from "./footer.module.css"
|
||||
import * as footerStyles from "./footer.module.css"
|
||||
import { Link } from "gatsby"
|
||||
|
||||
export default ({ editLink }) => (
|
||||
<footer className={footerStyles.footer}>
|
||||
<div className={footerStyles.footerContent}>
|
||||
{editLink ? (
|
||||
<a
|
||||
className={footerStyles.footerItem}
|
||||
href={editLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Seite bearbeiten
|
||||
</a>
|
||||
) : null}
|
||||
<Link className={footerStyles.footerItem} to="/impressum/">
|
||||
Impressum
|
||||
</Link>
|
||||
<Link className={footerStyles.footerItem} to="/datenschutz/">
|
||||
Datenschutzerklärung
|
||||
</Link>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
export default function Footer({ editLink }) {
|
||||
return (
|
||||
<footer className={footerStyles.footer}>
|
||||
<div className={footerStyles.footerContent}>
|
||||
{editLink ? (
|
||||
<a
|
||||
className={footerStyles.footerItem}
|
||||
href={editLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Seite bearbeiten
|
||||
</a>
|
||||
) : null}
|
||||
<Link className={footerStyles.footerItem} to="/impressum/">
|
||||
Impressum
|
||||
</Link>
|
||||
<Link className={footerStyles.footerItem} to="/datenschutz/">
|
||||
Datenschutzerklärung
|
||||
</Link>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,14 +1,16 @@
|
|||
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 }) => (
|
||||
<>
|
||||
<Nav path={path} />
|
||||
<main className={layoutStyles.layout}>
|
||||
<article>{children}</article>
|
||||
</main>
|
||||
<Footer editLink={editLink} />
|
||||
</>
|
||||
)
|
||||
export default function Layout({ path, editLink, children }) {
|
||||
return (
|
||||
<>
|
||||
<Nav path={path} />
|
||||
<main className={layoutStyles.layout}>
|
||||
<article>{children}</article>
|
||||
</main>
|
||||
<Footer editLink={editLink} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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&mlon=7.46500#map=19/51.52769/7.46500">
|
||||
<a
|
||||
href="https://www.openstreetmap.org/?mlat=51.52769&mlon=7.46500#map=19/51.52769/7.46500"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
In OpenStreetMap öffnen
|
||||
</a>
|
||||
</small>
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
@ -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")
|
||||
|
|
|
@ -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 (
|
||||
<Layout path={path}>
|
||||
<MdLeakH1>{title}</MdLeakH1>
|
||||
<MDXProvider components={components}>
|
||||
<MDXRenderer>{body}</MDXRenderer>
|
||||
</MDXProvider>
|
||||
</Layout>
|
||||
<>
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang: 'de',
|
||||
}}
|
||||
title={`ctdo - ${title.toLowerCase()}`}
|
||||
/>
|
||||
<Layout path={path}>
|
||||
<MdLeakH1>{title}</MdLeakH1>
|
||||
<MDXProvider components={components}>
|
||||
<MDXRenderer>{body}</MDXRenderer>
|
||||
</MDXProvider>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -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 (
|
||||
<Layout path={path} editLink={editLink}>
|
||||
<MDXProvider components={components}>
|
||||
<MDXRenderer>{body}</MDXRenderer>
|
||||
</MDXProvider>
|
||||
</Layout>
|
||||
<>
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang: 'de',
|
||||
}}
|
||||
title={`ctdo - ${title.toLowerCase()}`}
|
||||
/>
|
||||
<Layout path={path} editLink={editLink}>
|
||||
<MDXProvider components={components}>
|
||||
<MDXRenderer>{body}</MDXRenderer>
|
||||
</MDXProvider>
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -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/>
|
||||
|
||||
|
|
Loading…
Reference in New Issue