Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@konstantinschuette
konstantinschuette committed Apr 17, 2021
1 parent 48d9b38 commit 68db58c
Show file tree
Hide file tree
Showing 6 changed files with 184 additions and 102 deletions.
35 changes: 7 additions & 28 deletions gatsby-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@ module.exports = {
`gatsby-plugin-image`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-postcss`,
{
resolve: "gatsby-plugin-anchor-links",
options: {
offset: 0,
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
Expand All @@ -30,34 +37,6 @@ module.exports = {
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-gatsby-cloud`,
`gatsby-plugin-postcss`,
{
resolve: "gatsby-plugin-brotli",
options: {
extensions: ["css", "html", "js", "svg"],
},
},
{
resolve: "gatsby-plugin-zopfli",
options: {
extensions: ["css", "html", "js", "svg"],
},
},
{
resolve: `gatsby-plugin-recaptcha`,
options: {
async: false,
defer: true,
},
},
{
resolve: "gatsby-plugin-anchor-links",
options: {
offset: -90,
duration: 600,
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
Expand Down
24 changes: 12 additions & 12 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"gatsby-plugin-postcss": "^4.2.0",
"postcss": "^8.2.9",
"gatsby-plugin-postcss": "^4.3.0",
"postcss": "^8.2.10",
"prettier": "2.2.1",
"tailwindcss": "^2.1.1"
},
Expand Down
191 changes: 148 additions & 43 deletions src/components/test.js
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,160 @@
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"

import { SRLWrapper } from "simple-react-lightbox"
import { graphql, useStaticQuery } from "gatsby"

const Test = () => {
const data = useStaticQuery(graphql`
{
allFile(
filter: {
extension: { regex: "/(jpg)|(jpeg)|(png)/" }
relativeDirectory: { eq: "" }
}
) {
edges {
node {
id
childImageSharp {
gatsbyImageData(quality: 90, layout: FULL_WIDTH)
}
const images = useStaticQuery(
graphql`
{
profile: file(relativePath: { eq: "gatsby-astronaut.png" }) {
childImageSharp {
gatsbyImageData(quality: 80, height: 384, layout: CONSTRAINED)
}
}
}
}
`)
`
)

return (
<SRLWrapper
options={{
settings: {
lightboxTransitionSpeed: 0.2,
slideTransitionSpeed: 0.2,
usingPreact: true,
},
buttons: { showDownloadButton: false },
caption: {
showCaption: false,
},
}}
>
{data.allFile.edges.map(edge => {
return (
<a href={edge.node.childImageSharp.gatsbyImageData.src}>
<GatsbyImage
image={edge.node.childImageSharp.gatsbyImageData}
alt=""
/>
</a>
)
})}
</SRLWrapper>
<div className="block">
<div className="text-center">
<GatsbyImage
image={images.profile.childImageSharp.gatsbyImageData}
alt="test"
className="block max-h-96 w-full mb-8 rounded-full mx-auto max-w-sm"
/>

<div>
<div className="space-y-4 text-left">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, At accusam aliquyam diam
diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et
et invidunt justo labore Stet clita ea et gubergren, kasd magna no
rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p>
</div>
<div>
<h1 id="sample">Sample Headline</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, At accusam aliquyam diam
diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et
et invidunt justo labore Stet clita ea et gubergren, kasd magna no
rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, conseteturin hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, At accusam aliquyam diam
diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et
et invidunt justo labore Stet clita ea et gubergren, kasd magna no
rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</p>
</div>
</div>
</div>
</div>
)
}

Expand Down
26 changes: 11 additions & 15 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
import * as React from "react"
import { Link } from "gatsby"
import { AnchorLink } from "gatsby-plugin-anchor-links"

import Layout from "../components/layout"
import SEO from "../components/seo"

import Test from "../components/test"
import SimpleReactLightbox from "simple-react-lightbox"

const IndexPage = () => {
return (
<SimpleReactLightbox>
<Layout>
<SEO title="Home" />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<Test />
<p>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</p>
</Layout>
</SimpleReactLightbox>
<Layout>
<AnchorLink className="block text-blue-400 hover:underline" to="/page-2">
GO TO PAGE 2
</AnchorLink>
<AnchorLink className="block text-blue-400 hover:underline" to="/#sample">
GO TO ANCHOR
</AnchorLink>
<SEO title="Home" />
<Test />
</Layout>
)
}

Expand Down
6 changes: 4 additions & 2 deletions src/pages/page-2.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react"
import { Link } from "gatsby"
import { AnchorLink } from "gatsby-plugin-anchor-links"

import Layout from "../components/layout"
import SEO from "../components/seo"
Expand All @@ -9,7 +9,9 @@ const SecondPage = () => (
<SEO title="Page two" />
<h1>Hi from the second page</h1>
<p>Welcome to page 2</p>
<Link to="/">Go back to the homepage</Link>
<AnchorLink className="text-blue-400 hover:underline" to="/#sample">
GO TO ANCHOR
</AnchorLink>
</Layout>
)

Expand Down

0 comments on commit 68db58c

Please sign in to comment.