First commit

.gitignore

@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http:https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http:https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity

.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public

.prettierrc

@@ -0,0 +1,7 @@
+{
+ "endOfLine": "lf",
+ "semi": true,
+ "singleQuote": false,
+ "tabWidth": 2,
+ "trailingComma": "es5"
+}

gatsby-browser.js

@@ -0,0 +1,7 @@
+/**
+ * Implement Gatsby's Browser APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/browser-apis/
+ */
+
+// You can delete this file if you're not using it

gatsby-config.js

@@ -0,0 +1,34 @@
+module.exports = {
+ siteMetadata: {
+ title: "CSS Gallery",
+ description: "CSS Gallery",
+ author: "bntnam",
+ },
+ plugins: [
+ `gatsby-plugin-react-helmet`,
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `images`,
+ path: `${__dirname}/src/images`,
+ },
+ },
+ `gatsby-transformer-sharp`,
+ `gatsby-plugin-sharp`,
+ {
+ resolve: `gatsby-plugin-manifest`,
+ options: {
+ name: `gatsby-starter-default`,
+ short_name: `starter`,
+ start_url: `/`,
+ background_color: `#663399`,
+ theme_color: `#663399`,
+ display: `minimal-ui`,
+ icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+ },
+ },
+ // this (optional) plugin enables Progressive Web App + Offline functionality
+ // To learn more, visit: https://gatsby.dev/offline
+ // `gatsby-plugin-offline`,
+ ],
+}

gatsby-node.js

@@ -0,0 +1,7 @@
+/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/node-apis/
+ */
+
+// You can delete this file if you're not using it

gatsby-ssr.js

@@ -0,0 +1,7 @@
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
+
+// You can delete this file if you're not using it

package.json

@@ -0,0 +1,39 @@
+{
+ "name": "css-gallery",
+ "private": true,
+ "description": "CSS Gallery",
+ "author": "bntnam",
+ "dependencies": {
+ "gatsby": "^2.20.35",
+ "gatsby-image": "^2.3.5",
+ "gatsby-plugin-manifest": "^2.3.7",
+ "gatsby-plugin-offline": "^3.1.5",
+ "gatsby-plugin-react-helmet": "^3.2.5",
+ "gatsby-plugin-sharp": "^2.5.7",
+ "gatsby-source-filesystem": "^2.2.5",
+ "gatsby-transformer-sharp": "^2.4.7",
+ "prop-types": "^15.7.2",
+ "react": "^16.12.0",
+ "react-dom": "^16.12.0",
+ "react-helmet": "^6.0.0"
+ },
+ "devDependencies": {
+ "prettier": "2.0.4"
+ },
+ "keywords": [
+ "gatsby"
+ ],
+ "license": "MIT",
+ "scripts": {
+ "build": "gatsby build",
+ "develop": "gatsby develop",
+ "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+ "start": "npm run develop",
+ "serve": "gatsby serve",
+ "clean": "gatsby clean"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/bntnam/css-gallery.git"
+ }
+}

src/components/common/Head.js

@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Helmet } from "react-helmet";
+import { useStaticQuery, graphql } from "gatsby";
+
+function Head({ description, lang, meta, title }) {
+ const { site } = useStaticQuery(
+ graphql`
+ query {
+ site {
+ siteMetadata {
+ title
+ description
+ author
+ }
+ }
+ }
+ `
+ );
+
+ const metaDescription = description || site.siteMetadata.description;
+
+ return (
+ <Helmet
+ htmlAttributes={{
+ lang,
+ }}
+ title={title}
+ titleTemplate={`%s | ${site.siteMetadata.title}`}
+ meta={[
+ {
+ name: `description`,
+ content: metaDescription,
+ },
+ {
+ property: `og:title`,
+ content: title,
+ },
+ {
+ property: `og:description`,
+ content: metaDescription,
+ },
+ {
+ property: `og:type`,
+ content: `website`,
+ },
+ ].concat(meta)}
+ />
+ );
+}
+
+Head.defaultProps = {
+ lang: `en`,
+ meta: [],
+ description: ``,
+};
+
+Head.propTypes = {
+ description: PropTypes.string,
+ lang: PropTypes.string,
+ meta: PropTypes.arrayOf(PropTypes.object),
+ title: PropTypes.string.isRequired,
+};
+
+export default Head;

src/components/common/Layout.js

@@ -0,0 +1,29 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { useStaticQuery, graphql } from "gatsby"
+
+import Head from "./common/Head";
+
+const Layout = ({ children }) => {
+ const data = useStaticQuery(graphql`
+ query SiteTitleQuery {
+ site {
+ siteMetadata {
+ title
+ }
+ }
+ }
+ `)
+
+ return (
+ <>
+ {children}
+ </>
+ )
+}
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
+
+export default Layout

src/components/image.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+/*
+ * This component is built using `gatsby-image` to automatically serve optimized
+ * images with lazy loading and reduced file sizes. The image is loaded using a
+ * `useStaticQuery`, which allows us to load the image from directly within this
+ * component, rather than having to pass the image data down from pages.
+ *
+ * For more information, see the docs:
+ * - `gatsby-image`: https://gatsby.dev/gatsby-image
+ * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+const Image = () => {
+ const data = useStaticQuery(graphql`
+ query {
+ placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+ childImageSharp {
+ fluid(maxWidth: 300) {
+ ...GatsbyImageSharpFluid
+ }
+ }
+ }
+ }
+ `)
+
+ return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
+}
+
+export default Image

src/pages/404.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+const NotFoundPage = () => (
+ <>
+ <h1>NOT FOUND</h1>
+ <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+ </>
+)
+
+export default NotFoundPage

src/pages/index.js

@@ -0,0 +1,9 @@
+import React from "react"
+
+const IndexPage = () => (
+ <>
+ <h1>Homepage</h1>
+ </>
+)
+
+export default IndexPage