next + tailwind added from forked repo

.babelrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: [["next/babel", { "preset-react": { runtime: "automatic" } }]],
+  plugins: ["babel-plugin-macros", ["styled-components", { ssr: true }]],
+};

.github/CODEOWNERS

@@ -0,0 +1 @@
+*       @styfle

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "bracketSpacing": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

CONTRIBUTING.md

@@ -0,0 +1,20 @@
+# Contributing
+
+There are two pieces to `og-image` that are worth noting before you begin development.
+
+1. The backend image generator located in [/api/index.ts](https://github.com/vercel/og-image/blob/main/api/index.ts)
+2. The frontend inputs located in [/web/index.ts](https://github.com/vercel/og-image/blob/main/web/index.ts)
+
+Vercel handles [routing](https://github.com/vercel/og-image/blob/main/vercel.json#L6) in an elegant way for us so deployment is easy.
+
+To start hacking, do the following:
+
+1. Clone this repo with `git clone https://github.com/vercel/og-image`
+2. Change directory with `cd og-image`
+3. Run `yarn` or `npm install` to install all dependencies
+4. Run locally with `vercel dev` and visit [localhost:3000](http://localhost:3000)  (if nothing happens, run `npm install -g vercel`)
+5. If necessary, edit the `exePath` in [options.ts](https://github.com/vercel/og-image/blob/main/api/_lib/options.ts) to point to your local Chrome executable
+
+Now you're ready to start local development!
+
+You can set an environment variable to assist with debugging `export OG_HTML_DEBUG=1`. This will render the image as HTML so you can play around with your browser's dev tools before committing changes to the template.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-2020 Vercel, Inc.
+
+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.

README.md

@@ -0,0 +1,68 @@
+<a href="https://vercel.com/new/project?template=vercel/og-image"><img width="128" src="https://vercel.com/button" align="right"></a>
+
+# [Open Graph Image as a Service](https://og-image.vercel.app)
+
+<a href="https://twitter.com/vercel">
+    <img align="right" src="https://og-image.vercel.app/tweet.png" height="300" />
+</a>
+
+Serverless service that generates dynamic Open Graph images that you can embed in your `<meta>` tags.
+
+For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.
+
+See the image embedded in the tweet for a real use case.
+
+
+## What is an Open Graph Image?
+
+Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup?
+How did your social network know how to "unfurl" the URL and get an image?
+The answer is in your `<head>`.
+
+The [Open Graph protocol](http://ogp.me) says you can put a `<meta>` tag in the `<head>` of a webpage to define this image.
+
+It looks like the following:
+
+```html
+<head>
+  <title>Title</title>
+  <meta property="og:image" content="http://example.com/logo.jpg" />
+</head>
+```
+
+## Why use this service?
+
+The short answer is that it would take a long time to painstakingly design an image for every single blog post and every single documentation page. And we don't want the exact same image for every blog post because that wouldn't make the article stand out when it was shared to Twitter. 
+
+That's where `og-image.vercel.app` comes in. We can simply pass the title of our blog post to our generator service and it will generate the image for us on the fly!
+
+It looks like the following:
+
+```html
+<head>
+  <title>Hello World</title>
+  <meta property="og:image" content="https://og-image.vercel.app/Hello%20World.png" />
+</head>
+```
+
+Now try changing the text `Hello%20World` to the title of your choosing and watch the magic happen ✨
+
+## Deploy your own
+
+You'll want to fork this repository and deploy your own image generator.
+
+1. Click the fork button at the top right of GitHub
+2. Clone the repo to your local machine with `git clone URL_OF_FORKED_REPO_HERE`
+3. Change directory with `cd og-image`
+4. Make changes by swapping out images, changing colors, etc (see [contributing](https://github.com/vercel/og-image/blob/main/CONTRIBUTING.md) for more info)
+5. Remove all configuration inside `vercel.json` besides `rewrites`
+6. Run locally with `vercel dev` and visit [localhost:3000](http://localhost:3000)  (if nothing happens, run `npm install -g vercel`)
+7. Deploy to the cloud by running `vercel` and you'll get a unique URL
+8. Setup [GitHub](https://vercel.com/github) to auto-deploy on push
+
+Once you have an image generator that sparks joy, you can setup [automatic GitHub](https://vercel.com/github) deployments so that pushing to master will deploy to production! 🚀
+
+## Authors
+
+- Steven ([@styfle](https://twitter.com/styfle)) - [Vercel](https://vercel.com)
+- Evil Rabbit ([@evilrabbit](https://twitter.com/evilrabbit_)) - [Vercel](https://vercel.com)

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  webpack: (config, { isServer }) => {
+    return config;
+  },
+};

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "railway-og-image-generator",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start --port ${PORT-3000}",
+    "clean": "rm -rf .next"
+  },
+  "dependencies": {
+    "chrome-aws-lambda": "9.1.0",
+    "marked": "2.0.3",
+    "next": "10.2.0",
+    "next-seo": "^4.24.0",
+    "puppeteer-core": "9.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.0",
+    "twemoji": "13.0.2"
+  },
+  "devDependencies": {
+    "@types/marked": "2.0.2",
+    "@types/node": "^15.0.2",
+    "@types/puppeteer": "5.4.3",
+    "@types/puppeteer-core": "5.4.0",
+    "@types/react": "^17.0.5",
+    "@types/react-dom": "^17.0.4",
+    "@types/styled-components": "^5.1.9",
+    "autoprefixer": "^10.2.5",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-styled-components": "^1.12.0",
+    "postcss": "^8.2.15",
+    "prettier": "^2.3.0",
+    "tailwindcss": "^2.1.2",
+    "twin.macro": "^2.4.1",
+    "typescript": "4.2.4"
+  },
+  "babelMacros": {
+    "twin": {
+      "preset": "styled-components"
+    }
+  }
+}

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ["tailwindcss", "autoprefixer"],
+};

public/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:site" content="@vercel"/>
+    <meta property="og:site_name" content="Open Graph Image as a Service"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:title" content="Open Graph Image as a Service"/>
+    <meta property="og:locale" content="en"/>
+    <meta property="og:url" content="https://og-image.vercel.app"/>
+    <link rel="canonical" href="https://og-image.vercel.app"/>
+    <meta name="description" content="A service to generate dynamic Open Graph images on-the-fly for the purpose of sharing a website to social media. Proudly hosted on Vercel."/>
+    <meta property="og:description" content="A service to generate dynamic Open Graph images on-the-fly for the purpose of sharing a website to social media. Proudly hosted on Vercel."/>
+    <meta property="og:image" content="https://og-image.vercel.app/Open%20Graph%20Image%20as%20a%20Service.png?theme=light&amp;md=1&amp;fontSize=95px&amp;images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg"/>
+    <title>Open Graph Image as a Service</title>
+    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <div class="container">
+        <div class="wrapper">
+            <a href="https://github.com/vercel/og-image" class="github-corner" aria-label="View source on GitHub">
+                <svg width="80" height="80" viewBox="0 0 250 250" class="svg">
+                    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+                    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+                    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">
+                </path>
+                </svg>
+            </a>
+            <h1>Open Graph Image as a Service</h1>
+            <div id="app">
+                <em>Loading...</em>
+            </div>
+            <div class="center">
+                <h2>What is this?</h2>
+                <p>This is a service that generates dynamic <a href="http://ogp.me">Open Graph</a> images that you can embed in your <code>&lt;meta&gt;</code> tags.</p>
+                <p>For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.</p>
+                <p>Find out how this works and deploy your own image generator by visiting <a href="https://github.com/vercel/og-image">GitHub</a>.</p>
+                <footer>Proudly hosted on <a href="https://vercel.com">▲Vercel</a></footer>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dot-dom@0.3.0/dotdom.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/copee@1.0.6/dist/copee.umd.js"></script>
+    <script type="module" src="dist/web/index.js"></script>
+</body>
+
+</html>

public/robots.txt

@@ -0,0 +1 @@
+User-agent: *