diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..9c16e8e1 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +.cache +build +public diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..64e0d367 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,12 @@ +module.exports = { + env: { + browser: true, + es6: true, + jest: true, + node: true, + }, + extends: ['liferay/react'], + globals: { + __PATH_PREFIX__: true, + }, +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..9c16e8e1 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +.cache +build +public diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..938c943b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "bracketSpacing": false, + "singleQuote": true, + "tabWidth": 4, + "trailingComma": "es5", + "useTabs": true +} \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 6f6d7766..dd5db242 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,17 +1,24 @@ +stages: + - smoke + - lint + language: node_js -node_js: '9' +node_js: '8' before_install: - - nvm install 9 + - nvm install 8 - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.12.1 - export PATH=$HOME/.yarn/bin:$PATH -cache: - yarn: true +cache: yarn install: - yarn -script: - - rm -rf public/ .cache/ - - yarn build \ No newline at end of file +jobs: + include: + - stage: smoke + install: rm -rf public/ .cache/ && yarn + script: yarn build + - stage: lint + script: yarn format:check && yarn lint diff --git a/README.md b/README.md index a344d219..b8a7aa2e 100644 --- a/README.md +++ b/README.md @@ -4,21 +4,21 @@ [![Build Status](https://img.shields.io/travis/diegonvs/gatsby-boilerplate/master.svg?style=flat)](https://travis-ci.org/diegonvs/gatsby-boilerplate) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/) - Gatsby Boilerplate is a [Gatsby](https://github.com/gatsbyjs/gatsby) starter with a better development experience and the same content creation experience than [Electric.js](https://github.com/electricjs/electric). Feel free to contribute with issues and PRs! # Documentation + If you want to check the documentation 📚 click on this [link](https://github.com/diegonvs/gatsby-boilerplate/wiki). # Setup 0. Clone this repo or use Gatsby command line interface using `gatsby new [your_site] https://github.com/diegonvs/gatsby-boilerplate` or `git clone https://github.com/diegonvs/gatsby-boilerplate.git` 1. Make sure that you have [yarn](https://yarnpkg.com/en/) installed -2. Navigate to project folder and run `yarn` -3. Run `npm run develop` or `yarn develop` for development mode or run `npm run build` or `yarn build` for production mode -4. If you want serve your production build just run `npm run serve` or `yarn serve` +1. Navigate to project folder and run `yarn` +1. Run `npm run develop` or `yarn develop` for development mode or run `npm run build` or `yarn build` for production mode +1. If you want serve your production build just run `npm run serve` or `yarn serve` ## License diff --git a/content/blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheel.md b/content/blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheel.md index 15c7b021..e397b963 100644 --- a/content/blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheel.md +++ b/content/blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheel.md @@ -16,15 +16,15 @@ While this is going to be a big change for professional coffee tasters, it means The Specialty Coffee Association of America (SCAA), founded in 1982, is a non-profit trade organization for the specialty coffee industry. With members located in more than 40 countries, SCAA represents every segment of the specialty coffee industry, including: -* producers -* roasters -* importers/exporters -* retailers -* manufacturers -* baristas +- producers +- roasters +- importers/exporters +- retailers +- manufacturers +- baristas For over 30 years, SCAA has been dedicated to creating a vibrant specialty coffee community by recognizing, developing and promoting specialty coffee. SCAA sets and maintains quality standards for the industry, conducts market research, and provides education, training, resources, and business services for its members. Coffee cupping, or coffee tasting, is the practice of observing the tastes and aromas of brewed coffee. It is a professional practice but can be done informally by anyone or by professionals known as "Q Graders". A standard coffee cupping procedure involves deeply sniffing the coffee, then loudly slurping the coffee so it spreads to the back of the tongue. -The coffee taster attempts to measure aspects of the coffee's taste, specifically the body (the texture or mouthfeel, such as oiliness), sweetness, acidity (a sharp and tangy feeling, like when biting into an orange), flavour (the characters in the cup), and aftertaste. Since coffee beans embody telltale flavours from the region where they were grown, cuppers may attempt to identify the coffee's origin. \ No newline at end of file +The coffee taster attempts to measure aspects of the coffee's taste, specifically the body (the texture or mouthfeel, such as oiliness), sweetness, acidity (a sharp and tangy feeling, like when biting into an orange), flavour (the characters in the cup), and aftertaste. Since coffee beans embody telltale flavours from the region where they were grown, cuppers may attempt to identify the coffee's origin. diff --git a/content/blog/2017-01-04-a-beginners-guide-to-brewing-with-chemex.md b/content/blog/2017-01-04-a-beginners-guide-to-brewing-with-chemex.md index 0fed4bbb..c104c183 100644 --- a/content/blog/2017-01-04-a-beginners-guide-to-brewing-with-chemex.md +++ b/content/blog/2017-01-04-a-beginners-guide-to-brewing-with-chemex.md @@ -23,4 +23,4 @@ The Chemex Coffeemaker consists of an hourglass-shaped glass flask with a conica The most visually distinctive feature of the Chemex is the heatproof wooden collar around the neck, allowing it to be handled and poured when full of hot water. This is turned, then split in two to allow it to fit around the glass neck. The two pieces are held loosely in place by a tied leather thong. The pieces are not tied tightly and can still move slightly, retained by the shape of the conical glass. -For a design piece that became popular post-war at a time of Modernism and precision manufacture, this juxtaposition of natural wood and the organic nature of a hand-tied knot with the laboratory nature of glassware was a distinctive feature of its appearance. \ No newline at end of file +For a design piece that became popular post-war at a time of Modernism and precision manufacture, this juxtaposition of natural wood and the organic nature of a hand-tied knot with the laboratory nature of glassware was a distinctive feature of its appearance. diff --git a/content/blog/2017-01-04-just-in-small-batch-of-jamaican-blue-mountain-in-store-next-week.md b/content/blog/2017-01-04-just-in-small-batch-of-jamaican-blue-mountain-in-store-next-week.md index 0a18e3ed..86523fc4 100644 --- a/content/blog/2017-01-04-just-in-small-batch-of-jamaican-blue-mountain-in-store-next-week.md +++ b/content/blog/2017-01-04-just-in-small-batch-of-jamaican-blue-mountain-in-store-next-week.md @@ -3,8 +3,8 @@ author: Matuzalém Teles banner: images/jamaicanbluemountain.jpg date: 2017-01-04T15:04:10.000Z description: >- - We’re proud to announce that we’ll be offering a small batch of Jamaica Blue - Mountain coffee beans in our store next week. + We’re proud to announce that we’ll be offering a small batch of Jamaica Blue + Mountain coffee beans in our store next week. title: 'Just in: small batch of Jamaican Blue Mountain in store next week' --- @@ -16,7 +16,7 @@ Blue Mountain Peak is the highest mountain in Jamaica and one of the highest pea The Blue Mountains are considered by many to be a hiker's and camper's paradise. The traditional Blue Mountain trek is a 7-mile hike to the peak and consists of a 3,000-foot increase in elevation. Jamaicans prefer to reach the peak at sunrise, thus the 3–4 hour hike is usually undertaken in darkness. Since the sky is usually very clear in the mornings, Cuba can be seen in the distance. ->Some of the plants found on the Blue Mountain cannot be found anywhere else in the world and they are often of a dwarfed sort. +> Some of the plants found on the Blue Mountain cannot be found anywhere else in the world and they are often of a dwarfed sort. This is mainly due to the cold climate which inhibits growth. The small coffee farming communities of Claverty Cottage and Hagley Gap are located near the peak. @@ -28,4 +28,4 @@ Jamaican Blue Mountain Coffee or Jamaica Blue Mountain Coffee is a classificatio Jamaican Blue Mountain Coffee is a globally protected certification mark, meaning only coffee certified by the Coffee Industry Board of Jamaica can be labeled as such. It comes from a recognized growing region in the Blue Mountain region of Jamaica, and its cultivation is monitored by the Coffee Industry Board of Jamaica. -The Blue Mountains are generally located between Kingston to the south and Port Antonio to the north. Rising 7,402 ft, they are some of the highest mountains in the Caribbean. The climate of the region is cool and misty with high rainfall. The soil is rich, with excellent drainage. This combination of climate and soil is considered ideal for coffee. \ No newline at end of file +The Blue Mountains are generally located between Kingston to the south and Port Antonio to the north. Rising 7,402 ft, they are some of the highest mountains in the Caribbean. The climate of the region is cool and misty with high rainfall. The soil is rich, with excellent drainage. This combination of climate and soil is considered ideal for coffee. diff --git a/content/blog/2018-11-07-release.md b/content/blog/2018-11-07-release.md index 17fd729b..93662d4c 100644 --- a/content/blog/2018-11-07-release.md +++ b/content/blog/2018-11-07-release.md @@ -9,4 +9,4 @@ needsAuth: false ![doge](/gatsby-boilerplate/images/hoohay.jpg) -Check it out at https://gatsby-boilerplate.wedeploy.io \ No newline at end of file +Check it out at https://gatsby-boilerplate.wedeploy.io diff --git a/content/blog/2018-12-11-liferay-portal-ce-clustering-returns.md b/content/blog/2018-12-11-liferay-portal-ce-clustering-returns.md index 90c0d05e..62383c69 100644 --- a/content/blog/2018-12-11-liferay-portal-ce-clustering-returns.md +++ b/content/blog/2018-12-11-liferay-portal-ce-clustering-returns.md @@ -3,7 +3,7 @@ author: Bryan H Cheung banner: https://community.liferay.com/o/osb-community-theme/images/header-bg.jpg date: 2018-12-11T12:00:00.000Z description: I’m happy to announce we will be returning out of the box support for clustering with the release of Liferay Portal 7.1 CE GA3. -title: Liferay Portal CE Clustering Returns +title: Liferay Portal CE Clustering Returns needsAuth: false url: https://community.liferay.com/blogs/-/blogs/liferay-portal-ce-clustering-returns ---- \ No newline at end of file +--- diff --git a/content/docs/additional-features.md b/content/docs/additional-features.md index 2bbb672e..662a3066 100644 --- a/content/docs/additional-features.md +++ b/content/docs/additional-features.md @@ -1,31 +1,35 @@ --- -title: "Additional Features" +title: 'Additional Features' order: 3 --- ## Auth + If you want to restrict a page, you can use `needsAuth` frontmatter on the top of any markdown file. When you set to true, this page will be restricted for private users only. This authentication is provided by a [WeDeploy Auth](https://wedeploy.com/docs/auth/getting-started/) service that can be set on a `.env.production` or `.env.development` file. These files configuration will be explained in the next section. ## Progressive Web App support -Gatsby Boilerplate is a Progressive Web App, if you aren't familiar with this term, check this [link](https://developers.google.com/web/progressive-web-apps/). -During the development, this boilerplate was battle tested to turns it into a real PWA covering all [PWA checklist](https://developers.google.com/web/progressive-web-apps/checklist). +Gatsby Boilerplate is a Progressive Web App, if you aren't familiar with this term, check this [link](https://developers.google.com/web/progressive-web-apps/). + +During the development, this boilerplate was battle tested to turns it into a real PWA covering all [PWA checklist](https://developers.google.com/web/progressive-web-apps/checklist). -We could personalize our [progressive web app manifest file](https://developers.google.com/web/fundamentals/web-app-manifest/?hl=en) changing the values on `Gatsby-config.js` file. +We could personalize our [progressive web app manifest file](https://developers.google.com/web/fundamentals/web-app-manifest/?hl=en) changing the values on `Gatsby-config.js` file. ->PS: this files will be created only in build time when you perform a `gatsby build`. +> PS: this files will be created only in build time when you perform a `gatsby build`. ## Offline Support -We could personalize what type of files we can cache on `Gatsby-config.js` file on `gatsby-plugin-offline` options. + +We could personalize what type of files we can cache on `Gatsby-config.js` file on `gatsby-plugin-offline` options. Default extensions are: `js,jpg,png,gif,html,css,svg` ## GZIP compression -If you want to disable the default zopfli plugin to compress our files just remove `gatsby-plugin-zopfli` on `Gatsby-config.js`. +If you want to disable the default zopfli plugin to compress our files just remove `gatsby-plugin-zopfli` on `Gatsby-config.js`. ## Config and enviroment(.env) files + Gatsby uses a standard to define [enviroment variables](https://en.wikipedia.org/wiki/Environment_variable) on his code. You can provide environment variables to your site to customize its behavior in different environments. Gatsby Boilerplate offers two possible files: `.env.production` which is used to set environment variables on production and `.env.development` that can be used to set environment variables on development. diff --git a/content/docs/deployment.md b/content/docs/deployment.md index cedb56e2..4605e5d2 100644 --- a/content/docs/deployment.md +++ b/content/docs/deployment.md @@ -1,5 +1,5 @@ --- -title: "Deployment" +title: 'Deployment' order: 4 --- @@ -10,6 +10,7 @@ Hey, it's great to see you here! 💖 Here, in this article, I'll teach you how to deploy your website started from Gatsby Boilerplate on [WeDeploy](https://wedeploy.com). > # TL;DR +> > This guide teach you how to deploy using WeDeploy, but you can use the same strategy of deployment exposing `public` folder to your favorite host folder. ### WeDeploy @@ -37,12 +38,12 @@ Here, in this article, I'll teach you how to deploy your website started from Ga ```json { - "id": "", - "image": "wedeploy/auth:2.8.0", - "env": { - "WEDEPLOY_AUTH_SECURE_FIELDS": "providers, email, password, resetKey, supportedScopes", - "WEDEPLOY_AUTH_PASSWORD": "true" - } + "id": "", + "image": "wedeploy/auth:2.8.0", + "env": { + "WEDEPLOY_AUTH_SECURE_FIELDS": "providers, email, password, resetKey, supportedScopes", + "WEDEPLOY_AUTH_PASSWORD": "true" + } } ``` @@ -52,6 +53,6 @@ For more information configuring this `wedeploy.json` for auth service, check th _Considering that you have installed `wedeploy` command line interface, if not, check this [link](https://wedeploy.com/docs/intro/using-the-command-line/)_ -Just fire 'we deploy' on `public/` and on `public/auth` folder to deploy your Gatsby Boilerplate instance to the cloud and see magic happening +Just fire 'we deploy' on `public/` and on `public/auth` folder to deploy your Gatsby Boilerplate instance to the cloud and see magic happening 🔥 🔥 🔥 🔥 🔥 🌈 🌈 🌈 🌈 🌈 diff --git a/content/docs/environment-variables.md b/content/docs/environment-variables.md index 64015b02..f36f699c 100644 --- a/content/docs/environment-variables.md +++ b/content/docs/environment-variables.md @@ -1,21 +1,22 @@ --- -title: "Enviroment Variables" +title: 'Enviroment Variables' order: 5 --- ## Config and enviroment(.env) files + Gatsby uses a standard to define [enviroment variables](https://en.wikipedia.org/wiki/Environment_variable) on his code. You can provide environment variables to your site to customize its behavior in different environments. Gatsby Boilerplate offers two possible files: `.env.production` which is used to set environment variables on production and `.env.development` that can be used to set environment variables on development. Gatsby Boilerplate uses the following environment variables: -- `ALGOLIA_API_KEY` is used to set the API Key for [Algolia search](https://www.algolia.com/doc/guides/security/api-keys/) service. -- `ALGOLIA_INDEX_NAME` is used to set another one necessary Algolia credential to use the service. -- `GA_TRACKING_ID` is used to set the tracking ID for Google Analytics track your app using `gatsby-google-analytics` plugin. -- `GITHUB_REPO` is used to make references of a repo that have been passed to some components like Footer, Navigation... -- `PROJECT_NAME` is used to define some titles on the page. Default value: `Gatsby Boilerplate`. -- `WEDEPLOY_AUTH_SERVICE_URL` is used to set your WeDeploy auth service URL. More info on this [link](https://wedeploy.com/tutorials/auth-web/get-started/) -- `WEDEPLOY_MASTER_TOKEN` is used to set your WeDeploy project's master token. +- `ALGOLIA_API_KEY` is used to set the API Key for [Algolia search](https://www.algolia.com/doc/guides/security/api-keys/) service. +- `ALGOLIA_INDEX_NAME` is used to set another one necessary Algolia credential to use the service. +- `GA_TRACKING_ID` is used to set the tracking ID for Google Analytics track your app using `gatsby-google-analytics` plugin. +- `GITHUB_REPO` is used to make references of a repo that have been passed to some components like Footer, Navigation... +- `PROJECT_NAME` is used to define some titles on the page. Default value: `Gatsby Boilerplate`. +- `WEDEPLOY_AUTH_SERVICE_URL` is used to set your WeDeploy auth service URL. More info on this [link](https://wedeploy.com/tutorials/auth-web/get-started/) +- `WEDEPLOY_MASTER_TOKEN` is used to set your WeDeploy project's master token. -For more information to improve this file, check this [guide](https://www.gatsbyjs.org/docs/environment-variables/). \ No newline at end of file +For more information to improve this file, check this [guide](https://www.gatsbyjs.org/docs/environment-variables/). diff --git a/content/docs/index.md b/content/docs/index.md index b63014ca..89463923 100644 --- a/content/docs/index.md +++ b/content/docs/index.md @@ -1,4 +1,4 @@ --- -redirect: "/docs/migration-from-electric/first-considerations/what-is.html" -title: "Documentation" ---- \ No newline at end of file +redirect: '/docs/migration-from-electric/first-considerations/what-is.html' +title: 'Documentation' +--- diff --git a/content/docs/migration-from-electric/first-considerations/index.md b/content/docs/migration-from-electric/first-considerations/index.md index cd36e970..ba325b8e 100644 --- a/content/docs/migration-from-electric/first-considerations/index.md +++ b/content/docs/migration-from-electric/first-considerations/index.md @@ -1,6 +1,6 @@ --- -redirect: "/docs/migration-from-electric/first-considerations/what-is.html" -title: "First Considerations" +redirect: '/docs/migration-from-electric/first-considerations/what-is.html' +title: 'First Considerations' order: 1 alwaysActive: true ---- \ No newline at end of file +--- diff --git a/content/docs/migration-from-electric/first-considerations/structure.md b/content/docs/migration-from-electric/first-considerations/structure.md index 5806745f..119e8b39 100644 --- a/content/docs/migration-from-electric/first-considerations/structure.md +++ b/content/docs/migration-from-electric/first-considerations/structure.md @@ -1,29 +1,35 @@ --- -title: "Structure" +title: 'Structure' order: 3 --- ## `Content` folder + For changes on content, you could use the `content` folder located on the root of the generated project. Note that markdown receives some variables(called `frontmatter`) on top of the file, we will use a lot of them to personalize content, rules of visualization and website integration with services like Auth for example. Note that we have a folder for each template and each template has his particularities. ->Note that this page is exactly the same as `pages` folder on Electric. +> Note that this page is exactly the same as `pages` folder on Electric. ## `Pages` folder + We could create static OOTB(out of the box, without a template) pages using this folder. Check this [link](https://www.gatsbyjs.org/docs/creating-and-modifying-pages/). ## `Static` folder + Here, we can host our static assets, like images, videos, JSON to our application consume. Note that during build process all folders and files will be served on the root of the output build folder, called `public`. ## GraphQL + Gatsby uses GraphQL to load data into project's React components during Server-Side Rendering, check this [link](https://www.gatsbyjs.org/docs/querying-with-graphql/), thereby, you must be familiar with this tool to provide better customizations(like new frontmatter fields, API changes) for your web app. ## Markdown Rendering + On Gatsby Boilerplate all content that will be inserted on each page it's inserted using Markdown, the same content template language of Electric. Check [this](https://guides.github.com/features/mastering-markdown/) 3 minutes tutorial to be familiar with Markdown if you aren't familiar. Gatsby Boilerplate uses [Gatsby MDX](https://github.com/ChristopherBiscardi/gatsby-mdx) for render Markdown. ## Last but not least important -- We don't use `layout` frontmatter variable as a variable to define what template can be used because Gatsby Boilerplate resolves it for us using the folder name. This variable is called internally `templateKey` if you want to check how it's implemented. -- Note that, like Electric, our page URL is the same as the name of the correspondent Markdown file. +- We don't use `layout` frontmatter variable as a variable to define what template can be used because Gatsby Boilerplate resolves it for us using the folder name. This variable is called internally `templateKey` if you want to check how it's implemented. + +- Note that, like Electric, our page URL is the same as the name of the correspondent Markdown file. diff --git a/content/docs/migration-from-electric/first-considerations/styling.md b/content/docs/migration-from-electric/first-considerations/styling.md index df1cea27..5864202c 100644 --- a/content/docs/migration-from-electric/first-considerations/styling.md +++ b/content/docs/migration-from-electric/first-considerations/styling.md @@ -1,5 +1,5 @@ --- -title: "Styling" +title: 'Styling' order: 2 --- diff --git a/content/docs/migration-from-electric/first-considerations/what-is.md b/content/docs/migration-from-electric/first-considerations/what-is.md index a1d32b8f..865759f9 100644 --- a/content/docs/migration-from-electric/first-considerations/what-is.md +++ b/content/docs/migration-from-electric/first-considerations/what-is.md @@ -1,12 +1,14 @@ --- -title: "What is?" +title: 'What is?' order: 1 --- ## What is Electric and Gatsby? + These platforms have been created to build static pages and help developers to create amazing websites using an established Front End architecture. ## So, what the status of this platforms? + Gatsby is maintained by a powerful community and it's made by super community-backed tools like React and GraphQL. Actually(November 2018) a lot of websites were built using this tool, check this [link](https://www.gatsbyjs.org/showcase/) for Gatsby's showcase. Electric was maintained by Liferay using some internal tools like Metal.js and Senna.js to be a sandbox for this tools. However, Liferay had discontinued this project due to internal decisions. diff --git a/content/docs/migration-from-electric/index.md b/content/docs/migration-from-electric/index.md index feb4b862..21645ea0 100644 --- a/content/docs/migration-from-electric/index.md +++ b/content/docs/migration-from-electric/index.md @@ -1,6 +1,6 @@ --- -redirect: "/docs/migration-from-electric/first-considerations/what-is.html" -title: "Migration From Electric" +redirect: '/docs/migration-from-electric/first-considerations/what-is.html' +title: 'Migration From Electric' alwaysActive: true order: 1 ---- \ No newline at end of file +--- diff --git a/content/docs/migration-from-electric/migration-guides/blogs.md b/content/docs/migration-from-electric/migration-guides/blogs.md index 7a4322c8..6a42162a 100644 --- a/content/docs/migration-from-electric/migration-guides/blogs.md +++ b/content/docs/migration-from-electric/migration-guides/blogs.md @@ -1,5 +1,5 @@ --- -title: "From Blog template" +title: 'From Blog template' order: 1 --- @@ -10,16 +10,19 @@ We could migrate all our content to blog using the `content` folder as mentioned > Note that Electric has the same possible values to be passed to the `frontmatter` of a post. ## Electric blog frontmatter example: + ```markdown --- -title: "Markdown Post" -description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit." -date: "February 02, 2017" -author: "Author Name" -layout: "blog" +title: 'Markdown Post' +description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.' +date: 'February 02, 2017' +author: 'Author Name' +layout: 'blog' --- ``` + ## Gatsby blog frontmatter example: + ```markdown --- author: Diego Nascimento @@ -33,8 +36,9 @@ title: Making sense of the SCAA’s new Flavor Wheel ## Changes: frontmatter: -- `date` follow a date standard to Gatsby analyze and decode date. You can change time format on `date` query field on blog template file to another format, for example, from "MMMM DD, YYYY" to "DD MMMM, YYYY" -- `banner` is an optional `frontmatter` that can be used to expose a banner for the post on blog list of our blog. + +- `date` follow a date standard to Gatsby analyze and decode date. You can change time format on `date` query field on blog template file to another format, for example, from "MMMM DD, YYYY" to "DD MMMM, YYYY" +- `banner` is an optional `frontmatter` that can be used to expose a banner for the post on blog list of our blog. > Note that we don't need to pass our values between quotation marks diff --git a/content/docs/migration-from-electric/migration-guides/docs.md b/content/docs/migration-from-electric/migration-guides/docs.md index 4eb75bce..310fb967 100644 --- a/content/docs/migration-from-electric/migration-guides/docs.md +++ b/content/docs/migration-from-electric/migration-guides/docs.md @@ -1,33 +1,38 @@ --- -title: "From Docs template" +title: 'From Docs template' order: 2 --- ## Let's start migrating content from `Docs` Template: -> *special thanks for [Matuzalém Teles](http://github.com/matuzalemsteles) who developed a part of this template on clayui.com* +> _special thanks for [Matuzalém Teles](http://github.com/matuzalemsteles) who developed a part of this template on clayui.com_ We have 2 possible use cases for Docs navigation: -- We could create a section that is used as a page too. -- We could create a tree of sections that can be used to nest sections and pages. + +- We could create a section that is used as a page too. +- We could create a tree of sections that can be used to nest sections and pages. ### Changes: + frontmatter: -- `redirect` is an optional `frontmatter` that can be used to redirect a route or page to another. When you are trying to access a page route, this page will redirect you for another that had been described on `redirect` frontmatter. + +- `redirect` is an optional `frontmatter` that can be used to redirect a route or page to another. When you are trying to access a page route, this page will redirect you for another that had been described on `redirect` frontmatter. Search Component: -- Seach Component was removed because isn't working in an adequated way. [Algolia search](https://www.algolia.com/) was inserted to provide this search service. To enable Algolia search on your template you can set `ALGOLIA_API_KEY` and `ALGOLIA_INDEX_NAME` environments variables on .env files. + +- Seach Component was removed because isn't working in an adequated way. [Algolia search](https://www.algolia.com/) was inserted to provide this search service. To enable Algolia search on your template you can set `ALGOLIA_API_KEY` and `ALGOLIA_INDEX_NAME` environments variables on .env files. > If you don't provide any ALGOLIA enviroment variables, search component will not render in production mode. More info you could view .env files section > We could use Code Tabs with an option to copy our code using the default markdown code notation. -For example: -``` +> For example: + +```` ```javascript function dale() { console.log('oiw'); } ``` -``` +```` diff --git a/content/docs/migration-from-electric/migration-guides/index.md b/content/docs/migration-from-electric/migration-guides/index.md index 79fcb383..55fb74a1 100644 --- a/content/docs/migration-from-electric/migration-guides/index.md +++ b/content/docs/migration-from-electric/migration-guides/index.md @@ -1,5 +1,5 @@ --- -redirect: "/docs/migration-from-electric/migration-guides/docs.html" -title: "Migration Guides" +redirect: '/docs/migration-from-electric/migration-guides/docs.html' +title: 'Migration Guides' order: 2 ---- \ No newline at end of file +--- diff --git a/content/docs/migration-from-electric/migration-guides/onboarding.md b/content/docs/migration-from-electric/migration-guides/onboarding.md index 290b6d8a..eed45095 100644 --- a/content/docs/migration-from-electric/migration-guides/onboarding.md +++ b/content/docs/migration-from-electric/migration-guides/onboarding.md @@ -1,5 +1,5 @@ --- -title: "From Tutorials template" +title: 'From Tutorials template' order: 3 --- @@ -8,8 +8,9 @@ order: 3 Note that Tutorials template was renamed to `Onboarding` due usage on Onboarding pages, If you didn't agree that, fill an issue. ### Changes: + frontmatter: -- `stepNumber` frontmatter variable is a number that you can provide to order your markdown files in steps. -- `time` frontmatter was removed because this time to read is calculated internally, however, the time to read component wasn't completed yet. -- `buttonTitle` was removed because is unused in most of the projects. +- `stepNumber` frontmatter variable is a number that you can provide to order your markdown files in steps. +- `time` frontmatter was removed because this time to read is calculated internally, however, the time to read component wasn't completed yet. +- `buttonTitle` was removed because is unused in most of the projects. diff --git a/content/docs/migration-from-electric/migration-guides/updates.md b/content/docs/migration-from-electric/migration-guides/updates.md index 1e73517d..72dda81c 100644 --- a/content/docs/migration-from-electric/migration-guides/updates.md +++ b/content/docs/migration-from-electric/migration-guides/updates.md @@ -1,8 +1,8 @@ --- -title: "From Updates template" +title: 'From Updates template' order: 4 --- ## Let's start migrating content from `Updates` Template: -We could use the same Markdown `frontmatter` to make changes on the Updates template. \ No newline at end of file +We could use the same Markdown `frontmatter` to make changes on the Updates template. diff --git a/content/docs/throubleshooting.md b/content/docs/throubleshooting.md index 3c4d45ff..33e71ca7 100644 --- a/content/docs/throubleshooting.md +++ b/content/docs/throubleshooting.md @@ -1,15 +1,17 @@ --- -title: "Troubleshooting" +title: 'Troubleshooting' order: 2 --- Before create a bug on project's repository, check the following quick tips to solve some troubles: -- My page is not being hot reloaded: -> Answer: Try re-run `gatsby develop`. If the problem isn't solved clear all aplication data in Chrome's Application tab. +- My page is not being hot reloaded: -- There are some missing routes or pages: -> Answer: Delete `.cache` and `public` folder on the root of the project and try again. + > Answer: Try re-run `gatsby develop`. If the problem isn't solved clear all aplication data in Chrome's Application tab. + +- There are some missing routes or pages: + > Answer: Delete `.cache` and `public` folder on the root of the project and try again. ### Known Bugs: -Check gatsby-boilerplate issues on [this](https://github.com/diegonvs/gatsby-boilerplate/issues) link \ No newline at end of file + +Check gatsby-boilerplate issues on [this](https://github.com/diegonvs/gatsby-boilerplate/issues) link diff --git a/content/onboarding/index.md b/content/onboarding/index.md index d7ec0e3a..ca26094a 100644 --- a/content/onboarding/index.md +++ b/content/onboarding/index.md @@ -4,7 +4,6 @@ title: Getting Started description: Some steps to start development using Gatsby --- -Welcome to the Getting Started Guide of Gatsby Boilerplate -======================= +# Welcome to the Getting Started Guide of Gatsby Boilerplate -Click the Get Started button to begin! \ No newline at end of file +Click the Get Started button to begin! diff --git a/content/onboarding/one.md b/content/onboarding/one.md index 2c7f0abb..dde79037 100644 --- a/content/onboarding/one.md +++ b/content/onboarding/one.md @@ -7,11 +7,12 @@ short: Clone ## Github -Clone the project by running one of these commands: +Clone the project by running one of these commands: ```bash http git clone https://github.com/diegonvs/gatsby-boilerplate.git ``` + ```bash ssh git clone git@github.com:diegonvs/gatsby-boilerplate.git ``` @@ -20,7 +21,7 @@ After the clone succeeds, navigate to `gatsby-boilerplate/` on your machine and ## Gatsby CLI -If you have Gatsby installed globally, use the Gatsby command line interface by running: +If you have Gatsby installed globally, use the Gatsby command line interface by running: ```sh gatsby new https://github.com/diegonvs/gatsby-boilerplate diff --git a/content/onboarding/success.md b/content/onboarding/success.md index 429d48b4..803eacaa 100644 --- a/content/onboarding/success.md +++ b/content/onboarding/success.md @@ -7,4 +7,4 @@ short: Success For more information, see [the documentation](/docs/). -![end](/images/end.gif) \ No newline at end of file +![end](/images/end.gif) diff --git a/content/onboarding/three.md b/content/onboarding/three.md index 2fbf3c3d..e2f8cb12 100644 --- a/content/onboarding/three.md +++ b/content/onboarding/three.md @@ -5,13 +5,13 @@ stepNumber: 3 short: Run --- -For development mode, follow these steps: +For development mode, follow these steps: -1. Run `npm run develop` or `yarn develop`. -2. Open `https://localhost:8000`. +1. Run `npm run develop` or `yarn develop`. +2. Open `https://localhost:8000`. -For production mode, follow these steps: +For production mode, follow these steps: -1. Run `npm run build` or `yarn build`. +1. Run `npm run build` or `yarn build`. 2. If you ran the `npm` command in the first step, run `npm run serve`. If you ran the `yarn` command, run `yarn serve`. 3. Open `https://localhost:9000`. diff --git a/content/onboarding/two.md b/content/onboarding/two.md index 05833849..8e6176eb 100644 --- a/content/onboarding/two.md +++ b/content/onboarding/two.md @@ -5,4 +5,4 @@ stepNumber: 2 short: Environment --- -Before building your project, set its environment variables by following the documentation [here](/docs/environment-variables.html). Otherwise, your project will use the default values for these variables. +Before building your project, set its environment variables by following the documentation [here](/docs/environment-variables.html). Otherwise, your project will use the default values for these variables. diff --git a/content/updates/index.md b/content/updates/index.md index 540d4669..ddbe6df3 100644 --- a/content/updates/index.md +++ b/content/updates/index.md @@ -3,55 +3,44 @@ title: Updates description: Check out what's new mainPage: true updates: - - - version: 1.0.0 - major: true - features: - - - icon: repository - title: Gatsby Boilerplate release! - description: Gatsby Boilerplate was released! - url: https://github.com/diegonvs/gatsby-boilerplate/releases - - - version: 1.0.1 - major: false - features: - - - icon: star - title: Sample Title - description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. - url: https://github.com/diegonvs/gatsby-boilerplate/pulls/3 - - - icon: sun - title: Sample Title - description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. - url: https://github.com/diegonvs/gatsby-boilerplate/pulls/4 - - - version: 2.0.0 - major: true - features: - - - icon: star - title: Sample Title - description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. - url: https://github.com/diegonvs/gatsby-boilerplate/pulls/3 - - - icon: sun - title: Sample Title - description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. - url: https://github.com/diegonvs/gatsby-boilerplate/pulls/4 - - - version: 1.4.0 - major: false - features: - - - icon: star - title: Sample Title - description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. - url: https://github.com/diegonvs/gatsby-boilerplate/pulls/3 - - - icon: sun - title: Sample Title - description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. - url: https://github.com/diegonvs/gatsby-boilerplate/pulls/4 ---- \ No newline at end of file + - version: 1.0.0 + major: true + features: + - icon: repository + title: Gatsby Boilerplate release! + description: Gatsby Boilerplate was released! + url: https://github.com/diegonvs/gatsby-boilerplate/releases + - version: 1.0.1 + major: false + features: + - icon: star + title: Sample Title + description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. + url: https://github.com/diegonvs/gatsby-boilerplate/pulls/3 + - icon: sun + title: Sample Title + description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. + url: https://github.com/diegonvs/gatsby-boilerplate/pulls/4 + - version: 2.0.0 + major: true + features: + - icon: star + title: Sample Title + description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. + url: https://github.com/diegonvs/gatsby-boilerplate/pulls/3 + - icon: sun + title: Sample Title + description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. + url: https://github.com/diegonvs/gatsby-boilerplate/pulls/4 + - version: 1.4.0 + major: false + features: + - icon: star + title: Sample Title + description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. + url: https://github.com/diegonvs/gatsby-boilerplate/pulls/3 + - icon: sun + title: Sample Title + description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla libero, eleifend in euismod eget, fringilla id diam. Proin quis interdum ipsum. + url: https://github.com/diegonvs/gatsby-boilerplate/pulls/4 +--- diff --git a/gatsby-browser.js b/gatsby-browser.js index 330994b7..41da2b17 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,20 +1,21 @@ +require('./src/styles/main.scss'); + const netlifyIdentity = require('netlify-identity-widget'); const netlifyApiUrl = process.env.NETLIFY_IDENTITY_API_URL; -require('./src/styles/main.scss'); // A stub function is needed because gatsby won't load this file otherwise // (https://github.com/gatsbyjs/gatsby/issues/6759) exports.onClientEntry = () => {}; exports.onInitialClientRender = () => { - if (netlifyApiUrl !== "") { - netlifyIdentity.init({ - // Absolute url to endpoint. ONLY USE IN SPECIAL CASES! - // See https://github.com/netlify/netlify-identity-widget/#netlifyidentityinitopts - APIUrl: netlifyApiUrl - }); - } else { - netlifyIdentity.init(); - } - window.netlifyIdentity = netlifyIdentity -} \ No newline at end of file + if (netlifyApiUrl !== '') { + netlifyIdentity.init({ + // Absolute url to endpoint. ONLY USE IN SPECIAL CASES! + // See https://github.com/netlify/netlify-identity-widget/#netlifyidentityinitopts + APIUrl: netlifyApiUrl, + }); + } else { + netlifyIdentity.init(); + } + window.netlifyIdentity = netlifyIdentity; +}; diff --git a/gatsby-config.js b/gatsby-config.js index a3f4e307..87aa1b4a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -6,82 +6,83 @@ module.exports = { plugins: [ 'gatsby-plugin-meta-redirect', { - resolve: 'gatsby-plugin-sass', options: { + includePaths: clay.includePaths.concat( + path.join(clay.includePaths[0], 'node_modules') + ), precision: 8, - includePaths: clay - .includePaths - .concat( - path.join( - clay.includePaths[0], - 'node_modules' - ) - ), }, + resolve: 'gatsby-plugin-sass', }, { - resolve: 'gatsby-source-filesystem', options: { name: 'packages', path: `${__dirname}/content`, }, + resolve: 'gatsby-source-filesystem', }, { - resolve: 'gatsby-mdx', options: { extensions: ['.mdx', '.md'], gatsbyRemarkPlugins: [ { - resolve: path.resolve(__dirname, './plugins/gatsby-remark-code-label-extractor'), + resolve: path.resolve( + __dirname, + './plugins/gatsby-remark-code-label-extractor' + ), }, { - resolve: 'gatsby-remark-prismjs', pluginOptions: { classPrefix: 'gatsby-code-', }, + resolve: 'gatsby-remark-prismjs', }, { - resolve: path.resolve(__dirname, './plugins/gatsby-remark-use-clipboard'), + resolve: path.resolve( + __dirname, + './plugins/gatsby-remark-use-clipboard' + ), }, ], }, + resolve: 'gatsby-mdx', }, { - resolve: 'gatsby-plugin-google-analytics', options: { trackingId: process.env.GA_TRACKING_ID, }, + resolve: 'gatsby-plugin-google-analytics', }, 'gatsby-plugin-react-helmet', { - resolve: 'gatsby-plugin-manifest', options: { - name: 'Gatsby Boilerplate', - short_name: 'Gatsby Boilerplate', - start_url: '/', background_color: '#FFFFFF', - theme_color: '#0B5FFF', display: 'minimal-ui', icons: [ { - "src": "favicons/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" + sizes: '192x192', + src: 'favicons/android-chrome-192x192.png', + type: 'image/png', }, { - "src": "favicons/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ] + sizes: '512x512', + src: 'favicons/android-chrome-512x512.png', + type: 'image/png', + }, + ], + name: 'Gatsby Boilerplate', + short_name: 'Gatsby Boilerplate', + start_url: '/', + theme_color: '#0B5FFF', }, + resolve: 'gatsby-plugin-manifest', }, { - resolve: 'gatsby-plugin-offline', options: { globPatterns: ['**/*.{js,jpg,png,gif,html,css,svg}'], }, + resolve: 'gatsby-plugin-offline', }, - 'gatsby-plugin-zopfli' + 'gatsby-plugin-zopfli', ], }; diff --git a/gatsby-node.js b/gatsby-node.js index e929cc40..8718c581 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,3 +1,3 @@ exports.createPages = require('./gatsby/createPages'); exports.onCreateNode = require('./gatsby/onCreateNode'); -exports.onCreateWebpackConfig = require('./gatsby/onCreateWebpackConfig'); \ No newline at end of file +exports.onCreateWebpackConfig = require('./gatsby/onCreateWebpackConfig'); diff --git a/gatsby/createPages.js b/gatsby/createPages.js index 40425aec..3b06ba3a 100644 --- a/gatsby/createPages.js +++ b/gatsby/createPages.js @@ -7,13 +7,15 @@ const createPages = (actions, edges) => { const {createPage, createRedirect} = actions; edges.forEach(({node}, index) => { - const {slug, redirect, mainPage} = node.fields; + const {mainPage, redirect, slug} = node.fields; const templateKey = slug.split('/')[0]; if (redirect || mainPage) { const slugWithBar = slug.startsWith('/') ? slug : `/${slug}`; - const fromPath = slugWithBar.endsWith('index.html') ? slugWithBar.replace('index.html', '') : slugWithBar; + const fromPath = slugWithBar.endsWith('index.html') + ? slugWithBar.replace('index.html', '') + : slugWithBar; const toPath = mainPage ? slugWithBar : redirect; @@ -21,26 +23,30 @@ const createPages = (actions, edges) => { fromPath, isPermanent: true, redirectInBrowser: true, - toPath: toPath, + toPath, }); } if (!redirect) { - let previous = index === 0 ? false : edges[index - 1].node; - let next = index === edges.length - 1 ? false : edges[index + 1].node; + const previous = index === 0 ? false : edges[index - 1].node; + const next = + index === edges.length - 1 ? false : edges[index + 1].node; - createPage({ - path: slug, + createPage({ component: componentWithMDXScope( - path.resolve(__dirname, `../src/templates/${templateKey}.js`), + path.resolve( + __dirname, + `../src/templates/${templateKey}.js` + ), node.code.scope, - __dirname, + __dirname ), context: { - slug, - previous, next, + previous, + slug, }, + path: slug, }); } }); @@ -55,7 +61,7 @@ module.exports = async ({actions, graphql}) => { return graphql(` query { - allMdx(sort: {order:ASC, fields: frontmatter___stepNumber}) { + allMdx(sort: {order: ASC, fields: frontmatter___stepNumber}) { edges { node { fields { diff --git a/gatsby/onCreateNode.js b/gatsby/onCreateNode.js index 719421fe..b3cbb83c 100644 --- a/gatsby/onCreateNode.js +++ b/gatsby/onCreateNode.js @@ -1,23 +1,23 @@ -module.exports = exports.onCreateNode = ({ node, actions, getNode}) => { +module.exports = exports.onCreateNode = ({actions, getNode, node}) => { const {createNodeField} = actions; if (node.internal.type === 'Mdx') { const { alwaysActive, - path, - redirect, - title, - order, + author, + banner, date, description, - author, mainPage, - banner, - stepNumber, - short, needsAuth, + order, + path, + redirect, + short, + stepNumber, + title, updates, - url + url, } = node.frontmatter; const {relativePath} = getNode(node.parent); @@ -41,87 +41,87 @@ module.exports = exports.onCreateNode = ({ node, actions, getNode}) => { }); createNodeField({ - node, name: 'slug', + node, value: slug, }); createNodeField({ - node, name: 'title', + node, value: title, }); createNodeField({ - node, name: 'order', + node, value: order, }); createNodeField({ - node, name: 'redirect', + node, value: redirect, }); createNodeField({ - node, name: 'author', + node, value: author || '', }); createNodeField({ - node, name: 'date', + node, value: date || '', }); createNodeField({ - node, name: 'description', + node, value: description || '', }); createNodeField({ - node, name: 'mainPage', + node, value: mainPage || false, }); createNodeField({ - node, name: 'banner', + node, value: banner || '', }); createNodeField({ - node, name: 'stepNumber', + node, value: stepNumber || 0, }); createNodeField({ - node, name: 'short', + node, value: short || '', }); createNodeField({ - node, name: 'needsAuth', + node, value: needsAuth || 0, }); createNodeField({ - node, name: 'updates', + node, value: updates || [], }); createNodeField({ - node, name: 'url', + node, value: url || [], - }) + }); } }; diff --git a/gatsby/onCreateWebpackConfig.js b/gatsby/onCreateWebpackConfig.js index 18368b95..c6571869 100644 --- a/gatsby/onCreateWebpackConfig.js +++ b/gatsby/onCreateWebpackConfig.js @@ -7,11 +7,14 @@ module.exports = ({actions, stage}) => { module = { rules: [ { + loader: 'null-loader', test: [ path.resolve(__dirname, '../node_modules/wowjs'), - path.resolve(__dirname, '../node_modules/metal-clipboard') + path.resolve( + __dirname, + '../node_modules/metal-clipboard' + ), ], - loader: 'null-loader', }, ], }; @@ -20,10 +23,10 @@ module.exports = ({actions, stage}) => { actions.setWebpackConfig({ module, resolve: { - modules: [path.resolve(__dirname, 'src'), 'node_modules'], alias: { $components: path.resolve(__dirname, '../src/components'), }, + modules: [path.resolve(__dirname, 'src'), 'node_modules'], }, }); }; diff --git a/package.json b/package.json index 2ea0ead2..e2b9f4f0 100644 --- a/package.json +++ b/package.json @@ -1,67 +1,78 @@ { - "name": "gatsby-boilerplate", - "description": "An awesome boilerplate to start projects in Gatsby considering as starter point the development experience of Electric.js", - "version": "1.0.2", - "author": "Diego Nascimento = 8" - }, - "scripts": { - "dev": "rimraf public .cache && gatsby develop", - "deploy": "gatsby build --prefix-paths && gh-pages -d public -b gh-pages", - "develop": "rimraf public .cache && gatsby develop", - "start": "npm run develop", - "build": "gatsby build", - "serve": "gatsby serve" - }, - "dependencies": { - "@mdx-js/mdx": "0.15.7", - "@mdx-js/tag": "0.18.0", - "browser-monads": "1.0.0", - "classnames": "2.2.6", - "clay-component": "2.14.2", - "clay-css": "2.14.2", - "clay-tooltip": "2.15.1", - "gatsby": "2.0.104", - "gatsby-mdx": "0.1.4", - "gatsby-plugin-google-analytics": "2.0.12", - "gatsby-plugin-manifest": "2.0.15", - "gatsby-plugin-offline": "2.0.22", - "gatsby-plugin-react-helmet": "3.0.5", - "gatsby-plugin-sass": "2.0.8", - "gatsby-plugin-zopfli": "1.0.4", - "gatsby-remark-component": "1.1.3", - "gatsby-remark-copy-linked-files": "2.0.8", - "gatsby-remark-prismjs": "3.2.3", - "gatsby-source-filesystem": "2.0.18", - "gatsby-transformer-remark": "2.2.2", - "metal-clipboard": "2.0.1", - "metal-tabs": "2.3.1", - "netlify-identity-widget": "1.5.4", - "node-sass": "4.13.0", - "nothing": "0.1.0", - "prismjs": "1.17.1", - "react": "16.8.6", - "react-dom": "16.8.6", - "react-helmet": "5.2.1", - "wowjs": "1.1.3" - }, - "devDependencies": { - "gh-pages": "2.0.1", - "globby": "9.2.0", - "rimraf": "2.6.3" - } + "name": "gatsby-boilerplate", + "description": "An awesome boilerplate to start projects in Gatsby considering as starter point the development experience of Electric.js", + "version": "1.0.2", + "author": "Diego Nascimento = 8" + }, + "scripts": { + "dev": "rimraf public .cache && gatsby develop", + "deploy": "gatsby build --prefix-paths && gh-pages -d public -b gh-pages", + "develop": "rimraf public .cache && gatsby develop", + "format": "prettier --write -- '**/*.{js,ts,tsx,md,mdx,json}'", + "format:all": "yarn lint:fix && yarn format", + "format:changed": "git ls-files -mz '**/*.js' '**/*.ts' '**/*.tsx' '**/*.md' '**/*.mdx' '**/*.json' | xargs -0 prettier --write --", + "format:check": "prettier --list-different -- '**/*.{js,ts,tsx,md,mdx,json}'", + "lint": "eslint '.*.js' '**/*.js'", + "lint:changed": "git ls-files -mz '**/*.js' | xargs -0 eslint", + "lint:fix": "eslint --fix '.*.js' '**/*.js'", + "lint:quiet": "eslint --quiet '.*.js' '**/*.js'", + "start": "npm run develop", + "build": "gatsby build", + "serve": "gatsby serve" + }, + "dependencies": { + "@mdx-js/mdx": "0.15.7", + "@mdx-js/tag": "0.18.0", + "browser-monads": "1.0.0", + "classnames": "2.2.6", + "clay-component": "2.14.2", + "clay-css": "2.19.0", + "clay-tooltip": "2.15.1", + "gatsby": "2.0.104", + "gatsby-mdx": "0.1.4", + "gatsby-plugin-google-analytics": "2.0.12", + "gatsby-plugin-manifest": "2.0.15", + "gatsby-plugin-offline": "2.0.22", + "gatsby-plugin-react-helmet": "3.0.5", + "gatsby-plugin-sass": "2.0.8", + "gatsby-plugin-zopfli": "1.0.4", + "gatsby-remark-component": "1.1.3", + "gatsby-remark-copy-linked-files": "2.0.8", + "gatsby-remark-prismjs": "3.2.3", + "gatsby-source-filesystem": "2.0.18", + "gatsby-transformer-remark": "2.2.2", + "metal-clipboard": "2.0.1", + "metal-tabs": "2.3.1", + "netlify-identity-widget": "1.5.4", + "node-sass": "4.13.0", + "nothing": "0.1.0", + "prismjs": "1.17.1", + "react": "16.12.0", + "react-dom": "16.12.0", + "react-helmet": "5.2.1", + "wowjs": "1.1.3" + }, + "devDependencies": { + "eslint": "^6.8.0", + "eslint-config-liferay": "^14.0.0", + "gh-pages": "2.0.1", + "globby": "9.2.0", + "prettier": "^1.19.1", + "rimraf": "2.6.3" + } } diff --git a/plugins/gatsby-plugin-meta-redirect/gatsby-node.js b/plugins/gatsby-plugin-meta-redirect/gatsby-node.js index e7c2f398..070191dd 100644 --- a/plugins/gatsby-plugin-meta-redirect/gatsby-node.js +++ b/plugins/gatsby-plugin-meta-redirect/gatsby-node.js @@ -1,5 +1,5 @@ +const {ensureDir, exists, writeFile} = require('fs-extra'); const path = require('path'); -const {exists, writeFile, ensureDir} = require('fs-extra'); const getMetaRedirect = require('./getMetaRedirect'); @@ -7,6 +7,7 @@ const getMetaRedirect = require('./getMetaRedirect'); async function writeRedirectsFile(redirects, folder, pathPrefix) { if (!redirects.length) return; + // eslint-disable-next-line no-for-of-loops/no-for-of-loops for (const redirect of redirects) { const {fromPath, toPath} = redirect; @@ -22,7 +23,9 @@ async function writeRedirectsFile(redirects, folder, pathPrefix) { try { fileExists = await exists(FILE_PATH); - } catch (err) {} + } catch (err) { + throw new Error(err); + } if (!fileExists) { try { @@ -38,7 +41,7 @@ async function writeRedirectsFile(redirects, folder, pathPrefix) { } exports.onPostBuild = ({store}) => { - const {redirects, program, config} = store.getState(); + const {config, program, redirects} = store.getState(); let pathPrefix = ''; if (program.prefixPaths) { diff --git a/plugins/gatsby-plugin-meta-redirect/package.json b/plugins/gatsby-plugin-meta-redirect/package.json index 1c8115cd..fde17bb0 100644 --- a/plugins/gatsby-plugin-meta-redirect/package.json +++ b/plugins/gatsby-plugin-meta-redirect/package.json @@ -1,4 +1,4 @@ { - "name": "gatsby-plugin-meta-redirect", - "version": "0.0.1" -} \ No newline at end of file + "name": "gatsby-plugin-meta-redirect", + "version": "0.0.1" +} diff --git a/plugins/gatsby-remark-code-label-extractor/index.js b/plugins/gatsby-remark-code-label-extractor/index.js index 70f67b2f..cb579f80 100644 --- a/plugins/gatsby-remark-code-label-extractor/index.js +++ b/plugins/gatsby-remark-code-label-extractor/index.js @@ -1,14 +1,14 @@ -const visit = require("unist-util-visit"); +const visit = require('unist-util-visit'); -module.exports = ({ markdownAST }) => { - visit(markdownAST, "code", node => { - if (node.lang) { - const [lang, label] = node.lang.split(" "); +module.exports = ({markdownAST}) => { + visit(markdownAST, 'code', node => { + if (node.lang) { + const [lang, label] = node.lang.split(' '); - node.lang = lang; - node.label = label || lang; - } + node.lang = lang; + node.label = label || lang; + } - return node; - }); + return node; + }); }; diff --git a/plugins/gatsby-remark-code-label-extractor/package.json b/plugins/gatsby-remark-code-label-extractor/package.json index 6511825f..8512a67d 100644 --- a/plugins/gatsby-remark-code-label-extractor/package.json +++ b/plugins/gatsby-remark-code-label-extractor/package.json @@ -1,4 +1,4 @@ { "name": "gatsby-remark-code-label-extractor", "version": "0.0.1" - } \ No newline at end of file +} diff --git a/plugins/gatsby-remark-use-clipboard/index.js b/plugins/gatsby-remark-use-clipboard/index.js index 1cd71053..d405ae3b 100644 --- a/plugins/gatsby-remark-use-clipboard/index.js +++ b/plugins/gatsby-remark-use-clipboard/index.js @@ -1,15 +1,16 @@ const visit = require('unist-util-visit'); -const { pathPrefix } = require('../../gatsby-config'); + +const {pathPrefix} = require('../../gatsby-config'); module.exports = ({markdownAST}) => { - visit(markdownAST, 'html', node => { - if (typeof node.lang === 'undefined') { - return; - } + visit(markdownAST, 'html', node => { + if (typeof node.lang === 'undefined') { + return; + } - node.value = `
+ node.value = `
${node.value}
`; - }); -}; \ No newline at end of file + }); +}; diff --git a/plugins/gatsby-remark-use-clipboard/package.json b/plugins/gatsby-remark-use-clipboard/package.json index 82711c71..15c90a52 100644 --- a/plugins/gatsby-remark-use-clipboard/package.json +++ b/plugins/gatsby-remark-use-clipboard/package.json @@ -1,4 +1,4 @@ { - "name": "gatsby-remark-use-clipboard", - "version": "0.0.1" -} \ No newline at end of file + "name": "gatsby-remark-use-clipboard", + "version": "0.0.1" +} diff --git a/renovate.json b/renovate.json index f45d8f11..989cc91e 100644 --- a/renovate.json +++ b/renovate.json @@ -1,5 +1,3 @@ { - "extends": [ - "config:base" - ] + "extends": ["config:base"] } diff --git a/src/components/Auth/Auth.js b/src/components/Auth/Auth.js index 2cac9ce0..4708d5dc 100644 --- a/src/components/Auth/Auth.js +++ b/src/components/Auth/Auth.js @@ -1,20 +1,21 @@ +import {navigate} from 'gatsby'; import React from 'react'; -import { navigate } from 'gatsby'; + import {handleLogin, isBrowser, isLoggedIn} from '../../services/auth'; class Auth extends React.Component { - render() { - if (this.props.needsAuth && !isLoggedIn()) { - handleLogin().then(() => { - if(isBrowser()) { - navigate(window.location.pathname); - } - }); - return null; - } + render() { + if (this.props.needsAuth && !isLoggedIn()) { + handleLogin().then(() => { + if (isBrowser()) { + navigate(window.location.pathname); + } + }); + return null; + } - return this.props.children; - } + return this.props.children; + } } -export default Auth; \ No newline at end of file +export default Auth; diff --git a/src/components/Auth/index.js b/src/components/Auth/index.js index 78f0e91b..aa4087c1 100644 --- a/src/components/Auth/index.js +++ b/src/components/Auth/index.js @@ -1,3 +1,3 @@ import Auth from './Auth'; -export default Auth; \ No newline at end of file +export default Auth; diff --git a/src/components/Blog/BlogArticle/BlogArticle.js b/src/components/Blog/BlogArticle/BlogArticle.js index 00d3fef1..e69e78d3 100644 --- a/src/components/Blog/BlogArticle/BlogArticle.js +++ b/src/components/Blog/BlogArticle/BlogArticle.js @@ -1,77 +1,112 @@ -import React from 'react'; +import {Link, withPrefix} from 'gatsby'; import MDXRenderer from 'gatsby-mdx/mdx-renderer'; -import { Link, withPrefix } from 'gatsby'; +import React from 'react'; + import Typography from '../../Typography'; export default class BlogArticle extends React.Component { + render() { + return ( + <> + - render() { - return ( - <> - + + {this.props.author ? `by ${this.props.author}` : ''} |{' '} + {this.props.date ? `${this.props.date}` : ''} + - - {this.props.author ? `by ${this.props.author}` : ''} | {this.props.date ? `${this.props.date}` : ''} - +

{this.props.title}

-

{this.props.title}

+
+ + {this.props.codeBody} + +
-
- - {this.props.codeBody} - -
+ + + ); + } +} - - - ); - } -}; - -const SocialShare = (props) => ( -
-
-

Share this article

-
- -
+const SocialShare = props => ( +
+
+

Share this article

+
+ +
); -const Breadcrumb = (props) => ( -
    -
  1. - - Return to Blog - -
    2. -
  2. - - {props.activePage} - -
    3. -
-); \ No newline at end of file +const Breadcrumb = props => ( +
    +
  1. + + Return to Blog + +
    2. +
  2. + + + {props.activePage} + + +
    3. +
+); diff --git a/src/components/Blog/BlogArticle/index.js b/src/components/Blog/BlogArticle/index.js index e601d0c1..a1457ed5 100644 --- a/src/components/Blog/BlogArticle/index.js +++ b/src/components/Blog/BlogArticle/index.js @@ -1,3 +1,3 @@ import BlogArticle from './BlogArticle'; -export default BlogArticle; \ No newline at end of file +export default BlogArticle; diff --git a/src/components/Blog/BlogList/BlogList.js b/src/components/Blog/BlogList/BlogList.js index af96f2be..dc333f00 100644 --- a/src/components/Blog/BlogList/BlogList.js +++ b/src/components/Blog/BlogList/BlogList.js @@ -1,108 +1,149 @@ -import { window } from 'browser-monads'; -import { Link, StaticQuery, withPrefix, graphql } from 'gatsby'; +import {window} from 'browser-monads'; +import {Link, StaticQuery, withPrefix, graphql} from 'gatsby'; import React from 'react'; -import CodeTabs from '../../CodeTabs'; + import CodeClipboard from '../../CodeClipboard'; +import CodeTabs from '../../CodeTabs'; class BlogList extends React.Component { - componentDidMount() { - this._codeTabs = new CodeTabs(); - this._codeClipboard = new CodeClipboard(); - } + componentDidMount() { + this._codeTabs = new CodeTabs(); + this._codeClipboard = new CodeClipboard(); + } - componentWillUnmount() { - this._codeTabs = null; - this._codeClipboard.dispose(); - } + componentWillUnmount() { + this._codeTabs = null; + this._codeClipboard.dispose(); + } - render() { - return ( -
- {this.props.children} -
- ); - } + render() { + return
{this.props.children}
; + } } -export default (props) => ( - { - const postsFn = ({ node: { fields, frontmatter } }) => ({...frontmatter, ...fields}); +export default () => ( + { + const postsFn = ({node: {fields, frontmatter}}) => ({ + ...frontmatter, + ...fields, + }); - const posts = edges.map(postsFn); + const posts = edges.map(postsFn); - return( - <> - - {posts.map((post, index) => - (post.url !== null) ? externalLinkTo(post, index) : internalLinkTo(post, index))} - - - ) - }} - /> -) + return ( + <> + + {posts.map((post, index) => + post.url !== null + ? externalLinkTo(post, index) + : internalLinkTo(post, index) + )} + + + ); + }} + /> +); const externalLinkTo = (post, index) => { - return( - - {card(post, index)} - - ); + return ( + + {card(post, index)} + + ); }; const internalLinkTo = (post, index) => { - return( - - {card(post, index)} - - ); + return ( + + {card(post, index)} + + ); }; const card = (post, index) => { - return( -
- banner -
-

{post.title}

-

{post.description}

-
- {`by ${post.author} at ${post.date}`} -
-
- ); + return ( +
+ banner +
+

{post.title}

+

{post.description}

+
+ + {' '} + {`by ${post.author} at ${post.date}`} + +
+
+ ); }; -const isExternalUrl = (url) => { - const match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/); //eslint-disable-line - if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== window.location.protocol) { - return true; - } - if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":(" + { "http:": 80, "https:": 443 }[window.location.protocol] + ")?$"), "") !== window.location.host) { - return true; - } - return false; -} \ No newline at end of file +const isExternalUrl = url => { + const match = url.match( + /^([^:?#]+:)?(?:\/\/([^?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/ + ); //eslint-disable-line + if ( + typeof match[1] === 'string' && + match[1].length > 0 && + match[1].toLowerCase() !== window.location.protocol + ) { + return true; + } + if ( + typeof match[2] === 'string' && + match[2].length > 0 && + match[2].replace( + new RegExp( + ':(' + + {'http:': 80, 'https:': 443}[window.location.protocol] + + ')?$' + ), + '' + ) !== window.location.host + ) { + return true; + } + return false; +}; diff --git a/src/components/Blog/BlogList/index.js b/src/components/Blog/BlogList/index.js index bfde92b2..1b7690e8 100644 --- a/src/components/Blog/BlogList/index.js +++ b/src/components/Blog/BlogList/index.js @@ -1,3 +1,3 @@ import BlogList from './BlogList'; -export default BlogList; \ No newline at end of file +export default BlogList; diff --git a/src/components/Blog/BlogMain/BlogMain.js b/src/components/Blog/BlogMain/BlogMain.js index 0460cd11..2cd5a20c 100644 --- a/src/components/Blog/BlogMain/BlogMain.js +++ b/src/components/Blog/BlogMain/BlogMain.js @@ -1,15 +1,16 @@ import React from 'react'; + import BlogList from '../BlogList'; export default class BlogMain extends React.Component { - render() { - return ( - <> -
-

Latest Stories:

- -
- - ); - } -} \ No newline at end of file + render() { + return ( + <> +
+

Latest Stories:

+ +
+ + ); + } +} diff --git a/src/components/Blog/BlogMain/index.js b/src/components/Blog/BlogMain/index.js index 6ed7d895..355ad0cb 100644 --- a/src/components/Blog/BlogMain/index.js +++ b/src/components/Blog/BlogMain/index.js @@ -1,3 +1,3 @@ import BlogMain from './BlogMain'; -export default BlogMain; \ No newline at end of file +export default BlogMain; diff --git a/src/components/CodeClipboard/CodeClipboard.js b/src/components/CodeClipboard/CodeClipboard.js index 7a3bac3b..66f35679 100644 --- a/src/components/CodeClipboard/CodeClipboard.js +++ b/src/components/CodeClipboard/CodeClipboard.js @@ -1,31 +1,32 @@ import ClayTooltip from 'clay-tooltip'; import Clipboard from 'metal-clipboard'; -class SingletonEnforcer {}; +class SingletonEnforcer {} class CodeClipboard { - constructor() { - const selector = '.code-container .btn-copy'; + constructor() { + const selector = '.code-container .btn-copy'; - this.clayTooltip = new ClayTooltip(new SingletonEnforcer()); - this.clayClipboard = new Clipboard({ - selector: selector, - text: delegateTarget => { - delegateTarget.setAttribute('title', 'Copied'); + this.clayTooltip = new ClayTooltip(new SingletonEnforcer()); + this.clayClipboard = new Clipboard({ + selector, + text: delegateTarget => { + delegateTarget.setAttribute('title', 'Copied'); - setTimeout(() => { - delegateTarget.setAttribute('title', 'Copy'); - }, 2000); + setTimeout(() => { + delegateTarget.setAttribute('title', 'Copy'); + }, 2000); - return delegateTarget.parentNode.querySelector('pre code').innerText; - } - }); - } + return delegateTarget.parentNode.querySelector('pre code') + .innerText; + }, + }); + } - dispose() { - this.clayTooltip.dispose(); - this.clayClipboard.dispose(); - } + dispose() { + this.clayTooltip.dispose(); + this.clayClipboard.dispose(); + } } -export default CodeClipboard; \ No newline at end of file +export default CodeClipboard; diff --git a/src/components/CodeClipboard/index.js b/src/components/CodeClipboard/index.js index d0109999..7b0e0083 100644 --- a/src/components/CodeClipboard/index.js +++ b/src/components/CodeClipboard/index.js @@ -1,3 +1,3 @@ import CodeClipboard from './CodeClipboard'; -export default CodeClipboard; \ No newline at end of file +export default CodeClipboard; diff --git a/src/components/CodeTabs/CodeTabs.js b/src/components/CodeTabs/CodeTabs.js index 7449f066..38fb07a6 100644 --- a/src/components/CodeTabs/CodeTabs.js +++ b/src/components/CodeTabs/CodeTabs.js @@ -3,17 +3,22 @@ import Tabs from 'metal-tabs'; class CodeTabs { constructor() { - let className = 'code-container'; + const className = 'code-container'; let tabGroupsData = []; - let elements = Array.prototype.slice.call(document.querySelectorAll(`.${className}`)); + const elements = Array.prototype.slice.call( + document.querySelectorAll(`.${className}`) + ); elements.forEach(element => { tabGroupsData.push({ + element, label: this._getTabLabelFromElement(element), - element: element, }); - if (!element.nextElementSibling || !dom.hasClass(element.nextElementSibling, className)) { + if ( + !element.nextElementSibling || + !dom.hasClass(element.nextElementSibling, className) + ) { if (tabGroupsData.length > 1) { this._renderTabs(tabGroupsData); } @@ -31,20 +36,23 @@ class CodeTabs { } _hideAll(tabs) { - tabs.forEach((tab) => { + tabs.forEach(tab => { this._hide(tab.element); }); } _renderTabs(data) { - let container = dom.buildFragment('
'); - let tabsComponent = new Tabs({ - elementClasses: 'nav-code-tabs', - tabs: data, - }, container); + const container = dom.buildFragment('
'); + const tabsComponent = new Tabs( + { + elementClasses: 'nav-code-tabs', + tabs: data, + }, + container + ); tabsComponent.on('changeRequest', event => { - let currentTab = event.state.tab; + const currentTab = event.state.tab; this._hideAll(tabsComponent.tabs); this._show(tabsComponent.tabs[currentTab].element); }); diff --git a/src/components/CodeTabs/index.js b/src/components/CodeTabs/index.js index 2643383a..d546db1c 100644 --- a/src/components/CodeTabs/index.js +++ b/src/components/CodeTabs/index.js @@ -1,3 +1,3 @@ import CodeTabs from './CodeTabs'; -export default CodeTabs; \ No newline at end of file +export default CodeTabs; diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 610a774e..0eb9e0d6 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,26 +1,46 @@ +import {withPrefix} from 'gatsby'; import React from 'react'; -import { withPrefix } from 'gatsby'; const Footer = () => { - return ( -
-
-
-
- liferay logo + return ( +
+
+
+
+ liferay logo +
+ Brought to you by{' '} + + Liferay, Inc. + +
-
+
+
+ Powered by{' '} + + WeDeployâ„¢ + +
+
+
+
+
+ ); +}; - Brought to you by Liferay, Inc. -
- -
-
Powered by WeDeployâ„¢
-
-
-
-
- ); -} - -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index f84a27ce..ced11e52 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -1,3 +1,3 @@ import Footer from './Footer'; -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/LayoutNav/LayoutNav.js b/src/components/LayoutNav/LayoutNav.js index 82884d13..05f646ee 100644 --- a/src/components/LayoutNav/LayoutNav.js +++ b/src/components/LayoutNav/LayoutNav.js @@ -1,101 +1,157 @@ -import { window, document } from 'browser-monads'; -import React from 'react'; -import { Link, withPrefix } from 'gatsby'; +import {window, document} from 'browser-monads'; import classnames from 'classnames'; +import {Link, withPrefix} from 'gatsby'; +import React from 'react'; import Login from '../Login'; class LayoutNav extends React.Component { - constructor() { - super(); - this._rootNode = window || document; - this._addScroll = this._addScroll.bind(this); - } + constructor() { + super(); + this._rootNode = window || document; + this._addScroll = this._addScroll.bind(this); + this._navElement = React.createRef(null); + } - _getScrollTop() { - if (this._rootNode === window) { - return this._rootNode.pageYOffset; - } - if (this._rootNode === document) { - return this._rootNode.defaultView.pageYOffset; - } - } + _getScrollTop() { + if (this._rootNode === window) { + return this._rootNode.pageYOffset; + } + if (this._rootNode === document) { + return this._rootNode.defaultView.pageYOffset; + } + } - _addScroll() { - if (this._getScrollTop() >= 50) { - this.refs.navElement.classList.add('scroll'); - } else { - this.refs.navElement.classList.remove('scroll'); - } - } + _addScroll() { + if (this._getScrollTop() >= 50 && this._navElement.current) { + this._navElement.current.classList.add('scroll'); + } else { + this._navElement.current.classList.remove('scroll'); + } + } - componentDidMount() { - if (!this.props.static) { - this._rootNode.addEventListener('scroll', this._addScroll, false); - } - } + componentDidMount() { + if (!this.props.static) { + this._rootNode.addEventListener('scroll', this._addScroll, false); + } + } - componentWillUnmount() { - if (!this.props.static) { - this._rootNode.removeEventListener('scroll', this._addScroll, false); - } - } + componentWillUnmount() { + if (!this.props.static) { + this._rootNode.removeEventListener( + 'scroll', + this._addScroll, + false + ); + } + } - expandToggler = () => { + expandToggler() { this.props.onNavbarToggleClick(); - } + } - render() { - const { fixed = true, opaque = false, effect = false, sidebarHamburguerIcon = false } = this.props; + render() { + const { + effect = false, + fixed = true, + opaque = false, + sidebarHamburguerIcon = false, + } = this.props; - const styles = classnames('navbar navbar-clay-site navbar-expand-lg navbar-dark', { - 'fixed-top': fixed, - 'scroll': effect, - 'bg-primary': opaque - }); + const styles = classnames( + 'navbar navbar-clay-site navbar-expand-lg navbar-dark', + { + 'bg-primary': opaque, + 'fixed-top': fixed, + scroll: effect, + } + ); - return ( - + ); + } +} -export default LayoutNav; \ No newline at end of file +export default LayoutNav; diff --git a/src/components/LayoutNav/index.js b/src/components/LayoutNav/index.js index 4a0ad622..4999e065 100644 --- a/src/components/LayoutNav/index.js +++ b/src/components/LayoutNav/index.js @@ -1,3 +1,3 @@ import LayoutNav from './LayoutNav'; -export default LayoutNav; \ No newline at end of file +export default LayoutNav; diff --git a/src/components/Login/Login.js b/src/components/Login/Login.js index 39689d3e..235447f0 100644 --- a/src/components/Login/Login.js +++ b/src/components/Login/Login.js @@ -1,61 +1,62 @@ +import {navigate} from 'gatsby'; import React from 'react'; -import { handleLogin, logout, isLoggedIn, isBrowser } from '../../services/auth' -import { navigate } from 'gatsby'; -class Login extends React.Component { - - constructor(props) { - super(props); - this.state = { - login: isLoggedIn() - } - this._handleLogin = this._handleLogin.bind(this); - this._handleLogout = this._handleLogout.bind(this); - } +import {handleLogin, logout, isLoggedIn, isBrowser} from '../../services/auth'; - _handleLogin = (event) => { - event.preventDefault(); - handleLogin().then(() => { - this.setState({ - login: isLoggedIn() - }); - }); - } +class Login extends React.Component { + constructor(props) { + super(props); + this.state = { + login: isLoggedIn(), + }; + this._handleLogin = this._handleLogin.bind(this); + this._handleLogout = this._handleLogout.bind(this); + } - _handleLogout = (event) => { - event.preventDefault(); - logout().then(() => { - this.setState({ - login: isLoggedIn() - }); - if(isBrowser()) { - navigate('/'); - } - }); - } + _handleLogin(event) { + event.preventDefault(); + handleLogin().then(() => { + this.setState({ + login: isLoggedIn(), + }); + }); + } - render() { - let button; - if(this.state.login) { - button = - ; - } else { - button = - ; + _handleLogout(event) { + event.preventDefault(); + logout().then(() => { + this.setState({ + login: isLoggedIn(), + }); + if (isBrowser()) { + navigate('/'); + } + }); + } - } - return ( - <> - {button} - - ) - } + render() { + let button; + if (this.state.login) { + button = ( + + ); + } else { + button = ( + + ); + } + return <>{button}; + } } -export default Login; \ No newline at end of file +export default Login; diff --git a/src/components/Login/index.js b/src/components/Login/index.js index 68d80c89..dbe484f9 100644 --- a/src/components/Login/index.js +++ b/src/components/Login/index.js @@ -1,3 +1,3 @@ import Login from './Login'; -export default Login; \ No newline at end of file +export default Login; diff --git a/src/components/Onboarding/MultiStepNav/MultiStepNav.js b/src/components/Onboarding/MultiStepNav/MultiStepNav.js index 81e372b9..1a188aee 100644 --- a/src/components/Onboarding/MultiStepNav/MultiStepNav.js +++ b/src/components/Onboarding/MultiStepNav/MultiStepNav.js @@ -1,76 +1,102 @@ -import { Link, StaticQuery, graphql } from 'gatsby'; +import {Link, StaticQuery, graphql} from 'gatsby'; import React from 'react'; -export default (props) => ( - { - const fieldsFn = ({ node: { fields } }) => fields; +export default props => ( + { + const fieldsFn = ({node: {fields}}) => fields; - const steps = edges.map(fieldsFn); + const steps = edges.map(fieldsFn); - const activeStepNumber = props.stepNumber; + const activeStepNumber = props.stepNumber; - return ( - <> -
-
-
    - {steps.map(({ slug, stepNumber, short }, index) => ( -
  1. - {steps[index + 1] && -
    - } -
    -
    {handleSuccessPage_(slug, stepNumber, short)}
    - -
    -
    2. - ))} -
-
-
- - ); - } - } - /> -) + return ( + <> +
+
+
    + {steps.map( + ({short, slug, stepNumber}, index) => ( +
  1. + {steps[index + 1] && ( +
    + )} +
    +
    + {handleSuccessPage_( + slug, + stepNumber, + short + )} +
    + +
    +
    2. + ) + )} +
+
+
+ + ); + }} + /> +); const handleSuccessPage_ = (slug, stepNumber, short) => { - if (short !== undefined && short.length > 0) { - return short; - } else if (slug.endsWith('success.html')) { - return 'Final Step'; - } - return `Step ${stepNumber}`; + if (short !== undefined && short.length > 0) { + return short; + } else if (slug.endsWith('success.html')) { + return 'Final Step'; + } + return `Step ${stepNumber}`; }; const handleActiveOrCompletedClasses_ = (stepNumber, activeStepNumber) => { - if (activeStepNumber === stepNumber) { - return 'active'; - } + if (activeStepNumber === stepNumber) { + return 'active'; + } - if (activeStepNumber < stepNumber) { - return ''; - } + if (activeStepNumber < stepNumber) { + return ''; + } - if (activeStepNumber >= stepNumber) { - return 'complete'; - } -}; \ No newline at end of file + if (activeStepNumber >= stepNumber) { + return 'complete'; + } +}; diff --git a/src/components/Onboarding/MultiStepNav/index.js b/src/components/Onboarding/MultiStepNav/index.js index 29c28979..88e0981c 100644 --- a/src/components/Onboarding/MultiStepNav/index.js +++ b/src/components/Onboarding/MultiStepNav/index.js @@ -1,3 +1,3 @@ import MultiStepNav from './MultiStepNav'; -export default MultiStepNav; \ No newline at end of file +export default MultiStepNav; diff --git a/src/components/Onboarding/OnboardingMain/OnboardingMain.js b/src/components/Onboarding/OnboardingMain/OnboardingMain.js index 31edc47e..87d2bce1 100644 --- a/src/components/Onboarding/OnboardingMain/OnboardingMain.js +++ b/src/components/Onboarding/OnboardingMain/OnboardingMain.js @@ -1,33 +1,39 @@ -import { Link } from 'gatsby'; -import React from 'react'; +import {Link} from 'gatsby'; import MDXRenderer from 'gatsby-mdx/mdx-renderer'; +import React from 'react'; + import Typography from '../../Typography'; export default class OnboardingMain extends React.Component { - render() { - return ( -
- - {this.props.codeBody} - -
-
-
-
- Get Started -
-
-
-
-
- ); - } -}; \ No newline at end of file + render() { + return ( +
+ + {this.props.codeBody} + +
+
+
+
+ + Get Started + +
+
+
+
+
+ ); + } +} diff --git a/src/components/Onboarding/OnboardingMain/index.js b/src/components/Onboarding/OnboardingMain/index.js index 74431d83..f01cd9f1 100644 --- a/src/components/Onboarding/OnboardingMain/index.js +++ b/src/components/Onboarding/OnboardingMain/index.js @@ -1,3 +1,3 @@ import OnboardingMain from './OnboardingMain'; -export default OnboardingMain; \ No newline at end of file +export default OnboardingMain; diff --git a/src/components/Sidebar/Navigation.js b/src/components/Sidebar/Navigation.js index af37d8f4..625c6617 100644 --- a/src/components/Sidebar/Navigation.js +++ b/src/components/Sidebar/Navigation.js @@ -1,79 +1,95 @@ +import {Link, withPrefix} from 'gatsby'; import React from 'react'; -import { Link, withPrefix } from "gatsby" class Navigation extends React.Component { - _handleOnClick(index, depth, section, event) { - const el = event.currentTarget; - - event.preventDefault(); - event.stopPropagation(); - - el.classList.toggle('active'); - } - - _isActive(section) { - const { location } = this.props; - - const sectionLocation = location.pathname.split('.')[0]; - - if (section.isFolder) { - return sectionLocation.includes(section.id); - } - - return sectionLocation === section.link; - } - - renderNavigationItems() { - const { sectionList, location, depth = 0 } = this.props; - - return sectionList.map((section, index) => { - let style = section.items ? 'nav-heading nav-item' : 'nav-item'; - - return( -
  • - - - {section.items && ( - - )} -
    • - ); - }); - } - - render() { - return( -
      - {this.renderNavigationItems()} -
    - ); - } + _handleOnClick(index, depth, section, event) { + const el = event.currentTarget; + + event.preventDefault(); + event.stopPropagation(); + + el.classList.toggle('active'); + } + + _isActive(section) { + const {location} = this.props; + + const sectionLocation = location.pathname.split('.')[0]; + + if (section.isFolder) { + return sectionLocation.includes(section.id); + } + + return sectionLocation === section.link; + } + + renderNavigationItems() { + const {depth = 0, location, sectionList} = this.props; + + return sectionList.map((section, index) => { + const style = section.items ? 'nav-heading nav-item' : 'nav-item'; + + return ( +
  • + + + {section.items && ( + + )} +
    • + ); + }); + } + + render() { + return ( +
      {this.renderNavigationItems()}
    + ); + } } -const Anchor = ({active, page, onclick}) => { - let style = active ? 'active nav-link ' : 'nav-link '; - - if (page.items) { - style += 'collapse-toggle'; - - return( - - {page.title} - - - - - ); - } - - return ( - - {page.title} - - ); +const Anchor = ({active, onclick, page}) => { + let style = active ? 'active nav-link ' : 'nav-link '; + + if (page.items) { + style += 'collapse-toggle'; + + return ( + + {page.title} + + + + + ); + } + + return ( + + {page.title} + + ); }; -export default Navigation; \ No newline at end of file +export default Navigation; diff --git a/src/components/Sidebar/Search.js b/src/components/Sidebar/Search.js index c665e098..1351e13c 100644 --- a/src/components/Sidebar/Search.js +++ b/src/components/Sidebar/Search.js @@ -1,5 +1,5 @@ +import {withPrefix} from 'gatsby'; import React from 'react'; -import { withPrefix } from 'gatsby'; const apiKey = process.env.ALGOLIA_API_KEY; @@ -8,10 +8,12 @@ const indexName = process.env.ALGOLIA_INDEX_NAME; const isProduction = process.env.NODE_ENV === 'production' ? true : false; class Search extends React.Component { - state = { - disabled: false - }; - + constructor(props) { + super(props); + this.state = { + disabled: false, + }; + } componentDidMount() { if (window.docsearch && apiKey !== '' && indexName !== '') { window.docsearch({ @@ -25,21 +27,20 @@ class Search extends React.Component { } render() { - const { placeholder } = this.props; + const {placeholder} = this.props; if (isProduction && this.state.disabled) { return false; } - return (
    - +
    - ) + ); } } -export default Search; \ No newline at end of file +export default Search; diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js index 9cb30251..6236a81a 100644 --- a/src/components/Sidebar/Sidebar.js +++ b/src/components/Sidebar/Sidebar.js @@ -1,41 +1,65 @@ -import { StaticQuery, graphql } from 'gatsby'; -import Navigation from './Navigation'; +import {StaticQuery, graphql} from 'gatsby'; import React from 'react'; + +import Navigation from './Navigation'; import Search from './Search'; const SideNavRef = React.createRef(); const getSection = data => { const elements = data.allMdx.edges.map(({node}) => { - const { fields: { slug, title, alwaysActive, order } } = node; - - return toSectionElements(slug.replace('.html', ''), title, order, alwaysActive); + const { + fields: {alwaysActive, order, slug, title}, + } = node; + + return toSectionElements( + slug.replace('.html', ''), + title, + order, + alwaysActive + ); }); - let rootElements = elements.filter(path => path.isRoot); + const rootElements = elements.filter(path => path.isRoot); - return rootElements.map(path => toSectionItem(path, elements)) + return rootElements + .map(path => toSectionItem(path, elements)) .sort((a, b) => a.order - b.order); }; const toSectionElements = (slug, title, order, alwaysActive) => { - const slugs = slug.split("/"); + const slugs = slug.split('/'); const lastSlug = slugs[slugs.length - 1]; const penultimateSlug = slugs[slugs.length - 2]; - const id = lastSlug === "index" ? penultimateSlug : lastSlug; + const id = lastSlug === 'index' ? penultimateSlug : lastSlug; const link = '/' + slug; - const parentLink = '/' + slug.substring(0, slug.lastIndexOf("/") + 1); - const isFolder = lastSlug === "index"; - const isRoot = (slugs.length === 3 && isFolder) || (slugs.length === 2 && !isFolder); - - return {id, link, title, parentLink, isFolder, isRoot, order, alwaysActive}; + const parentLink = '/' + slug.substring(0, slug.lastIndexOf('/') + 1); + const isFolder = lastSlug === 'index'; + const isRoot = + (slugs.length === 3 && isFolder) || (slugs.length === 2 && !isFolder); + + return { + alwaysActive, + id, + isFolder, + isRoot, + link, + order, + parentLink, + title, + }; }; const toSectionItem = (item, paths) => { if (item.isFolder) { - item.items = paths.filter(path => path.link !== item.link) - .filter(path => path.link === (item.parentLink + path.id + (path.isFolder ? "/index" : ""))) + item.items = paths + .filter(path => path.link !== item.link) + .filter( + path => + path.link === + item.parentLink + path.id + (path.isFolder ? '/index' : '') + ) .map(path => toSectionItem(path, paths)) .sort((a, b) => a.order - b.order); } @@ -57,9 +81,9 @@ class SideNavScroll extends React.Component { render() { return (
    {this.props.children}
    @@ -67,11 +91,11 @@ class SideNavScroll extends React.Component { } } -export default (props) => ( +export default props => ( ( } `} render={data => { - - let navbarClasses = 'sidebar-toggler-content sidenav-fixed sidenav-menu-slider mt-5'; + let navbarClasses = + 'sidebar-toggler-content sidenav-fixed sidenav-menu-slider mt-5'; if (props.navbarToggled) { navbarClasses += ' toggler-expanded'; } @@ -96,14 +120,17 @@ export default (props) => ( return ( - )} - } + ); + }} /> ); diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index 4dce3e05..006af70c 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -1,3 +1,3 @@ import Sidebar from './Sidebar'; -export default Sidebar; \ No newline at end of file +export default Sidebar; diff --git a/src/components/SimpleFooter/SimpleFooter.js b/src/components/SimpleFooter/SimpleFooter.js index 86ee7de8..afc93651 100644 --- a/src/components/SimpleFooter/SimpleFooter.js +++ b/src/components/SimpleFooter/SimpleFooter.js @@ -1,35 +1,70 @@ +import {withPrefix} from 'gatsby'; import React from 'react'; -import { withPrefix } from 'gatsby'; -const SimpleFooter = (props) => { +const SimpleFooter = props => { + const {editContentURL, issuesURL, slug} = props; - const {editContentURL, issuesURL, slug} = props; - - return ( -
    -
    -
    -

    Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.

    -
    -
    - -
    -
    -
    - ) + return ( +
    +
    +
    +

    + Except as otherwise noted, the content of this site is + licensed under{' '} + + CC BY-SA + {' '} + 4.0 license. +

    +
    +
    + +
    +
    +
    + ); }; -export default SimpleFooter; \ No newline at end of file +export default SimpleFooter; diff --git a/src/components/SimpleFooter/index.js b/src/components/SimpleFooter/index.js index 5deb3b61..752497d5 100644 --- a/src/components/SimpleFooter/index.js +++ b/src/components/SimpleFooter/index.js @@ -1,3 +1,3 @@ import SimpleFooter from './SimpleFooter'; -export default SimpleFooter; \ No newline at end of file +export default SimpleFooter; diff --git a/src/components/Timeline/Timeline.js b/src/components/Timeline/Timeline.js index c5165660..41720197 100644 --- a/src/components/Timeline/Timeline.js +++ b/src/components/Timeline/Timeline.js @@ -1,51 +1,78 @@ +import {withPrefix} from 'gatsby'; import React from 'react'; -import { withPrefix } from 'gatsby'; class Timeline extends React.Component { - _compareVersions(a, b) { - if (a.version < b.version) - return 1; - if (a.version > b.version) - return -1; - return 0; - } + _compareVersions(a, b) { + if (a.version < b.version) return 1; + if (a.version > b.version) return -1; + return 0; + } - render() { - let updates = this.props.data; + render() { + const updates = this.props.data; - updates.sort(this._compareVersions); + updates.sort(this._compareVersions); - return ( - <> - - - ); - } + return ( + <> + + + ); + } } export default Timeline; diff --git a/src/components/Timeline/index.js b/src/components/Timeline/index.js index 078f1e3a..33eb2dd8 100644 --- a/src/components/Timeline/index.js +++ b/src/components/Timeline/index.js @@ -1,3 +1,3 @@ import Timeline from './Timeline'; -export default Timeline; \ No newline at end of file +export default Timeline; diff --git a/src/components/Typography/Typography.js b/src/components/Typography/Typography.js index e371b1a6..27ac89c7 100644 --- a/src/components/Typography/Typography.js +++ b/src/components/Typography/Typography.js @@ -1,21 +1,11 @@ import React from 'react'; -export const H1 = props => ( -

    {props.children}

    -); +export const H1 = props =>

    {props.children}

    ; -export const H2 = props => ( -

    {props.children}

    -); +export const H2 = props =>

    {props.children}

    ; -export const H3 = props => ( -

    {props.children}

    -); +export const H3 = props =>

    {props.children}

    ; -export const H4 = props => ( -

    {props.children}

    -); +export const H4 = props =>

    {props.children}

    ; -export const P = props => ( -

    {props.children}

    -); \ No newline at end of file +export const P = props =>

    {props.children}

    ; diff --git a/src/components/Typography/index.js b/src/components/Typography/index.js index b59e0b49..fa874bac 100644 --- a/src/components/Typography/index.js +++ b/src/components/Typography/index.js @@ -1,3 +1,3 @@ import * as Typography from './Typography'; -export default Typography; \ No newline at end of file +export default Typography; diff --git a/src/components/index.js b/src/components/index.js index ee266734..c674cc2a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -8,4 +8,14 @@ import Sidebar from './Sidebar'; import SimpleFooter from './SimpleFooter'; import Typography from './Typography'; -export default {BlogList, CodeClipboard, CodeTabs, Footer, Icon, LayoutNav, Sidebar, SimpleFooter, Typography}; \ No newline at end of file +export default { + BlogList, + CodeClipboard, + CodeTabs, + Footer, + Icon, + LayoutNav, + Sidebar, + SimpleFooter, + Typography, +}; diff --git a/src/html.js b/src/html.js index 87d0d805..7b4849ba 100644 --- a/src/html.js +++ b/src/html.js @@ -1,39 +1,68 @@ +import {withPrefix} from 'gatsby'; import React from 'react'; -import { withPrefix } from 'gatsby'; class HTML extends React.Component { - render() { - return( - - - - - - - - - - - - - {this.props.headComponents} + render() { + return ( + + + + + + + + + + + + + {this.props.headComponents} - - - -
    - {this.props.postBodyComponents} - - - - ); - } + + + +
    + {this.props.postBodyComponents} + + + + ); + } } -export default HTML; \ No newline at end of file +export default HTML; diff --git a/src/pages/404.js b/src/pages/404.js index 2e8da501..6e4ed453 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,13 +1,17 @@ +import {withPrefix} from 'gatsby'; import React from 'react'; -import { withPrefix } from 'gatsby'; const ErrorPage = () => ( - <> -
    - not found -

    Not Found

    -
    - + <> +
    + not found +

    Not Found

    +
    + ); -export default ErrorPage; \ No newline at end of file +export default ErrorPage; diff --git a/src/pages/index.js b/src/pages/index.js index 3c39a2cd..15754674 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,79 +1,111 @@ +import {withPrefix, Link} from 'gatsby'; import React from 'react'; import Helmet from 'react-helmet'; -import { withPrefix, Link } from 'gatsby'; -import LayoutNav from '../components/LayoutNav'; import {WOW} from 'wowjs'; + import Footer from '../components/Footer'; +import LayoutNav from '../components/LayoutNav'; /** * Index page */ class Index extends React.Component { - componentDidMount() { - this._wow = new WOW(); - this._wow.init(); - } + componentDidMount() { + this._wow = new WOW(); + this._wow.init(); + } - componentWillUnmount() { - this._wow = null; - } + componentWillUnmount() { + this._wow = null; + } - render() { - const description = "Start using Gatsby for make powerful static sites"; + render() { + const description = 'Start using Gatsby for make powerful static sites'; - return ( -
    - - {process.env.PROJECT_NAME} - - - - - -
    -
    - + return ( +
    + + {process.env.PROJECT_NAME} + + + + + +
    +
    + -
    -
    -
    -
    -

    {process.env.PROJECT_NAME}

    -

    {description}

    - - Docs - - - Get Started - -
    -
    -
    -
    -
    +
    +
    +
    +
    +

    + {process.env.PROJECT_NAME} +

    +

    {description}

    + + Docs + + + Get Started + +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    - Github Logo -
    -
    -
    -
    -

    Want to contribute? Found an issue? Head on over to the GitHub repo.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - )}; +
    +
    +
    +
    +
    + Github Logo +
    +
    +
    +
    +

    + Want to contribute? Found an issue? + Head on over to the{' '} + + GitHub repo. + +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + ); + } } export default Index; diff --git a/src/services/auth.js b/src/services/auth.js index 27923299..8b399a2c 100644 --- a/src/services/auth.js +++ b/src/services/auth.js @@ -1,34 +1,38 @@ import netlifyIdentity from 'netlify-identity-widget'; -export const isBrowser = () => typeof window !== "undefined" +export const isBrowser = () => typeof window !== 'undefined'; // handle login & signup export const handleLogin = () => { - return new Promise((resolve, reject) => { - if (isLoggedIn()) { - resolve(); - } else { - netlifyIdentity.open(); - netlifyIdentity.on('login', user => { - netlifyIdentity.close(); - resolve(); - }); - } - netlifyIdentity.on('error', err => { - reject(err); - }); - }); -} + return new Promise((resolve, reject) => { + if (isLoggedIn()) { + resolve(); + } else { + netlifyIdentity.open(); + netlifyIdentity.on('login', () => { + netlifyIdentity.close(); + resolve(); + }); + } + netlifyIdentity.on('error', err => { + reject(err); + }); + }); +}; export const isLoggedIn = () => { - return !!netlifyIdentity.currentUser(); -} + return !!netlifyIdentity.currentUser(); +}; export const logout = () => { - return new Promise((resolve, reject) => { - netlifyIdentity.logout(); - netlifyIdentity.on('logout', () => { - resolve(); - }); - }); -} \ No newline at end of file + return new Promise((resolve, reject) => { + netlifyIdentity.logout(); + netlifyIdentity.on('logout', () => { + resolve(); + }); + + if (reject) { + throw new Error(reject); + } + }); +}; diff --git a/src/templates/blog.js b/src/templates/blog.js index b9901ac4..97fecb3a 100644 --- a/src/templates/blog.js +++ b/src/templates/blog.js @@ -1,106 +1,123 @@ -import { graphql } from 'gatsby'; -import Helmet from 'react-helmet'; +import {graphql} from 'gatsby'; import React from 'react'; -import Footer from '../components/Footer'; -import CodeTabs from '../components/CodeTabs'; -import CodeClipboard from '../components/CodeClipboard'; -import BlogMain from '../components/Blog/BlogMain'; +import Helmet from 'react-helmet'; + +import Auth from '../components/Auth'; import BlogArticle from '../components/Blog/BlogArticle'; +import BlogMain from '../components/Blog/BlogMain'; +import CodeClipboard from '../components/CodeClipboard'; +import CodeTabs from '../components/CodeTabs'; +import Footer from '../components/Footer'; import LayoutNav from '../components/LayoutNav'; -import Auth from '../components/Auth'; export default class Blog extends React.Component { - componentDidMount() { - this._codeTabs = new CodeTabs(); - this._codeClipboard = new CodeClipboard(); - } - - componentWillUnmount() { - this._codeTabs = null; - this._codeClipboard.dispose(); - } + componentDidMount() { + this._codeTabs = new CodeTabs(); + this._codeClipboard = new CodeClipboard(); + } - render() { - const { data } = this.props; - const { mdx: { code, frontmatter: { title, mainPage, date, author, needsAuth }, excerpt, timeToRead } } = data; + componentWillUnmount() { + this._codeTabs = null; + this._codeClipboard.dispose(); + } - return ( - -
    - - {title} - - - - - - - - -
    -
    - - {mainPage && -
    -
    -
    -
    -

    Blog

    -

    Where good ideas come from

    -
    -
    -
    -
    - } -
    + render() { + const {data} = this.props; + const { + mdx: { + code, + excerpt, + frontmatter: {author, date, mainPage, needsAuth, title}, + timeToRead, + }, + } = data; -
    -
    -
    + return ( + +
    + + {title} + + + + + + + + +
    +
    + + {mainPage && ( +
    +
    +
    +
    +

    Blog

    +

    + Where good ideas come from +

    +
    +
    +
    +
    + )} +
    - {/*renders a blog post content */} - {!mainPage && -
    - -
    - } +
    +
    +
    + {/*renders a blog post content */} + {!mainPage && ( +
    + +
    + )} - {/* renders the main page */} - {mainPage && - - } + {/* renders the main page */} + {mainPage && ( + + )} +
    +
    +
    +
    -
    -
    -
    -
    - -
    -
    -     - ); - } +
    +
    + + ); + } } - export const pageQuery = graphql` - query($slug: String!) { - mdx(fields: { slug: { eq: $slug } }) { - excerpt - timeToRead - frontmatter { - title - mainPage - date(formatString: "MMMM DD, YYYY") - author - needsAuth - } - code { - body - } - } - } -`; \ No newline at end of file + query($slug: String!) { + mdx(fields: {slug: {eq: $slug}}) { + excerpt + timeToRead + frontmatter { + title + mainPage + date(formatString: "MMMM DD, YYYY") + author + needsAuth + } + code { + body + } + } + } +`; diff --git a/src/templates/docs.js b/src/templates/docs.js index 1f56ec7f..d6d7bfef 100644 --- a/src/templates/docs.js +++ b/src/templates/docs.js @@ -1,122 +1,143 @@ -import { graphql } from 'gatsby'; -import Helmet from 'react-helmet'; +import {graphql} from 'gatsby'; import MDXRenderer from 'gatsby-mdx/mdx-renderer'; import React from 'react'; +import Helmet from 'react-helmet'; -import SimpleFooter from '../components/SimpleFooter'; -import Sidebar from '../components/Sidebar'; -import LayoutNav from '../components/LayoutNav'; -import CodeTabs from '../components/CodeTabs'; +import Auth from '../components/Auth'; import CodeClipboard from '../components/CodeClipboard'; +import CodeTabs from '../components/CodeTabs'; +import LayoutNav from '../components/LayoutNav'; +import Sidebar from '../components/Sidebar'; +import SimpleFooter from '../components/SimpleFooter'; import Typography from '../components/Typography'; -import Auth from '../components/Auth'; -import { logout } from '../services/auth'; +import {logout} from '../services/auth'; export default class Docs extends React.Component { - constructor(props) { - super(props); - this.state = { - navbarToggled: false - } - } + constructor(props) { + super(props); + this.state = { + navbarToggled: false, + }; + } - componentDidMount() { - this._codeTabs = new CodeTabs(); - this._codeClipboard = new CodeClipboard(); - } + componentDidMount() { + this._codeTabs = new CodeTabs(); + this._codeClipboard = new CodeClipboard(); + } - componentWillUnmount() { - this._codeTabs = null; - this._codeClipboard.dispose(); - } + componentWillUnmount() { + this._codeTabs = null; + this._codeClipboard.dispose(); + } - _handleLogout() { - logout().then(() => { - this.forceUpdate(); - }); - } + _handleLogout() { + logout().then(() => { + this.forceUpdate(); + }); + } - docsNavbarToggleClick() { - this.setState(prevState => ({ - navbarToggled: !prevState.navbarToggled - })); - } + docsNavbarToggleClick() { + this.setState(prevState => ({ + navbarToggled: !prevState.navbarToggled, + })); + } - render() { - const { data, location } = this.props; + render() { + const {data, location} = this.props; - const { mdx: { code, frontmatter: {title, needsAuth}, excerpt, timeToRead } } = data; + const { + mdx: { + code, + excerpt, + frontmatter: {needsAuth, title}, + timeToRead, + }, + } = data; - return ( - -
    - - {title} - - - - - - - - + return ( + +
    + + {title} + + + + + + + + -
    - -
    -
    - -
    -
    -
    -

    {title}

    -
    -
    +
    + +
    +
    + +
    +
    +
    +

    {title}

    +
    +
    -
    -
    -
    -
    - - {code.body} - -
    -
    -
    -
    +
    +
    +
    +
    + + {code.body} + +
    +
    +
    +
    - -
    -
    -
    - - ); - } + +
    + +
    +     + ); + } } export const pageQuery = graphql` - query($slug: String!) { - mdx(fields: { slug: { eq: $slug } }) { - excerpt - timeToRead - frontmatter { - title - needsAuth - } - code { - body - } - } - } -`; \ No newline at end of file + query($slug: String!) { + mdx(fields: {slug: {eq: $slug}}) { + excerpt + timeToRead + frontmatter { + title + needsAuth + } + code { + body + } + } + } +`; diff --git a/src/templates/onboarding.js b/src/templates/onboarding.js index 81a8733b..5e0062ee 100644 --- a/src/templates/onboarding.js +++ b/src/templates/onboarding.js @@ -1,140 +1,183 @@ -import { Link, graphql } from 'gatsby'; +import {Link, graphql} from 'gatsby'; +import MDXRenderer from 'gatsby-mdx/mdx-renderer'; import React from 'react'; import Helmet from 'react-helmet'; -import MDXRenderer from 'gatsby-mdx/mdx-renderer'; -import MultiStepNav from '../components/Onboarding/MultiStepNav'; -import Typography from '../components/Typography'; -import OnboardingMain from '../components/Onboarding/OnboardingMain'; -import Footer from '../components/Footer'; -import CodeTabs from '../components/CodeTabs'; + +import Auth from '../components/Auth'; import CodeClipboard from '../components/CodeClipboard'; +import CodeTabs from '../components/CodeTabs'; +import Footer from '../components/Footer'; import LayoutNav from '../components/LayoutNav'; -import Auth from '../components/Auth'; - +import MultiStepNav from '../components/Onboarding/MultiStepNav'; +import OnboardingMain from '../components/Onboarding/OnboardingMain'; +import Typography from '../components/Typography'; export default class Onboarding extends React.Component { - componentDidMount() { - this._codeTabs = new CodeTabs(); - this._codeClipboard = new CodeClipboard(); - } + componentDidMount() { + this._codeTabs = new CodeTabs(); + this._codeClipboard = new CodeClipboard(); + } - componentWillUnmount() { - this._codeTabs = null; - this._codeClipboard.dispose(); - } + componentWillUnmount() { + this._codeTabs = null; + this._codeClipboard.dispose(); + } - render() { - let { mdx: { code: { body }, excerpt, timeToRead, frontmatter: { mainPage, title, stepNumber, description, needsAuth } } } = this.props.data; - let {pageContext} = this.props; + render() { + const { + mdx: { + code: {body}, + excerpt, + frontmatter: { + description, + mainPage, + needsAuth, + stepNumber, + title, + }, + timeToRead, + }, + } = this.props.data; + const {pageContext} = this.props; - let previous = pageContext.previous; - let next = pageContext.next; + const previous = pageContext.previous; + const next = pageContext.next; - return( - -
    - - {title} - - - - - - - - -
    - - {mainPage && -
    -
    -
    -
    -

    {title}

    -

    {description}

    -
    -
    -
    -
    - } -
    -
    -
    -
    -
    - {!mainPage && - <> - -
    -

    {title}

    - {description} -
    -
    - - {body} - + return ( + +
    + + {title} + + + + + + + + +
    + + {mainPage && ( +
    +
    +
    +
    +

    {title}

    +

    + {description} +

    +
    +
    +
    +
    + )} +
    +
    +
    +
    +
    + {!mainPage && ( + <> + +
    +

    + {title} +

    + + {description} + +
    +
    + + {body} + -
    -
    -
    - {previous.fields && -
    - Previous -
    - } - {next.fields && next.fields.slug.startsWith('onboarding') && -
    - Next Step -
    - } -
    -
    -
    -
    - - } - { mainPage && - - } -
    -
    -
    -
    +
    +
    +
    + {previous.fields && ( +
    + + Previous + +
    + )} + {next.fields && + next.fields.slug.startsWith( + 'onboarding' + ) && ( +
    + + Next + Step + +
    + )} +
    +
    +
    +
    + + )} + {mainPage && ( + + )} +
    +
    +
    +
    -
    -
    -     - ); - } +
    +
    + + ); + } } export const pageQuery = graphql` - query($slug: String!) { - mdx(fields: { slug: { eq: $slug } }) { - excerpt - timeToRead - frontmatter { - title - mainPage - stepNumber - needsAuth - description - title - } - code { - body - } - } - } -`; \ No newline at end of file + query($slug: String!) { + mdx(fields: {slug: {eq: $slug}}) { + excerpt + timeToRead + frontmatter { + title + mainPage + stepNumber + needsAuth + description + title + } + code { + body + } + } + } +`; diff --git a/src/templates/updates.js b/src/templates/updates.js index 673a0ee1..5a82b5cf 100644 --- a/src/templates/updates.js +++ b/src/templates/updates.js @@ -1,85 +1,85 @@ -import { graphql } from 'gatsby'; -import Helmet from 'react-helmet'; +import {graphql} from 'gatsby'; import React from 'react'; +import Helmet from 'react-helmet'; + +import Auth from '../components/Auth'; import Footer from '../components/Footer'; import LayoutNav from '../components/LayoutNav'; -import Auth from '../components/Auth'; import Timeline from '../components/Timeline'; -export default class Updates extends React.Component { - render() { - const { data } = this.props; - const { mdx: { frontmatter: { title, needsAuth, updates }, excerpt, timeToRead } } = data; - - return ( - -
    - - Updates - - - - - - - - -
    -
    - -
    -
    -
    -
    -

    Updates

    -

    Check out what's new

    -
    -
    -
    -
    -
    +export default function Updates({data}) { + const { + mdx: { + excerpt, + frontmatter: {needsAuth, title, updates}, + timeToRead, + }, + } = data; -
    -
    -
    + return ( + +
    + + Updates + + + + + + + + +
    +
    + +
    +
    +
    +
    +

    Updates

    +
    +
    +
    +
    +
    - +
    +
    +
    + +
    +
    +
    +
    -
    -
    -
    -
    - -
    -
    -     - ); - } +