diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 7050fc7ef0614..29bc9b1ded255 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -2,17 +2,18 @@ title: Adding Markdown Pages --- -Gatsby can use markdown files to create pages in your site. -You add plugins to read and understand folders with markdown files and from them create pages automatically. +Gatsby can use Markdown files to create pages in your site. +You add plugins to read and understand folders with Markdown files and from them create pages automatically. Here are the steps Gatsby follows for making this happen. 1. Read files into Gatsby from the filesystem -2. Transform markdown to HTML and frontmatter to data -3. Create a page component for the markdown files -4. Programmatically create pages using Gatsby's Node.js `createPage` API +2. Transform Markdown to HTML and [frontmatter](#including-frontmatter) to data +3. Add a Markdown file +4. Create a page component for the Markdown files +5. Create static pages using Gatsby's Node.js `createPage` API -### Read files into Gatsby from the filesystem - `gatsby-source-filesystem` +## Read files into Gatsby from the filesystem Use the plugin [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/#gatsby-source-filesystem) to read files. @@ -20,31 +21,36 @@ Use the plugin [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/# `npm install --save gatsby-source-filesystem` -Now open `gatsby-config.js` to add this plugin to the plugin array. +#### Add plugin -To add a plugin, add either a string (the plugin name) or to pass options, an object. -For `gatsby-source-filesystem` we pass an object so we can set the file system path: +**NOTE:** There are two ways to add a plugin in `gatsby-config.js`. Either you can pass a string with the plugin name or in case you want to include options, pass an object. + +Open `gatsby-config.js` to add the `gatsby-source-filesystem` plugin. Now pass the object from the next block to the `plugins` array. By passing an object that includes the key `path`, you set the file system path. ```javascript:title=gatsby-config.js plugins: [ { resolve: `gatsby-source-filesystem`, options: { - path: `${__dirname}/path/to/markdown/files`, - name: "markdown-pages", + name: `markdown-pages`, + path: `${__dirname}/src/markdown-pages`, }, }, ] ``` -Now that we've "sourced" the markdown files from the filesystem, we can now "transform" the markdown to HTML and the YAML frontmatter to JSON. +Completing the above step means that you've "sourced" the Markdown files from the filesystem. You can now "transform" the Markdown to HTML and the YAML frontmatter to JSON. + +### Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark` -### Transforming markdown — `gatsby-transformer-remark` +You'll use the plugin [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/) to recognize files which are Markdown and read their content. The plugin will convert the frontmatter metadata part of your Markdown files as `frontmatter` and the content part as HTML. -We'll use the plugin [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/) to recognise files which are markdown and read its content. It will convert the frontmatter metadata part of your markdown file as `frontmatter` and the content part as HTML. +#### Install `npm install --save gatsby-transformer-remark` +#### Add plugin + Add this to `gatsby-config.js` after the previously added `gatsby-source-filesystem`. ```javascript:title=gatsby-config.js @@ -52,30 +58,37 @@ plugins: [ { resolve: `gatsby-source-filesystem`, options: { - path: `${__dirname}/path/to/markdown/files`, - name: "markdown-pages", + path: `${__dirname}/src/markdown-pages`, + name: `markdown-pages`, }, }, `gatsby-transformer-remark`, ] ``` -#### Note on creating markdown files. +### Add a Markdown file -When you create a Markdown file, at the top of the file, add the block below. You can have different key value pairs that are relevant to your website. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide this data in our React components. +Create a folder in the `/src` directory of your Gatsby application called `markdown-pages`. +Now create a Markdown file inside it with the name `post-1.md`. -``` +#### Including frontmatter + +When you create a Markdown file, at the top of the file, add the frontmatter (metadata) block below. You can have different key value pairs that are relevant to your website. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide this data in your React components. + +```markdown:title=src/markdown-pages/post-1.md --- path: "/blog/my-first-post" -date: "2017-11-07" +date: "2019-05-04" title: "My first blog post" --- ``` -### Create a page template for the markdown data. +What is important in this step is the key pair `path`. The value that is assgined to the key `path` is used in order to navigate to your post. + +### Create a page template for the Markdown files Create a folder in the `/src` directory of your Gatsby application called `templates`. -Now create a `blogTemplate.js` inside it with the following content. +Now create a `blogTemplate.js` inside it with the following content: ```jsx:title=src/templates/blogTemplate.js import React from "react" @@ -114,20 +127,24 @@ export const pageQuery = graphql` ` ``` -Two things are important in the file above. +Two things are important in the file above: 1. A GraphQL query is made in the second half of the file to get the Markdown data. Gatsby has automagically given you all the Markdown metadata and HTML in this query's result. + **Note: To learn more about GraphQL, consider this [excellent resource](https://www.howtographql.com/)** -2. The result of the query is injected by Gatsby into the `Template` component as `data`. `markdownRemark` is the property that we find has all the details of the Markdown file. We can use that to construct a template for our blogpost view. Since it's a React component, you could style it with any of the recommended styling systems in Gatsby. -### Create static pages using Gatsby's Node API. +2. The result of the query is injected by Gatsby into the `Template` component as `data`. `markdownRemark` is the property that you'll find has all the details of the Markdown file. You can use that to construct a template for our blog post view. Since it's a React component, you could style it with any of the [recommended styling systems](/docs/styling/) in Gatsby. -Gatsby exposes a powerful Node.js API, which allows for functionality such as creating dynamic pages. This API is available in the `gatsby-node.js` file in the root directory of your project, at the same level as `gatsby-config.js`. Each export found in this file will be run by Gatsby, as detailed in its [Node API specification](/docs/node-apis/). However, we only care about one particular API in this instance, `createPages`. +### Create static pages using Gatsby’s Node.js `createPage` API -Gatsby calls the `createPages` API (if present) at build time with injected parameters, `actions` and `graphql`. Use the `graphql` to query Markdown file data as below. Next use `createPage` action creator to create a page for each of the Markdown files using the `blogTemplate.js` we created in the previous step. +Gatsby exposes a powerful Node.js API, which allows for functionality such as creating dynamic pages. This API is available in the `gatsby-node.js` file in the root directory of your project, at the same level as `gatsby-config.js`. Each export found in this file will be run by Gatsby, as detailed in its [Node API specification](/docs/node-apis/). However, you should only care about one particular API in this instance, `createPages`. + +Use the `graphql` to query Markdown file data as below. Next, use the `createPage` action creator to create a page for each of the Markdown files using the `blogTemplate.js` you created in the previous step. + +**NOTE:** Gatsby calls the `createPages` API (if present) at build time with injected parameters, `actions` and `graphql`. ```javascript:title=gatsby-node.js -const path = require("path") +const path = require(`path`) exports.createPages = ({ actions, graphql }) => { const { createPage } = actions @@ -154,7 +171,7 @@ exports.createPages = ({ actions, graphql }) => { return Promise.reject(result.errors) } - result.data.allMarkdownRemark.edges.forEach(({ node }) => { + return result.data.allMarkdownRemark.edges.forEach(({ node }) => { createPage({ path: node.frontmatter.path, component: blogPostTemplate, @@ -165,12 +182,14 @@ exports.createPages = ({ actions, graphql }) => { } ``` -This should get you started on some basic markdown power in your Gatsby site. You can further customise the `frontmatter` and the template file to get desired effects! +This should get you started on some basic Markdown functionality in your Gatsby site. You can further customize the frontmatter and the template file to get desired effects! + +For more information, have a look in the working example `using-markdown-pages`. You can find it in the [Gatsby examples section](https://github.com/gatsbyjs/gatsby/tree/master/examples). ## Other tutorials -Check out tutorials listed on the [Awesome Gatsby](/docs/awesome-gatsby/#gatsby-tutorials) page for more looks at building Gatsby sites with markdown. +Check out tutorials listed on the [Awesome Gatsby](/docs/awesome-gatsby/#gatsby-tutorials) page for more information on building Gatsby sites with Markdown. -## Gatsby markdown starters +## Gatsby Markdown starters -There are a number of [Gatsby starters](/starters?c=Markdown) that come preconfigured to work with markdown. +There are also a number of [Gatsby starters](/starters?c=Markdown) that come pre-configured to work with Markdown. diff --git a/examples/using-markdown-pages/.gitignore b/examples/using-markdown-pages/.gitignore new file mode 100644 index 0000000000000..3c3629e647f5d --- /dev/null +++ b/examples/using-markdown-pages/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/examples/using-markdown-pages/README.md b/examples/using-markdown-pages/README.md new file mode 100644 index 0000000000000..148720799d7cf --- /dev/null +++ b/examples/using-markdown-pages/README.md @@ -0,0 +1,14 @@ +# Using Markdown Pages + +Demonstrates how to render Markdown files as pages in you Gatsby application. + +## Running an example site + +1. Clone `gatsby` repository `git clone git@github.com:gatsbyjs/gatsby.git` +2. Navigate to the example `cd gatsby/examples/using-markdown-pages` +3. Install the dependencies for the application by running `yarn` +4. Run the Gatsby development server `gatsby develop` + +## References + +- [Adding Markdown Pages](https://www.gatsbyjs.org/docs/adding-markdown-pages/) diff --git a/examples/using-markdown-pages/gatsby-browser.js b/examples/using-markdown-pages/gatsby-browser.js new file mode 100644 index 0000000000000..b1e5c316b7f94 --- /dev/null +++ b/examples/using-markdown-pages/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 diff --git a/examples/using-markdown-pages/gatsby-config.js b/examples/using-markdown-pages/gatsby-config.js new file mode 100644 index 0000000000000..da49d9011cdfb --- /dev/null +++ b/examples/using-markdown-pages/gatsby-config.js @@ -0,0 +1,39 @@ +module.exports = { + siteMetadata: { + title: `gatsby-example-using-markdown-pages`, + description: `Start your new blog using markdown files`, + author: `@gatsbyjs`, + }, + plugins: [ + { + resolve: `gatsby-source-filesystem`, + options: { + name: `markdown-pages`, + path: `${__dirname}/src/markdown-pages`, + }, + }, + `gatsby-transformer-remark`, + `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`, + }, + }, + ], +} diff --git a/examples/using-markdown-pages/gatsby-node.js b/examples/using-markdown-pages/gatsby-node.js new file mode 100644 index 0000000000000..504ea8266c887 --- /dev/null +++ b/examples/using-markdown-pages/gatsby-node.js @@ -0,0 +1,36 @@ +const path = require(`path`) + +exports.createPages = ({ actions, graphql }) => { + const { createPage } = actions + + const blogPostTemplate = path.resolve(`src/templates/blogTemplate.js`) + + return graphql(` + { + allMarkdownRemark( + sort: { order: DESC, fields: [frontmatter___date] } + limit: 1000 + ) { + edges { + node { + frontmatter { + path + } + } + } + } + } + `).then(result => { + if (result.errors) { + return Promise.reject(result.errors) + } + + return result.data.allMarkdownRemark.edges.forEach(({ node }) => { + createPage({ + path: node.frontmatter.path, + component: blogPostTemplate, + context: {}, // additional data can be passed via context + }) + }) + }) +} diff --git a/examples/using-markdown-pages/gatsby-ssr.js b/examples/using-markdown-pages/gatsby-ssr.js new file mode 100644 index 0000000000000..b17b8fc19d659 --- /dev/null +++ b/examples/using-markdown-pages/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 diff --git a/examples/using-markdown-pages/package.json b/examples/using-markdown-pages/package.json new file mode 100644 index 0000000000000..35da68f36cf51 --- /dev/null +++ b/examples/using-markdown-pages/package.json @@ -0,0 +1,37 @@ +{ + "name": "gatsby-example-using-markdown-pages", + "private": true, + "description": "Start your new blog using markdown files", + "version": "0.1.0", + "author": "@gatsbyjs", + "dependencies": { + "gatsby": "^2.3.34", + "gatsby-image": "^2.0.41", + "gatsby-plugin-manifest": "^2.0.29", + "gatsby-plugin-offline": "^2.0.25", + "gatsby-plugin-react-helmet": "^3.0.12", + "gatsby-plugin-sharp": "^2.0.35", + "gatsby-source-filesystem": "^2.0.33", + "gatsby-transformer-remark": "^2.3.12", + "gatsby-transformer-sharp": "^2.1.18", + "prop-types": "^15.7.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-helmet": "^5.2.1" + }, + "devDependencies": { + "prettier": "^1.17.0" + }, + "keywords": [ + "gatsby" + ], + "license": "MIT", + "scripts": { + "build": "gatsby build", + "develop": "gatsby develop", + "format": "prettier --write src/**/*.{js,jsx}", + "start": "npm run develop", + "serve": "gatsby serve", + "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" + } +} diff --git a/examples/using-markdown-pages/src/components/header.js b/examples/using-markdown-pages/src/components/header.js new file mode 100644 index 0000000000000..8990b7e31bb7a --- /dev/null +++ b/examples/using-markdown-pages/src/components/header.js @@ -0,0 +1,42 @@ +import { Link } from "gatsby" +import PropTypes from "prop-types" +import React from "react" + +const Header = ({ siteTitle }) => ( +
+
+

+ + {siteTitle} + +

+
+
+) + +Header.propTypes = { + siteTitle: PropTypes.string, +} + +Header.defaultProps = { + siteTitle: ``, +} + +export default Header diff --git a/examples/using-markdown-pages/src/components/layout.css b/examples/using-markdown-pages/src/components/layout.css new file mode 100644 index 0000000000000..b6f63320fb8ae --- /dev/null +++ b/examples/using-markdown-pages/src/components/layout.css @@ -0,0 +1,622 @@ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; +} +audio:not([controls]) { + display: none; + height: 0; +} +progress { + vertical-align: baseline; +} +[hidden], +template { + display: none; +} +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; +} +a:active, +a:hover { + outline-width: 0; +} +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} +b, +strong { + font-weight: inherit; + font-weight: bolder; +} +dfn { + font-style: italic; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +mark { + background-color: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +img { + border-style: none; +} +svg:not(:root) { + overflow: hidden; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +figure { + margin: 1em 40px; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +button, +input, +optgroup, +select, +textarea { + font: inherit; + margin: 0; +} +optgroup { + font-weight: 700; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +[type="reset"], +[type="submit"], +button, +html [type="button"] { + -webkit-appearance: button; +} +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0; +} +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + border: 1px solid silver; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} +textarea { + overflow: auto; +} +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +html { + font: 112.5%/1.45em georgia, serif; + box-sizing: border-box; + overflow-y: scroll; +} +* { + box-sizing: inherit; +} +*:before { + box-sizing: inherit; +} +*:after { + box-sizing: inherit; +} +body { + color: hsla(0, 0%, 0%, 0.8); + font-family: georgia, serif; + font-weight: normal; + word-wrap: break-word; + font-kerning: normal; + -moz-font-feature-settings: "kern", "liga", "clig", "calt"; + -ms-font-feature-settings: "kern", "liga", "clig", "calt"; + -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; + font-feature-settings: "kern", "liga", "clig", "calt"; +} +img { + max-width: 100%; + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +h1 { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 2.25rem; + line-height: 1.1; +} +h2 { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 1.62671rem; + line-height: 1.1; +} +h3 { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 1.38316rem; + line-height: 1.1; +} +h4 { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 1rem; + line-height: 1.1; +} +h5 { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 0.85028rem; + line-height: 1.1; +} +h6 { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + color: inherit; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-weight: bold; + text-rendering: optimizeLegibility; + font-size: 0.78405rem; + line-height: 1.1; +} +hgroup { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +ul { + margin-left: 1.45rem; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + list-style-position: outside; + list-style-image: none; +} +ol { + margin-left: 1.45rem; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + list-style-position: outside; + list-style-image: none; +} +dl { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +dd { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +p { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +figure { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +pre { + margin-left: 0; + margin-right: 0; + margin-top: 0; + margin-bottom: 1.45rem; + font-size: 0.85rem; + line-height: 1.42; + background: hsla(0, 0%, 0%, 0.04); + border-radius: 3px; + overflow: auto; + word-wrap: normal; + padding: 1.45rem; +} +table { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; + font-size: 1rem; + line-height: 1.45rem; + border-collapse: collapse; + width: 100%; +} +fieldset { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +blockquote { + margin-left: 1.45rem; + margin-right: 1.45rem; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +form { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +noscript { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +iframe { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +hr { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: calc(1.45rem - 1px); + background: hsla(0, 0%, 0%, 0.2); + border: none; + height: 1px; +} +address { + margin-left: 0; + margin-right: 0; + margin-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + margin-bottom: 1.45rem; +} +b { + font-weight: bold; +} +strong { + font-weight: bold; +} +dt { + font-weight: bold; +} +th { + font-weight: bold; +} +li { + margin-bottom: calc(1.45rem / 2); +} +ol li { + padding-left: 0; +} +ul li { + padding-left: 0; +} +li > ol { + margin-left: 1.45rem; + margin-bottom: calc(1.45rem / 2); + margin-top: calc(1.45rem / 2); +} +li > ul { + margin-left: 1.45rem; + margin-bottom: calc(1.45rem / 2); + margin-top: calc(1.45rem / 2); +} +blockquote *:last-child { + margin-bottom: 0; +} +li *:last-child { + margin-bottom: 0; +} +p *:last-child { + margin-bottom: 0; +} +li > p { + margin-bottom: calc(1.45rem / 2); +} +code { + font-size: 0.85rem; + line-height: 1.45rem; +} +kbd { + font-size: 0.85rem; + line-height: 1.45rem; +} +samp { + font-size: 0.85rem; + line-height: 1.45rem; +} +abbr { + border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); + cursor: help; +} +acronym { + border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); + cursor: help; +} +abbr[title] { + border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); + cursor: help; + text-decoration: none; +} +thead { + text-align: left; +} +td, +th { + text-align: left; + border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); + font-feature-settings: "tnum"; + -moz-font-feature-settings: "tnum"; + -ms-font-feature-settings: "tnum"; + -webkit-font-feature-settings: "tnum"; + padding-left: 0.96667rem; + padding-right: 0.96667rem; + padding-top: 0.725rem; + padding-bottom: calc(0.725rem - 1px); +} +th:first-child, +td:first-child { + padding-left: 0; +} +th:last-child, +td:last-child { + padding-right: 0; +} +tt, +code { + background-color: hsla(0, 0%, 0%, 0.04); + border-radius: 3px; + font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono", + "Liberation Mono", Menlo, Courier, monospace; + padding: 0; + padding-top: 0.2em; + padding-bottom: 0.2em; +} +pre code { + background: none; + line-height: 1.42; +} +code:before, +code:after, +tt:before, +tt:after { + letter-spacing: -0.2em; + content: " "; +} +pre code:before, +pre code:after, +pre tt:before, +pre tt:after { + content: ""; +} +@media only screen and (max-width: 480px) { + html { + font-size: 100%; + } +} diff --git a/examples/using-markdown-pages/src/components/layout.js b/examples/using-markdown-pages/src/components/layout.js new file mode 100644 index 0000000000000..52dda9b012c48 --- /dev/null +++ b/examples/using-markdown-pages/src/components/layout.js @@ -0,0 +1,53 @@ +/** + * Layout component that queries for data + * with Gatsby's StaticQuery component + * + * See: https://www.gatsbyjs.org/docs/static-query/ + */ + +import React from "react" +import PropTypes from "prop-types" +import { StaticQuery, graphql } from "gatsby" + +import Header from "./header" +import "./layout.css" + +const Layout = ({ children }) => ( + ( + <> +
+
+
{children}
+
+ © {new Date().getFullYear()}, Built with + {` `} + Gatsby +
+
+ + )} + /> +) + +Layout.propTypes = { + children: PropTypes.node.isRequired, +} + +export default Layout diff --git a/examples/using-markdown-pages/src/images/gatsby-astronaut.png b/examples/using-markdown-pages/src/images/gatsby-astronaut.png new file mode 100644 index 0000000000000..da58ece0a8c5b Binary files /dev/null and b/examples/using-markdown-pages/src/images/gatsby-astronaut.png differ diff --git a/examples/using-markdown-pages/src/images/gatsby-icon.png b/examples/using-markdown-pages/src/images/gatsby-icon.png new file mode 100644 index 0000000000000..908bc78a7f559 Binary files /dev/null and b/examples/using-markdown-pages/src/images/gatsby-icon.png differ diff --git a/examples/using-markdown-pages/src/markdown-pages/post-1.md b/examples/using-markdown-pages/src/markdown-pages/post-1.md new file mode 100644 index 0000000000000..762a7f297d15d --- /dev/null +++ b/examples/using-markdown-pages/src/markdown-pages/post-1.md @@ -0,0 +1,5 @@ +--- +path: "/blog/my-first-post" +date: "2019-05-04" +title: "My first blog post" +--- diff --git a/examples/using-markdown-pages/src/pages/404.js b/examples/using-markdown-pages/src/pages/404.js new file mode 100644 index 0000000000000..70bc752374a94 --- /dev/null +++ b/examples/using-markdown-pages/src/pages/404.js @@ -0,0 +1,12 @@ +import React from "react" + +import Layout from "../components/layout" + +const NotFoundPage = () => ( + +

NOT FOUND

+

You just hit a route that doesn't exist... the sadness.

+ +) + +export default NotFoundPage diff --git a/examples/using-markdown-pages/src/pages/index.js b/examples/using-markdown-pages/src/pages/index.js new file mode 100644 index 0000000000000..87488703dbfbc --- /dev/null +++ b/examples/using-markdown-pages/src/pages/index.js @@ -0,0 +1,14 @@ +import React from "react" +import { Link } from "gatsby" + +import Layout from "../components/layout" + +const IndexPage = () => ( + +

Hi people

+

Welcome to your new Gatsby blog with Markdown pages.

+ Go to my first Markdown blog post + +) + +export default IndexPage diff --git a/examples/using-markdown-pages/src/templates/blogTemplate.js b/examples/using-markdown-pages/src/templates/blogTemplate.js new file mode 100644 index 0000000000000..6b0dd9fe01ae8 --- /dev/null +++ b/examples/using-markdown-pages/src/templates/blogTemplate.js @@ -0,0 +1,34 @@ +import React from "react" +import { graphql } from "gatsby" + +export default function Template({ + data, // this prop will be injected by the GraphQL query below. +}) { + const { markdownRemark } = data // data.markdownRemark holds our post data + const { frontmatter, html } = markdownRemark + return ( +
+
+

{frontmatter.title}

+

{frontmatter.date}

+
+
+
+ ) +} + +export const pageQuery = graphql` + query($path: String!) { + markdownRemark(frontmatter: { path: { eq: $path } }) { + html + frontmatter { + date(formatString: "MMMM DD, YYYY") + path + title + } + } + } +`