Merge pull request #126 from IvanKiral/kontent-plugin

Kontent plugin

Author: aghreed

.env.EXAMPLE

@@ -0,0 +1 @@
+KONTENT_PROJECT_ID=''

.gitignore

@@ -0,0 +1,7 @@
+.env*
+!.env.EXAMPLE
+node_modules
+.cache
+public
+dist
+.DS_Store

.prettierignore

@@ -0,0 +1,9 @@
+.cache
+public
+static
+node_modules
+.vscode
+.idea
+post-types.json
+taxonomies.json
+acf-field-groups.json

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "semi": false
+}

LICENSE

@@ -0,0 +1,14 @@
+The BSD Zero Clause License (0BSD)
+
+Copyright (c) 2022 Gatsby Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,311 @@
+<a href="https://www.gatsbyjs.com">
+  <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
+</a>
+
+# Gatsby Starter Kontent.ai Homepage
+
+Create a homepage using Gatsby and Kontent.ai. This starter demonstrates how to use Kontent.ai to build a homepage and can be customized to match your own visual branding.
+
+[View the Demo](https://gatsbykontentaihomepage.gatsbyjs.io/)
+
+**Note:**
+This version of the Kontent.ai homepage starter is written in TypeScript. If you want to use Kontent.ai but JavaScript is more your style, there is also a JavaScript version maintained on [GitHub](https://github.com/gatsbyjs/gatsby-starter-kontent-ai-homepage).
+
+## Quick start
+
+To use this starter, you will need a new or existing [Kontent.ai project][] and then you will be asked for your [project id][].
+
+[kontent.ai project]: https://kontent.ai/learn/tutorials/manage-kontent/projects/manage-projects/#a-create-projects
+[project id]: https://kontent.ai/learn/tutorials/develop-apps/get-content/get-content-items/#a-1-find-your-project-id
+
+1. **Create a Gatsby site**
+
+   Use the Gatsby CLI to get started locally:
+
+   ```sh repo
+   npx gatsby new my-homepage https://github.com/gatsbyjs/gatsby-starter-kontent-ai-homepage-ts
+   ```
+
+1. **Create an empty [Kontent.ai project](https://kontent.ai/learn/tutorials/manage-kontent/projects/manage-projects/#a-create-projects)**
+
+1. **Run the Kontent.ai setup script.**
+
+   > If you've decided to use a non-empty project, keep in mind that there might occur errors during import. Therefore it is better to use an empty project. The script provides you with an option to clear your project before importing.
+
+   From your site's root directory, run:
+
+   ```sh
+   cd my-homepage
+   yarn setup
+   ```
+
+   This will run a script to populate your Kontent.ai project with demo content.
+
+1. **Start developing**
+
+   In your site directory, start the development server:
+
+   ```sh
+   yarn start
+   ```
+
+   Your site should now be running at <http://localhost:8000>
+
+1. **Open the source code and start editing**
+
+## Deploy your site
+
+Once your content is available in Kontent.ai, deploy your site to [Gatsby Cloud](https://gatsbyjs.com/products/cloud):
+
+1. Push your local site to a new repo in either GitHub, GitLab, or Bitbucket
+1. Log into your [Gatsby Cloud Dashboard][] and click on **Add a site**
+1. Use the **Import from a Git repository** option to find your site
+1. Add the environment variables from your `.env.production` file to Gatsby Cloud during setup
+1. Click **Build site** and your site should start building
+
+For a more detailed walkthrough, see the tutorial on how to [build your site with Gatsby Cloud][tutorial].
+
+[gatsby cloud dashboard]: https://gatsbyjs.com/dashboard
+[tutorial]: https://www.gatsbyjs.com/docs/tutorial/part-1/#build-your-site-with-gatsby-cloud
+
+### Deploy without using the CLI
+
+Alternatively, you can deploy this starter directly to Gatsby Cloud.
+Note that you will need to set up your content in Kontent.ai manually.
+
+[![Deploy to Gatsby](https://www.gatsbyjs.com/deploynow.png "Deploy to Gatsby")](test)
+
+## Setting up Gatsby Cloud Preview
+
+To use Gatsby Cloud Preview with this site, follow the instructions in the
+[Connecting to Kontent.ai](https://support.gatsbyjs.com/hc/en-us/articles/360052324654-Connecting-to-Kontent).
+
+## What's included?
+
+```sh
+├── README.md
+├── gatsby-config.js
+├── gatsby-node.js
+├── src
+│   ├── components
+│   ├── pages
+│   ├── colors.css.ts
+│   ├── styles.css.ts
+│   └── theme.css.ts
+└── .env.EXAMPLE
+```
+
+1. **`gatsby-config.js`**: [Gatsby config][] file that includes plugins required for this starter.
+1. **`gatsby-node.js`**: [Gatsby Node][] config file that creates an abstract data model for the homepage content.
+1. **`src/`**: The source directory for the starter, including pages, components, and [Vanilla Extract][] files for styling.
+
+[gatsby config]: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/
+[gatsby node]: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/
+[vanilla extract]: https://vanilla-extract.style/
+
+## How to
+
+### Update the color theme
+
+To update the colors used in this starter, edit the `src/colors.css.ts` file.
+
+```.ts
+// src/colors.css.ts
+export const colors = {
+  background: "#41d9c5",
+  text: "#231f20",
+  primary: "#231f20",
+  muted: "#2aceb9",
+  active: "#001d3d",
+  black: "#000",
+}
+
+```
+
+If you'd like to add additional colors, add additional keys to this object.
+This file is imported into `src/theme.css.ts` and creates CSS custom properties, that can be imported and used in other `.css.ts` files.
+
+The UI components file `src/components/ui.tsx` imports styles from `src/components/ui.css.ts`. You can see how the theme and color values are being used in this file.
+
+### Add your logo
+
+![Logo](./docs/images/logo.png)
+
+Replace the `src/components/brand-logo.tsx` component with your own brand logo.
+If you have an SVG version, it can be rendered inline as a React component, following the example in this file. Note that SVG attributes will need to be camel cased for JSX.
+
+Using an inline SVG for the logo allows it to pick up the colors used in CSS, which is how the logo colors are inverted for the mobile menu.
+
+If you prefer to use an image, use the [`StaticImage`](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#staticimage) component from `gatsby-plugin-image` in place of the SVG in this file.
+
+### Customize headings, buttons, and other styles
+
+![Headings & Buttons](./docs/images/headings-buttons.png)
+
+To further customize the look and feel of the homepage, edit the UI components in `src/components/ui.tsx` and styles in `src/components/ui.css.ts`.
+
+### Customize section components
+
+To customize any of the sections of the homepage, edit the relevant component in `src/components`.
+Most of the styles for these components are handled with shared UI components in `src/components/ui.tsx`.
+
+### Create custom section components
+
+To create a new type of section in your homepage, you'll want to create a new section component, using the existing components as an example.
+For this example, we'll create a new "Banner" component.
+
+1. First, update your content type in Kontent.ai project
+
+   1. In `Content model` section create a new content type and name it "Homepage Banner."
+
+      <img src="./images/step-1.png" alt="Step 1" width="700" />
+
+   1. Add two fields to your freshly created content type: `Heading` and `Text` – these can be _Text_ types.
+
+      <img src="./images/step-2.png" alt="Step 2" width="700" />
+
+   1. Find the content type for _Homepage_ in Kontent.ai and adjust the settings for the _Content_ element. Click on settings icon to show configuration for the given element. Under _Allowed content types_, ensure that the _Homepage Banner_ type is checked to make it available as a content type on the Homepage.
+
+      <img src="./images/step-3.png" alt="Step 3" width="700" />
+      <img src="./images/step-4.png" alt="Step 4" width="700" />
+
+   1. Navigate to the _Content & assets_ tab to edit the _Homepage_, start a new version of your item and add create a new item with new _Homepage Banner_ content type.
+
+      <img src="./images/step-5.png" alt="Step 5" width="500" />
+      <img src="./images/step-6.png" alt="Step 6" width="500" />
+      <img src=".s/images/step-7.png" alt="Step 7" width="500" />
+
+1. Update `gatsby-node.js`
+
+   Edit your site's `gatsby-node.js` file, adding an interface for `HomepageBanner` and a type that matches your content type in Kontent.ai.
+   This allows the homepage to query the abstract `HomepageBanner` type.
+
+   ```js
+   // in gatsby-node.js
+   exports.createSchemaCustomization = async ({ actions }) => {
+     // ...
+     actions.createTypes(`
+       interface HomepageBanner implements Node & HomepageBlock {
+         id: ID!
+         blocktype: String
+         heading: String
+         text: String
+       }
+     `)
+     // ...
+     actions.createTypes(`
+       type kontent_item_homepage_banner implements Node & HomepageBanner & HomepageBlock @dontInfer {
+         id: ID!
+         blocktype: String @blocktype
+         heading: String @proxy(from: "elements.heading.value")
+         text: String @proxy(from: "elements.text.value")
+       }
+     `)
+     // ...
+   }
+   ```
+
+1. Next, create the Banner component:
+
+   ```jsx fileExt
+   // src/components/banner.tsx
+   import * as React from "react"
+   import { graphql } from "gatsby"
+   import { Section, Container, Heading, Text } from "./ui"
+
+   export default function Banner(props) {
+     return (
+       <Section>
+         <Container>
+           <Heading>{props.heading}</Heading>
+           <Text>{props.text}</Text>
+         </Container>
+       </Section>
+     )
+   }
+
+   export const query = graphql`
+     fragment HomepageBannerContent on HomepageBanner {
+       id
+       heading
+       text
+     }
+   `
+   ```
+
+1. Export the component from `src/components/sections.tsx`
+
+   ```js fileExt
+   // src/components/sections.tsx
+   export { default as HomepageHero } from "./hero"
+   export { default as HomepageFeature } from "./feature"
+   export { default as HomepageFeatureList } from "./feature-list"
+   export { default as HomepageLogoList } from "./logo-list"
+   export { default as HomepageBenefitList } from "./benefit-list"
+   export { default as HomepageTestimonialList } from "./testimonial-list"
+   export { default as HomepageStatList } from "./stat-list"
+   export { default as HomepageCta } from "./cta"
+   export { default as HomepageProductList } from "./product-list"
+
+   // add export for new component
+   export { default as HomepageBanner } from "./banner"
+   ```
+
+1. Add the GraphQL query fragment to the query in `src/pages/index.tsx`
+
+   ```js fileExt
+   // in src/pages/index.tsx
+   export const query = graphql`
+     {
+       homepage {
+         id
+         title
+         description
+         image {
+           id
+           url
+         }
+         blocks: content {
+           id
+           blocktype
+           ...HomepageHeroContent
+           ...HomepageFeatureContent
+           ...HomepageFeatureListContent
+           ...HomepageCtaContent
+           ...HomepageLogoListContent
+           ...HomepageTestimonialListContent
+           ...HomepageBenefitListContent
+           ...HomepageStatListContent
+           ...HomepageProductListContent
+           # New component fragment
+           ...HomepageBannerContent
+         }
+       }
+     }
+   `
+   ```
+
+## Troubleshooting
+
+### Errors after making changes to the schema
+
+If you've made changes to the `gatsby-node.js` file or changes to the Kontent.ai data model, clear the Gatsby cache before running the develop server:
+
+```sh
+yarn clean && yarn start
+```
+
+---
+
+## 🎓 Learning Gatsby
+
+Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
+
+- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
+- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).**
+
+## 💫 Deploy
+
+[Build, Deploy, and Host On The Only Cloud Built For Gatsby](https://www.gatsbyjs.com/cloud/)
+
+Gatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.

docs/images/step-1.png

@@ -0,0 +1,5 @@
+import "@fontsource/dm-sans"
+import "@fontsource/dm-sans/500.css"
+import "@fontsource/dm-sans/700.css"
+import "@fontsource/dm-mono"
+import "@fontsource/dm-mono/500.css"

docs/images/step-2.png

@@ -0,0 +1,37 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
+module.exports = {
+  siteMetadata: {
+    siteUrl: "https://gatsbykontent-aihomepage.gatsbyjs.io/",
+    title: "Gatsby Kontent.ai Homepage Starter",
+    author: `Gatsby`,
+    description: "A Gatsby Starter for building homepages with Kontent.ai",
+  },
+  plugins: [
+    {
+      resolve: `@kontent-ai/gatsby-source`,
+      options: {
+        projectId: process.env.KONTENT_PROJECT_ID,
+        languageCodenames: [`en-US`],
+      },
+    },
+    "gatsby-plugin-sharp",
+    "gatsby-plugin-image",
+    "gatsby-transformer-sharp",
+    "gatsby-plugin-react-helmet",
+    "gatsby-plugin-vanilla-extract",
+    {
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        name: "Gatsby Starter Kontent.ai Homepage",
+        short_name: "Gatsby",
+        start_url: "/",
+        background_color: "#41D9C5",
+        theme_color: "#231F20",
+        icon: "src/favicon.png",
+      },
+    },
+  ],
+}