extend gridsome-starter-blog to work with netlify cms

.gitignore

@@ -6,3 +6,4 @@ node_modules
 dist
 .env
 .env.*
+.idea

README.md

@@ -1,6 +1,6 @@
-# Gridsome Blog Starter
+# Netlify CMS template for Gridsome
 
-> A simple, hackable & minimalistic starter for Gridsome that uses Markdown for content.
+> A simple, hackable & minimalistic starter for Gridsome that uses Netlify CMS for content.
 
 ## Features
 - Beautiful and simple design.
@@ -13,9 +13,21 @@
 
 ## Demo URL
 
-https://gridsome-starter-blog.netlify.com
+https://netlifycms-gridsome.suits.at/
 
-## Install
+## Deploy to Netlify
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/suits-at/netlifycms-gridsome)
+
+### Enable Identity
+
+Enable the netlify identity service at https://app.netlify.com/sites/YOUR-SITE/settings/identity. For exact instructions see https://www.netlify.com/docs/identity/. You might want to enable Git Gateway as well https://www.netlify.com/docs/git-gateway/. 
+
+### Edit content
+
+Access `yourwebsite.com/admin`, e.g. `netfliycms-gridsome.netlify.com/admin` or locally this might be  `localhost:3000/admin`.
+
+## Install locally
 
 ### 1. Install Gridsome CLI tool if you don't have
 
@@ -23,7 +35,7 @@ https://gridsome-starter-blog.netlify.com
 
 ### 2. Install this starter
 
-1. `gridsome create my-gridsome-site https://github.com/gridsome/gridsome-starter-blog.git`
+1. `gridsome create my-gridsome-site https://github.com/suits-at/netlifycms-gridsome`
 2. `cd my-gridsome-site` to open folder
 3. `gridsome develop` to start local dev server at `http://localhost:8080`
 4. Happy coding 🎉🙌

content/posts/a-post-with-a-cover.md

@@ -1,12 +1,15 @@
 ---
 title: A post with a cover image
-date: 2019-01-07
-published: true
-tags: ['Markdown', 'Cover Image']
-series: false
-cover_image: ./images/alexandr-podvalny-220262-unsplash.jpg
-canonical_url: false
-description: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."
+date: 2019-01-07T00:00:00.000Z
+tags:
+  - Markdown
+  - Cover Image
+cover_image: /images/uploads/alexandr-podvalny-220262-unsplash.jpg
+description: >-
+  Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
+  Readability, however, is emphasized above all else. A Markdown-formatted
+  document should be publishable as-is, as plain text, without looking like it's
+  been marked up with tags or formatting instructions.
 ---
 
 Readability, however, is emphasized above all else. A Markdown-formatted

content/posts/markdown-test-file.md

@@ -44,14 +44,6 @@ closing hashes don't even need to match the number of hashes
 used to open the header. (The number of opening hashes
 determines the header level.)
 
-
-### Images
-
-Images are added with `![Image Alt](./images/image.jpg)`
-
-![Image](./images/alexandr-podvalny-220262-unsplash.jpg)
-
-
 ### Blockquotes
 
 Markdown uses email-style `>` characters for blockquoting. If you're

content/posts/say-hello-to-gridsome.md

@@ -2,7 +2,6 @@
 title: Say hello to Gridsome 🎉
 date: 2019-02-07
 tags: ['Markdown', 'Releases']
-canonical_url: false
 description: "A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!"
 
 ---

gridsome.config.js

@@ -1,12 +1,12 @@
-// This is where project configuration and plugin options are located. 
+// This is where project configuration and plugin options are located.
 // Learn more: https://gridsome.org/docs/config
 
 // Changes here requires a server restart.
 // To restart press CTRL + C in terminal and run `gridsome develop`
 
 module.exports = {
-  siteName: 'Gridsome Blog Starter',
-  siteDescription: 'A simple, hackable & minimalistic starter for Gridsome that uses Markdown for content.',
+  siteName: 'Netlify CMS Gridsome starter template',
+  siteDescription: 'A simple, hackable & minimalistic starter for Gridsome that uses Netlify CMS for content.',
 
   plugins: [
     {
@@ -39,4 +39,4 @@ module.exports = {
       ]
     }
   },
-}
+}

netlify.toml

@@ -0,0 +1,5 @@
+[build]
+  command = "gridsome build"
+  publish = "dist"
+[build.environment]
+  NODE_VERSION = "10"

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "gridsome-starter-blog",
+  "name": "netlifycms-gridsome",
   "private": true,
   "scripts": {
     "build": "gridsome build",
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "@gridsome/plugin-google-analytics": "^0.1.0",
-    "@gridsome/remark-prismjs": "^0.0.4",
+    "@gridsome/remark-prismjs": "^0.0.5",
     "@gridsome/source-filesystem": "^0.3.0",
     "@gridsome/transformer-remark": "^0.2.0",
-    "gridsome": "^0.5.0"
+    "gridsome": "^0.5.7"
   },
   "devDependencies": {
     "node-sass": "^4.11.0",

src/components/Author.vue

@@ -1,19 +1,17 @@
 <template>
 	<div class="author">
 
-		<g-image alt="Author image" class="author__image" src="~/assets/images/author.jpg" width="180" height="180" blur="5" />
-
 		<h1 v-if="showTitle" class="author__site-title">
 			{{ $static.metaData.siteName }}
 		</h1>
 
 		<p class="author__intro">
-			A simple, hackable & minimalistic starter for Gridsome that uses Markdown for content.
+			A simple, hackable & minimalistic starter for Gridsome that uses Netlify CMS for content.
 		</p>
 
 		<p class="author__links">
-			<a href="//twitter.com/gridsome">Follow on Twitter</a>
-			<a href="//github.com/gridsome/gridsome-starter-blog">GitHub</a>
+			<a href="//twitter.com/suits_at">Follow on Twitter</a>
+			<a href="https://github.com/suits-at/netlifycms-gridsome">GitHub</a>
 		</p>
 
 	</div>
@@ -38,7 +36,7 @@ export default {
 	margin: 0 auto;
 	max-width: 500px;
 	text-align: center;
-	padding: calc(var(--space) / 2) 0;
+	padding-bottom: calc(var(--space) / 2);
 
 	&__image {
 		border-radius: 100%;
@@ -52,7 +50,9 @@ export default {
 	}
 
 	&__site-title {
+		margin: 0 auto;
 		font-size: 1.5em;
+		max-width: 400px;
 	}
 
 	&__links {
@@ -62,4 +62,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

src/index.html

@@ -36,7 +36,19 @@
       })();
     </script>
 
+    <script>
+      if (window.netlifyIdentity) {
+        window.netlifyIdentity.on("init", user => {
+          if (!user) {
+            window.netlifyIdentity.on("login", () => {
+              document.location.href = "/admin/";
+            });
+          }
+        });
+      }
+    </script>
+
     ${app}
     ${scripts}
   </body>
-</html>
+</html>

src/layouts/Default.vue

@@ -3,10 +3,10 @@
 
     <header class="header">
       <div class="header__left">
-        <Logo v-if="showLogo" /> 
+        <Logo v-if="showLogo" />
       </div>
-      
-      <div class="header__right">        
+
+      <div class="header__right">
         <ToggleTheme />
       </div>
     </header>
@@ -17,7 +17,7 @@
 
     <footer class="footer">
       <span class="footer__copyright">Copyright © {{ new Date().getFullYear() }}. </span>
-      <span class="footer__links">Powered by <a href="//gridsome.org"> Gridsome </a></span>
+      <span class="footer__links">Powered by <a href="//www.suits.at"> SUITS </a></span>
     </footer>
 
   </div>

src/pages/Index.vue

@@ -2,7 +2,7 @@
   <Layout :show-logo="false">
     <!-- Author intro -->
     <Author :show-title="true" />
-    
+
     <!-- List posts -->
     <div class="posts">
       <PostCard v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node"/>
@@ -49,7 +49,7 @@ export default {
     PostCard
   },
   metaInfo: {
-    title: 'Hello, world!'
+    title: 'Home'
   }
 }
 </script>

src/templates/Tag.vue

@@ -43,7 +43,7 @@ export default {
     PostCard
   },
   metaInfo: {
-    title: 'Hello, world!'
+    title: 'Tags'
   }
 }
 </script>

static/admin/config.yml

@@ -0,0 +1,22 @@
+backend:
+  name: git-gateway
+  branch: master # Branch to update (optional; defaults to master)
+media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
+public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
+collections:
+  - name: "posts" # Used in routes, e.g., /admin/collections/blog
+    label: "Posts" # Used in the UI
+    folder: "content/posts" # The path to the folder where the documents are stored
+    create: true # Allow users to create new documents in this collection
+    slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
+    extension: 'md'
+    fields: # The fields for each document, usually in front matter
+      - {label: "Title", name: "title", widget: "string"}
+      - {label: "Date", name: "date", widget: "datetime"}
+      - label: "Tags"
+        name: "tags"
+        widget: "list"
+        field: {label: Name, name: name, widget: string, default: "tag"}
+      - {label: "Cover Image", name: "cover_image", widget: "image", required: false}
+      - {label: "Description", name: "description", widget: "markdown"}
+      - {label: "Body", name: "body", widget: "markdown"}

static/admin/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Content Manager</title>
+</head>
+<body>
+<!-- Include the script that builds the page and powers Netlify CMS -->
+<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
+<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+</body>
+</html>