gridsome · travis-r6s · Feb 12, 2021 · Feb 12, 2021 · Feb 12, 2021 · Feb 12, 2021
diff --git a/.markdownlint.yaml b/.markdownlint.yaml
@@ -26,29 +26,15 @@ MD033:
 # <http://example.com>, but this doesn't improve readability.
 MD034: false
 
-# Note: Because this repo started without a linter, the rules below are
-# suppressed for compatibility with legacy code, but we should either fix the
-# linter errors and remove the exceptions or explicitly choose to ignore the
-# rule permanently and move it to the list above with an explanation of why we
-# ignore the rule.
-
 # heading-increment/header-increment
+# As there are often multiple sections in a page, they don't always sequentially decrement,
+# so we allow this
 MD001: false
-# ul-indent
-MD007: false
-# single-title/single-h1
-MD025: false
+
 # ol-prefix
+# Some lists are seperated by multiple lines (for example code blocks in-between)
 MD029: false
-# list-marker-space
-MD030: false
-# blanks-around-fences
-MD031: false
-# blanks-around-lists
-MD032: false
+
 # no-emphasis-as-heading/no-emphasis-as-header
+# Sometimes an emphasis is used inbetween sections, but not actually as a header - so we allow this.
 MD036: false
-# no-space-in-emphasis
-MD037: false
-# first-line-heading/first-line-h1
-MD041: false
diff --git a/blog/2019-02-19-gridsome-05/index.md b/blog/2019-02-19-gridsome-05/index.md
@@ -17,6 +17,7 @@ Read more about [Filtering data](/docs/filtering-data/)
 All references in the GraphQL schema has been a one-way relation. This release introduces a new field called `belongsTo` for all content types. The field will list all nodes that have a reference back to the current node which makes it very useful to create taxonomy pages etc. The field can also take the same arguments as a collection. And the `@paginate` directive can be used to automatically paginate the results.
 
 For example, this can be used to:
+
 - List blog posts for an author.
 - List posts for a tag or category.
 

diff --git a/blog/2019-09-17-gridsome-07/index.md b/blog/2019-09-17-gridsome-07/index.md
@@ -21,7 +21,7 @@ With Gridsome 0.7 follows a new plugin called [@gridsome/vue-remark](/plugins/@g
 
 Here is a quick overview of how it works:
 
-1) Install the plugin and add configs:
+1. Install the plugin and add configs:
 
 ```js
 module.exports = {
@@ -38,12 +38,13 @@ module.exports = {
   ]
 }
 ```
+
 In this example `/content/docs/index.md` will be `website.com/docs/`,
 and `/content/docs/install-guide.md` will be `website.com/docs/install-guide/`.
 
 By default it takes any **.md** files in `baseDir` folder and uses them for file-based routing like [Pages](/docs/pages/) works. You can override this by using a `route` config.
 
-2) Setup a template and include the `<VueRemarkContent />` component:
+2. Setup a template and include the `<VueRemarkContent />` component:
 
 ```html
 <template>
@@ -65,7 +66,7 @@ query ($id: ID!) {
 </page-query>
 ```
 
-3) Import and use Vue components in Markdown:
+3. Import and use Vue components in Markdown:
 
 ```jsx
 ---
@@ -151,6 +152,7 @@ module.exports = {
 ```
 
 **This means:**
+
 - [Source plugins](/plugins) & the [Data store API](/docs/data-store-api/) are only responsible for creating [Collections](/docs/collections/).
 - The new [Templates](/docs/templates/) config are used to setup **templates and routes** for collections.
 

diff --git a/docs/assets-css.md b/docs/assets-css.md
@@ -9,6 +9,7 @@ Add this to `src/main.js` to import a global CSS file.
 ```js
 import '~/assets/styles.css'
 ```
+
 💡 `~` is an alias to project **/src/** folder.
 
 ## Use SASS & CSS pre-processors
@@ -22,6 +23,7 @@ import '~/assets/styles.scss'
 ```
 
 You can also use SASS in **Vue Components** with the `lang="scss"` attribute:
+
 ```html
 <style lang="scss">
 .element {
@@ -144,6 +146,7 @@ The quickest and easiest way to get up and running with Tailwind CSS in your pro
 If you prefer to do the install and configuration on your own, you can add TailwindCSS manually with the following instructions.
 
 To install TailwindCSS (choose one):
+
 ```shell
 # Using npm
 npm install tailwindcss
@@ -153,11 +156,13 @@ yarn add tailwindcss
 ```
 
 To install PostCSS-PurgeCSS:
+
 ```shell
 npm i -D @fullhuman/postcss-purgecss
 ```
 
 Then, create a `main.css` file in the root of your `/src` directory and add the following:
+
 ```css
 @tailwind base;
 
@@ -167,6 +172,7 @@ Then, create a `main.css` file in the root of your `/src` directory and add the
 ```
 
 Now import the `main.css` file into your project. In the `main.js` file add `require('~/main.css')`. Afterwards, your `main.js` file should look something like this:
+
 ```javascript
 // Import global styles
 require('~/main.css')
@@ -181,11 +187,13 @@ export default function (Vue, { router, head, isClient }) {
 ```
 
 Optionally, if you would like to customize your TailwindCSS installation, you can generate a TailwindCSS config file using:
+
 ```shell
 npx tailwind init
 ```
 
 Which will generate a minimal `tailwind.config.js` file at the root of your project that contains:
+
 ```javascript
 module.exports = {
     theme: {
@@ -420,6 +428,7 @@ yarn add webpack-node-externals --dev
 ```
 
 Then modify your `gridsome.server.js` file to include the webpack-node-externals package, and allowlist Vuetify.
+
 ```js
 const nodeExternals = require('webpack-node-externals')
 
@@ -439,22 +448,26 @@ module.exports = function (api) {
   })
 }
 ```
+
 >❗️Note: Before webpack-node-externals version 2.4, use whitelist instead of allowlist.
 
 Or save your bundle size by using [vuetify treeshaking](https://vuetifyjs.com/en/customization/a-la-carte).
 
 1. Install dependencies
+
 ```shell
 # With npm
 npm install deepmerge fibers sass sass-loader@7.3.1 vuetify-loader --save-dev
 
 # With yarn
 yarn add deepmerge fibers sass sass-loader@7.3.1 vuetify-loader --dev
 ```
+
 >❗️Note: sass-loader must be lower than 8 version,
   also remove `node-sass` package if it's installed, otherwise build will fail.
 
 2. Configure webpack in `gridsome.server.js`
+
 ```js
 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
 
@@ -467,6 +480,7 @@ module.exports = (api) => {
 >❗️Note: `webpack-node-externals` is not needed in this case.
 
 3. Install plugin in `main.js`
+
 ```js
 import Vuetify from 'vuetify/lib/framework';
 import 'vuetify/dist/vuetify.min.css';

diff --git a/docs/assets-fonts.md b/docs/assets-fonts.md
@@ -16,6 +16,7 @@ export default function (Vue, { head }) {
 ## Self-Hosting Open Source Typefaces
 
 Self-hosting open source fonts, as explained [in the docs](https://github.com/KyleAMathews/typefaces):
+
 - Self-hosting is significantly faster. Loading a typeface from Google Fonts or other hosted font service adds an extra (blocking) network request. While testing, we’ve found replacing Google Fonts with a self-hosted font can improve a site’s speedindex by ~300 milliseconds on desktop and 1+ seconds on 3g. This is a big deal.
 - Your fonts load offline. It’s annoying to start working on a web project on the train or airplane and see your interface screwed up because you can’t access Google Fonts.
 - Go beyond Google Fonts. Some typefaces aren’t on Google Fonts like Clear Sans, Cooper Hewitt, and Aleo.

diff --git a/docs/assets-scripts.md b/docs/assets-scripts.md
@@ -9,6 +9,7 @@ It is really easy to use any external or third-party JavaScript with Gridsome. S
 If you want to use external Vue plugins inside your component without defining it globally, you can do so by importing the package inside your component and registering it for your component.
 
 Example:
+
 ```html
 <template>
   <Carousel>
@@ -37,6 +38,7 @@ export default {
 If you want to use a external JavaScript library inside your component, you can do so by importing the package and requiring it once the Vue components are mounted.
 
 Example:
+
 ```html
 //MyComponent.vue
 <template>
@@ -94,6 +96,7 @@ In this example we are importing the `VueTypedJs` plugin inside our Gridsome pro
 To use any external library on our Gridsome project, you may proxy it to a property of the Vue prototype object. Since all components inherit their methods from the Vue prototype object this will make your external library or libraries automatically available across any and all components with no global variables or anything to manually import.
 
 Example:
+
 ```javascript
 //main.js
 

diff --git a/docs/assets-svg.md b/docs/assets-svg.md
@@ -35,6 +35,7 @@ yarn add -D vue-svg-loader
 ```
 
 You will need to update the webpack config in `gridsome.config.js` to use the new loader:
+
 ```js
 module.exports = {
   chainWebpack: config => {
@@ -48,6 +49,7 @@ module.exports = {
 ```
 
 Then you can import your SVGs from within your Vue templates like any Vue component:
+
 ```html
 <script>
   import Brand from '~/assets/svgs/Brand.svg'

diff --git a/docs/code-splitting.md b/docs/code-splitting.md
@@ -1 +1 @@
-code-splitting
+# Code Splitting
diff --git a/docs/data-layer.md b/docs/data-layer.md
@@ -12,12 +12,12 @@ If you need dynamic data you should use [client-side data](/docs/client-side-dat
 
 ## Working with data
 
- - [How to import data](/docs/fetching-data/).
- - [How to query data](/docs/querying-data/).
- - [How to filter data](/docs/filtering-data/).
- - [How to create taxonomy pages](/docs/taxonomies/).
- - [How to paginate data](/docs/pagination/).
- - [How to add client-side / dynamic data](/docs/client-side-data/).
+- [How to import data](/docs/fetching-data/).
+- [How to query data](/docs/querying-data/).
+- [How to filter data](/docs/filtering-data/).
+- [How to create taxonomy pages](/docs/taxonomies/).
+- [How to paginate data](/docs/pagination/).
+- [How to add client-side / dynamic data](/docs/client-side-data/).
 
 ## The GraphQL explorer
 

diff --git a/docs/deploy-to-firebase.md b/docs/deploy-to-firebase.md
@@ -11,6 +11,7 @@ First, you need to make a few preparations:
 1. Create a Firebase account [here](https://firebase.google.com/).
 
 1. Run firebase login and fill in your Firebase credentials:
+
 ```shell script
 firebase login
 ```
@@ -35,6 +36,7 @@ Create firebase.json and .firebaserc at the root of your project with the follow
  }
 }
 ```
+
 ``.firebaserc:``
 
 ```shell script

diff --git a/docs/deploy-to-github.md b/docs/deploy-to-github.md
@@ -24,26 +24,34 @@ There's a few steps to complete:
 
 5. Go to GitHub's website and make sure your Repo's settings under "GitHub Pages" show the `gh-pages` branch under "Source".
 
-**Notes**
+### Notes
 
 GitHub Pages allows you to have a "GitHub user page" that acts as a profile/main page on `<your-github-username>.github.io` by having a repo named `<your-github-username>.github.io`.
+
 * If you are deploying to your GitHub user page (your main site on `<username>.github.io`)
   * Remove this line from `gridsome.config.js`:
+
     ```js
     - pathPrefix: '/<your-gridsome-repo-name>',
     ```
+
   * Now when you run the `npm run deploy` command, your project will be built and the contents of the `dist` folder will be pushed to the `gh-pages` branch which is where your "GitHub user page" will deploy from.
   * This also allows you to keep track of your project on the `master` branch (or any branch you want) while `gh-pages` only contains your built files.
 * If you are using a custom URL such as `www.yourname.com` you will need to change `gridsome.config.js` to:
+
   ```js
   siteUrl: 'https://www.yourname.com',
   ```
+
   * In addition to this, you will want to create a `CNAME` file inside `/static` to avoid a known issue in GitHub Pages that results in the deployment [incorrectly overwriting the custom domain](https://github.com/tschaub/gh-pages/issues/213) setting within GitHub user settings.
+
     ```txt
     // CNAME
     custom.domain.com
     ```
+
 * If you are using an apex domain for your GitHub user page (ie. `https://yourname.com` points to all of your GitHub Pages sites), and your Gridsome project is *not* your GitHub user page (not on the root `https://yourname.com` page, but a separate repo), then you will need to make sure `pathPrefix` matches your Gridsome project's repo name in `gridsome.config.js`:
+
   ```js
   pathPrefix: '/<your-gridsome-repo-name>',
   ```
diff --git a/docs/deploy-to-netlify.md b/docs/deploy-to-netlify.md
@@ -7,6 +7,7 @@ Their free tier includes unlimited personal and commercial projects, HTTPS, cont
 To deploy your Gridsome site to Netlify, go to the create a new site page, select your project repo from GitHub, GitLab, or Bitbucket.
 
 Add these build settings:
+
 - **Build Command:** `gridsome build`
 - **Publish directory:** `dist`
 

diff --git a/docs/dev-tools.md b/docs/dev-tools.md
@@ -43,6 +43,7 @@ Detail is [here](https://github.com/vuejs/vetur/issues/975#issuecomment-46119703
 
 1. Install [GraphQL](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)
 2. Add this item in `settings.json`
+
 ```json
 {
   ... ,

diff --git a/docs/guide-search.md b/docs/guide-search.md
@@ -8,6 +8,7 @@ Currently [Algolia](https://www.algolia.com) offers up to 10,000 search requests
 
 1. Create a free Algolia account.
 2. Install [gridsome-plugin-algolia](https://gridsome.org/plugins/gridsome-plugin-algolia):
+
 ```sh
 # NPM
 npm install --save gridsome-plugin-algolia
@@ -18,6 +19,7 @@ yarn add gridsome-plugin-algolia
 
 3. Follow the setup instructions on the plugin page for setting up the Algolia indexing process.
 4. Create the UI using `algoliasearch` and `vue-instantsearch`:
+
 ```sh
 # NPM
 npm install --save algoliasearch vue-instantsearch

diff --git a/docs/head.md b/docs/head.md
@@ -1,6 +1,3 @@
----
-title: Populating <head>
----
 # Populating `<head>`
 
 Gridsome uses [vue-meta](https://github.com/nuxt/vue-meta) to populate **Head**.
@@ -22,7 +19,7 @@ export default function (Vue, { head }) {
     rel: 'stylesheet',
     href: 'https://some-server.com/external-styleheet.css'
   })
-  
+
   // Add an external JavaScript before the closing </body> tag
   head.script.push({
     src: 'https://some-server.com/external-script.js',
@@ -87,8 +84,8 @@ export default {
 
 ## How to overwrite from child component
 
-If you need to overwrite meta tags, add `key` property.  
-Gridsome is passing `tagIdKeyName: 'key'` to vue-meta as default option.  
+If you need to overwrite meta tags, add `key` property.
+Gridsome is passing `tagIdKeyName: 'key'` to vue-meta as default option.
 
 ```js
 // parent component

diff --git a/docs/how-to-contribute.md b/docs/how-to-contribute.md
@@ -46,10 +46,12 @@ To add a new blog post to the gridsome.org blog:
 - The content for the blog lives in the `/blog` folder.
 
 **Create your contributor profile:**
+
 - Add your avatar image to `/contributors/images`.
 - Add your name and info to `/contributors/contributors.yaml`.
 
 **Setup blog post:**
+
 - Add a new folder following the pattern `/blog/yyyy-mm-dd-title` (for example, 2018-09-14-say-hello-to-gridsome). Within this newly created folder add an `index.md` file.
 - Add `title`, `date`, `author`, and `tags` to the frontmatter of your `index.md`.
 - If your blog post contains images add them to your blog post folder and reference them in your post's `index.md`.
@@ -70,10 +72,12 @@ To add your Starter to gridsome.org:
 - Run `yarn` to install all of the website's dependencies.
 
 **Create your contributor profile:**
+
 - Add your avatar image to `/contributors/images`.
 - Add your name and info to `/contributors/contributors.yaml`.
 
 **Add your starter project:**
+
 - Add starter screenshot to `/starters/screenshots` (840x840px / 1680x1680 for retina).
 - Add starter details to end of this file `/starters/starters.yaml`.
-Original file line number
+Diff line change
@@ Expand Up @@
 . Install [GraphQL](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)
 . Add this item in `settings.json`
     ```json
     {
       ... ,
@@ Expand Down @@