Cockpit CMS source

[tanc]

A first pass at a Cockpit source. To resolve:

• Readme file
• Fix repeater fields
• References

Repeater fields are currently the main issue. In Cockpit there is a 'repeater' field type which allows the admin to have a single repeating field which can be of any given types. So you could have a 'content section' field which allows an editor add one or multiple instances of the field in their content. When the editor adds an instance they can choose from a selection of different fields (selection configured by admin).

Using this source, at the moment if you have a repeater field made up of two (or more) different field types, only the first field type is added in Gridsome.

I haven't tested reference fields at all.

[tanc]

@hjvedvik have modified to allow the JSON field on any top level repeater field. Nested repeater fields inside set fields will not get picked up but I think this is a slightly unusual situation and one we can tackle later. A nested repeater with only one field type allowed is fine anyway and Gridsome will automatically handle that.

[tanc]

Have fixed repeater fields, added/processed reference fields and added a README.

This is now ready for review and merging.

[hjvedvik]

Just tested the plugin and seems like it works pretty good. Good job :)

The fetch method has a limit at 1000 items and it fetches the first page. Maybe the method should also check if there are more items to fetch?

[tanc]

@hjvedvik thanks for the review 👍 I've added paged fetches with a config option to specify the limit (default is 1000).

[tanc]

Do you know how to fix the lint error? Is it a case of adding Gridsome as a dependency to package.json

[hjvedvik]

You can try to add "gridsome": "0.x" as a peerDependency.

[tanc]

ok, now its ready to merge!

[tanc]

Slightly frustrated by peer dependencies as yarn install now reports:

@gridsome/source-cockpit@0.0.0" has unmet peer dependency "camelcase@5.x.x"

I guess this is because camelcase is a dependency of the gridsome package rather than the top level. So I've added camelcase as a dependency of this plugin.

[tanc]

I've just added localized field support so translated fields will be pulled into GraphQL on the same node as the originals.

[hjvedvik]

Great work @tanc :) Do you think the localization will work with how Gridsome is now, or would it require changes in core?

[mittalyashu]

Why, there's a pipe | too far from the text.

[tanc]

Just a typo, can be removed

[jasonday]

Is there a timeline for when this will be merged?

[smokeyfro]

Hi team :) I've been testing this extensively over the past couple days and it's working great. The only catch that is holding me back from pushing the update is the fact the source is not merged or available on NPM, so Netlify has no way of installing it at build. Is there anything I can help with to get this merged into the core? After testing all the different headless cms that work with Gridsome, Cockpit is by far the one I'm most excited about. Keep up the great work!

[u12206050]

Might be better as its own discussion but, Isn't it better to have source plugins in their own repos than being so tightly dependent on the core?

[smokeyfro]

Might be better as its own discussion but, Isn't it better to have source plugins in their own repos than being so tightly dependent on the core?

Yeah, I'd think as a separate NPM module would make the most sense. That way development can continue independently from the main project.

Either way I'm super duper chuffed it's coming :D

[tanc]

@hjvedvik I realise I didn't answer your question about the localization working without changes in core... yes, it will work without changes in core :-) You can see it (kind of) working on this work in progress site: https://rockriders.tanc.me/en/mtb
When flicking between Italian and English the menu items change and the page contents changes. It's very rough and ready at the moment. It relies on the pages API to provide variants for languages, which means the same component is used but on a different language-prefixed path:

api.createPages(async ({ graphql, createPage }) => {
  const { data } = await graphql(`{
    allCockpitPage {
      edges {
        node {
          id
          path
        }
      }
    }
  }`)

  data.allCockpitPage.edges.forEach(({ node }) => {
    for (const code of languages) {
      createPage({
        path: `/${code}${node.path}`,
        component: './src/templates/CockpitPage.vue',
        context: {
          id: node.id,
          lang: code
        }
      })
    }
  })

Any thoughts on whether you want to merge this plugin with core or whether I should spin up a separate repository and publish it? There is a bit of interest in it now so would be good to have a way for people to use it more easily.

[hjvedvik]

@tanc We plan to have localized fields in the schema when we start working on the i18n feature. Localized fields will be an object with each property matching a language code. And the GraphQL resolver will automatically pick the value from the current language while executing the query. I'm not sure when we will implement it yet. So we can publish this plugin as it is now and do a breaking change to support localized fields when that time comes. Or what do you think?

@u12206050 Yes, I agree. We might move source plugins to their own repositories sometime soon.

[smokeyfro]

Hi Tanc,

I'm trying to show related items from another collection using a collection link field type in Cockpit and belongsTo in my query, but struggling to get it to work. @hjvedvik tried to assist, but it seems like the collections link is not being handled correctly by the plugin. Is there anything on my end I need to do to get the collections linking properly?

[tanc]

Sorry I'm away on holiday for a couple of weeks so won't be able to help for a while

[a-kriya]

Does not look like @tanc has had any public activity on GH for the last couple months, and this PR looks like it's been in a fairly good state since March. Can it be considered to publish the work here for now, and resolve the issue with collection link field type mentioned by @smokeyfro above in a later patch? Any other alternative to make this work easier to consume?

[Tummerhore]

Any news on this, @tanc, @hjvedvik? I would absolutely love to see this as a plugin.

[tanc]

I've been on sabbatical and not really engaged with tech for a while (bliss!) but I'm needing to build some sites so I'm back. I've spun this off into it's own repo and published it on NPM: https://www.npmjs.com/package/@tanc00/gridsome-source-cockpit

I'll close this pull request and we can continue fixing and developing here: https://github.com/tanc/gridsome-cockpit-source