stackbit-themes · eladroz · Aug 9, 2022 · Aug 8, 2022 · Aug 8, 2022 · Aug 8, 2022
diff --git a/README.md b/README.md
@@ -8,35 +8,40 @@ Have an idea of an example we should add? [Create an issue](https://github.com/s
 
 ## Minimal Starters
 
-Starters are basic Stackbit projects that bring some specific combination of _the basics_.
+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.
 
 | Example                                                                             | Description                               |
 | :---------------------------------------------------------------------------------- | :---------------------------------------- |
 | [`nextjs-starter`](https://github.com/stackbit-themes/nextjs-starter)               | The essential JavaScript building blocks. |
-| [`ts-mui-nextjs-starter`](https://github.com/stackbit-themes/ts-mui-nextjs-starter) | TypeScript + MUI components               |
-| [`contentful-starter`](https://github.com/stackbit-themes/contentful-starter)       | Contentful as the content source.         |
+| [`ts-mui-nextjs-starter`](https://github.com/stackbit-themes/ts-mui-nextjs-starter) | TypeScript + MUI components.               |
+| [`contentful-starter`](https://github.com/stackbit-themes/contentful-starter)       | Minimal Next.js site with Contentful as the content source.         |
 
-## Full Starters
+## Full Websites Demos
 
-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.
+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.
 
-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/).
+You can run these locally, but each of these sites is available to [demo immediately in the Stackbit app](https://jamstack.new/).
 
 | Example                                                                                         | Description                                                                  |
 | :---------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- |
-| [`personal-nextjs-theme`](https://github.com/stackbit-themes/personal-nextjs-theme)             | A stylistic site to showcase a portfolio.                                    |
-| [`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. |
 | [`starter-nextjs-theme`](https://github.com/stackbit-themes/starter-nextjs-theme)               | A beautifully simple site that can be flexed to fit your needs.              |
+| [`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. |
+| [`personal-nextjs-theme`](https://github.com/stackbit-themes/personal-nextjs-theme)             | A stylistic site to showcase a portfolio.                                    |
 
-## Projects
+## Example Projects
 
-Project-based examples are built to show one or two patterns in practice.
+Showcase implementation & integration patterns in practice.
 
 | Example                                                                                           | Description                                                                         |
 | :------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------- |
-| [`dynamic-app`](https://github.com/stackbit-themes/stackbit-examples/tree/main/dynamic-app)       | A showcase of multiple capabilities like authentication and workflow-based content. |
 | [`algolia-search`](https://github.com/stackbit-themes/stackbit-examples/tree/main/algolia-search) | On-demand statically generated pages, searchable with Algolia                       |
-| [`chakra-next`](https://github.com/stackbit-themes/stackbit-examples/tree/main/chakra-next)       | Simple project using [Chakra UI](https://chakra-ui.com/)                            |
+| [`angular-contentful`](https://github.com/stackbit-themes/stackbit-examples/tree/main/angular-contentful)       | Basic Angular & Contentful-based Product Catalog site.         |
+| [`chakra-ui`](https://github.com/stackbit-themes/stackbit-examples/tree/main/chakra-ui)       | A simple site using [Chakra UI](https://chakra-ui.com/).                            |
+| [`cloudinary-contentful`](https://github.com/stackbit-themes/stackbit-examples/tree/main/cloudinary-contentful) | Image management & per-device responsive optimization with Cloudinary.                       |
+| [`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                  |
+| [`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.                       |
+| [`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. |
+| [`sveltekit-contentful`](https://github.com/stackbit-themes/stackbit-examples/tree/main/sveltekit-contentful)       | Basic SvelteKit & Contentful-based content site.         |
 
 ## Tutorials
 
@@ -53,5 +58,5 @@ These examples bring a single, interactive and visually-editable component.
 
 | Example                                                                                       | Description                                                                    |
 | :-------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------- |
-| [`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. |
-| [`sb-typist`](https://github.com/stackbit-themes/stackbit-examples/tree/main/sb-typist)       | A `TypistSection` component for a typing animation based on react-typist.      |
+| [`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. |
+| [`component-typist`](https://github.com/stackbit-themes/stackbit-examples/tree/main/component-typist)       | A `TypistSection` component for a typing animation based on react-typist.      |
diff --git a/angular-contentful/.gitignore b/angular-contentful/.gitignore
@@ -0,0 +1,49 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
+
+/.angular
+
+# Ignoring environment file to make it auto generated based on .env file
+/src/environments/environment.ts
+
+.env
diff --git a/angular-contentful/LICENSE b/angular-contentful/LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2015-2016 Contentful GmbH
+
+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.
diff --git a/angular-contentful/README.md b/angular-contentful/README.md
@@ -0,0 +1,86 @@
+# Angular & Contentful Starter
+
+Adopted from Contentful's [Product Catalogue demo](https://github.com/contentful-labs/product-catalogue-web.ts).
+
+## Prerequisites
+
+Before you begin, please make sure you have the following:
+
+- Contentful account
+- Node v16 or later
+
+## Setup Instructions
+
+The following sections take you through the process of getting this project set up and wired up to Contentful.
+
+### Create New Project
+
+Use the `create-stackbit-app` command to create a new project:
+
+```txt
+npx create-stackbit-app@latest --starter angular-starter
+```
+
+This will create a new instance of this project in a `angular-starter` directory.
+
+### Create Contentful Space
+
+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.
+
+When you're within an organization, you can create a new community space with the web app package.
+
+![Create new Contentful space](./docs/new-community-space.png)
+
+### Generate Management Token
+
+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:
+
+1. Click Settings
+1. Chose API Keys
+1. Select the Content management tokens tab
+1. Click the button to generate a new token
+
+![Generate content management token](./docs/generate-mgmt-token.png)
+
+**⚠️ Take care to store this token as necessary. You will not be able to view again within Contentful.**
+
+### Import Content
+
+Your new project already contains the content for the tutorial. You can import this into Contentful by running the setup command.
+
+```txt
+cd tutorial-contentful
+npx cross-env CONTENTFUL_SPACE_ID={...} CONTENTFUL_MANAGEMENT_TOKEN={...} npm run import
+```
+
+Replace the `{...}` with the appropriate values:
+
+- Space ID can be found in the URL when inside a space.
+- Management token is the token you just created (or referenced).
+
+### Generate API Keys
+
+From the same place you generated the management token, you can now generate API access keys.
+
+1. Select the content delivery / preview tokens
+1. Choose Add API key
+
+![Generate new API keys](./docs/generate-api-keys.png)
+
+### Set Environment Variables
+
+In your project, duplicate `sample.env` to `.env`. Fill in the values of `CONTENTFUL_SPACE_ID` and `CONTENTFUL_PREVIEW_TOKEN`.
+
+### Run the Project
+
+Now you should be able to run the Next.js development server and see your content.
+
+```txt
+npm run dev
+```
+
+Visit localhost:3000 and you should see the example content you imported into your new Contentful space.
+
+## Support
+
+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.
diff --git a/angular-contentful/angular.json b/angular-contentful/angular.json
@@ -0,0 +1,137 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "stackbit-angular-contentful": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/_redirects"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "stackbit-angular-contentful:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "stackbit-angular-contentful:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "stackbit-angular-contentful:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/_redirects"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "stackbit-angular-contentful-e2e": {
+      "root": "",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "stackbit-angular-contentful:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "stackbit-angular-contentful",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}