Repository: strapi/starters-and-templates Branch: main Commit: 7ab5f0b7e292 Files: 204 Total size: 214.7 KB Directory structure: gitextract_ipi637vq/ ├── .gitignore ├── LICENSE.txt ├── README.md ├── lerna.json ├── package.json └── packages/ ├── starters/ │ ├── .gitkeep │ ├── gatsby-blog/ │ │ ├── README.md │ │ ├── package.json │ │ ├── starter/ │ │ │ ├── .eslintrc.js │ │ │ ├── .gitignore │ │ │ ├── README.md │ │ │ ├── gatsby-browser.js │ │ │ ├── gatsby-config.js │ │ │ ├── gatsby-node.js │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── src/ │ │ │ │ ├── components/ │ │ │ │ │ ├── article-card.js │ │ │ │ │ ├── articles-grid.js │ │ │ │ │ ├── block-media.js │ │ │ │ │ ├── block-quote.js │ │ │ │ │ ├── block-rich-text.js │ │ │ │ │ ├── block-slider.js │ │ │ │ │ ├── blocks-renderer.js │ │ │ │ │ ├── footer.js │ │ │ │ │ ├── headings.js │ │ │ │ │ ├── layout.js │ │ │ │ │ ├── navbar.js │ │ │ │ │ └── seo.js │ │ │ │ ├── pages/ │ │ │ │ │ ├── about.js │ │ │ │ │ └── index.js │ │ │ │ ├── styles/ │ │ │ │ │ └── global.css │ │ │ │ └── templates/ │ │ │ │ └── article-post.js │ │ │ └── tailwind.config.js │ │ └── starter.json │ ├── gatsby-corporate/ │ │ └── README.md │ ├── next-blog/ │ │ ├── README.md │ │ ├── package.json │ │ ├── starter/ │ │ │ ├── .eslintrc │ │ │ ├── .prettierrc │ │ │ ├── assets/ │ │ │ │ └── css/ │ │ │ │ └── style.css │ │ │ ├── components/ │ │ │ │ ├── articles.js │ │ │ │ ├── card.js │ │ │ │ ├── image.js │ │ │ │ ├── layout.js │ │ │ │ ├── nav.js │ │ │ │ └── seo.js │ │ │ ├── lib/ │ │ │ │ ├── api.js │ │ │ │ └── media.js │ │ │ ├── next.config.js │ │ │ ├── package.json │ │ │ └── pages/ │ │ │ ├── _app.js │ │ │ ├── _document.js │ │ │ ├── article/ │ │ │ │ └── [slug].js │ │ │ ├── category/ │ │ │ │ └── [slug].js │ │ │ └── index.js │ │ └── starter.json │ └── next-corporate/ │ ├── README.md │ ├── package.json │ ├── starter/ │ │ ├── .eslintrc │ │ ├── .gitignore │ │ ├── README.md │ │ ├── components/ │ │ │ ├── elements/ │ │ │ │ ├── button-link.js │ │ │ │ ├── button.js │ │ │ │ ├── custom-link.js │ │ │ │ ├── footer.js │ │ │ │ ├── image.js │ │ │ │ ├── loader.js │ │ │ │ ├── mobile-nav-menu.js │ │ │ │ ├── navbar.js │ │ │ │ ├── notification-banner.js │ │ │ │ ├── seo.js │ │ │ │ └── video.js │ │ │ ├── icons/ │ │ │ │ └── world.js │ │ │ ├── layout.js │ │ │ ├── locale-switch.js │ │ │ ├── sections/ │ │ │ │ ├── bottom-actions.js │ │ │ │ ├── feature-columns-group.js │ │ │ │ ├── feature-rows-group.js │ │ │ │ ├── hero.js │ │ │ │ ├── large-video.js │ │ │ │ ├── lead-form.js │ │ │ │ ├── pricing.js │ │ │ │ ├── rich-text.js │ │ │ │ └── testimonials-group.js │ │ │ └── sections.js │ │ ├── jsconfig.json │ │ ├── next.config.js │ │ ├── package.json │ │ ├── pages/ │ │ │ ├── [[...slug]].js │ │ │ ├── _app.js │ │ │ ├── _document.js │ │ │ └── api/ │ │ │ ├── exit-preview.js │ │ │ └── preview.js │ │ ├── postcss.config.js │ │ ├── public/ │ │ │ └── .gitkeep │ │ ├── styles/ │ │ │ └── index.css │ │ ├── tailwind.config.js │ │ └── utils/ │ │ ├── api.js │ │ ├── button.js │ │ ├── hooks.js │ │ ├── localize.js │ │ ├── media.js │ │ ├── parse-cookies.js │ │ └── types.js │ └── starter.json └── templates/ ├── .gitkeep ├── blog/ │ ├── README.md │ ├── package.json │ ├── template/ │ │ ├── data/ │ │ │ └── data.json │ │ └── src/ │ │ ├── api/ │ │ │ ├── .gitkeep │ │ │ ├── about/ │ │ │ │ ├── content-types/ │ │ │ │ │ └── about/ │ │ │ │ │ └── schema.json │ │ │ │ ├── controllers/ │ │ │ │ │ └── about.js │ │ │ │ ├── routes/ │ │ │ │ │ └── about.js │ │ │ │ └── services/ │ │ │ │ └── about.js │ │ │ ├── article/ │ │ │ │ ├── content-types/ │ │ │ │ │ └── article/ │ │ │ │ │ └── schema.json │ │ │ │ ├── controllers/ │ │ │ │ │ └── article.js │ │ │ │ ├── routes/ │ │ │ │ │ └── article.js │ │ │ │ └── services/ │ │ │ │ └── article.js │ │ │ ├── author/ │ │ │ │ ├── content-types/ │ │ │ │ │ └── author/ │ │ │ │ │ └── schema.json │ │ │ │ ├── controllers/ │ │ │ │ │ └── author.js │ │ │ │ ├── routes/ │ │ │ │ │ └── author.js │ │ │ │ └── services/ │ │ │ │ └── author.js │ │ │ ├── category/ │ │ │ │ ├── content-types/ │ │ │ │ │ └── category/ │ │ │ │ │ └── schema.json │ │ │ │ ├── controllers/ │ │ │ │ │ └── category.js │ │ │ │ ├── routes/ │ │ │ │ │ └── category.js │ │ │ │ └── services/ │ │ │ │ └── category.js │ │ │ └── global/ │ │ │ ├── content-types/ │ │ │ │ └── global/ │ │ │ │ └── schema.json │ │ │ ├── controllers/ │ │ │ │ └── global.js │ │ │ ├── routes/ │ │ │ │ └── global.js │ │ │ └── services/ │ │ │ └── global.js │ │ ├── bootstrap.js │ │ ├── components/ │ │ │ └── shared/ │ │ │ ├── media.json │ │ │ ├── quote.json │ │ │ ├── rich-text.json │ │ │ ├── seo.json │ │ │ └── slider.json │ │ ├── extensions/ │ │ │ └── .gitkeep │ │ └── index.js │ └── template.json ├── corporate/ │ ├── README.md │ ├── package.json │ ├── template/ │ │ ├── data/ │ │ │ ├── data.js │ │ │ ├── en/ │ │ │ │ ├── global.json │ │ │ │ ├── index.js │ │ │ │ └── pages.json │ │ │ ├── fr/ │ │ │ │ ├── global.json │ │ │ │ ├── index.js │ │ │ │ └── pages.json │ │ │ └── lead-form-submissions.json │ │ └── src/ │ │ ├── api/ │ │ │ ├── .gitkeep │ │ │ ├── global/ │ │ │ │ ├── content-types/ │ │ │ │ │ └── global/ │ │ │ │ │ └── schema.json │ │ │ │ ├── controllers/ │ │ │ │ │ └── global.js │ │ │ │ ├── routes/ │ │ │ │ │ └── global.js │ │ │ │ └── services/ │ │ │ │ └── global.js │ │ │ ├── lead-form-submission/ │ │ │ │ ├── content-types/ │ │ │ │ │ └── lead-form-submission/ │ │ │ │ │ └── schema.json │ │ │ │ ├── controllers/ │ │ │ │ │ └── lead-form-submission.js │ │ │ │ ├── routes/ │ │ │ │ │ └── lead-form-submission.js │ │ │ │ └── services/ │ │ │ │ └── lead-form-submission.js │ │ │ └── page/ │ │ │ ├── content-types/ │ │ │ │ └── page/ │ │ │ │ └── schema.json │ │ │ ├── controllers/ │ │ │ │ └── page.js │ │ │ ├── routes/ │ │ │ │ └── page.js │ │ │ └── services/ │ │ │ └── page.js │ │ ├── bootstrap.js │ │ ├── components/ │ │ │ ├── elements/ │ │ │ │ ├── feature-column.json │ │ │ │ ├── feature-row.json │ │ │ │ ├── feature.json │ │ │ │ ├── footer-section.json │ │ │ │ ├── logos.json │ │ │ │ ├── notification-banner.json │ │ │ │ ├── plan.json │ │ │ │ └── testimonial.json │ │ │ ├── layout/ │ │ │ │ ├── footer.json │ │ │ │ └── navbar.json │ │ │ ├── links/ │ │ │ │ ├── button-link.json │ │ │ │ ├── button.json │ │ │ │ └── link.json │ │ │ ├── meta/ │ │ │ │ └── metadata.json │ │ │ └── sections/ │ │ │ ├── bottom-actions.json │ │ │ ├── feature-columns-group.json │ │ │ ├── feature-rows-group.json │ │ │ ├── hero.json │ │ │ ├── large-video.json │ │ │ ├── lead-form.json │ │ │ ├── pricing.json │ │ │ ├── rich-text.json │ │ │ └── testimonials-group.json │ │ └── index.js │ └── template.json └── ecommerce/ ├── README.md ├── package.json ├── template/ │ ├── data/ │ │ └── data.js │ └── src/ │ ├── api/ │ │ ├── .gitkeep │ │ ├── category/ │ │ │ ├── content-types/ │ │ │ │ └── category/ │ │ │ │ └── schema.json │ │ │ ├── controllers/ │ │ │ │ └── category.js │ │ │ ├── routes/ │ │ │ │ └── category.js │ │ │ └── services/ │ │ │ └── category.js │ │ └── product/ │ │ ├── content-types/ │ │ │ └── product/ │ │ │ └── schema.json │ │ ├── controllers/ │ │ │ └── product.js │ │ ├── routes/ │ │ │ └── product.js │ │ └── services/ │ │ └── product.js │ ├── bootstrap.js │ ├── components/ │ │ └── custom/ │ │ └── custom-field.json │ └── index.js └── template.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # Created by https://www.toptal.com/developers/gitignore/api/node,macos,windows,visualstudiocode # Edit at https://www.toptal.com/developers/gitignore?templates=node,macos,windows,visualstudiocode ### macOS ### # General .DS_Store .AppleDouble .LSOverride # Icon must end with two \r Icon # Thumbnails ._* # Files that might appear in the root of a volume .DocumentRevisions-V100 .fseventsd .Spotlight-V100 .TemporaryItems .Trashes .VolumeIcon.icns .com.apple.timemachine.donotpresent # Directories potentially created on remote AFP share .AppleDB .AppleDesktop Network Trash Folder Temporary Items .apdisk ### Node ### # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* lerna-debug.log* .pnpm-debug.log* # Diagnostic reports (https://nodejs.org/api/report.html) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage *.lcov # nyc test coverage .nyc_output # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # Snowpack dependency directory (https://snowpack.dev/) web_modules/ # TypeScript cache *.tsbuildinfo # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Microbundle cache .rpt2_cache/ .rts2_cache_cjs/ .rts2_cache_es/ .rts2_cache_umd/ # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env .env.test .env.production # parcel-bundler cache (https://parceljs.org/) .cache .parcel-cache # Next.js build output .next out # Nuxt.js build / generate output .nuxt dist # Gatsby files .cache/ # Comment in the public line in if your project uses Gatsby and not Next.js # https://nextjs.org/blog/next-9-1#public-directory-support # public # vuepress build output .vuepress/dist # Serverless directories .serverless/ # FuseBox cache .fusebox/ # DynamoDB Local files .dynamodb/ # TernJS port file .tern-port # Stores VSCode versions used for testing VSCode extensions .vscode-test # yarn v2 .yarn/cache .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz .pnp.* ### VisualStudioCode ### .vscode/* !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json *.code-workspace # Local History for Visual Studio Code .history/ ### VisualStudioCode Patch ### # Ignore all local history of files .history .ionide ### Windows ### # Windows thumbnail cache files Thumbs.db Thumbs.db:encryptable ehthumbs.db ehthumbs_vista.db # Dump file *.stackdump # Folder config file [Dd]esktop.ini # Recycle Bin used on file shares $RECYCLE.BIN/ # Windows Installer files *.cab *.msi *.msix *.msm *.msp # Windows shortcuts *.lnk # End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,visualstudiocode # Template development directory template-dev/ ================================================ FILE: LICENSE.txt ================================================ MIT License Copyright (c) 2021 Strapi Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ > [!WARNING] > This repository is only compatible with Strapi v4 version
> The most recent information can be found at https://docs.strapi.io/ # Strapi starters & templates Monorepo for all official Strapi v4 starters and templates. ### Starters > As you may have [noticed](https://github.com/strapi/starters-and-templates/issues?q=is%3Aissue+is%3Aopen+install), a lot of the Starters are out of date and given constraints in bandwidth and other priorities, we've decided to sunset all Starters and only actively maintain a single Next.js Starter. - [Gatsby Blog](./packages/starters/gatsby-blog) - [Next Blog](./packages/starters/next-blog) - [Next Corporate Site](./packages/starters/next-corporate) ### Templates - [Blog](./packages/templates/blog) - [Corporate](./packages/templates/corporate) - [Ecommerce](./packages/templates/ecommerce) ================================================ FILE: lerna.json ================================================ { "packages": [ "packages/templates/*", "packages/starters/*" ], "npmClient": "yarn", "useWorkspaces": true, "version": "independent" } ================================================ FILE: package.json ================================================ { "name": "@strapi/starters-and-templates", "version": "1.0.0", "private": true, "description": "All Strapi templates", "repository": "https://github.com/strapi/starters-and-templates.git", "license": "MIT", "author": { "name": "Strapi team", "email": "hi@strapi.io", "url": "https://strapi.io" }, "maintainers": [ { "name": "Strapi team", "email": "hi@strapi.io", "url": "https://strapi.io" } ], "workspaces": [ "packages/**/*" ], "devDependencies": { "lerna": "^4.0.0" } } ================================================ FILE: packages/starters/.gitkeep ================================================ ================================================ FILE: packages/starters/gatsby-blog/README.md ================================================ # Strapi Starter Gatsby Blog Gatsby starter for creating a blog with Strapi. This starter allows you to try Strapi with Gatsby with the example of a simple blog. It is fully customizable and due to the fact that it is open source, fully open to contributions. So do not hesitate to add new features and report bugs! This starter uses the [Strapi blog template](https://github.com/strapi/starters-and-templates/tree/main/packages/templates/blog) ## Getting started Use our `create-strapi-starter` CLI to create your project. ```sh # Using Yarn yarn create strapi-starter my-project gatsby-blog # Or using NPM npx create-strapi-starter my-project gatsby-blog ``` The CLI will create a monorepo, install dependencies, and run your project automatically. The Gatsby frontend server will run here => [http://localhost:3000](http://localhost:3000) The Strapi backend server will run here => [http://localhost:1337](http://localhost:1337) You will however need to manually create a full access [API token](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/api-tokens.html) in Strapi. Once it's created, save it as `STRAPI_TOKEN` in your environment variables. ## Deploying to production You will need to deploy the `frontend` and `backend` projects separately. Here are the docs to deploy each one: - [Deploy Strapi](https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment.html#hosting-provider-guides) - [Deploy Gatsby](https://www.gatsbyjs.com/docs/deploying-and-hosting/) Enjoy this starter! ================================================ FILE: packages/starters/gatsby-blog/package.json ================================================ { "name": "@strapi/starter-gatsby-blog", "version": "1.0.7", "description": "Strapi blog starter with Gatsby", "keywords": [ "strapi", "starter", "gatsby", "blog" ], "homepage": "https://github.com/strapi/starters-and-templates/tree/main/packages/starters/gatsby-blog#readme", "bugs": { "url": "https://github.com/strapi/starters-and-templates/issues" }, "repository": { "type": "git", "url": "git+https://github.com/strapi/starters-and-templates.git" }, "license": "MIT", "author": { "name": "Strapi team", "email": "hi@strapi.io", "url": "https://strapi.io" }, "maintainers": [ { "name": "Strapi team", "email": "hi@strapi.io", "url": "https://strapi.io" } ] } ================================================ FILE: packages/starters/gatsby-blog/starter/.eslintrc.js ================================================ module.exports = { globals: { __PATH_PREFIX__: true, }, extends: ["react-app", "prettier"], plugins: ["prettier"], rules: { "prettier/prettier": [ "error", { printWidth: 80, singleQuote: false, trailingComma: "es5", semi: false, tabWidth: 2, }, ], }, } ================================================ FILE: packages/starters/gatsby-blog/starter/.gitignore ================================================ node_modules/ .cache/ public .env .env.production .env.local .env.development ================================================ FILE: packages/starters/gatsby-blog/starter/README.md ================================================

Gatsby

Gatsby minimal starter

## 🚀 Quick start 1. **Create a Gatsby site.** Use the Gatsby CLI to create a new site, specifying the minimal starter. ```shell # create a new Gatsby site using the minimal starter npm init gatsby ``` 2. **Start developing.** Navigate into your new site’s directory and start it up. ```shell cd my-gatsby-site/ npm run develop ``` 3. **Open the code and start customizing!** Your site is now running at http://localhost:8000! Edit `src/pages/index.js` to see your site update in real-time! 4. **Learn more** - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter) ## 🚀 Quick start (Gatsby Cloud) Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/): [Deploy to Gatsby Cloud](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal) ================================================ FILE: packages/starters/gatsby-blog/starter/gatsby-browser.js ================================================ import "./src/styles/global.css" ================================================ FILE: packages/starters/gatsby-blog/starter/gatsby-config.js ================================================ require("dotenv").config({ path: `.env.${process.env.NODE_ENV}`, }) module.exports = { plugins: [ "gatsby-plugin-gatsby-cloud", "gatsby-plugin-postcss", { resolve: "gatsby-source-strapi", options: { apiURL: process.env.STRAPI_API_URL || "http://localhost:1337", accessToken: process.env.STRAPI_TOKEN, collectionTypes: [ { singularName: "article", queryParams: { publicationState: process.env.GATSBY_IS_PREVIEW === "true" ? "preview" : "live", populate: { cover: "*", blocks: { populate: "*", }, }, }, }, { singularName: "author", }, { singularName: "category", }, ], singleTypes: [ { singularName: "about", queryParams: { populate: { blocks: { populate: "*", }, }, }, }, { singularName: "global", queryParams: { populate: { favicon: "*", defaultSeo: { populate: "*", }, }, }, }, ], }, }, "gatsby-plugin-image", "gatsby-plugin-sharp", "gatsby-transformer-sharp", "gatsby-transformer-remark", ], } ================================================ FILE: packages/starters/gatsby-blog/starter/gatsby-node.js ================================================ const path = require("path") exports.createPages = async ({ graphql, actions, reporter }) => { const { createPage } = actions // Define a template for blog post const articlePost = path.resolve("./src/templates/article-post.js") const result = await graphql( ` { allStrapiArticle { nodes { title slug } } } ` ) if (result.errors) { reporter.panicOnBuild( `There was an error loading your Strapi articles`, result.errors ) return } const articles = result.data.allStrapiArticle.nodes if (articles.length > 0) { articles.forEach((article) => { createPage({ path: `/article/${article.slug}`, component: articlePost, context: { slug: article.slug, }, }) }) } } ================================================ FILE: packages/starters/gatsby-blog/starter/package.json ================================================ { "name": "my-gatsby-blog", "version": "1.0.7", "private": true, "description": "Strapi Gatsby Blog", "author": "Strapi team", "keywords": [ "gatsby" ], "scripts": { "develop": "gatsby develop", "start": "gatsby develop", "build": "gatsby build", "serve": "gatsby serve", "clean": "gatsby clean", "lint": "eslint .", "lint:fix": "eslint . --fix" }, "dependencies": { "gatsby": "^4.6.1", "gatsby-plugin-gatsby-cloud": "^4.7.0", "gatsby-plugin-image": "^2.6.0", "gatsby-plugin-postcss": "^5.6.0", "gatsby-plugin-sharp": "^4.6.0", "gatsby-source-strapi": "^2.0.0", "gatsby-transformer-remark": "^5.6.0", "gatsby-transformer-sharp": "^4.6.0", "postcss": "^8.4.6", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", "react-slick": "^0.28.1", "slick-carousel": "^1.8.1" }, "devDependencies": { "@tailwindcss/line-clamp": "^0.3.1", "@tailwindcss/typography": "^0.5.1", "autoprefixer": "^10.4.2", "eslint": "^8.8.0", "eslint-config-prettier": "^8.3.0", "eslint-config-react-app": "^7.0.0", "eslint-plugin-prettier": "^4.0.0", "prettier": "^2.5.1", "prettier-plugin-tailwindcss": "^0.1.4", "tailwindcss": "^3.0.18" } } ================================================ FILE: packages/starters/gatsby-blog/starter/postcss.config.js ================================================ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/article-card.js ================================================ import React from "react" import { Link, graphql } from "gatsby" import { GatsbyImage, getImage } from "gatsby-plugin-image" const ArticleCard = ({ article }) => { return (

{article.title}

{article.description}

) } export const query = graphql` fragment ArticleCard on STRAPI_ARTICLE { id slug title description cover { alternativeText localFile { childImageSharp { gatsbyImageData(aspectRatio: 1.77) } } } } ` export default ArticleCard ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/articles-grid.js ================================================ import React from "react" import ArticleCard from "./article-card" const ArticlesGrid = ({ articles }) => { return (
{articles.map((article) => ( ))}
) } export default ArticlesGrid ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/block-media.js ================================================ import React from "react" import { GatsbyImage, getImage } from "gatsby-plugin-image" const BlockMedia = ({ data }) => { const isVideo = data.file.mime.startsWith("video") return (
{isVideo ? (

TODO video

) : ( )}
) } export default BlockMedia ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/block-quote.js ================================================ import React from "react" const BlockQuote = ({ data }) => { return (

{data.quoteBody}

{data.title}
) } export default BlockQuote ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/block-rich-text.js ================================================ import React from "react" const BlockRichText = ({ data }) => { return (
) } export default BlockRichText ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/block-slider.js ================================================ import React from "react" import { GatsbyImage, getImage } from "gatsby-plugin-image" import Slider from "react-slick" import "slick-carousel/slick/slick.css" import "slick-carousel/slick/slick-theme.css" const BlockSlider = ({ data }) => { return (
{data.files.map((file) => ( ))}
) } export default BlockSlider ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/blocks-renderer.js ================================================ import React from "react" import { graphql } from "gatsby" import BlockRichText from "./block-rich-text" import BlockMedia from "./block-media" import BlockQuote from "./block-quote" import BlockSlider from "./block-slider" const componentsMap = { STRAPI__COMPONENT_SHARED_RICH_TEXT: BlockRichText, STRAPI__COMPONENT_SHARED_MEDIA: BlockMedia, STRAPI__COMPONENT_SHARED_QUOTE: BlockQuote, STRAPI__COMPONENT_SHARED_SLIDER: BlockSlider, } const Block = ({ block }) => { const Component = componentsMap[block.__typename] if (!Component) { return null } return } const BlocksRenderer = ({ blocks }) => { return (
{blocks.map((block, index) => ( ))}
) } export const query = graphql` fragment Blocks on STRAPI__COMPONENT_SHARED_MEDIASTRAPI__COMPONENT_SHARED_QUOTESTRAPI__COMPONENT_SHARED_RICH_TEXTSTRAPI__COMPONENT_SHARED_SLIDERUnion { __typename ... on STRAPI__COMPONENT_SHARED_RICH_TEXT { richTextBody: body { __typename data { id childMarkdownRemark { html } } } } ... on STRAPI__COMPONENT_SHARED_MEDIA { file { mime localFile { childImageSharp { gatsbyImageData } } } } ... on STRAPI__COMPONENT_SHARED_QUOTE { title quoteBody: body } ... on STRAPI__COMPONENT_SHARED_SLIDER { files { id mime localFile { childImageSharp { gatsbyImageData } } } } } ` export default BlocksRenderer ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/footer.js ================================================ import React from "react" const Footer = () => { const currentYear = new Date().getFullYear() return (

Copyright {currentYear}

) } export default Footer ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/headings.js ================================================ import React from "react" const Headings = ({ title, description }) => { return (

{title}

{description && (

{description}

)}
) } export default Headings ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/layout.js ================================================ import React from "react" import Footer from "./footer" import Navbar from "./navbar" const Layout = ({ children }) => { return (
{children}
) } export default Layout ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/navbar.js ================================================ import { Link } from "gatsby" import React from "react" const Navbar = () => { return (
) } export default Navbar ================================================ FILE: packages/starters/gatsby-blog/starter/src/components/seo.js ================================================ import React from "react" import { Helmet } from "react-helmet" import { useStaticQuery, graphql } from "gatsby" const Seo = ({ seo = {} }) => { const { strapiGlobal } = useStaticQuery(graphql` query { strapiGlobal { siteName favicon { localFile { url } } defaultSeo { metaTitle metaDescription shareImage { localFile { url } } } } } `) const { siteName, defaultSeo, favicon } = strapiGlobal // Merge default and page-specific SEO values const fullSeo = { ...defaultSeo, ...seo } // Add site name to title fullSeo.metaTitle = `${fullSeo.metaTitle} | ${siteName}` const getMetaTags = () => { const tags = [] if (fullSeo.metaTitle) { tags.push( { property: "og:title", content: fullSeo.metaTitle, }, { name: "twitter:title", content: fullSeo.metaTitle, } ) } if (fullSeo.metaDescription) { tags.push( { name: "description", content: fullSeo.metaDescription, }, { property: "og:description", content: fullSeo.metaDescription, }, { name: "twitter:description", content: fullSeo.metaDescription, } ) } if (fullSeo.shareImage) { const imageUrl = fullSeo.shareImage.localFile.url tags.push( { name: "image", content: imageUrl, }, { property: "og:image", content: imageUrl, }, { name: "twitter:image", content: imageUrl, } ) } if (fullSeo.article) { tags.push({ property: "og:type", content: "article", }) } tags.push({ name: "twitter:card", content: "summary_large_image" }) return tags } const metaTags = getMetaTags() return ( ) } export default Seo ================================================ FILE: packages/starters/gatsby-blog/starter/src/pages/about.js ================================================ import React from "react" import { useStaticQuery, graphql } from "gatsby" import Layout from "../components/layout" import Seo from "../components/seo" import BlocksRenderer from "../components/blocks-renderer" import Headings from "../components/headings" const AboutPage = () => { const { strapiAbout } = useStaticQuery(graphql` query { strapiAbout { title blocks { ...Blocks } } } `) const { title, blocks } = strapiAbout const seo = { metaTitle: title, metaDescription: title, } return ( ) } export default AboutPage ================================================ FILE: packages/starters/gatsby-blog/starter/src/pages/index.js ================================================ import React from "react" import { useStaticQuery, graphql } from "gatsby" import Layout from "../components/layout" import ArticlesGrid from "../components/articles-grid" import Seo from "../components/seo" import Headings from "../components/headings" const IndexPage = () => { const { allStrapiArticle, strapiGlobal } = useStaticQuery(graphql` query { allStrapiArticle { nodes { ...ArticleCard } } strapiGlobal { siteName siteDescription } } `) return (
) } export default IndexPage ================================================ FILE: packages/starters/gatsby-blog/starter/src/styles/global.css ================================================ @tailwind base; @tailwind components; @tailwind utilities; ================================================ FILE: packages/starters/gatsby-blog/starter/src/templates/article-post.js ================================================ import React from "react" import { graphql } from "gatsby" import { GatsbyImage, getImage } from "gatsby-plugin-image" import Layout from "../components/layout" import BlocksRenderer from "../components/blocks-renderer" import Seo from "../components/seo" const ArticlePage = ({ data }) => { const article = data.strapiArticle const seo = { metaTitle: article.title, metaDescription: article.description, shareImage: article.cover, } return (

{article.title}

{article.description}

 ) } export const pageQuery = graphql` query ($slug: String) { strapiArticle(slug: { eq: $slug }) { id slug title description blocks { ...Blocks } cover { alternativeText localFile { url childImageSharp { gatsbyImageData } } } } } ` export default ArticlePage ================================================ FILE: packages/starters/gatsby-blog/starter/tailwind.config.js ================================================ const colors = require("tailwindcss/colors") module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: { colors: { neutral: colors.neutral, primary: colors.sky, }, }, container: { center: true, padding: { DEFAULT: "1rem", xs: "1rem", sm: "2rem", xl: "5rem", "2xl": "6rem", }, }, }, plugins: [ require("@tailwindcss/line-clamp"), require("@tailwindcss/typography"), ], } ================================================ FILE: packages/starters/gatsby-blog/starter.json ================================================ { "template": { "name": "@strapi/template-blog", "version": "^2.0.0" } } ================================================ FILE: packages/starters/gatsby-corporate/README.md ================================================ # Placeholder for Strapi Gatsby corporate starter The Strapi team will build this starter soon. In the meantime, you can check out our other Strapi v4 starters: - [Gatsby Blog](https://github.com/strapi/starters-and-templates/tree/main/packages/starters/gatsby-blog) - [Next Blog](https://github.com/strapi/starters-and-templates/tree/main/packages/starters/next-blog) - [Next Corporate Site](https://github.com/strapi/starters-and-templates/tree/main/packages/starters/next-corporate) ================================================ FILE: packages/starters/next-blog/README.md ================================================ # Strapi Starter Next Blog Next starter for creating a blog with Strapi. ![screenshot image](./screenshot.png) This starter allows you to try Strapi with Next with the example of a simple blog. It is fully customizable and due to the fact that it is open source, fully open to contributions. So do not hesitate to add new features and report bugs! This starter uses the [Strapi blog template](https://github.com/strapi/strapi-template-blog) Check out all of our starters [here](https://strapi.io/starters) ## Features - 2 Content types: Article, Category - 2 Created articles - 3 Created categories - Responsive design using UIkit Pages: - "/" to display every articles - "/article/:id" to display one article - "/category/:id" display articles depending on the category ## Getting started Use our `create-strapi-starter` CLI to create your project. ```sh # Using Yarn yarn create strapi-starter my-project next-blog # Or using NPM npx create-strapi-starter my-project next-blog ``` The CLI will create a monorepo, install dependencies, and run your project automatically. The Next frontend server will run here => [http://localhost:3000](http://localhost:3000) The Strapi backend server will run here => [http://localhost:1337](http://localhost:1337) ## Deploying to production You will need to deploy the `frontend` and `backend` projects separately. Here are the docs to deploy each one: - [Deploy Strapi](https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment.html#hosting-provider-guides) - [Deploy Next](https://nextjs.org/docs/deployment) Don't forget to setup the environment variables on your production app: For the frontend the following environment variable is required: - `NEXT_PUBLIC_STRAPI_API_URL`: URL of your Strapi backend, without trailing slash Enjoy this starter! ================================================ FILE: packages/starters/next-blog/package.json ================================================ { "name": "@strapi/starter-next-blog", "version": "1.0.4", "description": "Strapi blog starter with Next.js", "keywords": [ "strapi", "starter", "nextjs", "blog" ], "homepage": "https://github.com/strapi/starters-and-templates/tree/main/packages/starters/next-blog#readme", "bugs": { "url": "https://github.com/strapi/starters-and-templates/issues" }, "repository": { "type": "git", "url": "git+https://github.com/strapi/starters-and-templates.git" }, "license": "MIT", "author": { "name": "Strapi team", "email": "hi@strapi.io", "url": "https://strapi.io" }, "maintainers": [ { "name": "Strapi team", "email": "hi@strapi.io", "url": "https://strapi.io" } ] } ================================================ FILE: packages/starters/next-blog/starter/.eslintrc ================================================ { "extends": [ "next", "prettier" ], "plugins": [ "prettier" ], "rules": { "prettier/prettier": "error" } } ================================================ FILE: packages/starters/next-blog/starter/.prettierrc ================================================ { "printWidth": 80, "singleQuote": false, "trailingComma": "es5", "semi": false, "tabWidth": 2 } ================================================ FILE: packages/starters/next-blog/starter/assets/css/style.css ================================================ a { text-decoration: none; } h1 { font-family: Staatliches; font-size: 120px; } #category { font-family: Staatliches; font-weight: 500; } #title { letter-spacing: 0.4px; font-size: 22px; font-size: 1.375rem; line-height: 1.13636; } #banner { margin: 20px; height: 800px; } #editor { font-size: 16px; font-size: 1rem; line-height: 1.75; } .uk-navbar-container { background: #fff !important; font-family: Staatliches; } img:hover { opacity: 1; transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } ================================================ FILE: packages/starters/next-blog/starter/components/articles.js ================================================ import React from "react" import Card from "./card" const Articles = ({ articles }) => { const leftArticlesCount = Math.ceil(articles.length / 5) const leftArticles = articles.slice(0, leftArticlesCount) const rightArticles = articles.slice(leftArticlesCount, articles.length) return (
{leftArticles.map((article, i) => { return ( ) })}
{rightArticles.map((article, i) => { return ( ) })}
) } export default Articles ================================================ FILE: packages/starters/next-blog/starter/components/card.js ================================================ import React from "react" import Link from "next/link" import NextImage from "./image" const Card = ({ article }) => { return (

{article.attributes.category.name}

{article.attributes.title}

) } export default Card ================================================ FILE: packages/starters/next-blog/starter/components/image.js ================================================ import { getStrapiMedia } from "../lib/media" import NextImage from "next/image" const Image = ({ image, style }) => { const { url, alternativeText, width, height } = image.data.attributes // const loader = () => { // return getStrapiMedia(image) // } return ( ) } export default Image ================================================ FILE: packages/starters/next-blog/starter/components/layout.js ================================================ import Nav from "./nav" const Layout = ({ children, categories, seo }) => ( <>