Add TakeShape + Next.js example

examples/with-takeshape-graphql/.gitignore

@@ -0,0 +1,15 @@
+# dependencies
+/node_modules
+
+# build
+.next
+out
+
+# misc
+.DS_Store
+.env*
+.netlify
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/with-takeshape-graphql/README.md

@@ -0,0 +1,55 @@
+[![TakeShape](https://img.shields.io/badge/cms-takeshape-brightgreen.svg?logoWidth=14&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAABG2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+Gkqr6gAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZHPK0RRFMc/BtEYzZRZKNRLw8qIURMbZSSUpDHKr83MMz/U/Hi99yTZKtspSmz8WvAXsFXWShEpWVhZExum5zyjZpI5t3PP537vPad7zwVHJK1mjJoeyGRNPTwaUmbn5pW6Z5y04cFLS1Q1tKGpqQkq2scdVXa88du1Kp/71xqW4oYKVfXCg6qmm8JjwhOrpmbztrBXTUWXhE+Fu3S5oPCtrceK/GJzsshfNuuR8DA4PMJKsoxjZaym9IywvBxfJr2i/t7Hfokrnp2Zltgu3opBmFFCKIwzwjBBehmQOYifAN2yokJ+z0/+JDnJVWXWWENnmSQpTLpEXZHqcYkJ0eMy0qzZ/f/bVyPRFyhWd4Wg9smy3jqgbgsKecv6PLSswhFUP8JFtpSfO4D+d9HzJc23D+4NOLssabEdON+E5gctqkd/pGpxRyIBryfQOAdN1+BcKPbsd5/je4isy1ddwe4edMp59+I3T6Zn2yrilxMAAAAJcEhZcwAACxMAAAsTAQCanBgAAAJVSURBVGiB7dm/b9NAGMbx70uBMnRhQyA6VMzsiBWJFQYWdthYEP9CN2aG8FdApQpYEBM7A0JCLDCwMVAJIUA8HeIrruPE97O2gx8pSi6SL+/Hd7F9NkyZMuW/jaTLku72XUeRVLhPmude3/VkTQOntUIuwa0HsgM3bqQnLjvSJD3I1Vkjb8zsnWtIugPsuGbtvf55E9it2vfN7GlyFZ57NDTPJJ2JqGUr+0gWwO1JOhtZSxOYjDzdaD8Hfif09xV4ZGa/JF0CrgMb1e9s1F719g8zm63ocyaJ6Ona2FvnozpZ7HNb/geUL7Xt2kYwbSRzAwNxIcA4ZE5gBC4UGI7MBYzExQCDkKdiQU0c8Jp/57nSmfkik4E94Fy8kEnAHnEuncho4ABwLiuRUcAB4VyWIoOBA8S5tCKDgAPGuSwgvYEjwLkcQ3oBR4RzOUI2VxMLkXSRceFcZpL++ozgN+Bj6WoK5AB43wk0s5/ALeBl8ZLy5QC4aWZvvf6DI0Me4SDgKDoS5DEcBJ4HB45cwEHElcxAka04iLwWHRhyKQ4SVhMDQa7EQeJ6sGdkJw4yrOh7QnrhINM9mRNGeuMgExBODBmEA4rc+D0n6UWB24bfJV2LKSgrMALpA4zDMX8+qFr7FWkPX/bN7IlDAlc8tvljZh+qbbaYT8N6wqdlPZ57OSQPowqhdQSjR64kMBrZAKbjmK/oH6d20pILkrbN7LP7QtJt4EbHdu7Badq07CPyP/BkGble4oEcL85lBXL8OJcW5PrgXGrI9cO5VMirfdcxZcqUcjkEtBb8Ina+cYEAAAAASUVORK5CYII=&longCache=true&colorB=5edeb3&colorA=5539d2&style=for-the-badge)](https://www.takeshape.io/)
+
+# Shape Blog Next.js — The Shape Blog Sample Project Built With Next.js
+This is a sample project to get you started building a static website with [TakeShape](https://www.takeshape.io) (TS) and [Next.js](https://nextjs.org/).
+This project references the same Shape Blog content template as the [shape-blog sample project](../shape-blog) but instead of directly generating the page source using the TakeShape Static Site Generator (SSG), it uses the Next.js framework to create a statically-generated  React application.
+
+## Quickstart
+1. [Signup](https://app.takeshape.io/signup) or [login](https://app.takeshape.io/login) at TakeShape.
+1. Create a new project and select the "Shape Blog" template
+1. `git clone https://github.com/takeshape/takeshape-samples takeshape-samples && cd takeshape-samples/shape-blog-nextjs`
+1. `npm install` or `yarn` - This will install all dependencies 
+
+### Connect your project
+1. In your "Shape Blog" TakeShape project, create a new API Key
+1. Create a `.env` file in the project root containing values for your `TAKESHAPE_PROJECT` and `TAKESHAPE_API_KEY`, such as:
+```bash
+TAKESHAPE_PROJECT="YOUR PROJECT ID HERE"
+TAKESHAPE_API_KEY="YOUR API KEY HERE"
+```
+1. `npm run dev` or `yarn dev` -  The server runs on [http://localhost:3000](http://localhost:3000) by default
+1. Have fun playing around with the sample site!
+    - Change some markup a template file and the site will regenerate automatically
+    - Try adding a new field to an existing content type then add it to the corresponding GraphQL query and template
+
+See the [shape-blog README for additional documentation](../shape-blog)
+
+## Deploy
+
+### [ZEIT Now](https://zeit.co/home)
+
+An easy way to deploy Next.js to production is with ZEIT Now, a platform from the creators of Next.js.
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=template=https://github.com/zeit/next.js/tree/canary/examples/with-takeshape-graphql)
+
+Alternatively you can use the `now` CLI.
+```bash
+npm install -g now
+```
+
+You may need to use the `now login` command to authenticate your CLI.
+
+Next, add your TakeShape credentials to Now so that it can use them when running your site:
+
+```bash
+now secrets add takeshape-api-key YOUR-API-KEY
+now secrets add takeshape-project YOUR-PROJECT-ID
+```
+
+Then you can deploy using the `now` command from the project root:
+```bash
+now
+``` 
+
+## Reach out
+If we can make your life easier we want to hear from you at [support@takeshape.io](mailto:support@takeshape.io)

examples/with-takeshape-graphql/netlify.toml

@@ -0,0 +1,3 @@
+[build]
+	publish = "out"
+	command = "yarn export"

examples/with-takeshape-graphql/next.config.js

@@ -0,0 +1,8 @@
+require('dotenv').config()
+
+exports.default = {
+  env: {
+  	TAKESHAPE_API_KEY: process.env.TAKESHAPE_API_KEY,
+  	TAKESHAPE_PROJECT: process.env.TAKESHAPE_PROJECT
+  },
+}

examples/with-takeshape-graphql/now.json

@@ -0,0 +1,12 @@
+{
+  "env": {
+    "TAKESHAPE_API_KEY": "@takeshape-api-key",
+    "TAKESHAPE_PROJECT": "@takeshape-project"
+  },
+  "build": {
+    "env": {
+      "TAKESHAPE_API_KEY": "@takeshape-api-key",
+    	"TAKESHAPE_PROJECT": "@takeshape-project"
+    }
+  }
+}

examples/with-takeshape-graphql/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "shape-blog-nextjs",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "date-fns": "^2.9.0",
+    "dotenv": "^8.2.0",
+    "isomorphic-fetch": "^2.2.1",
+    "next": "^9.2.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "takeshape-routing": "^4.86.0"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "export": "next build && next export"
+  }
+}

examples/with-takeshape-graphql/public/humans.txt

@@ -0,0 +1,18 @@
+/* TEAM */
+Your title: Your name.
+Site: email, link to a contact form, etc.
+Twitter: your Twitter username.
+Location: City, Country.
+
+[...]
+
+/* THANKS */
+Name: name or url
+
+[...]
+
+/* SITE */
+Last update: YYYY/MM/DD
+Standards: HTML5, CSS3, ...
+Components: Modernizr, jQuery, ...
+Software: TakeShape, ...

examples/with-takeshape-graphql/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /