Init

.gitignore

@@ -0,0 +1,8 @@
+*.log
+.cache
+.DS_Store
+src/.temp
+node_modules
+dist
+.env
+.env.*

README.md

@@ -0,0 +1,12 @@
+# Default starter for Gridsome
+`
+### 1. Install Gridsome CLI tool if you don't have
+
+`npm install --global @gridsome/cli`
+
+### 2. Create a Gridsome project
+
+1. `gridsome create my-gridsome-site` to install default starter </li>
+2. `cd my-gridsome-site` to open folder
+3. `gridsome develop` to start local dev server at `http://localhost:8080`
+4. Happy coding 🎉🙌

gridsome.config.js

@@ -0,0 +1,10 @@
+// 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',
+  plugins: []
+}

gridsome.server.js

@@ -0,0 +1,12 @@
+// Server API makes it possible to hook into various parts of Gridsome
+// on server-side and add custom data to the GraphQL data layer.
+// Learn more: https://gridsome.org/docs/server-api
+
+// Changes here requires a server restart.
+// To restart press CTRL + C in terminal and run `gridsome develop`
+
+module.exports = function (api) {
+  api.loadSource(store => {
+    // Use the Data store API here: https://gridsome.org/docs/data-store-api
+  })
+}

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "gridsome-starter-blog",
+  "private": true,
+  "scripts": {
+    "build": "gridsome build",
+    "develop": "gridsome develop",
+    "explore": "gridsome explore"
+  },
+  "dependencies": {
+    "gridsome": "^0.5.0"
+  },
+  "devDependencies": {
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0"
+  }
+}

src/assets/style/_base.scss

@@ -0,0 +1,29 @@
+// Default
+body {
+ 	background-color: var(--bg-color);
+ 	color: var(--body-color);
+ 	transition: color 1s, background-color .5s;
+ 	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  margin:0;
+  padding:0;
+  line-height: 1.5;
+}
+
+a:not(.button) {
+	color: var(--link-color);
+ 	transition: color 1s;
+
+	&:hover {
+		opacity: .8;
+	}
+}
+
+h1,h2,h3,h4,h5,h6 {
+	transition: color 1s;
+	color: var(--title-color);
+}
+
+.bg-highlight {
+	background-color: var(--bg-highlight-color);
+	transition: background-color .5s;
+}

src/assets/style/_reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

src/assets/style/_typography.scss

@@ -0,0 +1,44 @@
+// Generated with https://type-scale.com/
+
+@import url('https://fonts.googleapis.com/css?family=Poppins:400, 600');
+
+html {font-size: 20px;}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 400;
+  line-height: 1.45;
+}
+
+p {
+	margin-bottom: 1.25em;
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+h1, h2, h3, h4, h5 {
+  margin: 2.75rem 0 1rem;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  line-height: 1.15;
+
+  &:first-child {
+  	margin-top: 0;
+  }
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 1.802em;
+}
+
+h2 {font-size: 1.602em;}
+
+h3 {font-size: 1.424em;}
+
+h4 {font-size: 1.266em;}
+
+h5 {font-size: 1.125em;}
+
+small {font-size: 0.889em;}

src/assets/style/_variables.scss

@@ -0,0 +1,25 @@
+// Default variables
+body {
+ 	--bg-color: #F3F7F9;
+ 	--bg-highlight-color: #FFF;
+ 	--body-color: #606060;
+ 	--title-color: #111;
+ 	--link-color: #222;
+  --space: 2.5em;
+}
+
+@media screen and (max-width: 650px) {
+	body {
+		--space: 1.5em;
+	}
+}
+
+
+// Dark styles
+body[data-theme="dark"] {
+ 	--bg-color: #0D2538;
+ 	--bg-highlight-color: rgba(255, 255, 255,.05);
+ 	--body-color: #A7B0B6;
+ 	--title-color: #fff;
+ 	--link-color: #fff;
+}

src/assets/style/index.scss

@@ -0,0 +1,4 @@
+@import 'reset';
+@import 'variables';
+@import 'typography';
+@import 'base';

src/components/Author.vue

@@ -0,0 +1,36 @@
+<template>
+	<div class="author">
+		<g-image class="author__image" src="~/assets/images/author.jpg" width="240" height="240" blur="5" />
+		<h1 class="author__siteTitle">{{ siteTitle }}</h1>
+		<p class="author__intro">A minimalistic and simple blog starter for Gridsome that uses Markdown for content.</p>
+	</div>
+</template>
+
+<script>
+export default {
+	props: ['siteTitle']
+}
+</script>
+
+<style lang="scss">
+.author {
+	margin: 0 auto;
+	max-width: 400px;
+	text-align: center;
+	
+	&__image {
+		border-radius: 100%;
+		width: 120px;
+		height: 120px;
+		margin-bottom: 1em;
+	}
+
+	&__intro {
+		opacity: .8;
+	}
+
+	&__siteTitle {
+		font-size: 1.5em;
+	}
+}
+</style>

src/components/README.md

@@ -0,0 +1,4 @@
+Add components that will be imported to Pages and Layouts to this folder.
+Learn more about components here: https://gridsome.org/docs/components
+
+You can delete this file.

src/components/ToggleTheme.vue

@@ -0,0 +1,47 @@
+<template>
+	<button @click.prevent="toggleTheme" class="toggle-theme">
+			<svg v-if="darkTheme" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+			<svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+		</span>
+	</button>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			darkTheme: false
+		}
+	},
+	methods: {
+		toggleTheme() {
+			this.darkTheme = !this.darkTheme
+
+			// This is using a script that is added in index.html
+			window.__setPreferredTheme(
+	      this.darkTheme ? 'dark' : 'light'
+	    )
+		}
+	},
+	mounted() {
+		if (window.__theme == 'dark') this.darkTheme = true
+	}
+}
+</script>
+
+<style lang="scss">
+.toggle-theme {
+	padding: .8rem 1rem;
+	background-color: transparent;
+	border: 0;
+	color: var(--body-color);
+	cursor: pointer;
+
+	&:hover {
+		opacity: .8
+	}
+	&:focus {
+		outline: none;
+	}
+}
+</style>

src/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html ${htmlAttrs}>
+  <head>
+    ${head}
+  </head>
+  <body ${bodyAttrs}>
+  	<script>
+  		// Add dark / light detection that runs before Vue.js load. Borrowed from overreacted.io
+	    (function() {
+	      window.__onThemeChange = function() {};
+	      function setTheme(newTheme) {
+	        window.__theme = newTheme;
+	        preferredTheme = newTheme;
+	        document.body.setAttribute('data-theme', newTheme);
+	        window.__onThemeChange(newTheme);
+	      }
+
+	      var preferredTheme;
+	      try {
+	        preferredTheme = localStorage.getItem('theme');
+	      } catch (err) { }
+
+	      window.__setPreferredTheme = function(newTheme) {
+	        setTheme(newTheme);
+	        try {
+	          localStorage.setItem('theme', newTheme);
+	        } catch (err) {}
+	      }
+
+	      var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+	      darkQuery.addListener(function(e) {
+	        window.__setPreferredTheme(e.matches ? 'dark' : 'light')
+	      });
+
+	      setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
+	    })();
+	  </script>
+
+    ${app}
+    ${scripts}
+  </body>
+</html>

src/layouts/Default.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="wrapper">
+
+    <header class="header">
+      <div class="header__left">
+        <!-- add anything here --> 
+      </div>
+      <div class="header__right">        
+        <!-- add anything here -->
+        <ToggleTheme />
+      </div>
+    </header>
+
+    <transition name="slide-up" appear>
+      <main class="main">
+        <slot/>
+      </main>
+    </transition>
+
+    <footer class="footer">
+      Copyright © {{ new Date().getFullYear() }} 
+    </footer>
+
+  </div>
+</template>
+
+<script>
+import ToggleTheme from '~/components/ToggleTheme.vue'
+
+export default {
+  components: {
+    ToggleTheme
+  }
+}
+</script>
+
+<style lang="scss">
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top:0;
+  z-index: 10;
+}
+
+.main {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 5vw 15px 0;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space);
+  text-align: center;
+}
+
+.slide-up-enter-active {
+  transition: opacity .6s, transform .6s;
+}
+
+.slide-up-enter {
+  opacity: 0;
+  transform: translateY(15px);
+}
+</style>

src/layouts/README.md

@@ -0,0 +1,5 @@
+Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
+
+Learn more about Layouts: https://gridsome.org/docs/layouts
+
+You can delete this file.

src/main.js

@@ -0,0 +1,11 @@
+// Import main css
+import '~/assets/style/index.scss'
+
+// Import default layout so we don't need to import it everywhere.
+import DefaultLayout from '~/layouts/Default.vue'
+
+// The Client API can be used here. Learn more: gridsome.org/docs/client-api
+export default function (Vue, { router, head, isClient }) {
+  // Set default layout as a global component
+  Vue.component('Layout', DefaultLayout)
+}

src/pages/Index.vue

@@ -0,0 +1,79 @@
+<template>
+  <Layout>
+    
+    <Author site-title="Gridome Blog Starter" />
+    
+    <div class="post bg-highlight" >
+      <h2>My mars trip 2030</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
+      </p>
+    </div>
+
+    <div class="post bg-highlight" >
+      <h2>Lorem ipsum lol</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
+      </p>
+    </div>
+
+    <div class="post bg-highlight">
+      <h2>Vue all the things</h2>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
+      </p>
+    </div>
+
+    <div class="post bg-highlight">
+      <h2>Why speed matters</h2>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
+      </p>
+    </div>
+
+    <div class="post bg-highlight">
+      <h2>A trip to my school</h2>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
+      </p>
+    </div>
+
+
+  </Layout>
+</template>
+
+<script>
+import Author from '~/components/Author.vue'
+
+export default {
+  components: {
+    Author
+  },
+  metaInfo: {
+    title: 'Hello, world!'
+  }
+}
+</script>
+
+<style lang="scss">
+.post {
+  padding: var(--space);
+  margin-top: var(--space);
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px 0 rgba(0,0,0,.02), 1px 1px 15px 0 rgba(0,0,0,.03);
+  transition: transform .3s, background-color .3s, box-shadow .6s;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 1px 10px 30px 0 rgba(0,0,0,.1);
+  }
+  img {
+    // Set image widths
+    width: calc(100% + var(--space) * 2);
+    margin-left: calc(var(--space) * -1);
+  }
+}
+</style>
+

src/pages/README.md

@@ -0,0 +1,5 @@
+Pages are usually used for normal pages or for listing items from a GraphQL collection.
+Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
+Learn more about pages: https://gridsome.org/docs/pages
+
+You can delete this file.

src/templates/README.md

@@ -0,0 +1,7 @@
+Templates for **GraphQL collections** should be added here.
+To create a template for a collection called `WordPressPost`
+create a file named `WordPressPost.vue` in this folder.
+
+Learn more: https://gridsome.org/docs/templates
+
+You can delete this file.

static/README.md

@@ -0,0 +1,3 @@
+Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
+
+This file should be deleted.