[examples] Update all examples to use .vercel.app instead of .vercel.com (#7320)

This commit is contained in:
Lee Robinson
2022-01-18 08:56:31 -06:00
committed by GitHub
parent 59ae99bcff
commit 8ed55c6642
47 changed files with 134 additions and 760 deletions

View File

@@ -1,6 +1,6 @@
# [Name] Example
This directory is a brief example of a [Name](site-link) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Name](site-link) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own

View File

@@ -1,6 +1,6 @@
# AMP Example
This directory is a brief example of an [AMP](https://amp.dev/) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of an [AMP](https://amp.dev/) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own AMP project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/amp)
_Live Example: https://amp.examples.vercel.com_
_Live Example: https://amp-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Angular
This directory is a brief example of an [Angular](https://angular.io/) app that can be deployed with Vercel and zero configuration.
This directory is a brief example of an [Angular](https://angular.io/) app that can be deployed to Vercel with zero configuration.
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.3.

View File

@@ -1,8 +1,6 @@
![Blitz Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/blitz.svg)
# Blitz.js
# Blitz.js Example
This directory is a brief example of a [Blitz.js](https://blitzjs.com/) project that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Blitz.js](https://blitzjs.com/) project that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -10,6 +8,8 @@ Deploy your own Blitz.js project with Vercel by viewing the [documentation on de
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/blitzjs&template=blitzjs)
_Live Example: https://blitz-template.vercel.app_
### How We Created This Example
To get started with Blitz.js, you can use [npx](https://www.npmjs.com/package/npx) to initialize the project:

View File

@@ -1,6 +1,6 @@
# Brunch Example
This directory is a brief example of a [Brunch](https://brunch.io/) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Brunch](https://brunch.io/) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Brunch project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/brunch&template=brunch)
_Live Example: https://brunch.examples.vercel.com_
_Live Example: https://brunch-template.vercel.app_
### How We Created This Example

View File

@@ -1,14 +1,14 @@
# Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
This directory is a brief example of a [Create React App](https://github.com/facebook/create-react-app) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
Deploy your own Create React App project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/create-react-app-functions&template=create-react-app)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/create-react-app&template=create-react-app)
_Live Example: https://create-react-app.examples.vercel.com_
_Live Example: https://create-react-template.vercel.app/_
## Available Scripts

View File

@@ -1,6 +1,6 @@
# Docusaurus Example
# Docusaurus 2
This directory is a brief example of a [Docusaurus](https://v2.docusaurus.io) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Docusaurus](https://v2.docusaurus.io) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,6 +8,8 @@ Deploy your own Docusaurus project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/docusaurus-2&template=docusaurus-2)
_Live Example: https://docusaurus-2-template.vercel.app_
### How We Created This Example
To get started with Docusaurus on Vercel, you can use the [Docusaurus CLI](https://v2.docusaurus.io/docs/installation#scaffold-project-website) to initialize the project:

View File

@@ -2,7 +2,7 @@
# Docusaurus Example
This directory is a brief example of a [Docusaurus](https://docusaurus.io/) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Docusaurus](https://docusaurus.io/) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -10,7 +10,7 @@ Deploy your own Docusaurus project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/docusaurus&template=docusaurus)
_Live Example: https://docusaurus.examples.vercel.com_
_Live Example: https://docusaurus-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Dojo Example
This directory is a brief example of a [Dojo](https://dojo.io) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Dojo](https://dojo.io) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own

View File

@@ -1,6 +1,6 @@
# Eleventy
This directory is a brief example of a [Eleventy](https://www.11ty.io/) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Eleventy](https://www.11ty.io/) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Eleventy project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/eleventy&template=eleventy)
_Live Example: https://eleventy.examples.vercel.com_
_Live Example: https://eleventy-template.vercel.app_
## Getting Started

View File

@@ -2,7 +2,7 @@
# Ember Example
This directory is a brief example of an [Ember](https://emberjs.com/) app that can be deployed with Vercel and zero configuration.
This directory is a brief example of an [Ember](https://emberjs.com/) app that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -10,7 +10,7 @@ Deploy your own Ember project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/ember&template=ember)
_Live Example: https://ember.examples.vercel.com_
_Live Example: https://ember-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Gatsby
This directory is a brief example of a [Gatsby](https://www.gatsbyjs.org/) app with [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions) that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Gatsby](https://www.gatsbyjs.org/) app with [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions) that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Gatsby project, along with Serverless Functions, with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/gatsby&template=gatsby)
_Live Example: https://gatsby.examples.vercel.com_
_Live Example: https://gatsby.vercel.app_
## Running Locally

View File

@@ -1,7 +1,7 @@
module.exports = {
siteMetadata: {
title: `Gatsby + Node.js API`,
siteUrl: `https://gatsby.examples.vercel.com`,
siteUrl: `https://gatsby-template.vercel.app`,
},
plugins: [

View File

@@ -2,7 +2,7 @@
# Gridsome Example
This directory is a brief example of a [Gridsome](https://gridsome.org/) app that can be deployed with Vercel and zero configuration.
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
@@ -10,7 +10,7 @@ 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/vercel/tree/main/examples/gridsome&template=gridsome)
_Live Example: https://gridsome.examples.vercel.com_
_Live Example: https://gridsome-template.vercel.app_
### How We Created This Example

View File

@@ -2,7 +2,7 @@
# Hexo Example
This directory is a brief example of a [Hexo](https://hexo.io/) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Hexo](https://hexo.io/) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -10,7 +10,7 @@ Deploy your own Hexo project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/hexo&template=hexo)
_Live Example: https://hexo.examples.vercel.com_
_Live Example: https://hexo-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Hugo Example
This directory is a brief example of a [Hugo](https://gohugo.io/) app that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Hugo](https://gohugo.io/) app that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Hugo project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/hugo&template=hugo)
_Live Example: https://hugo.examples.vercel.com_
_Live Example: https://hugo-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Ionic Angular Example
This directory is a brief example of an [Ionic Angular](https://ionicframework.com/docs/angular/overview) app that can be deployed with Vercel and zero configuration
This directory is a brief example of an [Ionic Angular](https://ionicframework.com/docs/angular/overview) app that can be deployed to Vercel with zero configuration
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Ionic Angular project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/ionic-angular&template=ionic-angular)
_Live Example: https://ionic-angular.examples.vercel.com_
_Live Example: https://ionic-angular-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Ionic React Example
This directory is a brief example of an [Ionic React](https://ionicframework.com/docs/react/overview) app that can be deployed with Vercel and zero configuration
This directory is a brief example of an [Ionic React](https://ionicframework.com/docs/react/overview) app that can be deployed to Vercel with zero configuration
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Ionic React project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/ionic-react&template=ionic-react)
_Live Example: https://ionic-react.examples.vercel.com_
_Live Example: https://ionic-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Jekyll Example
This directory is a brief example of a [Jekyll](https://jekyllrb.com/) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Jekyll](https://jekyllrb.com/) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Jekyll project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/jekyll&template=jekyll)
_Live Example: https://jekyll.examples.vercel.com_
_Live Example: https://jekyll-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Middleman Example
This directory is a brief example of a [Middleman](https://middlemanapp.com/) site that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Middleman](https://middlemanapp.com/) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Middleman project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/middleman&template=middleman)
_Live Example: https://middleman.examples.vercel.com_
_Live Example: https://middleman-template.vercel.app_
### How We Created This Example

View File

@@ -4,7 +4,7 @@ Deploy your [Nuxt.js](https://nuxtjs.org) project to Vercel with zero configurat
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/nuxtjs&template=nuxtjs)
_Live Example: https://nuxtjs.examples.vercel.com/_
_Live Example: https://nuxtjs-template.vercel.app_
## Setup

View File

@@ -23,7 +23,7 @@ As you make changes, you should see your app automatically update in the browser
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/parcel&template=parcel)
_Live Example: https://parcel.examples.vercel.com_
_Live Example: https://parcel-template.vercel.app_
### Deploying From Your Terminal

View File

@@ -2,7 +2,7 @@
# Polymer Example
This directory is a brief example of a [Polymer](https://www.polymer-project.org/) app that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Polymer](https://www.polymer-project.org/) app that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -10,7 +10,7 @@ Deploy your own Polymer project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/polymer&template=polymer)
_Live Example: https://polymer.examples.vercel.com_
_Live Example: https://polymer-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Preact
This directory is a brief example of a [Preact](https://preactjs.com/) app that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Preact](https://preactjs.com/) app that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Preact project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/preact&template=preact)
_Live Example: https://preact.examples.vercel.com_
_Live Example: https://preact-template.vercel.app_
## Running Locally

View File

@@ -2,7 +2,7 @@
# RedwoodJS Example
This directory is a brief example of a [RedwoodJS](https://redwoodjs.com) app with [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions) that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [RedwoodJS](https://redwoodjs.com) app with [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions) that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -10,7 +10,7 @@ Deploy your own RedwoodJS project, along with Serverless Functions, with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/redwoodjs&template=redwoodjs)
_Live Example: https://redwoodjs.examples.vercel.com_
_Live Example: https://redwood-template.vercel.app_
### How We Created This Example

View File

@@ -1,19 +1,12 @@
# Welcome to Remix!
# Remix
- [Remix Docs](https://remix.run/docs)
This directory is a brief example of a [Remix](https://remix.run/docs) site that can be deployed to Vercel with zero configuration.
## Deployment
## Deploy Your Own
After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/remix&template=remix)
If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
```sh
npm i -g vercel
vercel
```
It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
_Live Example: https://remix-run-template.vercel.app_
## Development

View File

@@ -10,7 +10,7 @@ Deploy your own Saber project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/saber&template=saber)
_Live Example: https://saber.examples.vercel.com_
_Live Example: https://saber-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +1,6 @@
# Sapper Example
This directory is a brief example of a [Sapper](https://sapper.svelte.dev/) app that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Sapper](https://sapper.svelte.dev/) app that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Sapper project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/sapper&template=sapper)
_Live Example: https://sapper.examples.vercel.com_
_Live Example: https://sapper-template.vercel.app_
### How We Created This Example

View File

@@ -10,7 +10,7 @@ Deploy your own Scully project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/scully)
_Live Example: https://scully.examples.vercel.com_
_Live Example: https://scully-template.vercel.app_
### How We Created This Example

View File

@@ -1,13 +1,15 @@
![Solid Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/solid.svg)
# SolidStart
Everything you need to build a Solid project, powered by [`solid-start`](https://github.com/ryansolid/solid-start/tree/main/packages/start);
This directory is a brief example of a [SolidStart](https://github.com/ryansolid/solid-startp) site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
Deploy your own SolidStart project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/solidstart&template=solidstart)
_Live Example: https://solid-start-template.vercel.app_
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

View File

@@ -1,6 +1,6 @@
# Stencil Example
This directory is a brief example of a [Stencil](https://stenciljs.com/) app that can be deployed with Vercel and zero configuration
This directory is a brief example of a [Stencil](https://stenciljs.com/) app that can be deployed to Vercel with zero configuration
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Stencil project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/stencil&template=stencil)
_Live Example: https://stencil.examples.vercel.com_
_Live Example: https://stencil-template.vercel.app_
### How We Created This Example

View File

@@ -1,12 +1,12 @@
# Svelte
This directory is a brief example of a [Svelte](https://svelte.dev/) site that can be deployed with Vercel and zero-configuration. If you need to use API Routes, we recommend using our [SvelteKit example](https://github.com/vercel/vercel/tree/main/examples/sveltekit).
This directory is a brief example of a [Svelte](https://svelte.dev/) site that can be deployed to Vercel with zero-configuration. If you need to use API Routes, we recommend using our [SvelteKit example](https://github.com/vercel/vercel/tree/main/examples/sveltekit).
## Deploy Your Own
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/svelte&template=svelte)
_Live Example: https://svelte.examples.vercel.com_
_Live Example: https://svelte.vercel.app_
## Getting Started

View File

@@ -4,9 +4,9 @@ Everything you need to build a Svelte project, powered by [`create-svelte`](http
## Deploy Your Own
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmain%2Fexamples%2Fsveltekit&project-name=sveltekit-vercel&repository-name=sveltekit-vercel&demo-title=SvelteKit%20%2B%20Vercel&demo-description=A%20SvelteKit%20app%20optimized%20Edge-first.&demo-url=https%3A%2F%2Fsveltekit.examples.vercel.com%2F)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmain%2Fexamples%2Fsveltekit&project-name=sveltekit-vercel&repository-name=sveltekit-vercel&demo-title=SvelteKit%20%2B%20Vercel&demo-description=A%20SvelteKit%20app%20optimized%20Edge-first.&demo-url=https%3A%2F%2Fsveltekit-template.vercel.app%2F)
_Live Example: https://sveltekit.examples.vercel.com_
_Live Example: https://sveltekit-template.vercel.app_
## Creating a project

View File

@@ -2,7 +2,7 @@
# UmiJS Example
This directory is a brief example of a [UmiJS](https://umijs.org/) app that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [UmiJS](https://umijs.org/) app that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -10,7 +10,7 @@ Deploy your own UmiJS project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/umijs&template=umijs)
_Live Example: https://umijs.examples.vercel.com_
_Live Example: https://umijs-template.vercel.app_
### How We Created This Example

View File

@@ -1,6 +0,0 @@
.env
node_modules
#*
.#*
.vercel

View File

@@ -1,2 +0,0 @@
.env
node_modules

View File

@@ -1,9 +0,0 @@
# Realtime Pusher Example
This directory is a realtime serverless whiteboard powered by Pusher. The frontend is static vanilla HTML, CSS, and JavaScript and the backend is a single Node.js function both deployed with Vercel and zero configuration.
## Deploy Your Own
Deploy your own Pusher project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmain%2Fexamples%2Fvanilla-pusher-functions&env=APP_ID,KEY,SECRET,CLUSTER&envDescription=Pusher%20Channels&envLink=https%3A%2F%2Fpusher.com%2Fchannels)

View File

@@ -1,35 +0,0 @@
const Pusher = require('pusher');
const {
APP_ID: appId,
KEY: key,
SECRET: secret,
CLUSTER: cluster,
} = process.env;
const pusher = new Pusher({
appId,
key,
secret,
cluster,
});
module.exports = async (req, res) => {
const { x0, x1, y0, y1, color } = req.body;
try {
await new Promise((resolve, reject) => {
pusher.trigger(
'drawing-events',
'drawing',
{ x0, x1, y0, y1, color },
err => {
if (err) return reject(err);
resolve();
}
);
});
res.status(200).end('sent event succesfully');
} catch (e) {
console.log(e.message);
}
};

View File

@@ -1,24 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Realtime Whiteboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas class="whiteboard" ></canvas>
<div class="colors">
<div class="color black"></div>
<div class="color red"></div>
<div class="color green"></div>
<div class="color blue"></div>
<div class="color yellow"></div>
</div>
<script src="https://js.pusher.com/4.4/pusher.min.js"></script>
<script src="main.js"></script>
</body>
</html>

View File

@@ -1,140 +0,0 @@
'use strict';
(function() {
let canvas = document.querySelector('.whiteboard');
let colors = document.querySelectorAll('.color');
let context = canvas.getContext('2d');
let pusher = new Pusher('2a81e2e82be1a9d76433', {
cluster: 'us2',
});
let channel = pusher.subscribe('drawing-events');
channel.bind('drawing', onDrawingEvent);
let current = {
color: 'black',
};
let drawing = false;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mouseout', onMouseUp, false);
canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false);
canvas.addEventListener('touchstart', onMouseDown, false);
canvas.addEventListener('touchend', onMouseUp, false);
canvas.addEventListener('touchcancel', onMouseUp, false);
canvas.addEventListener('touchmove', throttle(onMouseMove, 10), false);
for (var i = 0; i < colors.length; i++) {
colors[i].addEventListener('click', updateColor, false);
}
function drawLine(x0, x1, y0, y1, color, emit) {
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.strokeStyle = color;
context.lineWidth = 2;
context.stroke();
context.closePath();
if (!emit) {
return;
}
let w = canvas.width;
let h = canvas.height;
pushDrawData({
x0: x0 / w,
x1: x1 / w,
y0: y0 / h,
y1: y1 / h,
color,
});
}
function onMouseDown(e) {
drawing = true;
current.x = e.clientX || e.touches[0].clientX;
current.y = e.clientY || e.toches[0].clientY;
}
function onMouseUp(e) {
if (!drawing) {
return;
}
drawing = false;
drawLine(
current.x,
e.clientX || e.touches[0].clientX,
current.y,
e.clientY || e.touches[0].clientY,
current.color,
true
);
}
function onMouseMove(e) {
if (!drawing) {
return;
}
drawLine(
current.x,
e.clientX || e.touches[0].clientX,
current.y,
e.clientY || e.touches[0].clientY,
current.color,
true
);
current.x = e.clientX || e.touches[0].clientX;
current.y = e.clientY || e.touches[0].clientY;
}
function throttle(callback, delay) {
let previousCall = Date.now();
return function() {
let time = Date.now();
if (time - previousCall >= delay) {
previousCall = time;
callback.apply(null, arguments);
}
};
}
function updateColor(e) {
pushDrawData();
current.color = e.target.className.split(' ')[1];
}
function onDrawingEvent({ x0, x1, y0, y1, color }) {
let w = canvas.width;
let h = canvas.height;
drawLine(x0 * w, x1 * w, y0 * h, y1 * h, color);
}
function onResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
async function pushDrawData(data) {
const res = await fetch('/api/push-draw-data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (!res.ok) {
console.error('event not sent');
}
}
})();

View File

@@ -1,5 +0,0 @@
{
"dependencies": {
"pusher": "^2.2.2"
}
}

View File

@@ -1,39 +0,0 @@
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/**
* Canvas
*/
.whiteboard {
height: 100%;
width: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.colors {
position: fixed;
}
.color {
display: inline-block;
height: 48px;
width: 48px;
}
.color.black { background-color: black; }
.color.red { background-color: red; }
.color.green { background-color: green; }
.color.blue { background-color: blue; }
.color.yellow { background-color: yellow; }

View File

@@ -1,380 +0,0 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
"@types/caseless@*":
version "0.12.2"
resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.2.tgz#f65d3d6389e01eeb458bd54dc8f52b95a9463bc8"
integrity sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w==
"@types/node@*":
version "14.14.31"
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.31.tgz#72286bd33d137aa0d152d47ec7c1762563d34055"
integrity sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g==
"@types/request@^2.47.1":
version "2.48.5"
resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.5.tgz#019b8536b402069f6d11bee1b2c03e7f232937a0"
integrity sha512-/LO7xRVnL3DxJ1WkPGDQrp4VTV1reX9RkC85mJ+Qzykj2Bdw+mG15aAfDahc76HtknjzE16SX/Yddn6MxVbmGQ==
dependencies:
"@types/caseless" "*"
"@types/node" "*"
"@types/tough-cookie" "*"
form-data "^2.5.0"
"@types/tough-cookie@*":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.0.tgz#fef1904e4668b6e5ecee60c52cc6a078ffa6697d"
integrity sha512-I99sngh224D0M7XgW1s120zxCt3VYQ3IQsuw3P3jbq5GG4yc79+ZjyKznyOGIQrflfylLgcfekeZW/vk0yng6A==
ajv@^6.12.3:
version "6.12.6"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
dependencies:
fast-deep-equal "^3.1.1"
fast-json-stable-stringify "^2.0.0"
json-schema-traverse "^0.4.1"
uri-js "^4.2.2"
asn1@~0.2.3:
version "0.2.4"
resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
dependencies:
safer-buffer "~2.1.0"
assert-plus@1.0.0, assert-plus@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
aws-sign2@~0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
aws4@^1.8.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
bcrypt-pbkdf@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
dependencies:
tweetnacl "^0.14.3"
caseless@~0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
combined-stream@^1.0.6, combined-stream@~1.0.6:
version "1.0.8"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
dependencies:
delayed-stream "~1.0.0"
core-util-is@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
dashdash@^1.12.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
dependencies:
assert-plus "^1.0.0"
delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
ecc-jsbn@~0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
dependencies:
jsbn "~0.1.0"
safer-buffer "^2.1.0"
extend@~3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
extsprintf@1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
extsprintf@^1.2.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
fast-deep-equal@^3.1.1:
version "3.1.3"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-json-stable-stringify@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
forever-agent@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
form-data@^2.5.0:
version "2.5.1"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4"
integrity sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.6"
mime-types "^2.1.12"
form-data@~2.3.2:
version "2.3.3"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.6"
mime-types "^2.1.12"
getpass@^0.1.1:
version "0.1.7"
resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
dependencies:
assert-plus "^1.0.0"
har-schema@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
har-validator@~5.1.0:
version "5.1.5"
resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
dependencies:
ajv "^6.12.3"
har-schema "^2.0.0"
http-signature@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
dependencies:
assert-plus "^1.0.0"
jsprim "^1.2.2"
sshpk "^1.7.0"
is-typedarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
jsbn@~0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
json-schema-traverse@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
json-schema@0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
json-stringify-safe@~5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
jsprim@^1.2.2:
version "1.4.1"
resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
dependencies:
assert-plus "1.0.0"
extsprintf "1.3.0"
json-schema "0.2.3"
verror "1.10.0"
mime-db@1.46.0:
version "1.46.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.46.0.tgz#6267748a7f799594de3cbc8cde91def349661cee"
integrity sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==
mime-types@^2.1.12, mime-types@~2.1.19:
version "2.1.29"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.29.tgz#1d4ab77da64b91f5f72489df29236563754bb1b2"
integrity sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==
dependencies:
mime-db "1.46.0"
oauth-sign@~0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
psl@^1.1.24:
version "1.8.0"
resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
punycode@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
punycode@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
pusher@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/pusher/-/pusher-2.2.2.tgz#6665b7b0bc7eb82e39dd5903983c28ad85f70362"
integrity sha512-HQLhon2ZMhMQpWOJQ2NKa6JAYFxRS37oIFGKuA3q6lxF4Yf7k2oFkaZlkODSAVXTBkQ8JaFr53ocPlXy2nAp2g==
dependencies:
"@types/request" "^2.47.1"
request "2.88.0"
tweetnacl "^1.0.0"
tweetnacl-util "^0.15.0"
qs@~6.5.2:
version "6.5.2"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
request@2.88.0:
version "2.88.0"
resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
dependencies:
aws-sign2 "~0.7.0"
aws4 "^1.8.0"
caseless "~0.12.0"
combined-stream "~1.0.6"
extend "~3.0.2"
forever-agent "~0.6.1"
form-data "~2.3.2"
har-validator "~5.1.0"
http-signature "~1.2.0"
is-typedarray "~1.0.0"
isstream "~0.1.2"
json-stringify-safe "~5.0.1"
mime-types "~2.1.19"
oauth-sign "~0.9.0"
performance-now "^2.1.0"
qs "~6.5.2"
safe-buffer "^5.1.2"
tough-cookie "~2.4.3"
tunnel-agent "^0.6.0"
uuid "^3.3.2"
safe-buffer@^5.0.1, safe-buffer@^5.1.2:
version "5.2.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sshpk@^1.7.0:
version "1.16.1"
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
dependencies:
asn1 "~0.2.3"
assert-plus "^1.0.0"
bcrypt-pbkdf "^1.0.0"
dashdash "^1.12.0"
ecc-jsbn "~0.1.1"
getpass "^0.1.1"
jsbn "~0.1.0"
safer-buffer "^2.0.2"
tweetnacl "~0.14.0"
tough-cookie@~2.4.3:
version "2.4.3"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
dependencies:
psl "^1.1.24"
punycode "^1.4.1"
tunnel-agent@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
dependencies:
safe-buffer "^5.0.1"
tweetnacl-util@^0.15.0:
version "0.15.1"
resolved "https://registry.yarnpkg.com/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz#b80fcdb5c97bcc508be18c44a4be50f022eea00b"
integrity sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw==
tweetnacl@^0.14.3, tweetnacl@~0.14.0:
version "0.14.5"
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
tweetnacl@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-1.0.3.tgz#ac0af71680458d8a6378d0d0d050ab1407d35596"
integrity sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==
uri-js@^4.2.2:
version "4.4.1"
resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
dependencies:
punycode "^2.1.0"
uuid@^3.3.2:
version "3.4.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
verror@1.10.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
dependencies:
assert-plus "^1.0.0"
core-util-is "1.0.2"
extsprintf "^1.2.0"

View File

@@ -1,10 +1,8 @@
![Vite Logo](https://vitejs.dev/logo.svg)
# Vite
# Vite Example
This directory is a brief example of a Vite/Vue.js site that can be deployed to Vercel with zero configuration.
This directory is a brief example of a Vite/Vue.js site that can be deployed with Vercel and zero configuration.
While this project uses Vue.js, Vite supports many popular JS frameworks. See all the supported frameworks here: https://vitejs.dev/guide/#scaffolding-your-first-vite-project
While this project uses Vue.js, Vite supports many popular JS frameworks. [See all the supported frameworks](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
## Deploy Your Own
@@ -12,6 +10,8 @@ Deploy your own Vite project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/vite&template=vite)
_Live Example: https://vite-vue-template.vercel.app_
### How We Created This Example
To get started with Vue.js deployed with Vercel, you can use Vite (https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to initialize the project:

View File

@@ -1,6 +1,6 @@
# Vue.js
This directory is a brief example of a [Vue.js](https://vuejs.org/) app that can be deployed with Vercel and zero configuration.
This directory is a brief example of a [Vue.js](https://vuejs.org/) app that can be deployed to Vercel with zero configuration.
## Deploy Your Own
@@ -8,7 +8,7 @@ Deploy your own Vue.js project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/vue&template=vue)
_Live Example: https://vue.examples.vercel.com_
_Live Example: https://vue-template.vercel.app_
## Running Locally

19
examples/zola/README.md Normal file
View File

@@ -0,0 +1,19 @@
# Zola
This directory is a brief example of a Zola site that can be deployed to Vercel with zero configuration.
## Deploy Your Own
Deploy your own Zola project with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/zola&template=zola)
_Live Example: https://zola-template.vercel.app_
### Deploying From Your Terminal
You can deploy your new Zola project with a single command from your terminal using [Vercel CLI](https://vercel.com/download):
```shell
$ vercel
```

View File

@@ -20,7 +20,7 @@ export const frameworks = [
{
name: 'Blitz.js',
slug: 'blitzjs',
demo: 'https://blitzjs.examples.vercel.com',
demo: 'https://blitz-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/blitz.svg',
tagline: 'Blitz.js: The Fullstack React Framework',
description:
@@ -58,7 +58,7 @@ export const frameworks = [
{
name: 'Next.js',
slug: 'nextjs',
demo: 'https://nextjs.examples.vercel.com',
demo: 'https://nextjs-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/next.svg',
tagline:
'Next.js makes you productive with React instantly — whether you want to build static or dynamic sites.',
@@ -105,12 +105,11 @@ export const frameworks = [
{
name: 'Gatsby.js',
slug: 'gatsby',
demo: 'https://gatsby.examples.vercel.com',
demo: 'https://gatsby.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/gatsby.svg',
tagline:
'Gatsby helps developers build blazing fast websites and apps with React.',
description:
'A Gatsby starter app with an API Route.',
description: 'A Gatsby starter app with an API Route.',
website: 'https://gatsbyjs.org',
sort: 5,
envPrefix: 'GATSBY_',
@@ -193,7 +192,7 @@ export const frameworks = [
{
name: 'Remix',
slug: 'remix',
demo: 'https://remix.examples.vercel.com',
demo: 'https://remix-run-template.vercel.app/',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/remix-no-shadow.svg',
tagline: 'Build Better Websites',
description: 'A new Remix app — the result of running `npx create-remix`.',
@@ -263,7 +262,7 @@ export const frameworks = [
{
name: 'Hexo',
slug: 'hexo',
demo: 'https://hexo.examples.vercel.com',
demo: 'https://hexo-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/hexo.svg',
tagline:
'Hexo is a fast, simple & powerful blog framework powered by Node.js.',
@@ -300,7 +299,7 @@ export const frameworks = [
{
name: 'Eleventy',
slug: 'eleventy',
demo: 'https://eleventy.examples.vercel.com',
demo: 'https://eleventy-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/eleventy.svg',
tagline:
'11ty is a simpler static site generator written in JavaScript, created to be an alternative to Jekyll.',
@@ -338,7 +337,7 @@ export const frameworks = [
{
name: 'Docusaurus 2',
slug: 'docusaurus-2',
demo: 'https://docusaurus-2.examples.vercel.com',
demo: 'https://docusaurus-2-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/docusaurus.svg',
tagline:
'Docusaurus makes it easy to maintain Open Source documentation websites.',
@@ -477,7 +476,7 @@ export const frameworks = [
{
name: 'Docusaurus 1',
slug: 'docusaurus',
demo: 'https://docusaurus.examples.vercel.com',
demo: 'https://docusaurus-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/docusaurus.svg',
tagline:
'Docusaurus makes it easy to maintain Open Source documentation websites.',
@@ -529,7 +528,7 @@ export const frameworks = [
{
name: 'Preact',
slug: 'preact',
demo: 'https://preact.examples.vercel.com',
demo: 'https://preact-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/preact.svg',
tagline:
'Preact is a fast 3kB alternative to React with the same modern API.',
@@ -582,7 +581,7 @@ export const frameworks = [
{
name: 'SolidStart',
slug: 'solidstart',
demo: 'https://solidstart.examples.vercel.com',
demo: 'https://solid-start-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/solid.svg',
tagline: 'Simple and performant reactivity for building user interfaces.',
description: 'A Solid app, created with SolidStart.',
@@ -622,7 +621,7 @@ export const frameworks = [
{
name: 'Dojo',
slug: 'dojo',
demo: 'https://dojo.examples.vercel.com',
demo: 'https://dojo-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/dojo.png',
tagline: 'Dojo is a modern progressive, TypeScript first framework.',
description:
@@ -691,7 +690,7 @@ export const frameworks = [
{
name: 'Ember.js',
slug: 'ember',
demo: 'https://ember.examples.vercel.com',
demo: 'https://ember-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/ember.svg',
tagline:
'Ember.js helps webapp developers be more productive out of the box.',
@@ -744,7 +743,7 @@ export const frameworks = [
{
name: 'Vue.js',
slug: 'vue',
demo: 'https://vue.examples.vercel.com',
demo: 'https://vue-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/vue.svg',
tagline:
'Vue.js is a versatile JavaScript framework that is as approachable as it is performant.',
@@ -822,7 +821,7 @@ export const frameworks = [
{
name: 'Scully',
slug: 'scully',
demo: 'https://scully.examples.vercel.com',
demo: 'https://scully-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/scullyio-logo.png',
tagline: 'Scully is a static site generator for Angular.',
description: 'The Static Site Generator for Angular apps.',
@@ -858,7 +857,7 @@ export const frameworks = [
{
name: 'Ionic Angular',
slug: 'ionic-angular',
demo: 'https://ionic-angular.examples.vercel.com',
demo: 'https://ionic-angular-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/ionic.svg',
tagline:
'Ionic Angular allows you to build mobile PWAs with Angular and the Ionic Framework.',
@@ -910,7 +909,7 @@ export const frameworks = [
{
name: 'Angular',
slug: 'angular',
demo: 'https://angular.examples.vercel.com',
demo: 'https://angular-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/angular.svg',
tagline:
'Angular is a TypeScript-based cross-platform framework from Google.',
@@ -977,7 +976,7 @@ export const frameworks = [
{
name: 'Polymer',
slug: 'polymer',
demo: 'https://polymer.examples.vercel.com',
demo: 'https://polymer-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/polymer.svg',
tagline:
'Polymer is an open-source webapps library from Google, for building using Web Components.',
@@ -1041,7 +1040,7 @@ export const frameworks = [
{
name: 'Svelte',
slug: 'svelte',
demo: 'https://svelte.examples.vercel.com',
demo: 'https://svelte.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/svelte.svg',
tagline:
'Svelte lets you write high performance reactive apps with significantly less boilerplate.',
@@ -1099,7 +1098,7 @@ export const frameworks = [
{
name: 'SvelteKit',
slug: 'sveltekit',
demo: 'https://sveltekit.examples.vercel.com',
demo: 'https://sveltekit-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/svelte.svg',
tagline:
'SvelteKit is a framework for building web applications of all sizes.',
@@ -1136,7 +1135,7 @@ export const frameworks = [
{
name: 'Ionic React',
slug: 'ionic-react',
demo: 'https://ionic-react.examples.vercel.com',
demo: 'https://ionic-react-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/ionic.svg',
tagline:
'Ionic React allows you to build mobile PWAs with React and the Ionic Framework.',
@@ -1236,11 +1235,10 @@ export const frameworks = [
{
name: 'Create React App',
slug: 'create-react-app',
demo: 'https://create-react-app.examples.vercel.com',
demo: 'https://create-react-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/react.svg',
tagline: 'Create React App allows you to get going with React in no time.',
description:
'A client-side React app created with create-react-app.',
description: 'A client-side React app created with create-react-app.',
website: 'https://create-react-app.dev',
sort: 4,
envPrefix: 'REACT_APP_',
@@ -1343,7 +1341,7 @@ export const frameworks = [
{
name: 'Gridsome',
slug: 'gridsome',
demo: 'https://gridsome.examples.vercel.com',
demo: 'https://gridsome-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/gridsome.svg',
tagline:
'Gridsome is a Vue.js-powered framework for building websites & apps that are fast by default.',
@@ -1380,7 +1378,7 @@ export const frameworks = [
{
name: 'UmiJS',
slug: 'umijs',
demo: 'https://umijs.examples.vercel.com',
demo: 'https://umijs-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/umi.svg',
tagline:
'UmiJS is an extensible enterprise-level React application framework.',
@@ -1433,7 +1431,7 @@ export const frameworks = [
{
name: 'Sapper',
slug: 'sapper',
demo: 'https://sapper.examples.vercel.com',
demo: 'https://sapper-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/svelte.svg',
tagline:
'Sapper is a framework for building high-performance universal web apps with Svelte.',
@@ -1470,7 +1468,7 @@ export const frameworks = [
{
name: 'Saber',
slug: 'saber',
demo: 'https://saber.examples.vercel.com',
demo: 'https://saber-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/saber.svg',
tagline:
'Saber is a framework for building static sites in Vue.js that supports data from any source.',
@@ -1538,7 +1536,7 @@ export const frameworks = [
{
name: 'Stencil',
slug: 'stencil',
demo: 'https://stencil.examples.vercel.com',
demo: 'https://stencil.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/stencil.svg',
tagline:
'Stencil is a powerful toolchain for building Progressive Web Apps and Design Systems.',
@@ -1625,7 +1623,7 @@ export const frameworks = [
{
name: 'Nuxt.js',
slug: 'nuxtjs',
demo: 'https://nuxtjs.examples.vercel.com',
demo: 'https://nuxtjs-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/nuxt.svg',
tagline:
'Nuxt.js is the web comprehensive framework that lets you dream big with Vue.js.',
@@ -1683,7 +1681,7 @@ export const frameworks = [
{
name: 'RedwoodJS',
slug: 'redwoodjs',
demo: 'https://redwoodjs.examples.vercel.com',
demo: 'https://redwood-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/redwoodjs.svg',
tagline: 'RedwoodJS is a full-stack framework for the Jamstack.',
description: 'A RedwoodJS app, bootstraped with create-redwood-app.',
@@ -1720,7 +1718,7 @@ export const frameworks = [
{
name: 'Hugo',
slug: 'hugo',
demo: 'https://hugo.examples.vercel.com',
demo: 'https://hugo-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/hugo.svg',
tagline:
'Hugo is the worlds fastest framework for building websites, written in Go.',
@@ -1773,7 +1771,7 @@ export const frameworks = [
{
name: 'Jekyll',
slug: 'jekyll',
demo: 'https://jekyll.examples.vercel.com',
demo: 'https://jekyll-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/jekyll.svg',
tagline:
'Jekyll makes it super easy to transform your plain text into static websites and blogs.',
@@ -1814,7 +1812,7 @@ export const frameworks = [
{
name: 'Brunch',
slug: 'brunch',
demo: 'https://brunch.examples.vercel.com',
demo: 'https://brunch-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/brunch.svg',
tagline:
'Brunch is a fast and simple webapp build tool with seamless incremental compilation for rapid development.',
@@ -1848,7 +1846,7 @@ export const frameworks = [
{
name: 'Middleman',
slug: 'middleman',
demo: 'https://middleman.examples.vercel.com',
demo: 'https://middleman-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/middleman.svg',
tagline:
'Middleman is a static site generator that uses all the shortcuts and tools in modern web development.',
@@ -1883,7 +1881,7 @@ export const frameworks = [
{
name: 'Zola',
slug: 'zola',
demo: 'https://zola.examples.vercel.com',
demo: 'https://zola-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/zola.png',
tagline: 'Everything you need to make a static site engine in one binary.',
description: 'A Zola app, created with the "Getting Started" tutorial.',
@@ -1917,7 +1915,7 @@ export const frameworks = [
{
name: 'Vite',
slug: 'vite',
demo: 'https://vite.examples.vercel.com',
demo: 'https://vite-vue-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/vite.svg',
tagline:
'Vite is a new breed of frontend build tool that significantly improves the frontend development experience.',
@@ -1955,7 +1953,7 @@ export const frameworks = [
{
name: 'Parcel',
slug: 'parcel',
demo: 'https://parcel.examples.vercel.com',
demo: 'https://parcel-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/parcel.png',
tagline:
'Parcel is a zero configuration build tool for the web that scales to projects of any size and complexity.',