chore: init starter

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,37 @@
+# Custom
+storybook-static
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2020 <copyright holders>
+
+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.

README.md

@@ -0,0 +1,184 @@
+# Slice Library Next.js Starter
+
+> Looking for the Vue.js counterpart? [Check out the Nuxt.js starter](https://github.com/prismicio-community/slice-library-starter-nuxt).
+
+A starter to create your slice library with [Next.js](https://nextjs.org) and [Slice Machine](https://slicemachine.dev) for [#SliceContest](https://prismic.io/blog/slice-contest). This document is here to help you through the whole process of creating your library but is not comprehensive to what you can do, unleash your creativity!
+
+- [📚  Useful Links](#user-content--useful-links)
+- [🏁  Getting Started](#user-content--getting-started)
+  - [Setting up Your Project](#setting-up-your-project)
+  - [Using the Prismic CLI](#using-the-prismic-cli)
+  - [Setting up Prismic and Slice Machine](#setting-up-prismic-and-slice-machine)
+- [👩‍💻  Developing](#user-content--developing)
+  - [Creating a Slice](#creating-a-slice)
+  - [Launching the Slice Builder](#launching-the-slice-builder)
+- [🚀  Deploying Your Storybook](#user-content--deploying-your-storybook)
+  - [Hosting on Netlify](#hosting-on-netlify)
+  - [Hosting on Vercel](#hosting-on-vercel)
+- [☑️  Submission Checklist](#user-content--submission-checklist)
+
+## 📚  Useful Links
+
+- [📣  Contest Announcement Blog Post](https://prismic.io/blog/slice-contest), check rules and additional information there!
+- [🌐  Contest Forum Section](https://community.prismic.io/c/slice-machine/slicecontest), get help and share feedback here~
+- [🔪  Slice Machine Documentation](https://www.slicemachine.dev/documentation), to learn more about Slice Machine
+- [📖  Prismic React Documentation](https://prismic.io/docs/reactjs/getting-started/getting-started-from-scratch), to learn more about Prismic with React
+
+## 🏁  Getting Started
+
+Here's a step-by-step tutorial to get started using this starter.
+
+### Setting up Your Project
+
+Start by [forking this repository](https://github.com/prismicio-community/slice-library-starter-next/fork), this will create a copy of this repository on your GitHub account.
+
+Once the repository is forked, you can clone it locally and install its dependencies:
+
+```bash
+$ git clone https://github.com/<your_username>/slice-library-starter-next
+$ cd slice-library-starter-next
+$ yarn install # if you use npm: `$ npm install`
+```
+
+While your package manager installs the dependencies, you can already update the [LICENSE](./LICENSE) file to replace `<copyright holders>` with your name. You can also update the [package.json](./package.json) file to fill the `author` field~
+
+### Using the Prismic CLI
+
+For convenience and to be sure you are running the correct version of Prismic CLI it has been installed as part of `devDependencies` and aliased to the `prismic` script in this project. Thanks to that you can run the CLI as a package script:
+
+```bash
+# Using Yarn
+$ yarn prismic <command> <options>
+# Using npm
+$ npm run prismic -- <command> <options>
+```
+
+If you still wish to use the CLI installed globally make sure you are running version `3.8.3-beta.0` or greater:
+
+```bash
+# Installing the CLI globally using Yarn (optional)
+$ yarn global add [email protected]
+# Installing the CLI globally using npm (optional)
+$ npm install --global [email protected]
+
+# You can then use the CLI globally...
+$ prismic <command> <options>
+```
+
+> In the following sections only the Yarn version from above (recommended) will be used in the examples for the sake of simplicity.
+
+### Setting up Prismic and Slice Machine
+
+If you do not own a Prismic account yet you can **create one** for free [here](https://prismic.io/dashboard/signup?redirectUri=/dashboard) or by using the CLI:
+
+```bash
+$ yarn prismic signup
+# The CLI will then guide you through the process...
+```
+
+Once you have a Prismic account, or if you already had one, **log in** within the CLI:
+
+```bash
+$ yarn prismic login
+# The CLI will then guide you through the process...
+```
+
+When logged in, you can then **bootstrap** your Slice Machine project, this will create you a Prismic repository for this project:
+
+```bash
+$ yarn prismic sm --bootstrap
+# The CLI will then prompt you for a Prismic repository name...
+```
+
+Finally, and since that's a requirement for this contest, you will want to bootstrap a Storybook project. Thankfully Slice Machine comes with a handy command for that:
+
+```bash
+$ yarn prismic sm --add-storybook
+```
+
+This should create a simple Storybook inside your project. Bear in mind though that this one is still quite basic, feel free to go fancy by adding [addons](https://storybook.js.org/addons) and more! Here's an example of a more elaborated Storybook documentation of a slice library for inspiration: [sms-hoy-storybook.netlify.app](https://sms-hoy-storybook.netlify.app)
+
+Well done! You are now ready to start developing your slice library with Slice Machine.
+
+## 👩‍💻 &nbsp;Developing
+
+Some quick reminders to help you developing your library with Slice Machine and the Slice Builder. Please refer to the [documentation](https://www.slicemachine.dev/documentation) if you are looking for more in-depth knowledge.
+
+### Creating a Slice
+
+To create a slice run:
+
+```bash
+$ yarn prismic sm --create-slice
+# The CLI will then guide you through the process...
+```
+
+This will create a new directory inside `./slices` named after the provided slice name. Inside it `index.js` is the slice component itself.
+
+Slices behave just like any regular Next.js component but receives a `slice` prop containing its slice fields. You can install additional dependencies to the project like Tailwind CSS or Theme UI, although you might need to update the Storybook configuration and stories to reflect those.
+
+For comprehensive documentation about creating your own slices check the dedicated [documentation](https://www.slicemachine.dev/documentation/create-your-own-slices-components).
+
+### Launching the Slice Builder
+
+To launch the Slice Builder you need to run 2 terminals: one for Storybook, one for the Slice Builder itself.
+
+```bash
+# On a first terminal
+$ yarn storybook # or with npm: `$ npm run storybook`
+
+# On the second terminal
+$ yarn prismic sm --develop
+```
+
+This will launch Storybook on port `8888` and the Slice Builder on port `9999`, you can open a third terminal to create slices from or launch other commands...
+
+> ℹ We are aware that it will be more convenient to launch Storybook and the Slice Builder with a single command and are working on it~
+
+> ⚠ We noticed that in some rare case you can get stuck in a `401 [Unauthorized]` loop prompting you to log in when running the Slice Machine develop command. If this happens to you check if your Prismic repository was created, if not, try running `$ yarn prismic login` and `$ yarn prismic sm --bootstrap` again.
+
+For comprehensive documentation about using the Slice Builder check the dedicated [documentation](https://www.slicemachine.dev/documentation/slice-builder#using-the-slice-builder).
+
+## 🚀 &nbsp;Deploying Your Storybook
+
+One of the requirements of this contest if to have your Storybook documentation hosted somewhere.
+
+If you are not familiar with hosting no worries! We recommend to either use [Netlify](https://netlify.com) **or** [Vercel](https://vercel.com) and have done most of the setup for you already!
+
+You only need to host the documentation once, no need to have it at multiple location, so just pick one that works for you~
+
+### Hosting on Netlify
+
+To host your Storybook documentation on Netlify go to: [app.netlify.com/start](https://app.netlify.com/start), you might need to create an account or to log in if not already.
+
+Once on the page click "**GitHub**". After granting access to your account you should now be able to see a list of your repositories. Pick the one you worked on.
+
+On the last build options step every default should be good. We already took care of configuring the build command and publish directory through a [netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration/) file. Click "**Deploy site**" and wait for the magic to happen.
+
+Once the build is finished, head over to the "**Site overview**" tab. The URL of the hosted documentation should be available at the top left of the tab (if Netlify is still building it will display you the build status instead). You can customize it by changing the site name under the "**Site settings**" tab.
+
+Congratulations! You documentation is now hosted and will update itself whenever you commit to your repository.
+
+### Hosting on Vercel
+
+To host your Storybook documentation on Vercel go to: [vercel.com/import](https://vercel.com/import).
+
+Once on the page click "**Continue**" under "**Import Git Repository**", you might need to create an account or to log in if not already.
+After you logged in, paste the GitHub repository URL you worked on in the dedicated field and click "**Continue**", Vercel might ask for access to your account.
+
+On the last build options step select "**Other**" under "**Framework Preset**", expand the "**Build and Output Settings**" options and set "**Output Directory**" to `out`. You can then click "**Deploy**" and wait for the magic to happen.
+
+Once the build is finished and successful, you should be redirected to a success page. The URL of the hosted documentation should be available through the "**Visit**" button. You can customize it by changing the site name under the "**Settings**" tab of the new site dashboard.
+
+Congratulations! You documentation is now hosted and will update itself whenever you commit to your repository.
+
+## ☑️ &nbsp;Submission Checklist
+
+To keep track of your progress and to be sure not to miss anything here's a simple checklist you can use. Once everything ticks you should be ready to submit your library to us by tagging [@prismicio](https://twitter.com/prismicio) with #SliceContest on Twitter.
+
+- [ ] My library contains at least **5 different slices**
+- [ ] I have updated the [LICENSE](./LICENSE) to credit myself for my library
+- [ ] The Storybook documentation is hosted here: <!-- https://example.com -->
+- [ ] My library does not contain any non-public licensed assets
+
+> ☝️ For comprehensive rules refer to the contest [blog post](https://prismic.io/blog/slice-contest).

custom_types/index.json

@@ -0,0 +1,8 @@
+[
+  {
+    "id": "page",
+    "name": "Page",
+    "repeatable": true,
+    "value": "page.json"
+  }
+]

custom_types/page.json

@@ -0,0 +1,63 @@
+{
+  "Page": {
+    "uid": {
+      "type": "UID",
+      "config": {
+        "label": "UID",
+        "placeholder": "unique-identifier-eg-homepage"
+      }
+    },
+    "body": {
+      "type": "Slices",
+      "fieldset": "Slice zone",
+      "config": {
+        "labels": {},
+        "choices": {}
+      }
+    }
+  },
+  "SEO Metadata": {
+    "meta_title": {
+      "type": "Text",
+      "config": {
+        "label": "Meta Title",
+        "placeholder": "My title for Search Engine"
+      }
+    },
+    "meta_description": {
+      "type": "Text",
+      "config": {
+        "label": "Meta Description",
+        "placeholder": "The description that will appear in search engine"
+      }
+    },
+    "social_cards": {
+      "type": "Group",
+      "config": {
+        "fields": {
+          "social_card_image": {
+            "type": "Image",
+            "config": {
+              "constraint": {},
+              "thumbnails": [],
+              "label": "Social Card Image"
+            }
+          },
+          "social_card_title": {
+            "type": "Text",
+            "config": {
+              "label": "Social Card Title"
+            }
+          },
+          "social_card_description": {
+            "type": "Text",
+            "config": {
+              "label": "Social card description"
+            }
+          }
+        },
+        "label": "Social Cards - Facebook & Twitter"
+      }
+    }
+  }
+}

netlify.toml

@@ -0,0 +1,8 @@
+# Global context
+[build]
+  # Base directory
+  base = ""
+  # Build command
+  command = "yarn build"
+  # Build directory
+  publish = "out/"

next.config.js

@@ -0,0 +1,3 @@
+const withTM = require("next-transpile-modules")(["next-slicezone"]);
+
+module.exports = withTM();

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "slice-library-starter-next",
+  "version": "0.0.0",
+  "description": "An awesome Slice Library made with Next.js",
+  "author": "<author>",
+  "license": "MIT",
+  "main": "slices/index.js",
+  "scripts": {
+    "next:dev": "next dev",
+    "next:build": "next build",
+    "next:start": "next start",
+    "next:export": "next export",
+    "build": "yarn build-storybook && shx mv storybook-static out",
+    "prepublishOnly": "node ./node_modules/sm-commons/scripts/bundle",
+    "prismic": "prismic",
+    "slicemachine": "start-slicemachine --port 9999"
+  },
+  "dependencies": {
+    "next": "^10.0.0",
+    "next-slicezone": "^0.0.10",
+    "next-transpile-modules": "^4.1.0",
+    "prismic-javascript": "^3.0.2",
+    "prismic-reactjs": "^1.3.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "prismic-cli": "3.8.3-beta.0",
+    "shx": "^0.3.3",
+    "slice-machine-ui": "^0.0.38",
+    "sm-commons": "^0.0.23"
+  }
+}