Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rodik-dev/prod-v2-starter-base

Jamstack site created with Stackbit
https://github.com/rodik-dev/prod-v2-starter-base

git headless jamstack nextjs ssg stackbit static

Last synced: 2 days ago
JSON representation

Jamstack site created with Stackbit

Host: GitHub
URL: https://github.com/rodik-dev/prod-v2-starter-base
Owner: rodik-dev
Created: 2021-10-13T16:32:53.000Z (about 3 years ago)
Default Branch: master
Last Pushed: 2021-10-14T09:58:28.000Z (about 3 years ago)
Last Synced: 2024-11-10T21:42:20.843Z (2 months ago)
Topics: git, headless, jamstack, nextjs, ssg, stackbit, static
Language: JavaScript
Homepage: https://jamstack.new
Size: 3.77 MB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Stackbit Nextjs V2

The NextJs core starter for Stackbit.

## Quickstart

```
npm install
```

```
npm run dev
```

### Add a new page

Create a new markdown file `content/pages/new-page.md` with the following frontmatter.

```yaml
---
title: 'New Example Page'
layout: 'AdvancedLayout'
sections:
- type: HeroSection
variant: variant-a
colors: colors-a
elementId: ''
width: wide
height: short
topGap: small
bottomGap: small
alignHoriz: left
alignVert: middle
badge:
label: New Collaboration
elementId: ''
title: The quick, brown fox jumps over **a lazy dog**
text: >-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae. explicabo.
actions:
- type: Button
url: '#'
label: Apply Now
style: primary
elementId: ''
- type: Button
url: '#'
label: Learn more
style: secondary
feature:
type: ImageBlock
url: /images/fishing.jpg
altText: Image alt text
caption: Image caption
---
```

Visit http://localhost:3000/new-page/ to see the new page.

> **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/_

### Add a menu item

Menu items are configured in `content/data/config.json`. Edit the config file and add a new menu object to the `primaryLinks` array.

```js
// content/data/config.json
{
"navBar": {
// ...
"primaryLinks": [
// ...
{
"type": "Link",
"label": "My New Page",
"url": "/new-page",
"altText": ""
}
],
// ...
}
}
```

### Adding more sections to the page

Add a [🧩 CtaSection](https://components.stackbit.com/?path=/docs/components-contactsection--primary) to the page by adding the component to the the sections array.

```yaml
# content/pages/new-page.md
---
title: 'New Example Page'
layout: 'AdvancedLayout'
sections: # sections array
- type: 'HeroSection'
# ...
- type: 'CtaSection'
variant: 'variant-a'
width: 'wide'
height: 'auto'
alignHoriz: 'center'
title: "Let's do this"
text: 'The Stackbit theme is flexible and scalable to every need. It can manage any layout and any screen.'
actions:
- type: 'Button'
url: '/contact'
label: 'Get Started'
style: 'primary'
---
```

**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.

**Component Examples**

- [🧩 CtaSection](https://components.stackbit.com/?path=/docs/components-contactsection--primary)
- [🧩 ContactSection](https://components.stackbit.com/?path=/docs/components-contentsection--primary)
- [🧩 FeaturedPeopleSection](https://components.stackbit.com/?path=/docs/components-featuredpeoplesection--primary)
- [🧩 FeaturedPostsSection](https://components.stackbit.com/?path=/docs/components-featuredpostssection--primary)

### Adding your own components

In this example we will create a new component that displays a grid of logos.

Create a new react component in `src/components/LogoSection.js`

```js
import React from 'react'

const LogoSection = (props) => {
const { logos, title } = props
return (

{title}

{logos.map((logo, index) => (

{logo.name}

))}

)
}

export default LogoSection
```

```js
{
"README": "Components set to 'null' will be loaded from @stackbit/components library. To override a component, set it to relative paths of your component",
"components": {
"Action": null,
...
"LogoSection": "../src/components/LogoSection.js"
},
"dynamic": {
"CheckboxFormControl": "@stackbit/components/components/CheckboxFormControl",
...
"LogoSection": "../src/components/LogoSection.js"
}
}
```

Add a new model for the `LogoSection` component. Create a new model file at `.stackbit/models/LogoSection.yml`

```yml
type: object
name: LogoSection
label: Logo section
fields:
- type: string
name: title
- type: list
name: logos
items:
type: object
fields:
- type: string
name: name
- type: image
name: image
```

Extend the [🧩 AdvancedLayout](https://components.stackbit.com/?path=/docs/layouts-advancedlayout--primary) model. Open the model file at `.stackbit/models/AdvancedLayout.yml`

```yml
type: page
name: AdvancedLayout
label: Advanced page
layout: AdvancedLayout
hideContent: true
fields:
- type: string
name: title
label: Title
- type: list
name: sections
label: Sections
items:
type: model
models:
- ContactSection
...
- LogoSection
```

Add the component to the homepage content. Edit `content/pages/index.md`

```yml
---
title: Home
layout: AdvancedLayout
sections:
- type: HeroSection
...
- type: LogoSection
title: "Our Partners"
logos:
- name: 'Stackbit'
image: '/images/stackbit.svg'
- name: 'NextJs'
image: '/images/nextdotjs.svg'
---
```

Download the images and place them in the `/public/images/` folder.

- https://simpleicons.org/icons/stackbit.svg
- https://simpleicons.org/icons/nextdotjs.svg

### Extending a Stackbit component

In this example we will extend an existing Stackbit component.

### Understanding Layouts

Explain how layouts work.

- How does the `layout` field work?
- How does the `layout` field effect which frontmatter fields can be used?
- The layout is both a component and a model. Explain this concept.

### Editing the CSS

This theme uses Tailwind CSS and PostCSS. The `tailwind.config.js` includes our default style as a **preset**.

#### Changing the preset

You can use any preset from 🎨 [Stackbit Styles](https://github.com/stackbit/stackbit-components/tree/main/styles)

```js
// tailwind.config.js
module.exports = {
presets: [require('@stackbit/components/styles/retro/tailwind.retro.config')]
// ...
}
```

#### Editing the Tailwind config

You can override any of the preset values in the `extend` object. In this example we change the themes primary color.

```js
// tailwind.config.js
module.exports = {
...
theme: {
extend: {
colors: {
primary: '#207bea'
}
}
},
...
};
```

#### Changing CSS Styles

The 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';`

You can add your own custom css or override existing styles.

```scss
// src/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@stackbit/components/styles/default/style.css';

@layer components {
.sb-badge {
@apply uppercase;
}
.page-example {
.component-content-section {
.component-badge {
padding: 10px 20px;
text-transform: uppercase;
border-radius: 3px;
}
}
}
}
```