kontent-ai / gatsby-starter Goto Github PK
View Code? Open in Web Editor NEWGatsby starter site with Kontent.ai
Home Page: https://gatsby-starter-kontent.netlify.com
License: MIT License
Gatsby starter site with Kontent.ai
Home Page: https://gatsby-starter-kontent.netlify.com
License: MIT License
Blocked: kontent-ai/gatsby-packages#19
Once we create our transformer plugin, we should demonstrate the use of link resolvers and rich text resolvers in the starter site.
Make use of the Summary element of the Blogpost reference content type to demonstrate the resolvers.
In Rich text elements, one can create non-reusable, typed chunks of content called components.
Use the "Component-only type", together with the "Component-using content type" types to demonstrate the usage of components.
Should you wish to create some more real-world content types for the starter, drop a comment to this issue to get edit permissions to the project in Kentico Cloud.
Gatsby's store is rebuilt upon bootstrap (npm run develop
, npm run deploy
). Find out:
After the project is bootstrapped, a content of package.json
file is usually modified. It is not necessary to have dependencies at the beginning of the file.
Order properties by the generate package.json file (using npm init
command) as following in one:
{
"name": "a",
"version": "1.0.0",
"description": "description",
"main": "index.js",
"scripts": {
"test": "testcommand"
},
"repository": {
"type": "git",
"url": "git repository"
},
"keywords": [
"keywor1",
"keyword2"
],
"author": "author",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.11"
},
"devDependencies": {
"babylon": "^6.18.0"
}
}
Kentico Cloud content items can be composed of other content items, so called modular content items. They can be put into modular content elements or into the rich text elements.
Bring support for modular content linking by adding new navigation properties to content item nodes. Make use of the ___NODE
convention to tell Gatsby that a field contains an ID of a linked node.
Some Gatsby starters utilize a nice icon that deploys the site to an arbitrary Netlify account.
We'd also like to employ Travis CI in our starter.
Investigate what it takes to use the "Deploy to netlify" icon, preferably with Travis.
The motivation is primarily to ensure the project is kept in line with the direction Gatsby is taking and to solve the drawbacks outlined in their documentation:
https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes/#gatsby-starters
The proposed solution is to convert to a theme, the documentation can be found here:
Hi,
Cloned the repo and npm installed in both the plugin directory and the main site (.cmd file didn't work on a Mac, obvs). I get the following error:
GraphQL Error Unknown field `system` on type `KenticoCloudItemProjectReference`
1 |
2 | query projectReferenceQuery($slugStep2: String!) {
3 | site {
4 | siteMetadata {
5 | title
6 | }
7 | }
8 | kenticoCloudItemProjectReference(fields: { slugStep1: { eq: $slugStep2 }}) {
> 9 | system {
| ^
10 | name
11 | }
12 | name___teaser_image__name {
13 | value
14 | }
15 | name___teaser_image__teaser_image {
16 | assets {
17 | url
18 | }
19 | }
I tried commenting out that specific part of the query, but it complains about many other missing fields.
Also curious why the source plugin isn't its own npm module? Is this just while you're building it? My recommendation would be to publish it as an alpha and use npm link
to work on it locally
To develop a Gatsby source plugin, it is necessary to have a sample app that tests the correct behavior of the plugin. Calling into Gatsby APIs cannot be tested via automated tests in Gatsby. One can test the plugin either as a "local plugin" that resides under the directory of a sample app, or pack the plugin into an NPM package upon each change (which is unacceptable for development). Find a way of separating the source plugin files out of the file system structure of the sample app.
Those who clone this repo can only guess what the content models and items in the KK project are.
Dump the entire content project into JSON files so that everyone can clone the project.
Blocked by #11 .
The current sample app serves just to the demoing purpose. The starter site may serve as a template for the gatsby new
command.
Convert the sample app into a starter site. Make provisions to use the starter site with the gatsby new
command.
While the tests/normalize.js test file tests whether content type nodes and content item nodes get properly created, it still doesn't test the decorateTypeNodesWithItemLinks and the decorateItemNodeWithLanguageVariantLink methods.
Blocked: kontent-ai/gatsby-packages#1
Kentico Cloud has two artifacts to support categorization of content: Taxonomy elements and Multiple choice elements. The difference is in the scope: While taxonomies are project-wide, multiple choice elements are content type-only.
We don't have any taxonomy elements in the sample Portfolio project yet.
If you're interested in implementing the story, drop a comment to this issue and you'll be given edit permissions to the project in Kentico Cloud. You'll be able to create a taxonomy of your choice and use it in a Taxonomy element in one of the content types. Then, you'll be able to implement the story in the starter.
Gatsby just released their v2. Keep up.
Make the starter work even after kontent-ai/gatsby-packages#10 is merged.
Use the elements
property of kenticoCloudItem
nodes.
Kentico Cloud has two artifacts to support categorization of content: Taxonomy elements and Multiple choice elements. The difference is in the scope: While taxonomies are project-wide, multiple choice elements are content type-only.
Currently, we have the Format table row in the speaking-engagement.js template that only displays the selected value(s).
Rework the UI of the Format row to showcase the advantage of the contentType
GraphQL property. That way, not only the selected values will be rendered.
In the definition of a content type, the multiple choice elements contain all possible values. On the other hand, in the content items in the Delivery response, these elements hold only values used in a given content item.
Do make use of the links between items and their types produced by the createContentItemNode method of our source plugin. Demonstrate the usage of those links to show which of the values have and haven't been selected in a given content item. For instance, render a list of disabled checkboxes and make some of them checked.
In Rich text elements, one can link to other content using hyperlinks.
Use links
property to resolve links or use the embedded SDK support for link resolution for showcasing how it is possible to resolve links.
The kontent-ai/gatsby-packages#9 PR deals with passing the configuration object onto the source plugin (the JS SDK respectively). It will be possible to use the Preview API and the secured Delivery API.
Describe how to employ the two APIs in a Gatsby site.
When generating a new project based on this starter - the warning is showed up:
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
Use yarn instead of npm and remove package-lock.json
Mind updating the Readme.md
.
The bootstrapped project is containing package,json
and also yarn.lock
file.
Currently, the source plugin fetches all KC content during the bootstrap process. In large content projects, the bootstrap may take too long. By storing the last update date, the plugin could fetch only content that was created and updated afterwards (delta). Find ways of implementing such story.
Note: There is currently no way of getting the collection of deleted/unpublished content off of the Delivery API. Only web hooks can serve this purpose. Find out if a simple web hook listener can be implemented in a Gatsby site.
One of the elements in Kentico Cloud content types is called Linked items (formerly "modular content"). It contains a list of pointers to other content items. These can be rendered as either hyperlinks or in full in the app.
Make use of the Related project references element in the Project reference content type to demonstrate the feature.
As advertised above, render the related references as either hyperlinks or as partially rendered. For instance, in the form of "[Name of the related reference] ([Started at] - [Finished at])".
Currently, this repo contains both the source plugin and a sample app. While this setup has advantages in initial phases of development, it is not sustainable in the long term.
Split the repo into two: a standalone source plugin and the sample app.
Why is this feature required? What problems does it solve?
An ideal solution of the above problems.
Add any other context, screenshots, or reference links about the feature request here.
As the source plugin now supports getting language variants of content items, the sample app should also be able to demonstrate this capability.
The starter is not visible on https://www.gatsbyjs.com/starters/ - keep the source data to our Sample project
Fullfil https://www.gatsbyjs.com/starters/submissions
Add any other context, screenshots, or reference links about the feature request here.
The project-reference.js and speaking-engagement.js templates display data of date & time content elements. They're currently formatted in the original ISO format.
Format the date & time information in a user-friendly way.
In Rich text elements, one can link to other content in multiple ways.
It would be great to have a showcase on the starter, how to resolve rich text editor.
Make use of the rich text resolvers of the future transformer plugin or the GraphQL _nodes
properties produced by the decorateItemNodeWithRichTextLinkedItemsLinks
method. Use them to display inline linked items in the Summary element of the Blogpost reference content type.
Content components are described in #28
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.