cossssmin / gridsome-starter-bleda Goto Github PK

View Code? Open in Web Editor NEW

187.0 6.0 48.0 1.54 MB

Gridsome blog starter, built with Tailwind CSS

Home Page: https://gridsome-starter-bleda.netlify.app

License: MIT License

JavaScript 38.08% CSS 4.01% Vue 57.92%

gridsome gridsome-starter jamstack markdown-blog static-blog static-site ssg tailwindcss vue

gridsome-starter-bleda's People

Contributors

Stargazers

Watchers

Forkers

lgs czmole joeelia mingderwang jaeyholic andrevandal vinutv lauragift21 hacknug chr1sw cuulee sergeyfilimonov tweetmarken niveshsaharan edwardhuahan udn wajuabolarin xhostcomweb ideas24h willyw2k clemmakesapps jksntn thebaronalex duanvnc aditgege kaanguru prashant1k99 justinyoo aliencube devkimchi perade syedpeer tosinibrahim96 eter5 ousszizou yoyteam kreo laymui chopcoder oleh0502 andrejrot1 youyua9710

gridsome-starter-bleda's Issues

Error on gridsome develop - `@apply` cannot be used with .transition-color

I got

 WAIT  Compiling...                                                                                                                                                                                                            1:25:31 PM



 ERROR  Failed to compile with 1 errors                                                                                                                                                                                        1:25:32 PM

 error  in ./src/assets/css/main.css?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(37:5) `@apply` cannot be used with .transition-color because .transition-color is included in multiple rulesets.

  35 | 
  36 |   a {
> 37 |     @apply text-blue-500 transition-color;
     |     ^
  38 | 
  39 |     &:hover {

Cover photo for post

Hiya!

How am I able to reference a local image for the cover photo in the frontmatter rather than an externally hosted image?

For example, I have my post in content/posts/example-post.md. I have a photo I'd like to set as the cover photo in content/posts/img/header.jpg. Setting the frontmatter as cover: './img/header.jpg' does not work even though it will work if I reference it like that in the markdown post itself.

Thanks in advance!

How would I add alert?

Hello! Thank you for such a great starter.

I have a small problem - I've seen that <alert> component. How I might use it inside blog post directly? I would want to add alerts to some posts like Note: this tutorial was tested on Ubuntu 18.04 LTS. Is it possible?

page-query.js error when the folder "dummy" was removed

Hi, I am new to Gridsome and thank you for developing such a nice starter.
A interesting errer occurs when I removed the folder "dummy".
The error log is here:

# lynn @ lynn-archlinux in ~/Blog [0:05:45] C:130
$ gridsome develop
Gridsome v0.7.15

Initializing plugins...
Load sources - 0.04s
Create GraphQL schema - 0.09s
 ERROR  Failed to compile with 4 errors                                                                                 12:06:02 AM

 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 "description" on type "Post".

GraphQL request:80:9
79 |         excerpt
80 |         description
   |         ^
81 |         path
    at Object.module.exports (/home/lynn/Blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29: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/Tag.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 "description" on type "Post".

GraphQL request:98:13
97 |             excerpt
98 |             description
   |             ^
99 |             timeToRead
    at Object.module.exports (/home/lynn/Blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29:23)

 @ ./src/templates/Tag.vue?vue&type=custom&index=0&blockType=page-query 1:0-329 1:345-348 1:350-676 1:350-676
 @ ./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/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 "slug" on type "Post".

GraphQL request:143:5
142 |     path
143 |     slug
    |     ^
144 |     datetime: date (format: "YYYY-MM-DD HH:mm:ss")
    at Object.module.exports (/home/lynn/Blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29: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.js

 error  in ./src/templates/Author.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 "title" on type "Author".

GraphQL request:80:5
79 |     id
80 |     title
   |     ^
81 |     path
    at Object.module.exports (/home/lynn/Blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29:23)

 @ ./src/templates/Author.vue?vue&type=custom&index=0&blockType=page-query 1:0-332 1:348-351 1:353-682 1:353-682
 @ ./src/templates/Author.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



 WAIT  Compiling...                                                                                                     12:06:02 AM



 ERROR  Failed to compile with 4 errors                                                                                 12:06:03 AM

 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 "description" on type "Post".

GraphQL request:80:9
79 |         excerpt
80 |         description
   |         ^
81 |         path
    at Object.module.exports (/home/lynn/Blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29: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/Tag.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 "description" on type "Post".

GraphQL request:98:13
97 |             excerpt
98 |             description
   |             ^
99 |             timeToRead
    at Object.module.exports (/home/lynn/Blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29:23)

 @ ./src/templates/Tag.vue?vue&type=custom&index=0&blockType=page-query 1:0-329 1:345-348 1:350-676 1:350-676
 @ ./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/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 "slug" on type "Post".

GraphQL request:143:5
142 |     path
143 |     slug
    |     ^
144 |     datetime: date (format: "YYYY-MM-DD HH:mm:ss")
    at Object.module.exports (/home/lynn/Blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29: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.js

 error  in ./src/templates/Author.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 "title" on type "Author".

GraphQL request:80:5
79 |     id
80 |     title
   |     ^
81 |     path
    at Object.module.exports (/home/lynn/Blog/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29:23)

 @ ./src/templates/Author.vue?vue&type=custom&index=0&blockType=page-query 1:0-332 1:348-351 1:353-682 1:353-682
 @ ./src/templates/Author.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

This is the the tree of the fold "content:

content
└── posts
    └── Life
        └── 2020-06-08-try-gridsome.md

And what is in this post is:

---
title: "try-gridsome"
date: 2020-06-08 22:16:52
tags:
    - Life
fullscreen: true
---
Hello World

When I move the "dummy" back, these errors are all gone :)
Thanks in advance.

Gridsome serve results with 404

Hi, thanks for a great plugin.

Out of the box, after creating new project, gridsome serve shows the following content:

{"code":404,"message":"Could not find /"}

WLS 1, node 10.8

Any potential reason you can think of?

gridsome build error but developer works with g-image in rendering

I updated the PostItem.vue image html tag with g-image by following the gridsome documentation. when i went to publish my site on netlify it failed to build. i thought it was tag or author page errors. but when i changed g-image tag to image tag it woked perfectly. is it a gridsome bug? by the way, thanks for creating this demo app. it really helped to learn more about gridsome.

Error on gridsome develop - @apply cannot be used with '-mx-6'


 error  in ./src/assets/css/main.css?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(46:5) `@apply` cannot be used with `.-mx-6` because `.-mx-6` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.-mx-6` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  44 |   pre.shiki {
  45 |     @apply bg-gray-codeblock !important;
> 46 |     @apply border border-gray-300 -mx-6 p-6 mb-4 text-sm font-mono leading-code overflow-x-auto scrolling-touch;
     |     ^
  47 |   }

og:title, og:site_name, og:description are missing
fallback for og:image and twitter:image is referencing a relative path (blog index, tag/author archives)

orange alert difference between develop and build

on this page, the alert component looks different between build:

and develop:

any idea what happened there?

forestry conf files

pls consider adding forestry config files...thats helps writing blog posts easily

Question: how to add postcss-preset-env?

Thank you for this great starter! But how to add postcss-preset-env plugin in this config? Just adding require('postcss-preset-env') doesn't work

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.