Skip to content

Commit bb21ee8

Browse files
eladrozeladroz
authored
Additional starters & examples (#11)
* WIP add examples, edit README * Use built-in ssg: angular profile * Revert hydrogen dir rename * Update READMEs for (mostly) new examples * SvelteKit & Angular should be examples
1 parent 608841a commit bb21ee8

File tree

357 files changed

+63580
-120
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

357 files changed

+63580
-120
lines changed

‎README.md

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,40 @@ Have an idea of an example we should add? [Create an issue](https://github.com/s
88

99
## Minimal Starters
1010

11-
Starters are basic Stackbit projects that bring some specific combination of _the basics_.
11+
Starters are basic Stackbit projects that bring some specific combination of _the basics_. These are good starting points for developers and easy to get around.
1212

1313
| Example | Description |
1414
| :---------------------------------------------------------------------------------- | :---------------------------------------- |
1515
| [`nextjs-starter`](https://github.com/stackbit-themes/nextjs-starter) | The essential JavaScript building blocks. |
16-
| [`ts-mui-nextjs-starter`](https://github.com/stackbit-themes/ts-mui-nextjs-starter) | TypeScript + MUI components |
17-
| [`contentful-starter`](https://github.com/stackbit-themes/contentful-starter) | Contentful as the content source. |
16+
| [`ts-mui-nextjs-starter`](https://github.com/stackbit-themes/ts-mui-nextjs-starter) | TypeScript + MUI components. |
17+
| [`contentful-starter`](https://github.com/stackbit-themes/contentful-starter) | Minimal Next.js site with Contentful as the content source. |
1818

19-
## Full Starters
19+
## Full Websites Demos
2020

21-
Themes are bigger, more opinionated projects, that are all production-ready and built for scale. These are great options for non-technical content editors to get an immediate feel for Stackbit.
21+
Bigger, more opinionated sites that are production-ready and built to scale. These are good options for non-technical content editors to get an immediate feel for Stackbit.
2222

23-
The code references are below. Although you can run these locally, each of these themes is available to [demo immediately in the Stackbit app](https://jamstack.new/).
23+
You can run these locally, but each of these sites is available to [demo immediately in the Stackbit app](https://jamstack.new/).
2424

2525
| Example | Description |
2626
| :---------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
27-
| [`personal-nextjs-theme`](https://github.com/stackbit-themes/personal-nextjs-theme) | A stylistic site to showcase a portfolio. |
28-
| [`small-business-nextjs-theme`](https://github.com/stackbit-themes/small-business-nextjs-theme) | Pages and components meant to help small business spin up new sites quickly. |
2927
| [`starter-nextjs-theme`](https://github.com/stackbit-themes/starter-nextjs-theme) | A beautifully simple site that can be flexed to fit your needs. |
28+
| [`small-business-nextjs-theme`](https://github.com/stackbit-themes/small-business-nextjs-theme) | Pages and components meant to help small business spin up new sites quickly. |
29+
| [`personal-nextjs-theme`](https://github.com/stackbit-themes/personal-nextjs-theme) | A stylistic site to showcase a portfolio. |
3030

31-
## Projects
31+
## Example Projects
3232

33-
Project-based examples are built to show one or two patterns in practice.
33+
Showcase implementation & integration patterns in practice.
3434

3535
| Example | Description |
3636
| :------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------- |
37-
| [`dynamic-app`](https://github.com/stackbit-themes/stackbit-examples/tree/main/dynamic-app) | A showcase of multiple capabilities like authentication and workflow-based content. |
3837
| [`algolia-search`](https://github.com/stackbit-themes/stackbit-examples/tree/main/algolia-search) | On-demand statically generated pages, searchable with Algolia |
39-
| [`chakra-next`](https://github.com/stackbit-themes/stackbit-examples/tree/main/chakra-next) | Simple project using [Chakra UI](https://chakra-ui.com/) |
38+
| [`angular-contentful`](https://github.com/stackbit-themes/stackbit-examples/tree/main/angular-contentful) | Basic Angular & Contentful-based Product Catalog site. |
39+
| [`chakra-ui`](https://github.com/stackbit-themes/stackbit-examples/tree/main/chakra-ui) | A simple site using [Chakra UI](https://chakra-ui.com/). |
40+
| [`cloudinary-contentful`](https://github.com/stackbit-themes/stackbit-examples/tree/main/cloudinary-contentful) | Image management & per-device responsive optimization with Cloudinary. |
41+
| [`hydrogen-contentful-demo-store`](https://github.com/stackbit-themes/stackbit-examples/tree/main/hydrogen-contentful-demo-store) | Built on Shopify's Hydrogen framework & Contentful for editorial content |
42+
| [`ninetailed-personalization`](https://github.com/stackbit-themes/stackbit-examples/tree/main/ninetailed-personalization) | Audience-based personalization with Ninetailed, with built-in support in the visual editor. |
43+
| [`onboarding-webapp`](https://github.com/stackbit-themes/stackbit-examples/tree/main/onboarding-webapp) | Showcasing advanced capabilities e.g. auth, DB access through API endpoints, and wizard-based onboarding flows with editor-only screens. |
44+
| [`sveltekit-contentful`](https://github.com/stackbit-themes/stackbit-examples/tree/main/sveltekit-contentful) | Basic SvelteKit & Contentful-based content site. |
4045

4146
## Tutorials
4247

@@ -53,5 +58,5 @@ These examples bring a single, interactive and visually-editable component.
5358

5459
| Example | Description |
5560
| :-------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------- |
56-
| [`sb-countdown`](https://github.com/stackbit-themes/stackbit-examples/tree/main/sb-countdown) | A `CountdownSection` component for counting down to a specified date and time. |
57-
| [`sb-typist`](https://github.com/stackbit-themes/stackbit-examples/tree/main/sb-typist) | A `TypistSection` component for a typing animation based on react-typist. |
61+
| [`component-countdown`](https://github.com/stackbit-themes/stackbit-examples/tree/main/component-countdown) | A `CountdownSection` component for counting down to a specified date and time. |
62+
| [`component-typist`](https://github.com/stackbit-themes/stackbit-examples/tree/main/component-typist) | A `TypistSection` component for a typing animation based on react-typist. |

‎angular-contentful/.gitignore

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
8+
# dependencies
9+
/node_modules
10+
11+
# IDEs and editors
12+
/.idea
13+
.project
14+
.classpath
15+
.c9/
16+
*.launch
17+
.settings/
18+
*.sublime-workspace
19+
20+
# IDE - VSCode
21+
.vscode/*
22+
!.vscode/settings.json
23+
!.vscode/tasks.json
24+
!.vscode/launch.json
25+
!.vscode/extensions.json
26+
27+
# misc
28+
/.sass-cache
29+
/connect.lock
30+
/coverage
31+
/libpeerconnection.log
32+
npm-debug.log
33+
testem.log
34+
/typings
35+
36+
# e2e
37+
/e2e/*.js
38+
/e2e/*.map
39+
40+
# System Files
41+
.DS_Store
42+
Thumbs.db
43+
44+
/.angular
45+
46+
# Ignoring environment file to make it auto generated based on .env file
47+
/src/environments/environment.ts
48+
49+
.env

‎angular-contentful/LICENSE

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2015-2016 Contentful GmbH
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is furnished
8+
to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19+
THE SOFTWARE.

‎angular-contentful/README.md

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# Angular & Contentful Starter
2+
3+
Adopted from Contentful's [Product Catalogue demo](https://github.com/contentful-labs/product-catalogue-web.ts).
4+
5+
## Prerequisites
6+
7+
Before you begin, please make sure you have the following:
8+
9+
- Contentful account
10+
- Node v16 or later
11+
12+
## Setup Instructions
13+
14+
The following sections take you through the process of getting this project set up and wired up to Contentful.
15+
16+
### Create New Project
17+
18+
Use the `create-stackbit-app` command to create a new project:
19+
20+
```txt
21+
npx create-stackbit-app@latest --starter angular-starter
22+
```
23+
24+
This will create a new instance of this project in a `angular-starter` directory.
25+
26+
### Create Contentful Space
27+
28+
After signing into Contentful, create a new community (free) space. Note that if you already have an active Contentful account, you may want to [create an organization](https://app.contentful.com/account/organizations/new) to place your new space.
29+
30+
When you're within an organization, you can create a new community space with the web app package.
31+
32+
![Create new Contentful space](./docs/new-community-space.png)
33+
34+
### Generate Management Token
35+
36+
If you don't already have a management token (or _personal access token_), you can generate one. To do so, go into your new empty space, then:
37+
38+
1. Click Settings
39+
1. Chose API Keys
40+
1. Select the Content management tokens tab
41+
1. Click the button to generate a new token
42+
43+
![Generate content management token](./docs/generate-mgmt-token.png)
44+
45+
**⚠️ Take care to store this token as necessary. You will not be able to view again within Contentful.**
46+
47+
### Import Content
48+
49+
Your new project already contains the content for the tutorial. You can import this into Contentful by running the setup command.
50+
51+
```txt
52+
cd tutorial-contentful
53+
npx cross-env CONTENTFUL_SPACE_ID={...} CONTENTFUL_MANAGEMENT_TOKEN={...} npm run import
54+
```
55+
56+
Replace the `{...}` with the appropriate values:
57+
58+
- Space ID can be found in the URL when inside a space.
59+
- Management token is the token you just created (or referenced).
60+
61+
### Generate API Keys
62+
63+
From the same place you generated the management token, you can now generate API access keys.
64+
65+
1. Select the content delivery / preview tokens
66+
1. Choose Add API key
67+
68+
![Generate new API keys](./docs/generate-api-keys.png)
69+
70+
### Set Environment Variables
71+
72+
In your project, duplicate `sample.env` to `.env`. Fill in the values of `CONTENTFUL_SPACE_ID` and `CONTENTFUL_PREVIEW_TOKEN`.
73+
74+
### Run the Project
75+
76+
Now you should be able to run the Next.js development server and see your content.
77+
78+
```txt
79+
npm run dev
80+
```
81+
82+
Visit localhost:3000 and you should see the example content you imported into your new Contentful space.
83+
84+
## Support
85+
86+
If you get stuck along the way, [drop into our Discord server](https://discord.gg/HUNhjVkznH) and send a message in the `#documentation` or `#help` channels.

‎angular-contentful/angular.json

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"stackbit-angular-contentful": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"architect": {
11+
"build": {
12+
"builder": "@angular-devkit/build-angular:browser",
13+
"options": {
14+
"outputPath": "dist",
15+
"index": "src/index.html",
16+
"main": "src/main.ts",
17+
"tsConfig": "src/tsconfig.app.json",
18+
"polyfills": "src/polyfills.ts",
19+
"assets": [
20+
"src/assets",
21+
"src/favicon.ico",
22+
"src/_redirects"
23+
],
24+
"styles": [
25+
"src/styles.css"
26+
],
27+
"scripts": []
28+
},
29+
"configurations": {
30+
"production": {
31+
"optimization": true,
32+
"outputHashing": "all",
33+
"sourceMap": false,
34+
"extractCss": true,
35+
"namedChunks": false,
36+
"aot": true,
37+
"extractLicenses": true,
38+
"vendorChunk": false,
39+
"buildOptimizer": true,
40+
"fileReplacements": [
41+
{
42+
"replace": "src/environments/environment.ts",
43+
"with": "src/environments/environment.prod.ts"
44+
}
45+
]
46+
}
47+
}
48+
},
49+
"serve": {
50+
"builder": "@angular-devkit/build-angular:dev-server",
51+
"options": {
52+
"browserTarget": "stackbit-angular-contentful:build"
53+
},
54+
"configurations": {
55+
"production": {
56+
"browserTarget": "stackbit-angular-contentful:build:production"
57+
}
58+
}
59+
},
60+
"extract-i18n": {
61+
"builder": "@angular-devkit/build-angular:extract-i18n",
62+
"options": {
63+
"browserTarget": "stackbit-angular-contentful:build"
64+
}
65+
},
66+
"test": {
67+
"builder": "@angular-devkit/build-angular:karma",
68+
"options": {
69+
"main": "src/test.ts",
70+
"karmaConfig": "./karma.conf.js",
71+
"polyfills": "src/polyfills.ts",
72+
"tsConfig": "src/tsconfig.spec.json",
73+
"scripts": [],
74+
"styles": [
75+
"src/styles.css"
76+
],
77+
"assets": [
78+
"src/assets",
79+
"src/favicon.ico",
80+
"src/_redirects"
81+
]
82+
}
83+
},
84+
"lint": {
85+
"builder": "@angular-devkit/build-angular:tslint",
86+
"options": {
87+
"tsConfig": [
88+
"src/tsconfig.app.json",
89+
"src/tsconfig.spec.json"
90+
],
91+
"exclude": [
92+
"**/node_modules/**"
93+
]
94+
}
95+
}
96+
}
97+
},
98+
"stackbit-angular-contentful-e2e": {
99+
"root": "",
100+
"sourceRoot": "e2e",
101+
"projectType": "application",
102+
"architect": {
103+
"e2e": {
104+
"builder": "@angular-devkit/build-angular:protractor",
105+
"options": {
106+
"protractorConfig": "./protractor.conf.js",
107+
"devServerTarget": "stackbit-angular-contentful:serve"
108+
}
109+
},
110+
"lint": {
111+
"builder": "@angular-devkit/build-angular:tslint",
112+
"options": {
113+
"tsConfig": [
114+
"e2e/tsconfig.e2e.json"
115+
],
116+
"exclude": [
117+
"**/node_modules/**"
118+
]
119+
}
120+
}
121+
}
122+
}
123+
},
124+
"defaultProject": "stackbit-angular-contentful",
125+
"schematics": {
126+
"@schematics/angular:component": {
127+
"prefix": "app",
128+
"styleext": "css"
129+
},
130+
"@schematics/angular:directive": {
131+
"prefix": "app"
132+
}
133+
},
134+
"cli": {
135+
"analytics": false
136+
}
137+
}

0 commit comments

Comments
 (0)