{"id":15545595,"url":"https://github.com/davbree/magical-tiger","last_synced_at":"2026-04-09T16:37:18.536Z","repository":{"id":140317479,"uuid":"415532464","full_name":"davbree/magical-tiger","owner":"davbree","description":"Jamstack site created with Stackbit","archived":false,"fork":false,"pushed_at":"2021-10-10T10:17:30.000Z","size":2804,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T14:11:53.165Z","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-10-10T08:51:33.000Z","updated_at":"2021-10-10T08:51:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"cdd29610-dcf3-479d-8bb6-4c818dac762b","html_url":"https://github.com/davbree/magical-tiger","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%2Fmagical-tiger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fmagical-tiger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fmagical-tiger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davbree%2Fmagical-tiger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davbree","download_url":"https://codeload.github.com/davbree/magical-tiger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245237615,"owners_count":20582702,"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:51:34.207Z","updated_at":"2026-04-09T16:37:13.488Z","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    colors: colors-a\n    elementId: ''\n    width: wide\n    height: short\n    topGap: small\n    bottomGap: small\n    alignHoriz: left\n    alignVert: middle\n    badge:\n      label: New Collaboration\n      elementId: ''\n    title: The quick, brown fox jumps over **a lazy dog**\n    text: \u003e-\n      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium\n      doloremque laudantium, totam rem aperiam, eaque ipsa quae. explicabo.\n    actions:\n      - type: Button\n        url: '#'\n        label: Apply Now\n        style: primary\n        elementId: ''\n      - type: Button\n        url: '#'\n        label: Learn more\n        style: secondary\n    feature:\n      type: ImageBlock\n      url: /images/fishing.jpg\n      altText: Image alt text\n      caption: 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**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**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### Adding your own components\n\nIn this example we will create a new component that displays a grid of logos.\n\nCreate a new react component in `src/components/LogoSection.js`\n\n```js\nimport React from 'react'\n\nconst LogoSection = (props) =\u003e {\n  const { logos, title } = props\n  return (\n    \u003cdiv className=\"max-w-screen-xl mx-auto px-4 sm:px-6 py-14 lg:py-20 mt-10 mb-10 text-center\"\u003e\n      \u003ch1 className=\"text-3xl tracking-tight sm:text-4xl mb-2\"\u003e{title}\u003c/h1\u003e\n      \u003cdiv className=\"flex justify-center items-center\"\u003e\n        {logos.map((logo, index) =\u003e (\n          \u003cdiv className=\"p-6\" key={index}\u003e\n            \u003cimg className=\"mb-2\" height=\"60px\" width=\"60px\" src={logo.image} /\u003e\n            \u003ch2 className=\"text-sm text-gray-400\"\u003e{logo.name}\u003c/h2\u003e\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default LogoSection\n```\n\nRegister the component in `.stackbit/components-map.json`\n\n```js\n{\n    \"README\": \"Components set to 'null' will be loaded from @stackbit/components library. To override a component, set it to relative paths of your component\",\n    \"components\": {\n        \"Action\": null,\n        ...\n        \"LogoSection\": \"../src/components/LogoSection.js\"\n    },\n    \"dynamic\": {\n        \"CheckboxFormControl\": \"@stackbit/components/components/CheckboxFormControl\",\n        ...\n        \"LogoSection\": \"../src/components/LogoSection.js\"\n    }\n}\n```\n\nAdd a new model for the `LogoSection` component. Create a new model file at `.stackbit/models/LogoSection.yml`\n\n```yml\ntype: object\nname: LogoSection\nlabel: Logo section\nfields:\n  - type: string\n    name: title\n  - type: list\n    name: logos\n    items:\n      type: object\n      fields:\n        - type: string\n          name: name\n        - type: image\n          name: image\n```\n\nExtend the [🧩 AdvancedLayout](https://components.stackbit.com/?path=/docs/layouts-advancedlayout--primary) model. Open the model file at `.stackbit/models/AdvancedLayout.yml`\n\n```yml\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        ...\n        - LogoSection\n```\n\nAdd the component to the homepage content. Edit `content/pages/index.md`\n\n```yml\n---\ntitle: Home\nlayout: AdvancedLayout\nsections:\n  - type: HeroSection\n    ...\n  - type: LogoSection\n    title: \"Our Partners\"\n    logos:\n      - name: 'Stackbit'\n        image: '/images/stackbit.svg'\n      - name: 'NextJs'\n        image: '/images/nextdotjs.svg'\n---\n```\n\nDownload the images and place them in the `/public/images/` folder.\n\n- https://simpleicons.org/icons/stackbit.svg\n- https://simpleicons.org/icons/nextdotjs.svg\n\n### Extending a Stackbit component\n\nIn this example we will extend an existing Stackbit component.\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 both a component and a model. Explain this concept.\n\n### Editing the CSS\n\nThis theme uses Tailwind CSS and PostCSS. The `tailwind.config.js` includes our default style as a **preset**.\n\n#### Changing the preset\n\nYou can use any preset from 🎨 [Stackbit Styles](https://github.com/stackbit/stackbit-components/tree/main/styles)\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  presets: [require('@stackbit/components/styles/retro/tailwind.retro.config')]\n  // ...\n}\n```\n\n#### Editing the Tailwind config\n\nYou can override any of the preset values in the `extend` object. In this example we change the themes primary color.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  ...\n  theme: {\n    extend: {\n      colors: {\n          primary: '#207bea'\n      }\n    }\n  },\n  ...\n};\n```\n\n#### Changing CSS Styles\n\nThe CSS is located in `src/css/main.css`. The default style is imported from the Stackbit components library - `@import '@stackbit/components/styles/default/style.css';`\n\nYou can add your own custom css or override existing styles.\n\n```scss\n// src/css/main.css\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import '@stackbit/components/styles/default/style.css';\n\n@layer components {\n  .sb-badge {\n    @apply uppercase;\n  }\n  .page-example {\n    .component-content-section {\n      .component-badge {\n        padding: 10px 20px;\n        text-transform: uppercase;\n        border-radius: 3px;\n      }\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavbree%2Fmagical-tiger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavbree%2Fmagical-tiger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavbree%2Fmagical-tiger/lists"}