mirror of
https://github.com/LukeHagar/vercel.git
synced 2025-12-10 12:57:47 +00:00
[examples] Make -functions example the default (#3541)
* Remove now-examples references * Adjust gatsby example * Adjust svelte example * Adjust vanilla example
This commit is contained in:
Andy
@@ -44,16 +44,9 @@ export default withApiHandler(async function(req: NowRequest, res: NowResponse)
|
|||||||
}
|
}
|
||||||
|
|
||||||
const example = segment.slice(0, -ext.length);
|
const example = segment.slice(0, -ext.length);
|
||||||
let directory;
|
|
||||||
|
|
||||||
if (Number(req.query.version) === 1) {
|
|
||||||
// The old cli is pinned to a specific commit hash
|
|
||||||
await extract('https://github.com/zeit/now-examples/archive/7c7b27e49b8b17d0d3f0e1604dc74fd005cd69e3.zip', TMP_DIR);
|
|
||||||
directory = `${TMP_DIR}/now-examples-7c7b27e49b8b17d0d3f0e1604dc74fd005cd69e3/${example}`;
|
|
||||||
} else {
|
|
||||||
await extract('https://github.com/zeit/now/archive/master.zip', TMP_DIR);
|
await extract('https://github.com/zeit/now/archive/master.zip', TMP_DIR);
|
||||||
directory = `${TMP_DIR}/now-master/examples/${example}`;
|
const directory = `${TMP_DIR}/now-master/examples/${example}`;
|
||||||
}
|
|
||||||
|
|
||||||
if (!isDirectory(directory)) {
|
if (!isDirectory(directory)) {
|
||||||
return notFound(res, `Example '${example}' was not found.`);
|
return notFound(res, `Example '${example}' was not found.`);
|
||||||
|
|||||||
@@ -8,18 +8,6 @@ export default withApiHandler(async function(
|
|||||||
req: NowRequest,
|
req: NowRequest,
|
||||||
res: NowResponse
|
res: NowResponse
|
||||||
) {
|
) {
|
||||||
if (Number(req.query.version) === 1) {
|
|
||||||
// The old cli is pinned to a specific commit hash
|
|
||||||
await extract(
|
|
||||||
'https://github.com/zeit/now-examples/archive/7c7b27e49b8b17d0d3f0e1604dc74fd005cd69e3.zip',
|
|
||||||
'/tmp'
|
|
||||||
);
|
|
||||||
const exampleList = summary(
|
|
||||||
'/tmp/now-examples-7c7b27e49b8b17d0d3f0e1604dc74fd005cd69e3'
|
|
||||||
);
|
|
||||||
return res.send(exampleList);
|
|
||||||
}
|
|
||||||
|
|
||||||
await extract('https://github.com/zeit/now/archive/master.zip', '/tmp');
|
await extract('https://github.com/zeit/now/archive/master.zip', '/tmp');
|
||||||
const exampleList = summary('/tmp/now-master/examples');
|
const exampleList = summary('/tmp/now-master/examples');
|
||||||
|
|
||||||
|
|||||||
70
examples/gatsby-functions/.gitignore
vendored
70
examples/gatsby-functions/.gitignore
vendored
@@ -1,70 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
# Runtime data
|
|
||||||
pids
|
|
||||||
*.pid
|
|
||||||
*.seed
|
|
||||||
*.pid.lock
|
|
||||||
|
|
||||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
||||||
lib-cov
|
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
|
||||||
coverage
|
|
||||||
|
|
||||||
# nyc test coverage
|
|
||||||
.nyc_output
|
|
||||||
|
|
||||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
|
||||||
.grunt
|
|
||||||
|
|
||||||
# Bower dependency directory (https://bower.io/)
|
|
||||||
bower_components
|
|
||||||
|
|
||||||
# node-waf configuration
|
|
||||||
.lock-wscript
|
|
||||||
|
|
||||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
|
||||||
build/Release
|
|
||||||
|
|
||||||
# Dependency directories
|
|
||||||
node_modules/
|
|
||||||
jspm_packages/
|
|
||||||
|
|
||||||
# Typescript v1 declaration files
|
|
||||||
typings/
|
|
||||||
|
|
||||||
# Optional npm cache directory
|
|
||||||
.npm
|
|
||||||
|
|
||||||
# Optional eslint cache
|
|
||||||
.eslintcache
|
|
||||||
|
|
||||||
# Optional REPL history
|
|
||||||
.node_repl_history
|
|
||||||
|
|
||||||
# Output of 'npm pack'
|
|
||||||
*.tgz
|
|
||||||
|
|
||||||
# dotenv environment variables file
|
|
||||||
.env
|
|
||||||
.env.build
|
|
||||||
|
|
||||||
# gatsby files
|
|
||||||
.cache/
|
|
||||||
public
|
|
||||||
|
|
||||||
# Mac files
|
|
||||||
.DS_Store
|
|
||||||
|
|
||||||
# Yarn
|
|
||||||
yarn-error.log
|
|
||||||
.pnp/
|
|
||||||
.pnp.js
|
|
||||||
# Yarn Integrity file
|
|
||||||
.yarn-integrity
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
yarn.lock
|
|
||||||
README.md
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
# Gatsby Example
|
|
||||||
|
|
||||||
This directory is a brief example of a [Gatsby](https://www.gatsbyjs.org/) app with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction) that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own Gatsby project, along with Serverless Functions, with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/gatsby-functions)
|
|
||||||
|
|
||||||
_Live Example: https://gatsby-functions.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started with Gatsby on Now, you can use the [Gatsby CLI](https://www.gatsbyjs.org/docs/gatsby-cli/) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ gatsby new gatsby-site
|
|
||||||
```
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new Gatsby project, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
/**
|
|
||||||
* Implement Gatsby's Browser APIs in this file.
|
|
||||||
*
|
|
||||||
* See: https://www.gatsbyjs.org/docs/browser-apis/
|
|
||||||
*/
|
|
||||||
|
|
||||||
// You can delete this file if you're not using it
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
siteMetadata: {
|
|
||||||
title: 'Gatsby + Node.js (TypeScript) API',
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
`gatsby-plugin-react-helmet`,
|
|
||||||
{
|
|
||||||
resolve: `gatsby-plugin-manifest`,
|
|
||||||
options: {
|
|
||||||
name: 'Gatsby + Node.js (TypeScript) API',
|
|
||||||
short_name: 'Gatbsy + Node.js (TypeScript)',
|
|
||||||
start_url: '/',
|
|
||||||
icon: 'src/images/gatsby-icon.png',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
/**
|
|
||||||
* Implement Gatsby's Node APIs in this file.
|
|
||||||
*
|
|
||||||
* See: https://www.gatsbyjs.org/docs/node-apis/
|
|
||||||
*/
|
|
||||||
|
|
||||||
// You can delete this file if you're not using it
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
/**
|
|
||||||
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
|
|
||||||
*
|
|
||||||
* See: https://www.gatsbyjs.org/docs/ssr-apis/
|
|
||||||
*/
|
|
||||||
|
|
||||||
// You can delete this file if you're not using it
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"private": true,
|
|
||||||
"name": "gatsby-starter-default",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"dependencies": {
|
|
||||||
"gatsby": "^2.18.14",
|
|
||||||
"gatsby-image": "^2.0.15",
|
|
||||||
"gatsby-plugin-manifest": "^2.0.5",
|
|
||||||
"gatsby-plugin-react-helmet": "^3.0.0",
|
|
||||||
"react": "^16.5.1",
|
|
||||||
"react-dom": "^16.5.1",
|
|
||||||
"react-helmet": "^5.2.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@now/node": "^1.3.0"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"dev": "gatsby develop",
|
|
||||||
"build": "gatsby build"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
@@ -1,56 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { Helmet } from 'react-helmet';
|
|
||||||
import '../styles/index.css';
|
|
||||||
|
|
||||||
function Index() {
|
|
||||||
const [date, setDate] = useState(null);
|
|
||||||
useEffect(() => {
|
|
||||||
async function getDate() {
|
|
||||||
const res = await fetch('/api/date');
|
|
||||||
const newDate = await res.text();
|
|
||||||
setDate(newDate);
|
|
||||||
}
|
|
||||||
getDate();
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<main>
|
|
||||||
<Helmet>
|
|
||||||
<title>Gatsby + Node.js (TypeScript) API</title>
|
|
||||||
</Helmet>
|
|
||||||
<h1>Gatsby + Node.js (TypeScript) API</h1>
|
|
||||||
<h2>
|
|
||||||
Deployed with{' '}
|
|
||||||
<a
|
|
||||||
href="https://zeit.co/docs"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
>
|
|
||||||
ZEIT Now
|
|
||||||
</a>
|
|
||||||
!
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
<a
|
|
||||||
href="https://github.com/zeit/now-examples/blob/master/gatsby-functions"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
>
|
|
||||||
This project
|
|
||||||
</a>{' '}
|
|
||||||
is a <a href="https://www.gatsbyjs.org/">Gatsby</a> app with two
|
|
||||||
directories, <code>/src</code> for static content and <code>/api</code>{' '}
|
|
||||||
which contains a serverless{' '}
|
|
||||||
<a href="https://nodejs.org/en/">Node.js (TypeScript)</a> function. See{' '}
|
|
||||||
<a href="/api/date">
|
|
||||||
<code>api/date</code> for the Date API with Node.js (TypeScript)
|
|
||||||
</a>
|
|
||||||
.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<h2>The date according to Node.js (TypeScript) is:</h2>
|
|
||||||
<p>{date ? date : 'Loading date...'}</p>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Index;
|
|
||||||
@@ -1,2 +1,2 @@
|
|||||||
README.md
|
|
||||||
yarn.lock
|
yarn.lock
|
||||||
|
README.md
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
The MIT License (MIT)
|
|
||||||
|
|
||||||
Copyright (c) 2015 gatsbyjs
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
|
|
||||||
@@ -2,11 +2,11 @@
|
|||||||
|
|
||||||
# Gatsby Example
|
# Gatsby Example
|
||||||
|
|
||||||
This directory is a brief example of a [Gatsby](https://www.gatsbyjs.org/) app that can be deployed with ZEIT Now and zero configuration.
|
This directory is a brief example of a [Gatsby](https://www.gatsbyjs.org/) app with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction) that can be deployed with ZEIT Now and zero configuration.
|
||||||
|
|
||||||
## Deploy Your Own
|
## Deploy Your Own
|
||||||
|
|
||||||
Deploy your own Gatsby project with ZEIT Now.
|
Deploy your own Gatsby project, along with Serverless Functions, with ZEIT Now.
|
||||||
|
|
||||||
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/gatsby)
|
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/gatsby)
|
||||||
|
|
||||||
@@ -14,7 +14,7 @@ _Live Example: https://gatsby.now-examples.now.sh_
|
|||||||
|
|
||||||
### How We Created This Example
|
### How We Created This Example
|
||||||
|
|
||||||
To get started with Gatsby for deployment with ZEIT Now, you can use the [Gatsby CLI](https://www.gatsbyjs.org/docs/gatsby-cli/) to initialize the project:
|
To get started with Gatsby on Now, you can use the [Gatsby CLI](https://www.gatsbyjs.org/docs/gatsby-cli/) to initialize the project:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ gatsby new gatsby-site
|
$ gatsby new gatsby-site
|
||||||
@@ -22,7 +22,7 @@ $ gatsby new gatsby-site
|
|||||||
|
|
||||||
### Deploying From Your Terminal
|
### Deploying From Your Terminal
|
||||||
|
|
||||||
You can deploy your new Gatsby project with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
You can deploy your new Gatsby project, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ now
|
$ now
|
||||||
|
|||||||
@@ -1,34 +1,17 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
siteMetadata: {
|
||||||
title: `Gatsby Default Starter`,
|
title: 'Gatsby + Node.js (TypeScript) API',
|
||||||
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
|
|
||||||
author: `@gatsbyjs`,
|
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
`gatsby-plugin-react-helmet`,
|
`gatsby-plugin-react-helmet`,
|
||||||
{
|
|
||||||
resolve: `gatsby-source-filesystem`,
|
|
||||||
options: {
|
|
||||||
name: `images`,
|
|
||||||
path: `${__dirname}/src/images`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
`gatsby-transformer-sharp`,
|
|
||||||
`gatsby-plugin-sharp`,
|
|
||||||
{
|
{
|
||||||
resolve: `gatsby-plugin-manifest`,
|
resolve: `gatsby-plugin-manifest`,
|
||||||
options: {
|
options: {
|
||||||
name: `gatsby-starter-default`,
|
name: 'Gatsby + Node.js (TypeScript) API',
|
||||||
short_name: `starter`,
|
short_name: 'Gatbsy + Node.js (TypeScript)',
|
||||||
start_url: `/`,
|
start_url: '/',
|
||||||
background_color: `#663399`,
|
icon: 'src/images/gatsby-icon.png',
|
||||||
theme_color: `#663399`,
|
|
||||||
display: `minimal-ui`,
|
|
||||||
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// this (optional) plugin enables Progressive Web App + Offline functionality
|
|
||||||
// To learn more, visit: https://gatsby.dev/offline
|
|
||||||
// `gatsby-plugin-offline`,
|
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,44 +1,21 @@
|
|||||||
{
|
{
|
||||||
"name": "gatsby-starter-default",
|
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "A simple starter to get up and developing quickly with Gatsby",
|
"name": "gatsby-starter-default",
|
||||||
"version": "0.1.0",
|
"version": "1.0.0",
|
||||||
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"gatsby": "^2.18.14",
|
"gatsby": "^2.18.14",
|
||||||
"gatsby-image": "^2.2.17",
|
"gatsby-image": "^2.0.15",
|
||||||
"gatsby-plugin-manifest": "^2.2.14",
|
"gatsby-plugin-manifest": "^2.0.5",
|
||||||
"gatsby-plugin-offline": "^2.2.10",
|
"gatsby-plugin-react-helmet": "^3.0.0",
|
||||||
"gatsby-plugin-react-helmet": "^3.1.6",
|
"react": "^16.5.1",
|
||||||
"gatsby-plugin-sharp": "^2.2.19",
|
"react-dom": "^16.5.1",
|
||||||
"gatsby-source-filesystem": "^2.1.21",
|
"react-helmet": "^5.2.0"
|
||||||
"gatsby-transformer-sharp": "^2.2.13",
|
|
||||||
"prop-types": "^15.7.2",
|
|
||||||
"react": "^16.9.0",
|
|
||||||
"react-dom": "^16.9.0",
|
|
||||||
"react-helmet": "^5.2.1"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"prettier": "^1.18.2"
|
"@now/node": "^1.3.0"
|
||||||
},
|
},
|
||||||
"keywords": [
|
|
||||||
"gatsby"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "gatsby build",
|
|
||||||
"develop": "gatsby develop",
|
|
||||||
"dev": "gatsby develop",
|
"dev": "gatsby develop",
|
||||||
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
|
"build": "gatsby build"
|
||||||
"start": "npm run develop",
|
|
||||||
"serve": "gatsby serve",
|
|
||||||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
|
|
||||||
},
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/gatsbyjs/gatsby/issues"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,42 +0,0 @@
|
|||||||
import { Link } from "gatsby"
|
|
||||||
import PropTypes from "prop-types"
|
|
||||||
import React from "react"
|
|
||||||
|
|
||||||
const Header = ({ siteTitle }) => (
|
|
||||||
<header
|
|
||||||
style={{
|
|
||||||
background: `rebeccapurple`,
|
|
||||||
marginBottom: `1.45rem`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: `0 auto`,
|
|
||||||
maxWidth: 960,
|
|
||||||
padding: `1.45rem 1.0875rem`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h1 style={{ margin: 0 }}>
|
|
||||||
<Link
|
|
||||||
to="/"
|
|
||||||
style={{
|
|
||||||
color: `white`,
|
|
||||||
textDecoration: `none`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{siteTitle}
|
|
||||||
</Link>
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
|
|
||||||
Header.propTypes = {
|
|
||||||
siteTitle: PropTypes.string,
|
|
||||||
}
|
|
||||||
|
|
||||||
Header.defaultProps = {
|
|
||||||
siteTitle: ``,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Header
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import { useStaticQuery, graphql } from "gatsby"
|
|
||||||
import Img from "gatsby-image"
|
|
||||||
|
|
||||||
/*
|
|
||||||
* This component is built using `gatsby-image` to automatically serve optimized
|
|
||||||
* images with lazy loading and reduced file sizes. The image is loaded using a
|
|
||||||
* `useStaticQuery`, which allows us to load the image from directly within this
|
|
||||||
* component, rather than having to pass the image data down from pages.
|
|
||||||
*
|
|
||||||
* For more information, see the docs:
|
|
||||||
* - `gatsby-image`: https://gatsby.dev/gatsby-image
|
|
||||||
* - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
|
|
||||||
*/
|
|
||||||
|
|
||||||
const Image = () => {
|
|
||||||
const data = useStaticQuery(graphql`
|
|
||||||
query {
|
|
||||||
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
|
|
||||||
childImageSharp {
|
|
||||||
fluid(maxWidth: 300) {
|
|
||||||
...GatsbyImageSharpFluid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
|
|
||||||
return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Image
|
|
||||||
@@ -1,622 +0,0 @@
|
|||||||
html {
|
|
||||||
font-family: sans-serif;
|
|
||||||
-ms-text-size-adjust: 100%;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
details,
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
main,
|
|
||||||
menu,
|
|
||||||
nav,
|
|
||||||
section,
|
|
||||||
summary {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
audio,
|
|
||||||
canvas,
|
|
||||||
progress,
|
|
||||||
video {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
audio:not([controls]) {
|
|
||||||
display: none;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
[hidden],
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
-webkit-text-decoration-skip: objects;
|
|
||||||
}
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline-width: 0;
|
|
||||||
}
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: none;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration: underline dotted;
|
|
||||||
}
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: inherit;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
dfn {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
mark {
|
|
||||||
background-color: #ff0;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
pre,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
figure {
|
|
||||||
margin: 1em 40px;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 0;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font: inherit;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
optgroup {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
button,
|
|
||||||
input {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"],
|
|
||||||
button,
|
|
||||||
html [type="button"] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
[type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner,
|
|
||||||
button::-moz-focus-inner {
|
|
||||||
border-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
[type="button"]:-moz-focusring,
|
|
||||||
[type="reset"]:-moz-focusring,
|
|
||||||
[type="submit"]:-moz-focusring,
|
|
||||||
button:-moz-focusring {
|
|
||||||
outline: 1px dotted ButtonText;
|
|
||||||
}
|
|
||||||
fieldset {
|
|
||||||
border: 1px solid silver;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0.35em 0.625em 0.75em;
|
|
||||||
}
|
|
||||||
legend {
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: inherit;
|
|
||||||
display: table;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
[type="checkbox"],
|
|
||||||
[type="radio"] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
[type="search"] {
|
|
||||||
-webkit-appearance: textfield;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
[type="search"]::-webkit-search-cancel-button,
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
::-webkit-input-placeholder {
|
|
||||||
color: inherit;
|
|
||||||
opacity: 0.54;
|
|
||||||
}
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
font: inherit;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
font: 112.5%/1.45em georgia, serif;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
* {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
*:before {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
*:after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
color: hsla(0, 0%, 0%, 0.8);
|
|
||||||
font-family: georgia, serif;
|
|
||||||
font-weight: normal;
|
|
||||||
word-wrap: break-word;
|
|
||||||
font-kerning: normal;
|
|
||||||
-moz-font-feature-settings: "kern", "liga", "clig", "calt";
|
|
||||||
-ms-font-feature-settings: "kern", "liga", "clig", "calt";
|
|
||||||
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
|
|
||||||
font-feature-settings: "kern", "liga", "clig", "calt";
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
color: inherit;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
font-size: 2.25rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
color: inherit;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
font-size: 1.62671rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
color: inherit;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
font-size: 1.38316rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
color: inherit;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
color: inherit;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
font-size: 0.85028rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
h6 {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
color: inherit;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
font-size: 0.78405rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
hgroup {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin-left: 1.45rem;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
list-style-position: outside;
|
|
||||||
list-style-image: none;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
margin-left: 1.45rem;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
list-style-position: outside;
|
|
||||||
list-style-image: none;
|
|
||||||
}
|
|
||||||
dl {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
figure {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.42;
|
|
||||||
background: hsla(0, 0%, 0%, 0.04);
|
|
||||||
border-radius: 3px;
|
|
||||||
overflow: auto;
|
|
||||||
word-wrap: normal;
|
|
||||||
padding: 1.45rem;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.45rem;
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
fieldset {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
blockquote {
|
|
||||||
margin-left: 1.45rem;
|
|
||||||
margin-right: 1.45rem;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
form {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
noscript {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
iframe {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: calc(1.45rem - 1px);
|
|
||||||
background: hsla(0, 0%, 0%, 0.2);
|
|
||||||
border: none;
|
|
||||||
height: 1px;
|
|
||||||
}
|
|
||||||
address {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 1.45rem;
|
|
||||||
}
|
|
||||||
b {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
margin-bottom: calc(1.45rem / 2);
|
|
||||||
}
|
|
||||||
ol li {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
ul li {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
li > ol {
|
|
||||||
margin-left: 1.45rem;
|
|
||||||
margin-bottom: calc(1.45rem / 2);
|
|
||||||
margin-top: calc(1.45rem / 2);
|
|
||||||
}
|
|
||||||
li > ul {
|
|
||||||
margin-left: 1.45rem;
|
|
||||||
margin-bottom: calc(1.45rem / 2);
|
|
||||||
margin-top: calc(1.45rem / 2);
|
|
||||||
}
|
|
||||||
blockquote *:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
li *:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
p *:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
li > p {
|
|
||||||
margin-bottom: calc(1.45rem / 2);
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.45rem;
|
|
||||||
}
|
|
||||||
kbd {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.45rem;
|
|
||||||
}
|
|
||||||
samp {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.45rem;
|
|
||||||
}
|
|
||||||
abbr {
|
|
||||||
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
acronym {
|
|
||||||
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
|
||||||
cursor: help;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
thead {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
|
|
||||||
font-feature-settings: "tnum";
|
|
||||||
-moz-font-feature-settings: "tnum";
|
|
||||||
-ms-font-feature-settings: "tnum";
|
|
||||||
-webkit-font-feature-settings: "tnum";
|
|
||||||
padding-left: 0.96667rem;
|
|
||||||
padding-right: 0.96667rem;
|
|
||||||
padding-top: 0.725rem;
|
|
||||||
padding-bottom: calc(0.725rem - 1px);
|
|
||||||
}
|
|
||||||
th:first-child,
|
|
||||||
td:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
th:last-child,
|
|
||||||
td:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
tt,
|
|
||||||
code {
|
|
||||||
background-color: hsla(0, 0%, 0%, 0.04);
|
|
||||||
border-radius: 3px;
|
|
||||||
font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
|
|
||||||
"Liberation Mono", Menlo, Courier, monospace;
|
|
||||||
padding: 0;
|
|
||||||
padding-top: 0.2em;
|
|
||||||
padding-bottom: 0.2em;
|
|
||||||
}
|
|
||||||
pre code {
|
|
||||||
background: none;
|
|
||||||
line-height: 1.42;
|
|
||||||
}
|
|
||||||
code:before,
|
|
||||||
code:after,
|
|
||||||
tt:before,
|
|
||||||
tt:after {
|
|
||||||
letter-spacing: -0.2em;
|
|
||||||
content: " ";
|
|
||||||
}
|
|
||||||
pre code:before,
|
|
||||||
pre code:after,
|
|
||||||
pre tt:before,
|
|
||||||
pre tt:after {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
html {
|
|
||||||
font-size: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
/**
|
|
||||||
* Layout component that queries for data
|
|
||||||
* with Gatsby's useStaticQuery component
|
|
||||||
*
|
|
||||||
* See: https://www.gatsbyjs.org/docs/use-static-query/
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react"
|
|
||||||
import PropTypes from "prop-types"
|
|
||||||
import { useStaticQuery, graphql } from "gatsby"
|
|
||||||
|
|
||||||
import Header from "./header"
|
|
||||||
import "./layout.css"
|
|
||||||
|
|
||||||
const Layout = ({ children }) => {
|
|
||||||
const data = useStaticQuery(graphql`
|
|
||||||
query SiteTitleQuery {
|
|
||||||
site {
|
|
||||||
siteMetadata {
|
|
||||||
title
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header siteTitle={data.site.siteMetadata.title} />
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: `0 auto`,
|
|
||||||
maxWidth: 960,
|
|
||||||
padding: `0px 1.0875rem 1.45rem`,
|
|
||||||
paddingTop: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<main>{children}</main>
|
|
||||||
<footer>
|
|
||||||
© {new Date().getFullYear()}, Built with
|
|
||||||
{` `}
|
|
||||||
<a href="https://www.gatsbyjs.org">Gatsby</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
Layout.propTypes = {
|
|
||||||
children: PropTypes.node.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Layout
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
/**
|
|
||||||
* SEO component that queries for data with
|
|
||||||
* Gatsby's useStaticQuery React hook
|
|
||||||
*
|
|
||||||
* See: https://www.gatsbyjs.org/docs/use-static-query/
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react"
|
|
||||||
import PropTypes from "prop-types"
|
|
||||||
import Helmet from "react-helmet"
|
|
||||||
import { useStaticQuery, graphql } from "gatsby"
|
|
||||||
|
|
||||||
function SEO({ description, lang, meta, title }) {
|
|
||||||
const { site } = useStaticQuery(
|
|
||||||
graphql`
|
|
||||||
query {
|
|
||||||
site {
|
|
||||||
siteMetadata {
|
|
||||||
title
|
|
||||||
description
|
|
||||||
author
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
)
|
|
||||||
|
|
||||||
const metaDescription = description || site.siteMetadata.description
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Helmet
|
|
||||||
htmlAttributes={{
|
|
||||||
lang,
|
|
||||||
}}
|
|
||||||
title={title}
|
|
||||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
|
||||||
meta={[
|
|
||||||
{
|
|
||||||
name: `description`,
|
|
||||||
content: metaDescription,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
property: `og:title`,
|
|
||||||
content: title,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
property: `og:description`,
|
|
||||||
content: metaDescription,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
property: `og:type`,
|
|
||||||
content: `website`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: `twitter:card`,
|
|
||||||
content: `summary`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: `twitter:creator`,
|
|
||||||
content: site.siteMetadata.author,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: `twitter:title`,
|
|
||||||
content: title,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: `twitter:description`,
|
|
||||||
content: metaDescription,
|
|
||||||
},
|
|
||||||
].concat(meta)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
SEO.defaultProps = {
|
|
||||||
lang: `en`,
|
|
||||||
meta: [],
|
|
||||||
description: ``,
|
|
||||||
}
|
|
||||||
|
|
||||||
SEO.propTypes = {
|
|
||||||
description: PropTypes.string,
|
|
||||||
lang: PropTypes.string,
|
|
||||||
meta: PropTypes.arrayOf(PropTypes.object),
|
|
||||||
title: PropTypes.string.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SEO
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 163 KiB |
@@ -1,14 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
|
|
||||||
import Layout from "../components/layout"
|
|
||||||
import SEO from "../components/seo"
|
|
||||||
|
|
||||||
const NotFoundPage = () => (
|
|
||||||
<Layout>
|
|
||||||
<SEO title="404: Not found" />
|
|
||||||
<h1>NOT FOUND</h1>
|
|
||||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
|
||||||
</Layout>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default NotFoundPage
|
|
||||||
@@ -1,21 +1,56 @@
|
|||||||
import React from "react"
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Link } from "gatsby"
|
import { Helmet } from 'react-helmet';
|
||||||
|
import '../styles/index.css';
|
||||||
|
|
||||||
import Layout from "../components/layout"
|
function Index() {
|
||||||
import Image from "../components/image"
|
const [date, setDate] = useState(null);
|
||||||
import SEO from "../components/seo"
|
useEffect(() => {
|
||||||
|
async function getDate() {
|
||||||
|
const res = await fetch('/api/date');
|
||||||
|
const newDate = await res.text();
|
||||||
|
setDate(newDate);
|
||||||
|
}
|
||||||
|
getDate();
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<Helmet>
|
||||||
|
<title>Gatsby + Node.js (TypeScript) API</title>
|
||||||
|
</Helmet>
|
||||||
|
<h1>Gatsby + Node.js (TypeScript) API</h1>
|
||||||
|
<h2>
|
||||||
|
Deployed with{' '}
|
||||||
|
<a
|
||||||
|
href="https://zeit.co/docs"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
>
|
||||||
|
ZEIT Now
|
||||||
|
</a>
|
||||||
|
!
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
href="https://github.com/zeit/now-examples/blob/master/gatsby-functions"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
>
|
||||||
|
This project
|
||||||
|
</a>{' '}
|
||||||
|
is a <a href="https://www.gatsbyjs.org/">Gatsby</a> app with two
|
||||||
|
directories, <code>/src</code> for static content and <code>/api</code>{' '}
|
||||||
|
which contains a serverless{' '}
|
||||||
|
<a href="https://nodejs.org/en/">Node.js (TypeScript)</a> function. See{' '}
|
||||||
|
<a href="/api/date">
|
||||||
|
<code>api/date</code> for the Date API with Node.js (TypeScript)
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<h2>The date according to Node.js (TypeScript) is:</h2>
|
||||||
|
<p>{date ? date : 'Loading date...'}</p>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const IndexPage = () => (
|
export default Index;
|
||||||
<Layout>
|
|
||||||
<SEO title="Home" />
|
|
||||||
<h1>Hi people</h1>
|
|
||||||
<p>Welcome to your new Gatsby site.</p>
|
|
||||||
<p>Now go build something great.</p>
|
|
||||||
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
|
|
||||||
<Image />
|
|
||||||
</div>
|
|
||||||
<Link to="/page-2/">Go to page 2</Link>
|
|
||||||
</Layout>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default IndexPage
|
|
||||||
|
|||||||
@@ -1,16 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import { Link } from "gatsby"
|
|
||||||
|
|
||||||
import Layout from "../components/layout"
|
|
||||||
import SEO from "../components/seo"
|
|
||||||
|
|
||||||
const SecondPage = () => (
|
|
||||||
<Layout>
|
|
||||||
<SEO title="Page two" />
|
|
||||||
<h1>Hi from the second page</h1>
|
|
||||||
<p>Welcome to page 2</p>
|
|
||||||
<Link to="/">Go back to the homepage</Link>
|
|
||||||
</Layout>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default SecondPage
|
|
||||||
5
examples/svelte-functions/.gitignore
vendored
5
examples/svelte-functions/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
.DS_Store
|
|
||||||
node_modules
|
|
||||||
public/bundle.*
|
|
||||||
.env
|
|
||||||
.env.build
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
yarn.lock
|
|
||||||
README.md
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
# Svelte Example
|
|
||||||
|
|
||||||
This directory is a brief example of a [Svelte](https://svelte.dev/) app with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction) that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own Svelte project, along with Serverless Functions, with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/svelte-functions)
|
|
||||||
|
|
||||||
_Live Example: https://svelte-functions.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started with Svelte, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), deployed with ZEIT Now, you can use [degit](https://github.com/Rich-Harris/degit) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ npx degit sveltejs/template my-svelte-project
|
|
||||||
```
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new Svelte project, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "svelte-app",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"devDependencies": {
|
|
||||||
"npm-run-all": "^4.1.5",
|
|
||||||
"rollup": "^1.10.1",
|
|
||||||
"rollup-plugin-commonjs": "^9.3.4",
|
|
||||||
"rollup-plugin-livereload": "^1.0.0",
|
|
||||||
"rollup-plugin-node-resolve": "^4.2.3",
|
|
||||||
"rollup-plugin-svelte": "^5.0.3",
|
|
||||||
"rollup-plugin-terser": "^4.0.4",
|
|
||||||
"svelte": "^3.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"sirv-cli": "^0.4.4"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"build": "rollup -c",
|
|
||||||
"autobuild": "rollup -c -w",
|
|
||||||
"dev": "run-p start:dev autobuild",
|
|
||||||
"start": "sirv public --single",
|
|
||||||
"start:dev": "sirv public --single --dev"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
import svelte from 'rollup-plugin-svelte';
|
|
||||||
import resolve from 'rollup-plugin-node-resolve';
|
|
||||||
import commonjs from 'rollup-plugin-commonjs';
|
|
||||||
import livereload from 'rollup-plugin-livereload';
|
|
||||||
import { terser } from 'rollup-plugin-terser';
|
|
||||||
|
|
||||||
const production = !process.env.ROLLUP_WATCH;
|
|
||||||
|
|
||||||
export default {
|
|
||||||
input: 'src/main.js',
|
|
||||||
output: {
|
|
||||||
sourcemap: true,
|
|
||||||
format: 'iife',
|
|
||||||
name: 'app',
|
|
||||||
file: 'public/bundle.js',
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
svelte({
|
|
||||||
// enable run-time checks when not in production
|
|
||||||
dev: !production,
|
|
||||||
// we'll extract any component CSS out into
|
|
||||||
// a separate file — better for performance
|
|
||||||
css: css => {
|
|
||||||
css.write('public/bundle.css');
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
|
|
||||||
// If you have external dependencies installed from
|
|
||||||
// npm, you'll most likely need these plugins. In
|
|
||||||
// some cases you'll need additional configuration —
|
|
||||||
// consult the documentation for details:
|
|
||||||
// https://github.com/rollup/rollup-plugin-commonjs
|
|
||||||
resolve({ browser: true }),
|
|
||||||
commonjs(),
|
|
||||||
|
|
||||||
// Watch the `public` directory and refresh the
|
|
||||||
// browser on changes when not in production
|
|
||||||
!production && livereload('public'),
|
|
||||||
|
|
||||||
// If we're building for production (npm run build
|
|
||||||
// instead of npm run dev), minify
|
|
||||||
production && terser(),
|
|
||||||
],
|
|
||||||
watch: {
|
|
||||||
clearScreen: false,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
export let date;
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const res = await fetch("/api/date");
|
|
||||||
const newDate = await res.text();
|
|
||||||
date = newDate;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<h1>Svelte + Node.js API</h1>
|
|
||||||
<h2>
|
|
||||||
Deployed with
|
|
||||||
<a href="https://zeit.co/docs" target="_blank" rel="noreferrer noopener">
|
|
||||||
ZEIT Now
|
|
||||||
</a>
|
|
||||||
!
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
<a
|
|
||||||
href="https://github.com/zeit/now-examples/tree/master/svelte-functions"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer noopener">
|
|
||||||
This project
|
|
||||||
</a>
|
|
||||||
is a
|
|
||||||
<a href="https://svelte.dev/">Svelte</a>
|
|
||||||
app with three directories,
|
|
||||||
<code>/public</code>
|
|
||||||
for static assets,
|
|
||||||
<code>/src</code>
|
|
||||||
for components and content, and
|
|
||||||
<code>/api</code>
|
|
||||||
which contains a serverless
|
|
||||||
<a href="https://nodejs.org/en/">Node.js</a>
|
|
||||||
function. See
|
|
||||||
<a href="/api/date">
|
|
||||||
<code>api/date</code>
|
|
||||||
for the Date API with Node.js
|
|
||||||
</a>
|
|
||||||
.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<h2>The date according to Node.js is:</h2>
|
|
||||||
<p>{date ? date : 'Loading date...'}</p>
|
|
||||||
</main>
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import App from './App.svelte';
|
|
||||||
|
|
||||||
const app = new App({
|
|
||||||
target: document.body,
|
|
||||||
props: {
|
|
||||||
name: 'world',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default app;
|
|
||||||
@@ -1,2 +1,2 @@
|
|||||||
README.md
|
|
||||||
yarn.lock
|
yarn.lock
|
||||||
|
README.md
|
||||||
@@ -1,12 +1,10 @@
|
|||||||
|
|
||||||
|
|
||||||
# Svelte Example
|
# Svelte Example
|
||||||
|
|
||||||
This directory is a brief example of a [Svelte](https://svelte.dev/) app that can be deployed with ZEIT Now and zero configuration.
|
This directory is a brief example of a [Svelte](https://svelte.dev/) app with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction) that can be deployed with ZEIT Now and zero configuration.
|
||||||
|
|
||||||
## Deploy Your Own
|
## Deploy Your Own
|
||||||
|
|
||||||
Deploy your own Svelte project with ZEIT Now.
|
Deploy your own Svelte project, along with Serverless Functions, with ZEIT Now.
|
||||||
|
|
||||||
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/svelte)
|
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/svelte)
|
||||||
|
|
||||||
@@ -14,7 +12,7 @@ _Live Example: https://svelte.now-examples.now.sh_
|
|||||||
|
|
||||||
### How We Created This Example
|
### How We Created This Example
|
||||||
|
|
||||||
To get started with Svelte deployed with ZEIT Now, you can use [degit](https://github.com/Rich-Harris/degit) to initialize the project:
|
To get started with Svelte, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), deployed with ZEIT Now, you can use [degit](https://github.com/Rich-Harris/degit) to initialize the project:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ npx degit sveltejs/template my-svelte-project
|
$ npx degit sveltejs/template my-svelte-project
|
||||||
@@ -22,7 +20,7 @@ $ npx degit sveltejs/template my-svelte-project
|
|||||||
|
|
||||||
### Deploying From Your Terminal
|
### Deploying From Your Terminal
|
||||||
|
|
||||||
You can deploy your new Svelte project with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
You can deploy your new Svelte project, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ now
|
$ now
|
||||||
|
|||||||
@@ -3,10 +3,10 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"rollup": "^1.12.0",
|
"rollup": "^1.10.1",
|
||||||
"rollup-plugin-commonjs": "^10.0.0",
|
"rollup-plugin-commonjs": "^9.3.4",
|
||||||
"rollup-plugin-livereload": "^1.0.0",
|
"rollup-plugin-livereload": "^1.0.0",
|
||||||
"rollup-plugin-node-resolve": "^5.2.0",
|
"rollup-plugin-node-resolve": "^4.2.3",
|
||||||
"rollup-plugin-svelte": "^5.0.3",
|
"rollup-plugin-svelte": "^5.0.3",
|
||||||
"rollup-plugin-terser": "^4.0.4",
|
"rollup-plugin-terser": "^4.0.4",
|
||||||
"svelte": "^3.0.0"
|
"svelte": "^3.0.0"
|
||||||
|
|||||||
@@ -1,62 +1,44 @@
|
|||||||
html, body {
|
main {
|
||||||
position: relative;
|
align-content: center;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: #333;
|
|
||||||
margin: 0;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
display: grid;
|
||||||
|
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
|
||||||
|
'Arial', sans-serif;
|
||||||
|
hyphens: auto;
|
||||||
|
line-height: 1.65;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 680px;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 72px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 45px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: rgb(0,100,200);
|
border-bottom: 1px solid white;
|
||||||
|
color: #0076ff;
|
||||||
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: underline;
|
border-bottom: 1px solid #0076ff;
|
||||||
}
|
}
|
||||||
|
code,
|
||||||
a:visited {
|
pre {
|
||||||
color: rgb(0,80,160);
|
color: #d400ff;
|
||||||
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||||
|
Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||||||
|
font-size: 0.92em;
|
||||||
}
|
}
|
||||||
|
code:before,
|
||||||
label {
|
code:after {
|
||||||
display: block;
|
content: '\`';
|
||||||
}
|
|
||||||
|
|
||||||
input, button, select, textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
padding: 0.4em;
|
|
||||||
margin: 0 0 0.5em 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:disabled {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
color: #333;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus {
|
|
||||||
border-color: #666;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,18 +1,17 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf8'>
|
<meta charset="utf8" />
|
||||||
<meta name='viewport' content='width=device-width'>
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
<title>Svelte app</title>
|
<title>Svelte + Node.js API</title>
|
||||||
|
|
||||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<link rel='stylesheet' href='/global.css'>
|
<link rel="stylesheet" href="/global.css" />
|
||||||
<link rel='stylesheet' href='/bundle.css'>
|
<link rel="stylesheet" href="/bundle.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
<script defer src='/bundle.js'></script>
|
<body>
|
||||||
</head>
|
<script src="/bundle.js"></script>
|
||||||
|
</body>
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
@@ -30,11 +30,7 @@ export default {
|
|||||||
// some cases you'll need additional configuration —
|
// some cases you'll need additional configuration —
|
||||||
// consult the documentation for details:
|
// consult the documentation for details:
|
||||||
// https://github.com/rollup/rollup-plugin-commonjs
|
// https://github.com/rollup/rollup-plugin-commonjs
|
||||||
resolve({
|
resolve({ browser: true }),
|
||||||
browser: true,
|
|
||||||
dedupe: importee =>
|
|
||||||
importee === 'svelte' || importee.startsWith('svelte/'),
|
|
||||||
}),
|
|
||||||
commonjs(),
|
commonjs(),
|
||||||
|
|
||||||
// Watch the `public` directory and refresh the
|
// Watch the `public` directory and refresh the
|
||||||
|
|||||||
@@ -1,11 +1,48 @@
|
|||||||
<script>
|
<script>
|
||||||
export let name;
|
import { onMount } from "svelte";
|
||||||
|
export let date;
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
const res = await fetch("/api/date");
|
||||||
|
const newDate = await res.text();
|
||||||
|
date = newDate;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<main>
|
||||||
h1 {
|
<h1>Svelte + Node.js API</h1>
|
||||||
color: purple;
|
<h2>
|
||||||
}
|
Deployed with
|
||||||
</style>
|
<a href="https://zeit.co/docs" target="_blank" rel="noreferrer noopener">
|
||||||
|
ZEIT Now
|
||||||
<h1>Hello {name}!</h1>
|
</a>
|
||||||
|
!
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
href="https://github.com/zeit/now-examples/tree/master/svelte-functions"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener">
|
||||||
|
This project
|
||||||
|
</a>
|
||||||
|
is a
|
||||||
|
<a href="https://svelte.dev/">Svelte</a>
|
||||||
|
app with three directories,
|
||||||
|
<code>/public</code>
|
||||||
|
for static assets,
|
||||||
|
<code>/src</code>
|
||||||
|
for components and content, and
|
||||||
|
<code>/api</code>
|
||||||
|
which contains a serverless
|
||||||
|
<a href="https://nodejs.org/en/">Node.js</a>
|
||||||
|
function. See
|
||||||
|
<a href="/api/date">
|
||||||
|
<code>api/date</code>
|
||||||
|
for the Date API with Node.js
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<h2>The date according to Node.js is:</h2>
|
||||||
|
<p>{date ? date : 'Loading date...'}</p>
|
||||||
|
</main>
|
||||||
|
|||||||
1
examples/vanilla-functions/.gitignore
vendored
1
examples/vanilla-functions/.gitignore
vendored
@@ -1 +0,0 @@
|
|||||||
.env
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
# Vanilla Example
|
|
||||||
|
|
||||||
This directory is a brief example of a vanilla site that can be deployed with ZEIT Now and zero configuration.
|
|
||||||
|
|
||||||
## Deploy Your Own
|
|
||||||
|
|
||||||
Deploy your own vanilla website, along with Serverless Functions, with ZEIT Now.
|
|
||||||
|
|
||||||
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/vanilla-functions)
|
|
||||||
|
|
||||||
_Live Example: https://vanilla-functions.now-examples.now.sh_
|
|
||||||
|
|
||||||
### How We Created This Example
|
|
||||||
|
|
||||||
To get started with a vanilla website, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), with ZEIT Now, you can use the [Now CLI](https://zeit.co/download) to initialize the project:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now init vanilla-functions
|
|
||||||
```
|
|
||||||
|
|
||||||
### Deploying From Your Terminal
|
|
||||||
|
|
||||||
You can deploy your new vanilla website, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ now
|
|
||||||
```
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Vanilla + Go API</title>
|
|
||||||
<link rel="stylesheet" href="style.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Welcome to a Static Site with Data from a Go API</h1>
|
|
||||||
<h2>
|
|
||||||
Deployed with
|
|
||||||
<a href="https://zeit.co/docs" target="_blank" rel="noreferrer noopener"
|
|
||||||
>ZEIT Now</a
|
|
||||||
>!
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
<a
|
|
||||||
href="https://github.com/zeit/now-examples/blob/master/vanilla-functions"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
>This project</a
|
|
||||||
>
|
|
||||||
includes three files. A static <code>index.html</code> file as the
|
|
||||||
homepage, a static <code>style.css</code> file for styling, and a
|
|
||||||
<code>api/date.go</code> serverless function that returns the date on
|
|
||||||
invocation. See
|
|
||||||
<a href="/api/date.go"
|
|
||||||
><code>api/date.go</code> for the Date API with Go</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<h3>The date according to Go is:</h3>
|
|
||||||
<p class="date">Loading date...</p>
|
|
||||||
<script>
|
|
||||||
function main() {
|
|
||||||
return fetch('/api/date.go')
|
|
||||||
.then(function(response) {
|
|
||||||
return response.text();
|
|
||||||
})
|
|
||||||
.then(function(date) {
|
|
||||||
document.querySelector('.date').textContent = date;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
main();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
|
|
||||||
'Arial', sans-serif;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 20px 20px 60px;
|
|
||||||
max-width: 680px;
|
|
||||||
display: grid;
|
|
||||||
align-content: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.65;
|
|
||||||
word-break: break-word;
|
|
||||||
font-kerning: auto;
|
|
||||||
font-variant: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
hyphens: auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #0076ff;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
border-bottom: 1px solid white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
border-bottom: 1px solid #0076ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
code,
|
|
||||||
pre {
|
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
|
||||||
Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
|
||||||
font-size: 0.92em;
|
|
||||||
color: #d400ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
code:before,
|
|
||||||
code:after {
|
|
||||||
content: '`';
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
@@ -1,10 +1,10 @@
|
|||||||
# Vanilla Example
|
# Vanilla Example
|
||||||
|
|
||||||
This directory is a brief example of a vanilla website that can be deployed with ZEIT Now and zero configuration.
|
This directory is a brief example of a vanilla site that can be deployed with ZEIT Now and zero configuration.
|
||||||
|
|
||||||
## Deploy Your Own
|
## Deploy Your Own
|
||||||
|
|
||||||
Deploy your own vanilla website with ZEIT Now.
|
Deploy your own vanilla website, along with Serverless Functions, with ZEIT Now.
|
||||||
|
|
||||||
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/vanilla)
|
[](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/vanilla)
|
||||||
|
|
||||||
@@ -12,7 +12,7 @@ _Live Example: https://vanilla.now-examples.now.sh_
|
|||||||
|
|
||||||
### How We Created This Example
|
### How We Created This Example
|
||||||
|
|
||||||
To get started with a vanilla website deployed with ZEIT Now, you can use the [Now CLI](https://zeit.co/download) to initialize the project:
|
To get started with a vanilla website, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), with ZEIT Now, you can use the [Now CLI](https://zeit.co/download) to initialize the project:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ now init vanilla
|
$ now init vanilla
|
||||||
@@ -20,7 +20,7 @@ $ now init vanilla
|
|||||||
|
|
||||||
### Deploying From Your Terminal
|
### Deploying From Your Terminal
|
||||||
|
|
||||||
You can deploy your new vanilla website with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
You can deploy your new vanilla website, along with [Serverless Functions](https://zeit.co/docs/v2/serverless-functions/introduction), with a single command from your terminal using [Now CLI](https://zeit.co/download):
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ now
|
$ now
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Vanilla</title>
|
<title>Vanilla + Go API</title>
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Welcome to a Static Site</h1>
|
<h1>Welcome to a Static Site with Data from a Go API</h1>
|
||||||
<h2>
|
<h2>
|
||||||
Deployed with
|
Deployed with
|
||||||
<a href="https://zeit.co/docs" target="_blank" rel="noreferrer noopener"
|
<a href="https://zeit.co/docs" target="_blank" rel="noreferrer noopener"
|
||||||
@@ -14,13 +14,33 @@
|
|||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
<a
|
<a
|
||||||
href="https://github.com/zeit/now-examples/tree/master/vanilla"
|
href="https://github.com/zeit/now-examples/blob/master/vanilla-functions"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer noopener"
|
rel="noreferrer noopener"
|
||||||
>This project</a
|
>This project</a
|
||||||
>
|
>
|
||||||
includes two files. A static <code>index.html</code> file as the homepage,
|
includes three files. A static <code>index.html</code> file as the
|
||||||
and a <code>style.css</code> file for styling.
|
homepage, a static <code>style.css</code> file for styling, and a
|
||||||
|
<code>api/date.go</code> serverless function that returns the date on
|
||||||
|
invocation. See
|
||||||
|
<a href="/api/date.go"
|
||||||
|
><code>api/date.go</code> for the Date API with Go</a
|
||||||
|
>.
|
||||||
</p>
|
</p>
|
||||||
|
<br />
|
||||||
|
<h3>The date according to Go is:</h3>
|
||||||
|
<p class="date">Loading date...</p>
|
||||||
|
<script>
|
||||||
|
function main() {
|
||||||
|
return fetch('/api/date.go')
|
||||||
|
.then(function(response) {
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then(function(date) {
|
||||||
|
document.querySelector('.date').textContent = date;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
main();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -30,7 +30,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Gatsby",
|
"name": "Gatsby",
|
||||||
"slug": "gatsby",
|
"slug": "gatsby",
|
||||||
"demo": "https://gatsby-functions.now-examples.now.sh",
|
"demo": "https://gatsby.now-examples.now.sh",
|
||||||
"logo": "https://raw.githubusercontent.com/zeit/now/master/packages/frameworks/logos/gatsby.svg",
|
"logo": "https://raw.githubusercontent.com/zeit/now/master/packages/frameworks/logos/gatsby.svg",
|
||||||
"tagline": "Gatsby helps developers build blazing fast websites and apps with React.",
|
"tagline": "Gatsby helps developers build blazing fast websites and apps with React.",
|
||||||
"description": "A Gatsby app, using the default starter theme and a Serverless Function API.",
|
"description": "A Gatsby app, using the default starter theme and a Serverless Function API.",
|
||||||
@@ -307,7 +307,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Svelte",
|
"name": "Svelte",
|
||||||
"slug": "svelte",
|
"slug": "svelte",
|
||||||
"demo": "https://svelte-functions.now-examples.now.sh",
|
"demo": "https://svelte.now-examples.now.sh",
|
||||||
"logo": "https://raw.githubusercontent.com/zeit/now/master/packages/frameworks/logos/svelte.svg",
|
"logo": "https://raw.githubusercontent.com/zeit/now/master/packages/frameworks/logos/svelte.svg",
|
||||||
"tagline": "Svelte lets you write high performance reactive apps with significantly less boilerplate. ",
|
"tagline": "Svelte lets you write high performance reactive apps with significantly less boilerplate. ",
|
||||||
"description": "A Svelte app, using the Svelte template, and a Serverless Function API.",
|
"description": "A Svelte app, using the Svelte template, and a Serverless Function API.",
|
||||||
@@ -643,7 +643,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Vanilla",
|
"name": "Vanilla",
|
||||||
"slug": "vanilla",
|
"slug": "vanilla",
|
||||||
"demo": "https://vanilla-functions.now-examples.now.sh",
|
"demo": "https://vanilla.now-examples.now.sh",
|
||||||
"logo": "https://raw.githubusercontent.com/zeit/now/master/packages/frameworks/logos/vanilla.svg",
|
"logo": "https://raw.githubusercontent.com/zeit/now/master/packages/frameworks/logos/vanilla.svg",
|
||||||
"tagline": "Love the original way of making websites?",
|
"tagline": "Love the original way of making websites?",
|
||||||
"description": "A vanilla site and a Serverless Function API."
|
"description": "A vanilla site and a Serverless Function API."
|
||||||
|
|||||||
Reference in New Issue
Block a user