Seem to be having quite major layout issues on this page. Tested it on Chrome and Firefox on Windows with the same outcome.

I am looking for the info which appears to be missing from the bottom portion of this doc -

https://github.com/gridsome/gridsome.org/blob/master/docs/fetching-data.md

Would appreciate if someone could knock out a quick writeup!

@ilicmarko commented on Sun Nov 10 2019

Not sure where I should post this but its related to the Gridsome docs site.

The headings on the dock have a huge padding and a negative margin. This is preventing some text from being copied as you can't select it.

Here is an image from the start page:

I know this is probably a hack to offset the navigation when a user has an anchor.

I guess the easiest fix is to add:

position: relative;
z-index: 1;

@RomainLanz commented on Thu Nov 14 2019

Hey @ilicmarko! 👋

In case you want to create a PR here's the website repository.

Plugins seem to be automatically pulled into the plugin listing if they have gridsome-plugin keyword in package.json, but I found at least 1 plugin that isn't functional in the listing:
https://gridsome.org/plugins/@vroger/transformer-img

Is there some way to remove plugins from the list that aren't useful?
There should also be a way for devs to request being listed again, after they've made changes to their plugin.

On this plugin page https://gridsome.org/plugins/gridsome-plugin-rss you can see that the content is empty.

This is due to the fact that Algolia return an empty readme key.

You can see it close to the bottom of this screenshot:

The current version of the Tailwind section seems to be outdated.

The author of the gridsome-plugin-tailwindcss recommends not using the plugin anymore and instead using the method mentioned in their blog post instead.

Hi, I'm Yuuki from Japan.

In Japan, lots of developer is interested in Gridsome because of population of developers using Vue.js and increasing interest in JAM stack.
But Gridsome.org donesn't have Japanese version.

Would you mind if I translate this repo intoJapanese?

In the Quick Start of the doc, Edit this page on Github external link is broken. It takes you to a 404 page.

Wrong link - https://github.com/gridsome/gridsome.org/tree/master/docs.md
Correct link - https://github.com/gridsome/gridsome.org/tree/master/docs/README.md

I encountered this error during running newly fetch projects.
OS: Ubuntu 18.04

I discovered a rendering problem at this page:

https://gridsome.org/starters/gridsome-word-press-and-bootstrap-starter/

I use a very recent firefox with the usual ad block plugins.

Here 😕 !!

I'm trying to figure out the docs for specifying the icon (favicon) where I have separate files for each individual resolution (icon-32.png, icon-96.png, etc.). The docs at https://gridsome.org/docs/config/#icon show a property "precomposed" which isn't defined anywhere.

How do I specify the individual files without Gridsome resizing my images? For example, I want to specify a file for size 16, a different file for size 32, etc., but the examples aren't enough to help me figure this out.

I noticed that the contributors.yaml file has a field for twitter handles, but it doesn't look like they're being displayed on contributor profiles.

Is this intentional? If not I'll submit a quick PR for this.

For the life of me I can't figure out why a site I deploy to Netlify works fine and when I deploy using either Amplify or Up + Cloudformation the site breaks. It appears to be some sort of pathing problem. Is there something I need to add to Gridsome.config.js to make this thing work?

Hey! Not sure if anyone has noticed, but the post date on the blog article doesn't seem to reflect what's in the FrontMatter or the filename of the markdown file, but just shows the current date instead?

I'd like to know how to query images from my markdown files frontmatter using GraphQL but in the case when the image is being used as a background image not as "g-image". I'd like to have my markdown files (blog post) cover image to have the post title overlaid on the cover image so I need to use a background image.

Any insight would be appreciated

The README section for all starters is currently not displaying instead it returns a 404 page.

Hi,

would it be possible to add a RSS-feed for the blog posts? (https://gridsome.org/blog/)

A plugin search yields two options:

• https://gridsome.org/plugins/gridsome-plugin-rss (seems a bit more active)
• https://gridsome.org/plugins/gridsome-plugin-feed

Are you willing to accept a PR which would implement this feature ?
Do you have any guidance regarding the implementation ?

thanks

Fun fact: I just read this comment from @tomtev gridsome/gridsome#147 (comment)

Great plugin @darthmeme blushtada It’s live on gridsome.org. I will close this now

and I thought that it meant that the rss feed was integrated inside gridsome, but I think it actually means that the plugin is listed there: https://gridsome.org/plugins/gridsome-plugin-rss

Currently, this is the only information in readme.md:

This is the Git repository for gridsome.org. Feel free to contribute 🥳

I thought it may be useful to add these sections from the from the contribution page:

• Contributing to the docs
• Contributing to the blog
• Submit a Starter

This may make it more clear for those who want to contribute. I'll be happy to create a pull request for this

Function 'addMetadata' is undefined in 'store' variable. Only functions defined for 'store' are 'createUniqueId' and 'createReference'. Discovered trying to set a global metadata property with the value of a page ID.

Hi @gridsome/all, @tomtev 👋🏻,
I think the preview adds a nice feel to the review process and makes it faster and smoother 🚀.
So, I suggest activating the preview feature ( Netlify Bot with link for current update ) when publishing successfully ✔️.

Helper 🥑.

All the h1, h2 and h3 have a positive padding-top and a negative margin-top like:

Because of this negative margin-top the text above any title can't be selected (in the green area):

Solution

Can't we just do something like:

h1, h2, h3 {
  margin-top: 6rem;
}

If yes, I'm happy to open a PR.
Otherwise I'm curious about the usage of a negative margin/positive padding in this case?

Hi - I'd like to contribute a blog post "How to integrate ButterCMS with Gridsome" to https://gridsome.org/blog/

I wanted to confirm you're still accepting blog posts? Please let me know - thanks!

The "Add data from local files" section in official Fetching Data examples is empty. Somebody with a little experience in gridsome should be able to fill it quickly.

I've successfully fetched images for a component via a static-query.
Additionally, as documented (https://gridsome.org/docs/images#usage-via-graphql), I can resize and set the fit type inside the query using

image (width: 260, height: 70, fit:contain)

However, whereas I can set the background color for the 'contain' directly in g-image element, I can't seem to do that via the query ('Unknown argument "background" on field "image"'). It defaults to black, which gives me ugly borders on the image.

Am I missing something, or is this not (yet) implemented/possible?

FYI: I'm on Gridsome 0.6.6

Thanks!

I noticed this when I had my window snapped to half the screen width on my Windows machine

Description

If anyone use(usually most people) dark mode on web browser and visit to gridsome homepage and other pages then good luck .

Steps to reproduce

Install darkreader extension for example. (available for most browsers)
Google Chrome - https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh

Now visit to Gridsome pages

Expected result

Even incompatible but shouldn't worst like that. Atleast readable interface expected.

Actual result

Become too darker with replaced black, transparent colors and difficult read or see most contents

I follow all the steps but when i going to
http://localhost:8080/admin/
I get empty "404" page

In the docs you wrote:
https://gridsome.org/docs/guide-netlify-cms/#4-netlify-cms-setup

Create an admin directory inside the src

But Under Netlify CMS docs i find this ("static")
https://www.netlifycms.org/docs/add-to-your-site/

Also in this youtube tuturial also i find diff folder loaction/ files Structure :

https://www.youtube.com/watch?v=ryP1RMA7P9Y

Also here:
https://dev.to/mittalyashu/how-to-integrate-netlify-cms-with-gridsome-188a
https://github.com/mittalyashu/gridsome-starter-netlifycms/tree/master/static/admin

Related:
gridsome/gridsome#273

Can you please take a look of this? Thanks

I just tried to deploy a Gridsome project on AWS Amplify but got a build error. Does anyone have an example of how to edit the Build Settings in Amplify to make it work? Thanks

I'd love to see an example on how to search in Gridsome:

https://gridsome.org/docs/guide-search/
https://github.com/gridsome/gridsome.org/blob/master/docs/guide-search.md

Specifically, would it be possible to have some kind of SSR? For SEO reasons, I'd really like the search results to be on the page when they are loaded. However, I want every other page on the site to be pre-rendered.

I really like Gridsome with link prefetching and the optimized images, but is something like SSR for searches make Nuxt a better fit?

Hello! Thank you for such a great work on GridSome.
I've seen your https://gridsome.org site and it's so beautiful!
I would want to use it for my web site / landing page / documentation.

Could you please add LICENSE to your project?
Under want conditions can I use this site as template?
And is it possible to use for commercial (potentially 😂) web site?

In the 'How It Works' section:

This wording is a bit confusing, describing static site generation as server-side rendering at build-time. Usually, 'server-side' implies the existence of a server. I think that's why this combination of words are kind of confusing when there's no prototypical server in the equation. Are we looking at a developer workstation or a build server as the 'server-side' of things?

You can see that this wording leads to a bit of confusion and back-and-forth in this thread below:
gridsome/gridsome#193

I think optimizing for clarity is always a good goal when writing. I wouldn't create an issue just to nitpick.

So I am using a config,yml where I store social links which I want to fetch in a component.

<page-query>
query {
		allConfig {
      edges {
        node {
          social {
            twitter
            reddit
            stackoverflow
            discord
            github
          }
        }
      }
    }
}
</page-query>```
this returns the config in explorer but when I try to use it in the app
{{ $page.allConfig.edges[0].node.social.twitter }}
it doesn't work.

Moved from: gridsome/gridsome#799

Description

Javascript error on starters 404 page.
this.$page is null"
and
t.$page is null

Steps to reproduce

https://gridsome.org/starters/fsdqs, check the console

When visited https://gridsome.org/docs/faq
I get this error on my console tab.

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://gridsome.org/assets/js/app.f8d10897.js:7:40661)
    at d (https://gridsome.org/assets/js/app.f8d10897.js:7:53233)
    at l (https://gridsome.org/assets/js/app.f8d10897.js:7:52970)
    at h (https://gridsome.org/assets/js/app.f8d10897.js:7:53316)
    at A (https://gridsome.org/assets/js/app.f8d10897.js:7:56658)
    at a.__patch__ (https://gridsome.org/assets/js/app.f8d10897.js:7:57016)
    at a.t._update (https://gridsome.org/assets/js/app.f8d10897.js:7:34372)
    at a.r (https://gridsome.org/assets/js/app.f8d10897.js:7:64308)
    at dn.get (https://gridsome.org/assets/js/app.f8d10897.js:7:26630)
    at new dn (https://gridsome.org/assets/js/app.f8d10897.js:7:26548)

Above error doesn't affect at all for this FAQ page alone.

However, if I visit another link (side menu links or "Dev tools" at the bottom of the page) from this page, I get another error message on the console.

app.f8d10897.js:7 TypeError: n.setAttribute is not a function
    at Array.mr (app.f8d10897.js:7)
    at j (app.f8d10897.js:7)
    at app.f8d10897.js:7
    at j (app.f8d10897.js:7)
    at app.f8d10897.js:7
    at j (app.f8d10897.js:7)
    at app.f8d10897.js:7
    at j (app.f8d10897.js:7)
    at app.f8d10897.js:7
    at j (app.f8d10897.js:7)

From here, routing doesn't work.
It doesn't load the content but only URLs change.

This's a suggestion for enhance gridsome.org sidebar. It'll definitely helpful for others who want to be Gridsome Users

Sidebar

Current
No menu levels. just single topic list under each category.

Expect
Multiple menu levels(groups)/nested children
https://vuepress.vuejs.org/default-theme-config/#sidebar
vuejs/vuepress#1497
https://github.com/timaschew/vuepress-nested-sidebar-demo (source)
https://hungry-yonath-bfd0a1.netlify.com

(Keep exist gridsome sidebar ui and effects. just like it and better than vuepress)

If no consideration for extend default gridsome documentation as mentioned above, atleast prefer request for add proper guide, tutorial for necessary users to follow.

I have just started to explore this project and it seems really good, thank you for that.

When you right-click on links in docs it change the route and goes to that page.

Step to reproduce:

• Go to how it works
• Right-click or Ctrl+click on Source plugins link

This occurs specially on this plugin: https://gridsome.org/plugins/gridsome-source-firestore
At the viewport sizes 1036-851px.

Both on Firefox:
"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:67.0) Gecko/20100101 Firefox/67.0"

And Chrome:
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"

I attempted to create a reduced test case but all I could determine was that the first two tables are causing the issue. Removing them from the DOM resolves the issue.

Just found out that the text animations in the homepage of the website causes flickering in Firefox 61.0.1

https://gridsome.org/

Couldn't figure out why my fan was crazy while I was just thinking and looking at terminal. The gruesome tab was the highest in Activity Monitor.

Tabbing to another tab caused an immediate reduction in load and the fan calmed down.

I don't know if this is also a bug in gridsome proper but 100% reproducible across reboots.

10.14.3

Hi,

I would like to make a suggestion concerning the page transitions docs for people that want to keep the header during page transitions.
There is a way to do this by overriding the default router view rendering using the Gridsome API.

gridsome.client.js:

import MyHeader from '@/components/MyHeader.vue'

export default function (Vue, options, context) {
  Vue.component('my-header', MyHeader)

  context.appOptions.render = h => {
    return h('div', {}, [
      h('my-header'),
      h('transition', { attrs: { name: 'page-fade', mode: 'out-in' } }, [
        h('router-view', { attrs: { id: 'app' } })
      ])
    ])
  }
}

This way you can override the default rendering here and use a simple page transition while keeping the Header on the page.

@/components/MyHeader.vue:

<template>
  <ClientOnly>
    <header />
  </ClientOnly>
</template>

<style>
.page-fade-enter-active {
  transition: opacity 0.5s;
}

.page-fade-enter {
  opacity: 0;
}
</style>

Please note that this means this header component will be present regardless of the layout on all pages.

Since this approach may be fragile if the underlying render changes, I am not sure if this should be documented in any capacity, if so, I'd be happy to submit a corresponding PR.

There's a mismatch in the docs between the text and code sample. The text suggests that libraries need imported and requiring it while the code only imports it. Which is correct?

https://gridsome.org/docs/assets-scripts#using-an-external-library

If you want to use a external javascript library inside your component you can do so by importing the component and requiring it once vue components are mounted.

...

import moment from 'moment';

When replicating demo of the FontAwesome SVG documentation, this don't work and lead to an error

Error: Could not find one or more icon(s) Object { prefix: "fas", iconName: "twitter" } Object { }

Test

gridsome.client.js like in doc

added component 'test' :

<template>
  <div>
    <font-awesome icon="twitter"/>
  </div>
</template>

<script>
export default {
  name: 'test'
}
</script>

Edited page Index.vue :

<template>
  <Layout>
...
    <test></test>

  </Layout>
</template>

...

Did we need to import icon again in each component ?

Hey seems like this should be straightforward but I can't seem to get stylesheets added to the page from the SRC dir. It only works with files in the public dir. Am I missing something, or is this the only way it works?

This does not work to add stylesheets to the head (in any computation, i've tried using ./ or ~/ or ~@, so it's not something like a bad path:

metaInfo: {
title: 'About us',
meta: [
{ name: 'author', content: 'John Doe' }
],
link: [
{ rel: 'stylesheet', href: '/assets/css/catalogue.css' },
]
// etc...
}

The solutions below work at the page level:

<style src="~/assets/css/catalogue.css"></style>

<style scoped>
  @import '~@/assets/css/catalogue.css';
...
</style>

Similar to #104

I'd like to contribute a Serverless blog example to https://github.com/gridsome/gridsome.org/blob/master/docs/guide-serverless-blog.md that shows developers how to quickly add marketing-friendly CMS capability to their Gridsome project.

It would use the ButterCMS API (free for personal developer use) for the blog backend.

Please let me know your thoughts!

It's hard for people new to Gridsome to know which Starters are popular. Displaying their stars on GitHub would help to highlight the ones that are having the most interest.

I keep getting a cover_image error in my Post.vue and Index.vue. I'm running a default Netlify CMS template for Gridsome install. The only way i can get my site to publish is to remove cover_image (width: 759, height: 380, blur: 10) from the from both Index.vue and Post.vue pages.

I'm running @gridsome/cli v0.3.1 and gridsome v0.7.12

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

GraphQL request:71:18
70 |     content
71 |     cover_image (width: 900, blur: 40)
   |                  ^
72 |   }
    at Object.module.exports (/Users/Ter/wristtattoo-github/netlifycms-gridsome/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29:23)

Possible solutions i found here also doesn't work!
https://germano.dev/fix-netlify-cms-paths-on-gridsome/

Reproduction link
https://gridsome.org/

Steps to reproduce

1. Open https://gridsome.org/
2. Keep https://gridsome.org/ opened, in same browser window switch to different tab
3. Wait a while
4. Re-enter previously opened https://gridsome.org/ tab

What is expected ?
Animation will continue playing as before

What is actually happening?
Since the animation is using setInterval only:

• it keeps running even when tab is not active
• it causes weird behaviour when reentering - as if multiple animation iterations were stacked on top of each other... only for first iteration upon reentering

Additional comments?
Checked on Chrome.