{"id":15545675,"url":"https://github.com/davbree/incredible-paprika","last_synced_at":"2026-04-09T08:46:17.063Z","repository":{"id":140317414,"uuid":"401719020","full_name":"davbree/incredible-paprika","owner":"davbree","description":"Jamstack site created with Stackbit","archived":false,"fork":false,"pushed_at":"2021-08-31T13:52:28.000Z","size":2610,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T14:11:32.610Z","etag":null,"topics":["git","headless","jamstack","nextjs","ssg","stackbit","static"],"latest_commit_sha":null,"homepage":"https://jamstack.new","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davbree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-31T13:46:09.000Z","updated_at":"2021-08-31T13:46:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"b3045c5f-d243-4a96-a067-c2db3c224150","html_url":"https://github.com/davbree/incredible-paprika","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fincredible-paprika","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fincredible-paprika/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fincredible-paprika/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fincredible-paprika/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davbree","download_url":"https://codeload.github.com/davbree/incredible-paprika/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245237393,"owners_count":20582660,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["git","headless","jamstack","nextjs","ssg","stackbit","static"],"created_at":"2024-10-02T12:53:29.513Z","updated_at":"2026-04-09T08:46:17.009Z","avatar_url":"https://github.com/davbree.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stackbit Nextjs V2\n\nThe NextJs core starter for Stackbit. \n\n## Quickstart\n\n```\nnpm install\n```\n\n```\nnpm run dev\n```\n\n### Add a new page\n\nCreate a new markdown file `content/pages/new-page.md` with the following frontmatter.\n\n```yaml\n---\ntitle: \"New Example Page\"\nlayout: \"AdvancedLayout\"\nsections:\n  - type: \"HeroSection\"\n    variant: \"variant-a\"\n    width: \"wide\"\n    height: \"auto\"\n    alignHoriz: \"left\"\n    badge: \"Brand New\"\n    title: \"My Heading\"\n    text: \"a long description\"\n    actions:\n      - type: \"Button\"\n        url: \"/\"\n        label: \"Home\"\n        style: \"primary\"\n    feature:\n      type: \"ImageBlock\"\n      imageUrl: \"/images/hero.png\"\n      imageAltText: \"Image alt text\"\n      imageCaption: \"Image caption\"\n---\n```\n\nVisit http://localhost:3000/new-page/ to see the new page. \n\n\u003e **Note:** The pages url will match the file path - `content/pages/new-page.md` will resolve to _/new-page_. A nested folder like `content/pages/blog/index.md` will resolve to _/blog/_\n\n### Add a menu item\n\nMenu items are configured in `content/data/config.json`. Edit the config file and add a new menu object to the `primaryLinks` array.\n\n```js\n// content/data/config.json\n{\n  \"navBar\": {\n    // ...\n    \"primaryLinks\": [\n      // ...\n      {\n        \"type\": \"Link\",\n        \"label\": \"My New Page\",\n        \"url\": \"/new-page\",\n        \"altText\": \"\"\n      }\n    ],\n    // ...\n  }\n}\n```\n\n### Adding more sections to the page\n\nAdd a [🧩 CtaSection](https://components.stackbit.com/?path=/docs/components-contactsection--primary) to the page by adding the component to the the sections array.\n\n```yaml\n# content/pages/new-page.md\n---\ntitle: \"New Example Page\"\nlayout: \"AdvancedLayout\"\nsections: # sections array\n  - type: \"HeroSection\"\n    # ...\n  - type: \"CtaSection\"\n    variant: \"variant-a\"\n    width: \"wide\"\n    height: \"auto\"\n    alignHoriz: \"center\"\n    title: \"Let's do this\"\n    text: \"The Stackbit theme is flexible and scalable to every need. It can manage any layout and any screen.\"\n    actions:\n      - type: \"Button\"\n        url: \"/contact\"\n        label: \"Get Started\"\n        style: \"primary\"\n---\n```\n\n\n**Component Library:** The [Stackbit Component Library](https://develop--stackbit-components.netlify.app/?path=/story/layouts-advancedlayout--primary) has full documentation on each component including the available props and frontmatter.\n\n\n **Component Examples**\n\n  - [🧩 CtaSection](https://components.stackbit.com/?path=/docs/components-contactsection--primary)\n  - [🧩 ContactSection](https://components.stackbit.com/?path=/docs/components-contentsection--primary)\n  - [🧩 FeaturedPeopleSection](https://components.stackbit.com/?path=/docs/components-featuredpeoplesection--primary)\n  - [🧩 FeaturedPostsSection](https://components.stackbit.com/?path=/docs/components-featuredpostssection--primary)\n\n### Understanding Layouts\n\nExplain how layouts work.\n\n* How does the `layout` field work?\n* How does the `layout` field effect which frontmatter fields can be used?\n* The layout is dependant on a stackbit.yaml model. The model defines which components can be used in the sections array. Explain how the layout and model are used.\n\n### Adding your own components\n\nExplain how to add your own component\n\n### Extending a Stackbit component\n\nExplain how to extend an existing Stackbit component.\n\n\n## Advanced Guide\n### Layouts\n\nEvery page in `content/pages` must have a `layout` field. The layout is both a component and a content model.\n\nThe layout will determine what frontmatter fields can be used in the page  based on it's stackbit.yaml model. The AdvancedLayout uses the [AdvancedLayout.yaml model](https://github.com/stackbit/stackbit-components/blob/main/models/AdvancedLayout.yaml) shown below:\n\n```yaml\ntype: page\nname: AdvancedLayout\nlabel: Advanced page\nlayout: AdvancedLayout\nhideContent: true\nfields:\n  - type: string\n    name: title\n    label: Title\n  - type: list\n    name: sections\n    label: Sections\n    items:\n      type: model\n      models:\n        - ContactSection\n        - ContentSection\n        - CtaSection\n        - FeaturedPostsSection\n        - HeroSection\n        - TestimonialsSection\n```\n\nThe AdvancedLayout is a **page model** with a `title` and `sections` field. The `sections` field is a list (an array of objects) with each object being it's own **object model**. The AdvancedLayout can use the following components from the Stackbit Components Library:\n\n- ContactSection\n- ContentSection\n- CtaSection\n- FeaturedPostsSection\n- HeroSection\n- TestimonialsSection\n\n### Content\n\nContent is sourced from the filesystem using [Sourcebit](https://github.com/stackbit/sourcebit). It loads markdown and json files stored in `content/pages` and `content/data` and tranforms them into page objects which are used by `getStaticProps()`. \n\n* This theme comes with a pre-configured sourcebit config `sourcebit.js`\n* This theme comes pre-configured to use `sourcebit.fetch()` in the `next.config.js`\n\n\n```js\n// next.config.js\n\nconst sourcebit = require('sourcebit');\nconst sourcebitConfig = require('./sourcebit.js');\n\nsourcebit.fetch(sourcebitConfig);\n\nmodule.exports = {\n  ...\n}\n```\n\nWhenever you run `npm run dev` or `npm run build` Sourcebit fetches content and outputs the `.sourcebit-nextjs-cache.json` file which contains an array of page objects. \n\nInside a Nextjs page route like `src/pages/[[...slug]].js` you can load page data by it's path using the `sourcebitDataClient.getStaticPropsForPageAtPath(path)` function inside of `getStaticProps`\n\n```js\n// src/pages/[[...slug]].js\n\nexport async function getStaticProps({ params }) {\n  const props = await sourcebitDataClient.getStaticPropsForPageAtPath(params.slug);\n  return { props };\n}\n```\n\n## Components\n\nThis theme uses the [Stackbit component library](https://github.com/stackbit/stackbit-components) \n\n* This theme comes pre-configured to use `withStackbitComponents()` in the `next.config.js`\n\n```js\n// next.config.js\n\nconst withStackbitComponents = require('@stackbit/components/with-stackbit-components');\n\nmodule.exports = withStackbitComponents({\n  componentsMapPath: '.stackbit/components-map.json',\n  ...\n})\n```\n\n`withStackbitComponents` generates a dynamic import map for the Stackbit component library. This provides a framework to override existing Stackbit components and add your own new components. This approach reduces the bundle size by only importing components that are used.\n\n* Generates `.stackbit/components-map.json` - Edit this file to override or add new components\n* Generates `.stackbit/dynamic-components.js` - This file is dynamically generated from `components-map.json` and should not be edited or committed to git.\n\nYou can now use `getDynamicComponent(ComponentName)` in a Nextjs page. \n\n```\n// src/pages/[[...slug]].js \nimport { getDynamicComponent } from '@stackbit/components/components-registry';\n\nfunction Page(props) {\n  console.log(props);\n  const { page, site } = props;\n  const { layout } = page;\n\n  const PageLayout = getDynamicComponent(layout);\n\n  return \u003cPageLayout page={page} site={site} /\u003e;\n}\n```\n\n\n## Tailwind\n\nYou can edit the tailwind config in `tailwind.config.js`\n\nThe Stackbit component library includes a number of Tailwind preset configurations which will dramatically change the themes look and feel. \n\n* [@stackbit/components/themes/tailwind.bold.config.js](https://github.com/stackbit/stackbit-components/blob/main/themes/tailwind.bold.config.js)\n* [@stackbit/components/themes/tailwind.eco.config.js](https://github.com/stackbit/stackbit-components/blob/main/themes/tailwind.eco.config.js)\n* [@stackbit/components/themes/tailwind.modern.config.js](https://github.com/stackbit/stackbit-components/blob/main/themes/tailwind.modern.config.js)\n* [@stackbit/components/themes/tailwind.retro.config.js](https://github.com/stackbit/stackbit-components/blob/main/themes/tailwind.retro.config.js)\n\nUse the `presets` option to change the configuration.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  presets: [require('@stackbit/components/themes/tailwind.bold.config')],\n  // ...\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavbree%2Fincredible-paprika","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavbree%2Fincredible-paprika","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavbree%2Fincredible-paprika/lists"}