gridsome / gridsome-starter-blog Goto Github PK

A simple, hackable & minimalistic starter for Gridsome that uses Markdown for content.

Home Page: https://gridsome-starter-blog.netlify.com/

JavaScript 9.85% CSS 29.71% Vue 54.81% HTML 5.63%

gridsome-starter-blog's Introduction

Gridsome

Build super fast, modern websites with Vue.js

Gridsome is a Vue-powered static site generator for building CDN-ready websites for any headless CMS, local files or APIs

This project is under active development. Any feedback or contributions would be appreciated.

Enjoy a modern development stack

Build websites with modern tools like Vue.js, webpack and Node.js. Get hot-reloading and access to any packages from npm and write CSS in your favorite preprocessor like Sass or Less with auto-prefixing.

Connect to any CMS or data source

Use any CMS or data source for content. Pull data from WordPress, Contentful, local Markdown, or any other headless CMS or APIs and access it with GraphQL in your pages and components.

PWA Offline-first architecture

Only critical HTML, CSS, and JavaScript get loaded first. The next pages are then prefetched so users can click around incredibly fast without page reloads, even when offline.

Get perfect page speed scores

Gridsome automatically optimizes your frontend to load and perform blazing fast. You get code-splitting, image optimization, lazy-loading, and almost perfect lighthouse scores out-of-the-box.

Build future ready websites

The future of the web is JavaScript, API's, and Markup - the Jamstack. Gridsome uses the power of blazing-fast static site generator, JavaScript and APIs to create stunning dynamic web experiences.

Ready for global domination

Gridsome sites are usually not connected to any database and can be hosted entirely on a global CDN. It can handle thousands to millions of hits without breaking - and no expensive server costs.

Quick start

1. Install Gridsome CLI tool

npm install --global @gridsome/cli
yarn global add @gridsome/cli
pnpm install --global @gridsome/cli

2. Create a Gridsome project

gridsome create my-gridsome-site to create a new project
cd my-gridsome-site to open the folder
gridsome develop to start a local dev server at http://localhost:8080
Happy coding 🎉🙌

3. Next steps

Create .vue components in the ./src/pages directory to create pages
Use gridsome build to generate static files in a ./dist folder

Learn more

How to Contribute

Install Node.js ^12.13.0 || ^14.0.0 || >=16.0.0 or higher and Yarn classic.

Clone this repository.
Create a new Gridsome project inside the ./projects folder.
Enter the new project folder and run yarn install.
The project will now use the local packages when you run gridsome develop.

Make sure your test project has a version number in its package.json if you use an existing project.

To use the local version of @gridsome/cli as the global command, enter the ./packages/cli folder and run npm link.

Yarn will add dependencies from your test projects to the root yarn.lock file. So you should not commit changes in that file unless you have added dependencies to any of the core packages. If you need to commit it, remove your projects from the ./projects folder temporary and run yarn install in the root folder. Yarn will then clean up the lock file with only necessary dependencies. Commit the file and move your projects back and run yarn install again to start developing.

Code of Conduct

In the interest of fostering an open and welcoming environment please read and follow our Code of Conduct.

License

Licensed under the MIT License.

Roadmap for v1.0

Visit the Gridsome Roadmap to keep track of which features we are currently working on.

gridsome-starter-blog's People

Contributors

Stargazers

Watchers

Forkers

seanwash lauragift21 ademers brandonpittman nicholaslgoodman gap1994 xinmeiwen28 mariuswallin mattycraig renga92 ybarbouro trendingtechnology rupertdev suits-at jaeyholic kodaininja mynar7 robotshateme guitcastro jamemsu ajerez kessir-cloudator mbeayou seifip maxprofs-llcio viztushar oneviews mangosteen-yang totemkevin tonysm cookyourweb mjaidi tyrion krstic-duci sladinji asrori7 cuulee stackbit xarop danielhpavey theozmic navsgh shbm tweetmarken scmmishra may17 watain666 strogo ljjbluesky jpkeisala menteora filledstacks tui2tone web-dev-badger syedpeer clemmakesapps grayanchor thibautdavoult urisanta zahedbri kissu josesdev taqies wavrin kamit-transient karzam 51moke nevercast kylerits madsop suenot mbajur prashant1k99 marc-bouvier-forks lorvent siliushi cyrillajarge sofyanlabs perade milkomatic benzio rileyseaburg stefanmao peranakanfrancis akhlis yannisfouzi fl0werpowers marineb n2ptune heracules1020 chetanraj ramonakira pontakornth imanaspaul degharbi cogs-web-development-and-hosting kongmoumou judetheohawkson judetheohawksonorg mya999

gridsome-starter-blog's Issues

Test issue

Issue

SCSS on Vue components cannot be found at build

System: Mac OS High Sierra
Gridsome version: gridsome v0.6.5, @gridsome/cli v0.2.1

After I run gridsome create <dir> https://github.com/gridsome/gridsome-starter-blog.git, I'll cd into the folder and run gridsome develop to be hit with a compile error:

 ERROR  Failed to compile with 9 errors                                                                                                                                 9:18:42 AM

This dependency was not found:

* ~/assets/style/index.scss in ./src/main.js

To install it, you can run: npm install --save ~/assets/style/index.scss


These relative modules were not found:

* ./Post.vue?vue&type=style&index=0&lang=scss& in ./src/templates/Post.vue
* ./Default.vue?vue&type=style&index=0&lang=scss& in ./src/layouts/Default.vue
* ./Author.vue?vue&type=style&index=0&lang=scss& in ./src/components/Author.vue
* ./PostCard.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostCard.vue
* ./PostMeta.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostMeta.vue
* ./PostTags.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostTags.vue
* ./Logo.vue?vue&type=style&index=0&lang=scss& in ./src/components/Logo.vue
* ./ToggleTheme.vue?vue&type=style&index=0&lang=scss& in ./src/components/ToggleTheme.vue

I've encountered the same issue trying to run build on a freshly created project using another project forked from this, though with less issues.

 ERROR  Failed to compile with 5 errors                                                                                                                                 9:13:04 AM

These relative modules were not found:

* ./Post.vue?vue&type=style&index=0&lang=scss& in ./src/templates/Post.vue
* ./PostMeta.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostMeta.vue
* ./PostTags.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostTags.vue
* ./Author.vue?vue&type=style&index=0&lang=scss& in ./src/components/Author.vue
* ./PostCard.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostCard.vue

I don't think the routing is incorrect, but I'm unsure as to why this is occuring.

EDIT: A bit more investigation is showing that it's related to the SCSS tied to each element. Of course, if I remove it, GraphQL throws a fit, but at least I can narrow it down to that.

All blog posts 404

Hi there,

I downloaded the blog code. Using the instructions below.

gridsome create my-gridsome-site https://github.com/gridsome/gridsome-starter-blog.git
cd my-gridsome-site to open folder
yarn upgrade --latest
gridsome develop to start local dev server at http://localhost:8080

The upgraded to the latest.

Expectation
The blog builds and runs normally. When clicking on a blog post it should show the blog details from the markdown

Actual Result
404 page not found for all blog posts.

Here is my package json. I'm on gridsome 0.7.2 and the latest for all the plugins.

{
  "name": "my-gridsome-site",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@gridsome/plugin-google-analytics": "^0.1.0",
    "@gridsome/remark-prismjs": "^0.2.0",
    "@gridsome/source-filesystem": "^0.6.0",
    "@gridsome/transformer-remark": "^0.3.3",
    "gridsome": "^0.7.2"
  },
  "devDependencies": {
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0"
  }
}

Getting errors when installing npm packages in both Ubuntu WSL and Windows 11

I referred to this documentation. ( https://ghost.org/docs/jamstack/gridsome/ )

First I used Ubuntu WSL terminal to start working. I have used Gatsby before in this platform. I haven't got any errors there.
According to the docs, I ran this command.

npm install -g @gridsome/cli
then I got this message saying there are 4 moderate vulnerabilities.

added 182 packages, and audited 183 packages in 19s

15 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

After running npm audit I got this. found 0 vulnerabilities

Because there were zero vulnerabilities, I proceeded with the documentation. Then ran this command.
gridsome create gridsome-ghost https://github.com/gridsome/gridsome-starter-blog.git

Then got this error message

> Clone https://github.com/gridsome/gridsome-starter-blog.git 3.83s
> Update project package.json 0s
> Install dependencies
  • Building fresh packages (4 of 4)
Error: Failed to install dependencies with yarn. Please enter gridsome-ghost directory and install dependencies with yarn or npm manually. Then run gridsome develop to start local development.

    Exit code 1
    at ChildProcess.<anonymous> (C:\Users\Sasika\AppData\Roaming\npm\node_modules\@gridsome\cli\lib\commands\create.js:106:17)
    at ChildProcess.emit (node:events:390:28)
    at ChildProcess.cp.emit (C:\Users\Sasika\AppData\Roaming\npm\node_modules\@gridsome\cli\node_modules\cross-spawn\lib\enoent.js:34:29)
    at maybeClose (node:internal/child_process:1064:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)

Then I entered to the gridsome-ghost directory and run 'npm install' and it also gave errors.

Then after ignoring these error messages, I tried this command gridsome develop. Then I got this result.

Gridsome v0.7.23

Initializing plugins...
Load sources - 0.05s
Create GraphQL schema - 0.05s
Create pages and templates - 0.07s
Generate temporary code - 0.08s
Bootstrap finish - 2.56s


 ERROR  Failed to compile with 9 errors                                                                      11:37:26 PM

 ERROR  Failed to compile with 9 errors                                                                      11:37:26 PM

 error  in ./src/assets/style/index.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./src/assets/style/index.scss 4:14-216 15:3-20:5 16:22-224
 @ ./src/main.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/templates/Post.vue?vue&type=style&index=0&id=8099c222&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/templates/Post.vue?vue&type=style&index=0&id=8099c222&lang=scss& 4:14-429 15:3-20:5 16:22-437
 @ ./src/templates/Post.vue?vue&type=style&index=0&id=8099c222&lang=scss&
 @ ./src/templates/Post.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/layouts/Default.vue?vue&type=style&index=0&id=c6c5ef5c&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/Default.vue?vue&type=style&index=0&id=c6c5ef5c&lang=scss& 4:14-432 15:3-20:5 16:22-440
 @ ./src/layouts/Default.vue?vue&type=style&index=0&id=c6c5ef5c&lang=scss&
 @ ./src/layouts/Default.vue
 @ ./src/main.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/components/Logo.vue?vue&type=style&index=0&id=4ef0a45b&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Logo.vue?vue&type=style&index=0&id=4ef0a45b&lang=scss& 4:14-429 15:3-20:5 16:22-437
 @ ./src/components/Logo.vue?vue&type=style&index=0&id=4ef0a45b&lang=scss&
 @ ./src/components/Logo.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/Default.vue?vue&type=script&lang=js&
 @ ./src/layouts/Default.vue?vue&type=script&lang=js&
 @ ./src/layouts/Default.vue
 @ ./src/main.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/components/ToggleTheme.vue?vue&type=style&index=0&id=51f78a55&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ToggleTheme.vue?vue&type=style&index=0&id=51f78a55&lang=scss& 4:14-436 15:3-20:5 16:22-444
 @ ./src/components/ToggleTheme.vue?vue&type=style&index=0&id=51f78a55&lang=scss&
 @ ./src/components/ToggleTheme.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/Default.vue?vue&type=script&lang=js&
 @ ./src/layouts/Default.vue?vue&type=script&lang=js&
 @ ./src/layouts/Default.vue
 @ ./src/main.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/components/Author.vue?vue&type=style&index=0&id=dafbeb8a&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Author.vue?vue&type=style&index=0&id=dafbeb8a&lang=scss& 4:14-431 15:3-20:5 16:22-439
 @ ./src/components/Author.vue?vue&type=style&index=0&id=dafbeb8a&lang=scss&
 @ ./src/components/Author.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/templates/Tag.vue?vue&type=script&lang=js&
 @ ./src/templates/Tag.vue?vue&type=script&lang=js&
 @ ./src/templates/Tag.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/components/PostCard.vue?vue&type=style&index=0&id=040ef000&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/PostCard.vue?vue&type=style&index=0&id=040ef000&lang=scss& 4:14-433 15:3-20:5 16:22-441
 @ ./src/components/PostCard.vue?vue&type=style&index=0&id=040ef000&lang=scss&
 @ ./src/components/PostCard.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/templates/Tag.vue?vue&type=script&lang=js&
 @ ./src/templates/Tag.vue?vue&type=script&lang=js&
 @ ./src/templates/Tag.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/components/PostMeta.vue?vue&type=style&index=0&id=2c99ef16&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/PostMeta.vue?vue&type=style&index=0&id=2c99ef16&lang=scss& 4:14-433 15:3-20:5 16:22-441
 @ ./src/components/PostMeta.vue?vue&type=style&index=0&id=2c99ef16&lang=scss&
 @ ./src/components/PostMeta.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/templates/Post.vue?vue&type=script&lang=js&
 @ ./src/templates/Post.vue?vue&type=script&lang=js&
 @ ./src/templates/Post.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/components/PostTags.vue?vue&type=style&index=0&id=4fde06ee&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/home/sasika/blog/gridsome-ghost/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/home/sasika/blog/gridsome-ghost/node_modules/sass-loader/dist/index.js:40:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--4-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/PostTags.vue?vue&type=style&index=0&id=4fde06ee&lang=scss& 4:14-433 15:3-20:5 16:22-441
 @ ./src/components/PostTags.vue?vue&type=style&index=0&id=4fde06ee&lang=scss&
 @ ./src/components/PostTags.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/templates/Post.vue?vue&type=script&lang=js&
 @ ./src/templates/Post.vue?vue&type=script&lang=js&
 @ ./src/templates/Post.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

Then I tried this workflow using yarn in Ubuntu WSL, but no difference. I get the same error message every time.

Then I tried this workflow in Windows 11 command prompt. I got the same error messages.

Duplicate GraphQL fields in page-query for Index.vue

This could be removed: https://github.com/gridsome/gridsome-starter-blog/blob/master/src/pages/Index.vue#L31

Tags are returning null from query

I keep getting an error in the terminal when I try to run the site locally after updating. I use this starter template and mine has been so out of sync. I am trying to update now but I am facing a problem with the queries.
This is a link to the issue I opened.

gridsome/gridsome#751

I have updated everything but I still face the issue as explained here:
gridsome/gridsome#670

Markdown pages are not being transformed into HTML

Description

The markdown files in content/posts are not rendering with Markdown 7.7.

Steps to reproduce

gridsome create my-website https://github.com/gridsome/gridsome-starter-blog.git
gridsome develop

Navigate to any of the links from the site index page.

Alternatively

gridsome create my-website https://github.com/gridsome/gridsome-starter-blog.git
gridsome build
Look in the dist folder. Notice no generated post output.

Browser:

For Tooling issues:

Node version: v10.15.3
Platform: Windows 10 1903

Expected

A generated page that contains the content of a markdown file.

Actual

404 Not Found.

Test issue

asdf

Show tag name in Tag template

I think it should contain the tag name instead of "hello world".

gridsome-starter-blog/src/templates/Tag.vue

Line 46 in c594069

title: 'Hello, world!'

seems my blog css and js files can not loaded

Links:
https://github.com/tangyiming/blog
https://tangyiming.github.io/blog/

Hi,I changed the command to deployed the site into mater/docs, and don't know why the css and js cannot load (404)

Sitemap.xml generate

Is this already support for generate sitemap.xml

Help: how to insert Post language inside Tag object

Hi, I'm trying to add language inside Tag.
The language field is present inside Post content, can you help me to inject inside Tag object with API?

My final result should be: Tag: '/:lang/tag/:id', I'll create a multilanguage Tag Page linked to Posts (belongTo) with same language.

I'm trying without success, sorry I'm newbie.

Thanks
L.

Css classes are duplicated

Here's an example from the root index page.

It only happens on built sites, not in dev mode. Which means the blog is serving a bunch of extra css that is useless.

Edit: It appears like the Casper theme and Gridsome site are also experiencing duplicate css, leading me to assume it's a more fundamental problem in Gridsome.

i18n support

Need feature for switch language

mathjax / katex / latex rendering for the markdown

I have been looking for plugins / components to use to be able to use latex expressions in blog posts.

this markdown

### Naive approach to guess until we get a good fit
guessing the beta parameters linear equation

$ y = m \times \mathbf{x} + b

becomes:

I get the following Error for the timeToRead property and the content property

shared.js?37f0:18 An error occurred while executing page-query for src/templates/Post.vue

Error: Cannot read property 'prototype' of undefined

GraphQL request (12:5)
11:     description
12:     content
        ^
13:     coverImage(width: 860, blur: 10)

Do we need to handle the content in some way for the rendering to take place for the places of latex expressions?

Found the issue solved on vuepress: vuejs/vuepress#113

Could we do something similar maybe? I cannot see how we can use it:

gridsome-starter-blog/gridsome.config.js

Line 17 in c594069

path: 'content/posts/*.md',

Found the issue of the remark/prism plugin we are using:
gridsome/gridsome#238

Steps to reproduce

$ gridsome create test-remark-math https://github.com/gridsome/gridsome-starter-blog.git
$ npm install remark-math remark-html-katex remark-html
Then you will get same error for timeToRead in DevTool console. Removing those for the graphql query yields the error on the content part for any markdown where $ is used.

gridsome develop command fails

Description

The gridsome develop commands fails

Steps to reproduce

While running gridsome develop it is showing me below mentioned error

Expected result

Gridsome based app should be displayed properly. but it wasn't working

Actual result

error  in ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Cannot query field "cover_image" on type "Post".

GraphQL request:24:9
23 |         description
24 |         cover_image (width: 770, height: 380, blur: 10)
   |         ^
25 |         path
    at Object.module.exports (/Users/sk/Design/mine/vue-blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:33:23)

 @ ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query 1:0-331 1:347-350 1:352-680 1:352-680
 @ ./src/pages/Index.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

 error  in ./src/templates/Post.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Cannot query field "cover_image" on type "Post".

GraphQL request:71:5
70 |     content
71 |     cover_image (width: 860, blur: 10)
   |     ^
72 |   }
    at Object.module.exports (/Users/sk/Design/mine/vue-blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:33:23)

 @ ./src/templates/Post.vue?vue&type=custom&index=0&blockType=page-query 1:0-330 1:346-349 1:351-678 1:351-678
 @ ./src/templates/Post.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/entry.sockjs.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.

Environment

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Edge: 83.0.478.61
    Firefox: 78.0.2
    Safari: 13.1.1
  npmPackages:
    @gridsome/plugin-google-analytics: ^0.1.0 => 0.1.1 
    @gridsome/remark-prismjs: ^0.2.0 => 0.2.0 
    @gridsome/source-filesystem: ^0.6.0 => 0.6.2 
    @gridsome/transformer-remark: ^0.3.0 => 0.3.4 
    gridsome: ^0.7.0 => 0.7.19 
  npmGlobalPackages:
    @gridsome/cli: 0.3.3

For reference: gridsome/gridsome#1271

How to modify prismJs styling for _code.scss

I noticed that a theme from PrismJS is being used for code blocks and I would like to know if it was possible to modify the theme to something darker, How would I do that? Do I justs modify the CSS directly or is there another way to import another PrismJS theme completely?

GraphQL Query Error caused by coverImage

I keep coming across this error whenever I delete a post with cover_image in the frontmatter. The error thrown is

Error: Unknown argument "width" on field "coverImage" of type "Post".

Dependencies fail to build with Node v12 on MacOS High Sierra

Some dependencies may need to be updated: fsevents, node-sass and sharp fail to build on Node 12. Downgrading to 10 has everything installing fine.

Test issue

Does not run on Windows 10.

npm install fails no matter what

Changing a logo on theme switch

I'm trying to follow this theme switcher but the v-if I see on other templates don't get the changed variable
Does anyone have an example of this with a logo for light/dark themes?

cheers

templating

hi there,

just launched the starter and everything works fine. But I get stuck trying to change the layout. I would like to fix the Card height and on a big screen would like to have the post listing in 2 columns.
I have tried, but somehow I can't get it right. Any advice?
Thanks

G-image only works with relative path in markdown files

Unless an image's path is ./image-name.jpg it shows up as a regular <img> and doesn't have all the fancy srcset and other stuff that <g-image> adds. This frustrating because Netlify CMS doesn't support relative paths. Everything has to start with a / in front, and / doesn't show up, but ./ does.

Does anyone know either how to 1.) make relative paths in Netlify CMS, i have googled and have not come up with any solution so far, or 2.) is it possible to add <g-image> to ALL images in markdown files regardless of their paths. Thank you in advance.

How to keep aspect ratio of Responsive images?

For way too much background, see:
calebanthony/gridsome-bulma#9

Briefly, when the image class:

<figure class="image is-2by1"><img alt="Cover image" src="data:image/svg+xml,%3csvg fill='none' viewBox='0 0 770 385' ...

is put in this container, it works as expected:

<div class="card"><a href="/new/consumed-by-the-light" class="card-image">

But put in this container it gets huge margins that don't appear to be scaled in Responsive displays, and loses its aspect ratio - it shrinks more horizontally:

<div class="post content section container">

I've found if I hack the generated index.html for the distorted page to add:

src="data:image/svg+xml,%3csvg fill='none' viewBox='0 0 770 385' preserveAspectRatio="xMidYMid meet"

The aspect ratio is preserved - but I get only the blur image, and it is even tinier. And I don't know where to put it so it builds into the project automatically.

I saw another suggestion to add, in post.vue:

cover_image(width: 770, immediate: true, fit: inside, blur: 1)

But that won't build, it won't accept "immediate" even though it is in the same list with width, fit, and blur.

Pretty much everything else about this project has worked well, but this one is way beyond my knowledge! Is there any way to force the "Post" images to keep their aspect ratio on "Responsive" screens like the "Index" images do?

Cant get it work on windows?

Got some strange errors after install and run gridsome-develop.

Node 10.15.0 / 11.12.0
Windows 10
NPM 6x

Any advice?

webfonts import url should not insert spaces

Code

// _typography.scss
@import url('https://fonts.googleapis.com/css?family=Poppins:400, 600');

Should be:

// _typography.scss
@import url('https://fonts.googleapis.com/css?family=Poppins:400,600');

Description

When I used "https://fonts.googleapis.com/css?family=Poppins:400, 600" as webfonts url, my website didn't get font file via the http request. I entered this url into chrome and found that it didn't include the 600 weight font. This may be because space between 400 and 600 is not supported.

I changed it to "https://fonts.googleapis.com/css?family=Poppins:400,600", and now it works normally.

Cover images are not visible

In the current build cover images are not visible. This is fixed in this PR.

Non-published posts are accessible directly and in tag pages

Proof:

The "Say Hello to Gridsome" post is not published but still shows up. I'm new to Gridsome and GraphQL so I'm not sure exactly where the filtering is supposed to be happening. My guess would be that the nodes shouldn't even exist so it'd be somewhere in the gridsome.config.js.

Related to #12 but its fix (#20) only removes posts from the index.

On iPhone 6s on first tap PostCard does not load blog post

This is a very specific bug that only occurs when loading the site on an actual mobile device. When you tap the PostCard just once it actually will not load the Post's content until you tap it again. To be clear the PostCard will load the Post's content when tapped twice, but on the first tap it will not load. You should be able to see what I am talking about if you load the demo site on your phone and try tapping just once on one of the two PostCards.

Add Paging

When I dump my 100 markdown files into this starter, every one of them is shown on the home page. Ideally, there needs to be some paging added.

Post published prop not working

Even if I set published: false in my .md file, the post continues to appear on my blog.

Cannot get field 'tags' from type 'Post'. Field does not exist.

I recently upgraded my gridsome version to Gridsome v0.7.2.

Dependencies: Relating to mark down generation
"@gridsome/source-filesystem": "^0.3.0",
"@gridsome/transformer-remark": "^0.2.0",
"@gridsome/remark-prismjs": "^0.0.4",

Now when I try to run

gridsome develop

gridsome build

I get the following output.

Initializing plugins...
Tag > Failed to add node: Duplicate key for property id: Flutter
Tag > Failed to add node: Duplicate key for property id: Dependency Injection
Tag > Failed to add node: Duplicate key for property id: Provider
Load sources - 0.19s
Error: Cannot get field 'tags' from type 'Post'. Field does not exist.
    at ObjectTypeComposer.getField (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\graphql-compose\lib\ObjectTypeComposer.js:167:13)
    at ObjectTypeComposer.isFieldPlural (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\graphql-compose\lib\ObjectTypeComposer.js:365:23)
    at mapValues (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\gridsome\lib\graphql\nodes\index.js:260:25)
    at D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\lodash\lodash.js:13401:38
    at D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\lodash\lodash.js:4905:15
    at baseForOwn (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\lodash\lodash.js:2990:24)
    at mapValues (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\lodash\lodash.js:13400:7)
    at createReferenceFields (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\gridsome\lib\graphql\nodes\index.js:257:16)
    at createNodesSchema (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\gridsome\lib\graphql\nodes\index.js:30:5)
    at createSchema (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\gridsome\lib\graphql\createSchema.js:59:3)
    at Schema.buildSchema (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\gridsome\lib\app\Schema.js:28:28)
    at Plugins.createSchema (D:\Code\Clients\MdkStudio\filledstacks\filledstack-webapp\website\node_modules\gridsome\lib\app\Plugins.js:93:22)

Here is my gridsome.config.js:

module.exports = {
  siteName: "FilledStacks",
  siteDescription: "Flutter and Mobile development tutorials and guides",
  siteUrl: "https://www.filledstacks.com",
  plugins: [
   ...
    {
      // Create posts from markdown files
      use: "@gridsome/source-filesystem",
      options: {
        typeName: "Post",
        path: "content/posts/*.md",
        route: "post/:slug",
        refs: {
          // Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
          tags: {
            typeName: "Tag",
            route: "/tag/:id",
            create: true
          }
        }
      }
    },
    ...
    }
  ],

  transformers: {
    //Add markdown support to all file-system sources
    remark: {
      externalLinksTarget: "_blank",
      externalLinksRel: ["nofollow", "noopener", "noreferrer"],
      anchorClassName: "icon icon-link",
      autolinkHeadings: true,
      plugins: ["@gridsome/remark-prismjs"]
    }
  }
};

And in all of my markdown files I have tags in the frontmatter.

---
title: Flutter Architecture - ScopedModel implementation Guide
date: 2019-04-21
published: true
cover_image: ../images/007/007.jpg
tags: ["Flutter","Architecture", "ScopedModel"]
videoLink: https://www.youtube.com/embed/JsjDLHxGz4M
canonical_url: true
description: "A clear and direct guide to writing and maintaining a production ready application in Flutter using the ScopedModel architecture."
---

Is there anything that I need to change after the update that I might have missed. I went from 0.5.8 -> 0.7.2 and attempted to add the gridsome/vue-remark plugin as well.

Test issue

Testing bot

Question: How do i show full posts instead of summaries in the homepage?

Hi, how are you? First i would like to thank you very much for this theme.
I would like to turn it into a microblog and one step at this is to show full posts instead of summary plus link. Kindly help me. I am coming from hugo and jekyll where there are things like {{ .Content }} or {{ .Summary }}. I don't know much about vue or gridsome and this is the first theme i am working on.

Missing pages in GraphQL

Description

I keep adding markdown in the content folder. For some reason the data (no of rows) is always incomplete. There are pages missing.

Gridsome omits a markdownfile

which has a bad image path.
where images have a capitalized extension
sometimes for no reason even though these posts were verified earlier.

Steps to reproduce

I used the Gridsome starter site sample and modified to sort by date / desc.

{
posts: allPost(sortBy: "date" order: DESC ) {
edges {
node {
id
title
path
tags {
id
title
path
}
date (format: "D. MMMM YYYY")
timeToRead
description
coverImage (width: 770, height: 380, blur: 10)
...on Post {
id
title
path
}
}
}
}
}
Expected result

What should happen?
Actual result

What happened.
Environment

Libs:

gridsome version: X.Y.Z
@gridsome/cli version: X.Y.Z

Browser:

For Tooling issues:

Node version: XX
Platform:

Others:
Ubuntu..

Can'n installl dependencies

Help me,i can't install dependencies :(

gridsome / gridsome-starter-blog Goto Github PK

gridsome-starter-blog's Introduction

Gridsome

Build super fast, modern websites with Vue.js

Enjoy a modern development stack

Connect to any CMS or data source

PWA Offline-first architecture

Get perfect page speed scores

Build future ready websites

Ready for global domination

Quick start

1. Install Gridsome CLI tool

2. Create a Gridsome project

3. Next steps

Learn more

How to Contribute

Code of Conduct

License

Roadmap for v1.0

gridsome-starter-blog's People

Contributors

Stargazers

Watchers

Forkers

gridsome-starter-blog's Issues

Description

Steps to reproduce

Expected

Actual

Steps to reproduce

Description

Steps to reproduce

Expected result

Actual result

Environment

Code

Description

Recommend Projects

Recommend Topics

Recommend Org

Jobs