Initial commit

maoberlehner · Jan 19, 2019 · 6732878 · 6732878
commit 6732878
Show file tree

Hide file tree

Showing 15 changed files with 8,840 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@vue/app"
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  extends: [
+    `plugin:vue/recommended`,
+    `@avalanche/eslint-config`,
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === `production` ? `error` : `warn`,
+    'no-debugger': process.env.NODE_ENV === `production` ? `error` : `warn`,
+    'vue/component-name-in-template-casing': [`error`,
+      `PascalCase`,
+    ],
+    'vue/no-v-html': false,
+    'vue/html-closing-bracket-spacing': [`error`, {
+      startTag: `never`,
+      endTag: `never`,
+      selfClosingTag: `never`,
+    }],
+  },
+  parserOptions: {
+    parser: `babel-eslint`,
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,30 @@
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.log
+*.orig
+*.rej
+*.swo
+*.swp
+*.tgz
+*.vi
+*.zip
+*~
+
+# OS or Editor folders
+._*
+.cache
+.DS_Store
+.idea
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-project
+*.sublime-workspace
+nbproject
+Thumbs.db
+
+# Folders to ignore
+dist/*
+node_modules
diff --git a/.postcssrc b/.postcssrc
@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "autoprefixer": {}
+  }
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,33 @@
+# How to Use GraphQL with Vue Apollo Components and Netlify Functions
+
+[![Patreon](https://img.shields.io/badge/patreon-donate-blue.svg)](https://www.patreon.com/maoberlehner)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/maoberlehner)
+
+This is an example project for the following article: [How to Use GraphQL with Vue Apollo Components and Netlify Functions](https://markus.oberlehner.net/blog/how-to-use-graphql-with-vue-apollo-components-and-netlify-functions/)
+
+## Build Setup
+
+```bash
+# Install dependencies.
+npm install
+
+# Serve with hot reload.
+npm run serve
+
+# Build for production with minification.
+npm run build
+```
+
+## About
+
+### Author
+
+Markus Oberlehner  
+Website: https://markus.oberlehner.net  
+Twitter: https://twitter.com/MaOberlehner  
+PayPal.me: https://paypal.me/maoberlehner  
+Patreon: https://www.patreon.com/maoberlehner
+
+### License
+
+MIT
diff --git a/package.json b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "how-to-use-graphql-with-vue-apollo-components-and-netlify-functions",
+  "version": "0.1.0",
+  "author": "Markus Oberlehner",
+  "homepage": "https://github.com/maoberlehner/how-to-use-graphql-with-vue-apollo-components-and-netlify-functions",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@avalanche/generic-box-sizing-reset": "^4.0.0-alpha.5",
+    "@avalanche/object-container": "^4.0.0-alpha.8",
+    "@avalanche/object-vertical-spacing": "^4.0.0-alpha.5",
+    "@avalanche/setting-spacings": "^4.0.0-alpha.6",
+    "@vue/cli-plugin-babel": "^3.3.0",
+    "@vue/cli-service": "^3.3.0",
+    "node-sass": "^4.11.0",
+    "node-sass-magic-importer": "^5.3.0",
+    "reset-css": "^4.0.1",
+    "sass-loader": "^7.1.0",
+    "vue": "^2.5.22",
+    "vue-template-compiler": "^2.5.22"
+  },
+  "devDependencies": {
+    "@avalanche/eslint-config": "^3.0.0",
+    "@vue/cli-plugin-eslint": "^3.3.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-vue": "^5.1.0"
+  },
+  "browserslist": [
+    ">0.25%",
+    "not ie 10",
+    "not op_mini all"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>How to Use GraphQL with Vue Apollo Components and Netlify Functions</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="App o-container o-container--s o-vertical-spacing o-vertical-spacing--xl">
+    <h1>How to Use GraphQL with Vue Apollo Components and Netlify Functions</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: `App`,
+};
+</script>
+
+<style lang="scss">
+@import './assets/scss/settings/**/*';
+@import './assets/scss/generic/**/*';
+@import '{
+  .o-container,
+  .o-container--s,
+} from ~@avalanche/object-container';
+@import '{
+  .o-vertical-spacing,
+  .o-vertical-spacing--xl,
+} from ~@avalanche/object-vertical-spacing';
+
+.App {
+  padding-top: setting-spacing(xl);
+  padding-bottom: setting-spacing(xl);
+
+  h1 {
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/assets/scss/generic/_base.scss b/src/assets/scss/generic/_base.scss
@@ -0,0 +1,54 @@
+@import '~@avalanche/generic-box-sizing-reset';
+@import '~reset-css/sass/reset';
+
+// 1. Usually a larger line height is beneficial
+//    for blocks of text, but we want to have a
+//    rather small line height for our basic UI
+//    elements so we can apply uniform spacings
+//    using margins and paddings. We'll add an
+//    extra CSS class with a larger line height
+//    to apply to blocks of text.
+// 2. A kind of “dirty” white is more pleasing
+//    to the eyes.
+// 3. A kind of “almost black but not quite black”
+//    is also more pleasing to the eyes.
+body {
+  line-height: 1.25; // 1
+  background-color: #f9f9f9; // 2
+  color: #222; // 3
+  font-family: sans-serif;
+}
+
+// 1. Larger font sizes need less line height.
+h1,
+h2,
+h3,
+h4,
+h5 {
+  line-height: 1.2; // 1
+  font-weight: 700;
+}
+
+h1 {
+  font-size: 2.027em;
+}
+
+h2 {
+  font-size: 1.802em;
+}
+
+h3 {
+  font-size: 1.602em;
+}
+
+h4 {
+  font-size: 1.424em;
+}
+
+h5 {
+  font-size: 1.266em;
+}
+
+h6 {
+  font-size: 1.125em;
+}
diff --git a/src/assets/scss/settings/_spacings.scss b/src/assets/scss/settings/_spacings.scss
@@ -0,0 +1 @@
+@import '~@avalanche/setting-spacings';
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App),
+}).$mount(`#app`);
diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,12 @@
+const nodeSassMagicImporter = require(`node-sass-magic-importer`);
+
+module.exports = {
+  css: {
+    loaderOptions: {
+      sass: {
+        importer: nodeSassMagicImporter(),
+      },
+    },
+  },
+  lintOnSave: false,
+};