copy gridsome example from vercel/vercel (#1012)

framework-boilerplates/gridsome/.gitignore

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

framework-boilerplates/gridsome/.vercelignore

@@ -0,0 +1 @@
+README.md

framework-boilerplates/gridsome/README.md

@@ -0,0 +1,21 @@
+![Gridsome Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/gridsome.svg)
+
+# Gridsome Example
+
+This directory is a brief example of a [Gridsome](https://gridsome.org/) app that can be deployed to Vercel with zero configuration.
+
+## Deploy Your Own
+
+Deploy your own Gridsome project with Vercel.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/framework-boilerplates/gridsome&template=gridsome)
+
+_Live Example: https://gridsome-template.vercel.app_
+
+### How We Created This Example
+
+To get started with Gridsome for deployment with Vercel, you can use the [Gridsome CLI](https://gridsome.org/docs/gridsome-cli/) to initialize the project:
+
+```shell
+$ gridsome create my-website
+```

framework-boilerplates/gridsome/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 require a server restart.
+// To restart press CTRL + C in terminal and run `gridsome develop`
+
+module.exports = {
+  siteName: 'Gridsome',
+  plugins: [],
+};

framework-boilerplates/gridsome/gridsome.server.js

@@ -0,0 +1,16 @@
+// 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 require a server restart.
+// To restart press CTRL + C in terminal and run `gridsome develop`
+
+module.exports = function(api) {
+  api.loadSource(({ addContentType }) => {
+    // Use the Data Store API here: https://gridsome.org/docs/data-store-api
+  });
+
+  api.createPages(({ createPage }) => {
+    // Use the Pages API here: https://gridsome.org/docs/pages-api
+  });
+};

framework-boilerplates/gridsome/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "gridsome",
+  "private": true,
+  "scripts": {
+    "build": "gridsome build",
+    "develop": "gridsome develop",
+    "dev": "gridsome develop --port $PORT",
+    "explore": "gridsome explore"
+  },
+  "dependencies": {
+    "gridsome": "0.7.23"
+  },
+  "engines": {
+    "node": "<17"
+  }
+}

framework-boilerplates/gridsome/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.

framework-boilerplates/gridsome/src/layouts/Default.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="layout">
+    <header class="header">
+      <strong>
+        <g-link to="/">{{ $static.metaData.siteName }}</g-link>
+      </strong>
+      <nav class="nav">
+        <g-link class="nav__link" to="/">Home</g-link>
+        <g-link class="nav__link" to="/about">About</g-link>
+      </nav>
+    </header>
+    <slot/>
+  </div>
+</template>
+
+<static-query>
+query {
+  metaData {
+    siteName
+  }
+}
+</static-query>
+
+<style>
+body {
+  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  margin:0;
+  padding:0;
+  line-height: 1.5;
+}
+
+.layout {
+  max-width: 760px;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  height: 80px;
+}
+
+.nav__link {
+  margin-left: 20px;
+}
+</style>

framework-boilerplates/gridsome/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.

framework-boilerplates/gridsome/src/main.js

@@ -0,0 +1,9 @@
+// This is the main.js file. Import global CSS and scripts here.
+// The Client API can be used here. Learn more: gridsome.org/docs/client-api
+
+import DefaultLayout from '~/layouts/Default.vue';
+
+export default function(Vue, { router, head, isClient }) {
+  // Set default layout as a global component
+  Vue.component('Layout', DefaultLayout);
+}

framework-boilerplates/gridsome/src/pages/About.vue

@@ -0,0 +1,14 @@
+<template>
+  <Layout>
+    <h1>About us</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
+  </Layout>
+</template>
+
+<script>
+export default {
+  metaInfo: {
+    title: 'About us'
+  }
+}
+</script>

framework-boilerplates/gridsome/src/pages/Index.vue

@@ -0,0 +1,33 @@
+<template>
+  <Layout>
+
+    <!-- Learn how to use images here: https://gridsome.org/docs/images -->
+    <g-image alt="Example image" src="~/favicon.png" width="135" />
+
+    <h1>Hello, world!</h1>
+
+    <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>
+
+    <p class="home-links">
+      <a href="https://gridsome.org/docs" target="_blank" rel="noopener">Gridsome Docs</a>
+      <a href="https://github.com/gridsome/gridsome" target="_blank" rel="noopener">GitHub</a>
+    </p>
+
+  </Layout>
+</template>
+
+<script>
+export default {
+  metaInfo: {
+    title: 'Hello, world!'
+  }
+}
+</script>
+
+<style>
+.home-links a {
+  margin-right: 1rem;
+}
+</style>

framework-boilerplates/gridsome/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.

framework-boilerplates/gridsome/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.

framework-boilerplates/gridsome/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.