diff --git a/gatsby-config.js b/gatsby-config.js index 7ce48e9..a8f8d15 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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: { @@ -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`, diff --git a/package-lock.json b/package-lock.json index fd972a7..7c9f5f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9092,9 +9092,9 @@ } }, "gatsby-plugin-postcss": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/gatsby-plugin-postcss/-/gatsby-plugin-postcss-4.2.0.tgz", - "integrity": "sha512-RFyxN0zDi8UuQxvjF/WoFaNxfQkulCsyA6UtIfgs73QZj31VqOJ6bmtjJW2ct6zFeANOJ/nOczbr2nyBcMDnvQ==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-postcss/-/gatsby-plugin-postcss-4.3.0.tgz", + "integrity": "sha512-T0OaJiziOs7LL1S5iI+QQzY8TOzL2y6rmWQKstPnr0NuDueQrN4YDRnG4fPoBhJ1Xl96uCVNZ4QoyGvqDQwjXw==", "dev": true, "requires": { "@babel/runtime": "^7.12.5", @@ -13224,6 +13224,12 @@ "resolved": "https://registry.npmjs.org/object-fit-images/-/object-fit-images-3.2.4.tgz", "integrity": "sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg==" }, + "object-hash": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.1.1.tgz", + "integrity": "sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==", + "dev": true + }, "object-inspect": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz", @@ -14005,9 +14011,9 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, "postcss": { - "version": "8.2.9", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.9.tgz", - "integrity": "sha512-b+TmuIL4jGtCHtoLi+G/PisuIl9avxs8IZMSmlABRwNz5RLUUACrC+ws81dcomz1nRezm5YPdXiMEzBEKgYn+Q==", + "version": "8.2.10", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.10.tgz", + "integrity": "sha512-b/h7CPV7QEdrqIxtAf2j31U5ef05uBDuvoXv6L51Q4rcS1jdlXAVKJv+atCFdUXYl9dyTHGyoMzIepwowRJjFw==", "requires": { "colorette": "^1.2.2", "nanoid": "^3.1.22", @@ -18790,12 +18796,6 @@ "universalify": "^2.0.0" } }, - "object-hash": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.1.1.tgz", - "integrity": "sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==", - "dev": true - }, "universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", diff --git a/package.json b/package.json index ae7cc0e..7e64ef4 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/components/test.js b/src/components/test.js index 5b43e48..f7db6fd 100644 --- a/src/components/test.js +++ b/src/components/test.js @@ -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 ( - - {data.allFile.edges.map(edge => { - return ( - - - - ) - })} - +
+
+ + +
+
+

+ 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 +

+
+
+

Sample Headline

+

+ 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 +

+
+
+
+
) } diff --git a/src/pages/index.js b/src/pages/index.js index 5948714..b39dae9 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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 ( - - - -

Hi people

-

Welcome to your new Gatsby site.

-

Now go build something great.

- -

- Go to page 2
- Go to "Using TypeScript" -

-
-
+ + + GO TO PAGE 2 + + + GO TO ANCHOR + + + + ) } diff --git a/src/pages/page-2.js b/src/pages/page-2.js index 8515cea..b30113e 100644 --- a/src/pages/page-2.js +++ b/src/pages/page-2.js @@ -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" @@ -9,7 +9,9 @@ const SecondPage = () => (

Hi from the second page

Welcome to page 2

- Go back to the homepage + + GO TO ANCHOR + )