fahad/autonomic-zone-gatsby
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit from gatsby: (https://github.com/gatsbyjs/gatsby-starter-blog.git)

Browse Source
This commit is contained in:
desmukh 2023-01-05 12:13:30 +05:00
commit 935f94975b
28 changed files with 12394 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
.gitignore vendored Normal file
View File

@ -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://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://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

4
.prettierignore Normal file
View File

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

4
.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"arrowParens": "avoid",
"semi": false
}

14
LICENSE Normal file
View File

@ -0,0 +1,14 @@
The BSD Zero Clause License (0BSD)
Copyright (c) 2020 Gatsby Inc.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.

99
README.md Normal file
View File

@ -0,0 +1,99 @@
<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
<p align="center">
<a href="https://www.gatsbyjs.com">
<img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
</a>
</p>
<h1 align="center">
Gatsby's blog starter
</h1>
Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
## 🚀 Quick start
1. **Create a Gatsby site.**
Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)) to create a new site, specifying the blog starter.
```shell
# create a new Gatsby site using the blog starter
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
```
1. **Start developing.**
Navigate into your new site’s directory and start it up.
```shell
cd my-blog-starter/
gatsby develop
```
1. **Open the source code and start editing!**
Your site is now running at `http://localhost:8000`!
Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries).
Open the `my-blog-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
## 🚀 Quick start (Gatsby Cloud)
Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-blog)
## 🧐 What's inside?
A quick look at the top-level files and directories you'll see in a typical Gatsby project.
.
├── node_modules
├── src
├── .gitignore
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package.json
└── README.md
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
1. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
1. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
1. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
1. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/) for more detail).
1. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
1. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
1. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
1. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
1. **`README.md`**: A text file containing useful reference information about your project.
## 🎓 Learning Gatsby
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
## 💫 Deploy
[Build, Deploy, and Host On The Only Cloud Built For Gatsby](https://www.gatsbyjs.com/products/cloud/)
Gatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.
<!-- AUTO-GENERATED-CONTENT:END -->

231
content/blog/hello-world/index.md Normal file
View File

@ -0,0 +1,231 @@
---
title: Hello World
date: "2015-05-01T22:12:03.284Z"
description: "Hello World"
---
This is my first post on my new fake blog! How exciting!
I'm sure I'll write a lot more interesting things in the future.
Oh, and here's a great quote from this Wikipedia on
[salted duck eggs](https://en.wikipedia.org/wiki/Salted_duck_egg).
> A salted duck egg is a Chinese preserved food product made by soaking duck
> eggs in brine, or packing each egg in damp, salted charcoal. In Asian
> supermarkets, these eggs are sometimes sold covered in a thick layer of salted
> charcoal paste. The eggs may also be sold with the salted paste removed,
> wrapped in plastic, and vacuum packed. From the salt curing process, the
> salted duck eggs have a briny aroma, a gelatin-like egg white and a
> firm-textured, round yolk that is bright orange-red in color.
![Chinese Salty Egg](./salty_egg.jpg)
You can also write code blocks here!
```js
const saltyDuckEgg = "chinese preserved food product"
```
| Number | Title | Year |
| :----- | :--------------------------------------- | ---: |
| 1 | Harry Potter and the Philosopher’s Stone | 2001 |
| 2 | Harry Potter and the Chamber of Secrets | 2002 |
| 3 | Harry Potter and the Prisoner of Azkaban | 2004 |
[View raw (TEST.md)](https://raw.github.com/adamschwartz/github-markdown-kitchen-sink/master/README.md)
This is a paragraph.
This is a paragraph.
# Header 1
## Header 2
Header 1
========
Header 2
--------
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######
> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> ## This is a header.
>
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
> Markdown.generate();
> ## This is a header.
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
> Markdown.generate();
- Red
- Green
- Blue
* Red
* Green
* Blue
- Red
- Green
- Blue
```markdown
- Red
- Green
- Blue
* Red
* Green
* Blue
- Red
- Green
- Blue
```
- `code goes` here in this line
- **bold** goes here
```markdown
- `code goes` here in this line
- **bold** goes here
```
1. Buy flour and salt
1. Mix together with water
1. Bake
```markdown
1. Buy flour and salt
1. Mix together with water
1. Bake
```
1. `code goes` here in this line
1. **bold** goes here
```markdown
1. `code goes` here in this line
1. **bold** goes here
```
Paragraph:
Code
<!-- -->
Paragraph:
Code
---
---
---
---
---
* * *
***
*****
- - -
---------------------------------------
This is [an example](http://example.com "Example") link.
[This link](http://example.com) has no title attr.
This is [an example][id] reference-style link.
[id]: http://example.com "Optional Title"
This is [an example](http://example.com "Example") link.
[This link](http://example.com) has no title attr.
This is [an example] [id] reference-style link.
[id]: http://example.com "Optional Title"
_single asterisks_
_single underscores_
**double asterisks**
**double underscores**
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
This paragraph has some `code` in it.
This paragraph has some `code` in it.
![Alt Text](https://via.placeholder.com/200x50 "Image Title")
![Alt Text](https://via.placeholder.com/200x50 "Image Title")

BIN
content/blog/hello-world/salty_egg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 668 KiB

13
content/blog/my-second-post/index.md Normal file
View File

@ -0,0 +1,13 @@
---
title: My Second Post!
date: "2015-05-06T23:46:37.121Z"
---
Wow! I love blogging so much already.
Did you know that "despite its name, salted duck eggs can also be made from
chicken eggs, though the taste and texture will be somewhat different, and the
egg yolk will be less rich."?
([Wikipedia Link](https://en.wikipedia.org/wiki/Salted_duck_egg))
Yeah, I didn't either.

108
content/blog/new-beginnings/index.md Normal file
View File

@ -0,0 +1,108 @@
---
title: New Beginnings
date: "2015-05-28T22:40:32.169Z"
description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.
---
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary regelialia.
## On deer horse aboard tritely yikes and much
The Big Oxmox advised her not to do so, because there were thousands of bad
Commas, wild Question Marks and devious Semikoli, but the Little Blind Text
didn’t listen. She packed her seven versalia, put her initial into the belt and
made herself on the way.
- This however showed weasel
- Well uncritical so misled
- this is very interesting
- Goodness much until that fluid owl
When she reached the first hills of the **Italic Mountains**, she had a last
view back on the skyline of her hometown _Bookmarksgrove_, the headline of
[Alphabet Village](http://google.com) and the subline of her own road, the Line
Lane. Pityful a rhetoric question ran over her cheek, then she continued her
way. On her way she met a copy.
### Overlaid the jeepers uselessly much excluding
But nothing the copy said could convince her and so it didn’t take long until a
few insidious Copy Writers ambushed her, made her drunk with
[Longe and Parole](http://google.com) and dragged her into their agency, where
they abused her for their projects again and again. And if she hasn’t been
rewritten, then they are still using her.
> Far far away, behind the word mountains, far from the countries Vokalia and
> Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
> right at the coast of the Semantics, a large language ocean.
It is a paradisematic country, in which roasted parts of sentences fly into your
mouth. Even the all-powerful Pointing has no control about the blind texts it is
an almost unorthographic life One day however a small line of blind text by the
name of Lorem Ipsum decided to leave for the far World of Grammar.
### According a funnily until pre-set or arrogant well cheerful
The Big Oxmox advised her not to do so, because there were thousands of bad
Commas, wild Question Marks and devious Semikoli, but the Little Blind Text
didn’t listen. She packed her seven versalia, put her initial into the belt and
made herself on the way.
1. So baboon this
2. Mounted militant weasel gregariously admonishingly straightly hey
3. Dear foresaw hungry and much some overhung
4. Rash opossum less because less some amid besides yikes jeepers frenetic
impassive fruitlessly shut
When she reached the first hills of the Italic Mountains, she had a last view
back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet
Village and the subline of her own road, the Line Lane. Pityful a rhetoric
question ran over her cheek, then she continued her way. On her way she met a
copy.
> The copy warned the Little Blind Text, that where it came from it would have
> been rewritten a thousand times and everything that was left from its origin
> would be the word "and" and the Little Blind Text should turn around and
> return to its own, safe country.
But nothing the copy said could convince her and so it didn’t take long until a
few insidious Copy Writers ambushed her, made her drunk with Longe and Parole
and dragged her into their agency, where they abused her for their projects
again and again. And if she hasn’t been rewritten, then they are still using
her. Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts.
#### Silent delightfully including because before one up barring chameleon
Separated they live in Bookmarksgrove right at the coast of the Semantics, a
large language ocean. A small river named Duden flows by their place and
supplies it with the necessary regelialia. It is a paradisematic country, in
which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an
almost unorthographic life One day however a small line of blind text by the
name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox
advised her not to do so, because there were thousands of bad Commas, wild
Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
##### Wherever far wow thus a squirrel raccoon jeez jaguar this from along
She packed her seven versalia, put her initial into the belt and made herself on
the way. When she reached the first hills of the Italic Mountains, she had a
last view back on the skyline of her hometown Bookmarksgrove, the headline of
Alphabet Village and the subline of her own road, the Line Lane. Pityful a
rhetoric question ran over her cheek, then she continued her way. On her way she
met a copy.
###### Slapped cozy a that lightheartedly and far
The copy warned the Little Blind Text, that where it came from it would have
been rewritten a thousand times and everything that was left from its origin
would be the word "and" and the Little Blind Text should turn around and return
to its own, safe country. But nothing the copy said could convince her and so it
didn’t take long until a few insidious Copy Writers ambushed her, made her drunk
with Longe and Parole and dragged her into their agency, where they abused her
for their projects again and again.

10
gatsby-browser.js Normal file
View File

@ -0,0 +1,10 @@
// custom typefaces
import "@fontsource/montserrat/variable.css"
import "@fontsource/merriweather"
// normalize CSS across browsers
import "./src/normalize.css"
// custom CSS styles
import "./src/style.css"
// Highlighting for code blocks
import "prismjs/themes/prism.css"

125
gatsby-config.js Normal file
View File

@ -0,0 +1,125 @@
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/
*/
/**
* @type {import('gatsby').GatsbyConfig}
*/
module.exports = {
siteMetadata: {
title: `Gatsby Starter Blog`,
author: {
name: `Kyle Mathews`,
summary: `who lives and works in San Francisco building useful things.`,
},
description: `A starter blog demonstrating what Gatsby can do.`,
siteUrl: `https://gatsbystarterblogsource.gatsbyjs.io/`,
social: {
twitter: `kylemathews`,
},
},
plugins: [
`gatsby-plugin-image`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 630,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
`gatsby-remark-prismjs`,
],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-feed`,
options: {
query: `
{
site {
siteMetadata {
title
description
siteUrl
site_url: siteUrl
}
}
}
`,
feeds: [
{
serialize: ({ query: { site, allMarkdownRemark } }) => {
return allMarkdownRemark.nodes.map(node => {
return Object.assign({}, node.frontmatter, {
description: node.excerpt,
date: node.frontmatter.date,
url: site.siteMetadata.siteUrl + node.fields.slug,
guid: site.siteMetadata.siteUrl + node.fields.slug,
custom_elements: [{ "content:encoded": node.html }],
})
})
},
query: `{
allMarkdownRemark(sort: {frontmatter: {date: DESC}}) {
nodes {
excerpt
html
fields {
slug
}
frontmatter {
title
date
}
}
}
}`,
output: "/rss.xml",
title: "Gatsby Starter Blog RSS Feed",
},
],
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Gatsby Starter Blog`,
short_name: `Gatsby`,
start_url: `/`,
background_color: `#ffffff`,
// This will impact how browsers show your PWA/website
// https://css-tricks.com/meta-theme-color-and-trickery/
// theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
],
}

125
gatsby-node.js Normal file
View File

@ -0,0 +1,125 @@
/**
* Implement Gatsby's Node APIs in this file.
*
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/
*/
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
// Define the template for blog post
const blogPost = path.resolve(`./src/templates/blog-post.js`)
/**
* @type {import('gatsby').GatsbyNode['createPages']}
*/
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
// Get all markdown blog posts sorted by date
const result = await graphql(`
{
allMarkdownRemark(sort: { frontmatter: { date: ASC } }, limit: 1000) {
nodes {
id
fields {
slug
}
}
}
}
`)
if (result.errors) {
reporter.panicOnBuild(
`There was an error loading your blog posts`,
result.errors
)
return
}
const posts = result.data.allMarkdownRemark.nodes
// Create blog posts pages
// But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js)
// `context` is available in the template as a prop and as a variable in GraphQL
if (posts.length > 0) {
posts.forEach((post, index) => {
const previousPostId = index === 0 ? null : posts[index - 1].id
const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id
createPage({
path: post.fields.slug,
component: blogPost,
context: {
id: post.id,
previousPostId,
nextPostId,
},
})
})
}
}
/**
* @type {import('gatsby').GatsbyNode['onCreateNode']}
*/
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
/**
* @type {import('gatsby').GatsbyNode['createSchemaCustomization']}
*/
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions
// Explicitly define the siteMetadata {} object
// This way those will always be defined even if removed from gatsby-config.js
// Also explicitly define the Markdown frontmatter
// This way the "MarkdownRemark" queries will return `null` even when no
// blog posts are stored inside "content/blog" instead of returning an error
createTypes(`
type SiteSiteMetadata {
author: Author
siteUrl: String
social: Social
}
type Author {
name: String
summary: String
}
type Social {
twitter: String
}
type MarkdownRemark implements Node {
frontmatter: Frontmatter
fields: Fields
}
type Frontmatter {
title: String
description: String
date: Date @dateformat
}
type Fields {
slug: String
}
`)
}

12
gatsby-ssr.js Normal file
View File

@ -0,0 +1,12 @@
/**
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
*
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/
*/
/**
* @type {import('gatsby').GatsbySSR['onRenderBody']}
*/
exports.onRenderBody = ({ setHtmlAttributes }) => {
setHtmlAttributes({ lang: `en` })
}

49
package.json Normal file
View File

@ -0,0 +1,49 @@
{
"name": "gatsby-starter-blog",
"private": true,
"description": "A starter for a blog powered by Gatsby and Markdown",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"dependencies": {
"@fontsource/merriweather": "^4.5.14",
"@fontsource/montserrat": "^4.5.13",
"gatsby": "^5.3.3",
"gatsby-plugin-feed": "^5.3.1",
"gatsby-plugin-image": "^3.3.2",
"gatsby-plugin-manifest": "^5.3.1",
"gatsby-plugin-sharp": "^5.3.2",
"gatsby-remark-images": "^7.3.1",
"gatsby-remark-prismjs": "^7.3.0",
"gatsby-remark-responsive-iframe": "^6.3.0",
"gatsby-source-filesystem": "^5.3.1",
"gatsby-transformer-remark": "^6.3.2",
"gatsby-transformer-sharp": "^5.3.1",
"prismjs": "^1.29.0",
"react": "^18.1.0",
"react-dom": "^18.1.0"
},
"devDependencies": {
"prettier": "^2.8.1"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby"
],
"license": "0BSD",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "gatsby develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
}
}

58
src/components/bio.js Normal file
View File

@ -0,0 +1,58 @@
/**
* Bio component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
*/
import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"
const Bio = () => {
const data = useStaticQuery(graphql`
query BioQuery {
site {
siteMetadata {
author {
name
summary
}
social {
twitter
}
}
}
}
`)
// Set these values by editing "siteMetadata" in gatsby-config.js
const author = data.site.siteMetadata?.author
const social = data.site.siteMetadata?.social
return (
<div className="bio">
<StaticImage
className="bio-avatar"
layout="fixed"
formats={["auto", "webp", "avif"]}
src="../images/profile-pic.png"
width={50}
height={50}
quality={95}
alt="Profile picture"
/>
{author?.name && (
<p>
Written by <strong>{author.name}</strong> {author?.summary || null}
{` `}
<a href={`https://twitter.com/${social?.twitter || ``}`}>
You should follow them on Twitter
</a>
</p>
)}
</div>
)
}
export default Bio

36
src/components/layout.js Normal file
View File

@ -0,0 +1,36 @@
import * as React from "react"
import { Link } from "gatsby"
const Layout = ({ location, title, children }) => {
const rootPath = `${__PATH_PREFIX__}/`
const isRootPath = location.pathname === rootPath
let header
if (isRootPath) {
header = (
<h1 className="main-heading">
<Link to="/">{title}</Link>
</h1>
)
} else {
header = (
<Link className="header-link-home" to="/">
{title}
</Link>
)
}
return (
<div className="global-wrapper" data-is-root-path={isRootPath}>
<header className="global-header">{header}</header>
<main>{children}</main>
<footer>
© {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.gatsbyjs.com">Gatsby</a>
</footer>
</div>
)
}
export default Layout

50
src/components/seo.js Normal file
View File

@ -0,0 +1,50 @@
/**
* SEO component that queries for data with
* Gatsby's useStaticQuery React hook
*
* See: https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
*/
import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"
const Seo = ({ description, title, children }) => {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
social {
twitter
}
}
}
}
`
)
const metaDescription = description || site.siteMetadata.description
const defaultTitle = site.siteMetadata?.title
return (
<>
<title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
<meta name="description" content={metaDescription} />
<meta property="og:title" content={title} />
<meta property="og:description" content={metaDescription} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta
name="twitter:creator"
content={site.siteMetadata?.social?.twitter || ``}
/>
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={metaDescription} />
{children}
</>
)
}
export default Seo

BIN
src/images/gatsby-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/images/profile-pic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

343
src/normalize.css vendored Normal file
View File

@ -0,0 +1,343 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

30
src/pages/404.js Normal file
View File

@ -0,0 +1,30 @@
import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Seo from "../components/seo"
const NotFoundPage = ({ data, location }) => {
const siteTitle = data.site.siteMetadata.title
return (
<Layout location={location} title={siteTitle}>
<h1>404: Not Found</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</Layout>
)
}
export const Head = () => <Seo title="404: Not Found" />
export default NotFoundPage
export const pageQuery = graphql`
query {
site {
siteMetadata {
title
}
}
}
`

94
src/pages/index.js Normal file
View File

@ -0,0 +1,94 @@
import * as React from "react"
import { Link, graphql } from "gatsby"
import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"
const BlogIndex = ({ data, location }) => {
const siteTitle = data.site.siteMetadata?.title || `Title`
const posts = data.allMarkdownRemark.nodes
if (posts.length === 0) {
return (
<Layout location={location} title={siteTitle}>
<Bio />
<p>
No blog posts found. Add markdown posts to "content/blog" (or the
directory you specified for the "gatsby-source-filesystem" plugin in
gatsby-config.js).
</p>
</Layout>
)
}
return (
<Layout location={location} title={siteTitle}>
<Bio />
<ol style={{ listStyle: `none` }}>
{posts.map(post => {
const title = post.frontmatter.title || post.fields.slug
return (
<li key={post.fields.slug}>
<article
className="post-list-item"
itemScope
itemType="http://schema.org/Article"
>
<header>
<h2>
<Link to={post.fields.slug} itemProp="url">
<span itemProp="headline">{title}</span>
</Link>
</h2>
<small>{post.frontmatter.date}</small>
</header>
<section>
<p
dangerouslySetInnerHTML={{
__html: post.frontmatter.description || post.excerpt,
}}
itemProp="description"
/>
</section>
</article>
</li>
)
})}
</ol>
</Layout>
)
}
export default BlogIndex
/**
* Head export to define metadata for the page
*
* See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
*/
export const Head = () => <Seo title="All posts" />
export const pageQuery = graphql`
{
site {
siteMetadata {
title
}
}
allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
nodes {
excerpt
fields {
slug
}
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
description
}
}
}
}
`

55
src/pages/using-typescript.tsx Normal file
View File

@ -0,0 +1,55 @@
// If you don't want to use TypeScript you can delete this file!
import * as React from "react"
import { PageProps, Link, graphql, HeadFC } from "gatsby"
import Layout from "../components/layout"
import Seo from "../components/seo"
type DataProps = {
site: {
buildTime: string
}
}
const UsingTypescript: React.FC<PageProps<DataProps>> = ({
data,
path,
location,
}) => (
<Layout title="Using TypeScript" location={location}>
<h1>Gatsby supports TypeScript by default!</h1>
<p>
This means that you can create and write <em>.ts/.tsx</em> files for your
pages, components etc. Please note that the <em>gatsby-*.js</em> files
(like gatsby-node.js) currently don't support TypeScript yet.
</p>
<p>
For type checking you'll want to install <em>typescript</em> via npm and
run <em>tsc --init</em> to create a <em>tsconfig</em> file.
</p>
<p>
You're currently on the page "{path}" which was built on{" "}
{data.site.buildTime}.
</p>
<p>
To learn more, head over to our{" "}
<a href="https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/">
documentation about TypeScript
</a>
.
</p>
<Link to="/">Go back to the homepage</Link>
</Layout>
)
export const Head: HeadFC<DataProps> = () => <Seo title="Using TypeScript" />
export default UsingTypescript
export const query = graphql`
{
site {
buildTime(formatString: "YYYY-MM-DD hh:mm a z")
}
}
`

331
src/style.css Normal file
View File

@ -0,0 +1,331 @@
/* CSS Custom Properties Definitions */
:root {
--maxWidth-none: "none";
--maxWidth-xs: 20rem;
--maxWidth-sm: 24rem;
--maxWidth-md: 28rem;
--maxWidth-lg: 32rem;
--maxWidth-xl: 36rem;
--maxWidth-2xl: 42rem;
--maxWidth-3xl: 48rem;
--maxWidth-4xl: 56rem;
--maxWidth-full: "100%";
--maxWidth-wrapper: var(--maxWidth-2xl);
--spacing-px: "1px";
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
--fontFamily-sans: "MontserratVariable", system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--fontFamily-serif: "Merriweather", "Georgia", Cambria, "Times New Roman",
Times, serif;
--font-body: var(--fontFamily-serif);
--font-heading: var(--fontFamily-sans);
--fontWeight-normal: 400;
--fontWeight-bold: 700;
--fontWeight-black: 900;
--fontSize-root: 16px;
--lineHeight-none: 1;
--lineHeight-tight: 1.1;
--lineHeight-normal: 1.5;
--lineHeight-relaxed: 1.625;
/* 1.200 Minor Third Type Scale */
--fontSize-0: 0.833rem;
--fontSize-1: 1rem;
--fontSize-2: 1.2rem;
--fontSize-3: 1.44rem;
--fontSize-4: 1.728rem;
--fontSize-5: 2.074rem;
--fontSize-6: 2.488rem;
--fontSize-7: 2.986rem;
--color-primary: #005b99;
--color-text: #2e353f;
--color-text-light: #4f5969;
--color-heading: #1a202c;
--color-heading-black: black;
--color-accent: #d1dce5;
}
/* HTML elements */
*,
:after,
:before {
box-sizing: border-box;
}
html {
line-height: var(--lineHeight-normal);
font-size: var(--fontSize-root);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
font-size: var(--fontSize-1);
color: var(--color-text);
}
footer {
padding: var(--spacing-6) var(--spacing-0);
}
hr {
background: var(--color-accent);
height: 1px;
border: 0;
}
/* Heading */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
margin-top: var(--spacing-12);
margin-bottom: var(--spacing-6);
line-height: var(--lineHeight-tight);
letter-spacing: -0.025em;
}
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--fontWeight-bold);
color: var(--color-heading);
}
h1 {
font-weight: var(--fontWeight-black);
font-size: var(--fontSize-6);
color: var(--color-heading-black);
}
h2 {
font-size: var(--fontSize-5);
}
h3 {
font-size: var(--fontSize-4);
}
h4 {
font-size: var(--fontSize-3);
}
h5 {
font-size: var(--fontSize-2);
}
h6 {
font-size: var(--fontSize-1);
}
h1 > a {
color: inherit;
text-decoration: none;
}
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
text-decoration: none;
color: inherit;
}
/* Prose */
p {
line-height: var(--lineHeight-relaxed);
--baseline-multiplier: 0.179;
--x-height-multiplier: 0.35;
margin: var(--spacing-0) var(--spacing-0) var(--spacing-8) var(--spacing-0);
padding: var(--spacing-0);
}
ul,
ol {
margin-left: var(--spacing-0);
margin-right: var(--spacing-0);
padding: var(--spacing-0);
margin-bottom: var(--spacing-8);
list-style-position: outside;
list-style-image: none;
}
ul li,
ol li {
padding-left: var(--spacing-0);
margin-bottom: calc(var(--spacing-8) / 2);
}
li > p {
margin-bottom: calc(var(--spacing-8) / 2);
}
li *:last-child {
margin-bottom: var(--spacing-0);
}
li > ul {
margin-left: var(--spacing-8);
margin-top: calc(var(--spacing-8) / 2);
}
blockquote {
color: var(--color-text-light);
margin-left: calc(-1 * var(--spacing-6));
margin-right: var(--spacing-8);
padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-6);
border-left: var(--spacing-1) solid var(--color-primary);
font-size: var(--fontSize-2);
font-style: italic;
margin-bottom: var(--spacing-8);
}
blockquote > :last-child {
margin-bottom: var(--spacing-0);
}
blockquote > ul,
blockquote > ol {
list-style-position: inside;
}
table {
width: 100%;
margin-bottom: var(--spacing-8);
border-collapse: collapse;
border-spacing: 0.25rem;
}
table thead tr th {
border-bottom: 1px solid var(--color-accent);
}
/* Link */
a {
color: var(--color-primary);
}
a:hover,
a:focus {
text-decoration: none;
}
/* Custom classes */
.global-wrapper {
margin: var(--spacing-0) auto;
max-width: var(--maxWidth-wrapper);
padding: var(--spacing-10) var(--spacing-5);
}
.global-wrapper[data-is-root-path="true"] .bio {
margin-bottom: var(--spacing-20);
}
.global-header {
margin-bottom: var(--spacing-12);
}
.main-heading {
font-size: var(--fontSize-7);
margin: 0;
}
.post-list-item {
margin-bottom: var(--spacing-8);
margin-top: var(--spacing-8);
}
.post-list-item p {
margin-bottom: var(--spacing-0);
}
.post-list-item h2 {
font-size: var(--fontSize-4);
color: var(--color-primary);
margin-bottom: var(--spacing-2);
margin-top: var(--spacing-0);
}
.post-list-item header {
margin-bottom: var(--spacing-4);
}
.header-link-home {
font-weight: var(--fontWeight-bold);
font-family: var(--font-heading);
text-decoration: none;
font-size: var(--fontSize-2);
}
.bio {
display: flex;
margin-bottom: var(--spacing-16);
}
.bio p {
margin-bottom: var(--spacing-0);
}
.bio-avatar {
margin-right: var(--spacing-4);
margin-bottom: var(--spacing-0);
min-width: 50px;
border-radius: 100%;
}
.blog-post header h1 {
margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
}
.blog-post header p {
font-size: var(--fontSize-2);
font-family: var(--font-heading);
}
.blog-post-nav ul {
margin: var(--spacing-0);
}
.gatsby-highlight {
margin-bottom: var(--spacing-8);
}
/* Media queries */
@media (max-width: 42rem) {
blockquote {
padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-4);
margin-left: var(--spacing-0);
}
ul,
ol {
list-style-position: inside;
}
}

113
src/templates/blog-post.js Normal file
View File

@ -0,0 +1,113 @@
import * as React from "react"
import { Link, graphql } from "gatsby"
import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"
const BlogPostTemplate = ({
data: { previous, next, site, markdownRemark: post },
location,
}) => {
const siteTitle = site.siteMetadata?.title || `Title`
return (
<Layout location={location} title={siteTitle}>
<article
className="blog-post"
itemScope
itemType="http://schema.org/Article"
>
<header>
<h1 itemProp="headline">{post.frontmatter.title}</h1>
<p>{post.frontmatter.date}</p>
</header>
<section
dangerouslySetInnerHTML={{ __html: post.html }}
itemProp="articleBody"
/>
<hr />
<footer>
<Bio />
</footer>
</article>
<nav className="blog-post-nav">
<ul
style={{
display: `flex`,
flexWrap: `wrap`,
justifyContent: `space-between`,
listStyle: `none`,
padding: 0,
}}
>
<li>
{previous && (
<Link to={previous.fields.slug} rel="prev">
← {previous.frontmatter.title}
</Link>
)}
</li>
<li>
{next && (
<Link to={next.fields.slug} rel="next">
{next.frontmatter.title} →
</Link>
)}
</li>
</ul>
</nav>
</Layout>
)
}
export const Head = ({ data: { markdownRemark: post } }) => {
return (
<Seo
title={post.frontmatter.title}
description={post.frontmatter.description || post.excerpt}
/>
)
}
export default BlogPostTemplate
export const pageQuery = graphql`
query BlogPostBySlug(
$id: String!
$previousPostId: String
$nextPostId: String
) {
site {
siteMetadata {
title
}
}
markdownRemark(id: { eq: $id }) {
id
excerpt(pruneLength: 160)
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
}
}
previous: markdownRemark(id: { eq: $previousPostId }) {
fields {
slug
}
frontmatter {
title
}
}
next: markdownRemark(id: { eq: $nextPostId }) {
fields {
slug
}
frontmatter {
title
}
}
}
`

BIN
static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 B

2
static/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-agent: *
Disallow:

10419
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff