init commit

Author: coffee-cup

.babelrc.js

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

.gitignore

@@ -0,0 +1,37 @@
+# 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
+
+.blog_index_data
+.blog_index_data_previews

.prettierrc

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

README.md

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

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 = {
+  images: {
+    domains: ["user-images.githubusercontent.com"],
+  },
+};

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "railway-blog",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start --port ${PORT-3000}",
+    "clean": "rm -rf .next",
+    "tsc": "tsc -p ."
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.3.1",
+    "dayjs": "^1.9.7",
+    "github-slugger": "^1.3.0",
+    "globby": "^11.0.1",
+    "gray-matter": "^4.0.2",
+    "next": "10.0.3",
+    "next-google-fonts": "^1.2.1",
+    "next-mdx-remote": "^1.0.1",
+    "next-seo": "^4.17.0",
+    "next-themes": "^0.0.10",
+    "prismjs": "^1.22.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-feather": "^2.0.9",
+    "styled-components": "^5.2.1",
+    "theme-custom-properties": "^1.0.0",
+    "twin.macro": "^2.0.8",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.11",
+    "@types/react": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
+    "autoprefixer": "^10.1.0",
+    "postcss": "^8.2.1",
+    "prettier": "^2.2.1",
+    "tailwindcss": "^2.0.1",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.1.2"
+  },
+  "babelMacros": {
+    "twin": {
+      "preset": "styled-components"
+    }
+  }
+}

postcss.config.js

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

public/android-chrome-192x192.png

@@ -0,0 +1,19 @@
+{
+  "name": "Railway",
+  "short_name": "Railway",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#100F13",
+  "background_color": "#100F13",
+  "display": "standalone"
+}

public/android-chrome-512x512.png

@@ -0,0 +1,3 @@
+import { createTable } from "../src/lib/notion/createTable";
+
+createTable();

public/apple-touch-icon.png

@@ -0,0 +1,18 @@
+export interface Author {
+  name: string;
+  link: string;
+  handle: string;
+}
+
+export const authors: Record<string, Author> = {
+  runzer: {
+    name: "Jake Runzer",
+    link: "https://twitter.com/jakerunzer",
+    handle: "jakerunzer",
+  },
+  cooper: {
+    name: "Jake Cooper",
+    link: "https://twitter.com/JustJake",
+    handle: "justjake",
+  },
+};

public/blog.png

@@ -0,0 +1,5 @@
+import React, { ButtonHTMLAttributes } from "react";
+
+export const Button: React.FC<
+  ButtonHTMLAttributes<HTMLButtonElement>
+> = props => <button className="btn-primary" {...props} />;

public/favicon-16x16.png

@@ -0,0 +1,4 @@
+import React from "react";
+import "twin.macro";
+
+export const Footer: React.FC = () => <footer tw="text-center">feet</footer>;

public/favicon-32x32.png

@@ -0,0 +1,37 @@
+import NLink from "next/link";
+import React, { useMemo } from "react";
+
+export interface Props {
+  href: string;
+  external?: boolean;
+  className?: string;
+}
+
+const isExternalLink = (href: string) =>
+  href == null || href.startsWith("http://") || href.startsWith("https://");
+
+const useIsExternalLink = (href: string) =>
+  useMemo(() => isExternalLink(href), [href]);
+
+export const Link: React.FC<Props> = ({
+  href,
+  external,
+  children,
+  ...props
+}) => {
+  const isExternal = (useIsExternalLink(href) || external) ?? false;
+
+  if (isExternal) {
+    return (
+      <a href={href} target="_blank" rel="noopener" {...props}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <NLink href={href} passHref>
+      <a {...props}>{children}</a>
+    </NLink>
+  );
+};

public/favicon-96x96.png

@@ -0,0 +1,22 @@
+import React from "react";
+import "twin.macro";
+
+export const Logo: React.FC = () => (
+  <svg
+    data-v-423bf9ae=""
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 60 60"
+    className="logo"
+    tw="w-10 fill-current"
+  >
+    <g
+      data-v-423bf9ae=""
+      id="6f639fe5-02e1-4640-a1fb-f4b22b64e5ef"
+      transform="matrix(0.5999641134746578,0,0,0.5999641134746578,-437.5538206497148,-266.68705118956507)"
+      stroke="none"
+    >
+      <path d="M729.872 487.327a50.86 50.86 0 0 0-.464 5.033h75.879c-.265-.518-.621-.985-.98-1.442-12.972-16.769-19.95-15.315-29.932-15.741-3.328-.137-5.585-.192-18.832-.192-7.09 0-14.798.018-22.304.038.737-1.746 1.6-3.419 2.525-5.061-2.885 5.106-4.865 10.771-5.805 16.789l.891-4.397c.007-.031.018-.063.024-.094h38.883v5.067h-39.885zM805.885 497.432h-76.438c.08 1.352.206 2.686.388 4.002h70.571c3.146 0 4.907-1.786 5.479-4.002zM733.851 515.257a52.226 52.226 0 0 1-1.98-4.997c6.608 19.89 25.328 34.251 47.433 34.251 20.205 0 37.566-12.007 45.452-29.254h-90.905zM729.38 492.915c-.018.531-.08 1.055-.08 1.589 0 .538.063 1.059.08 1.59v-3.179zM824.77 515.229z"></path>
+      <path d="M779.303 444.505c-18.682 0-34.939 10.265-43.524 25.439 6.709-.014 19.775-.022 19.775-.022h.003v-.005c15.444 0 16.018.069 19.035.195l1.868.069c6.507.217 14.505.916 20.798 5.68 3.416 2.584 8.348 8.287 11.288 12.35 2.718 3.758 3.5 8.078 1.652 12.217-1.701 3.804-5.361 6.073-9.793 6.073H730.85l-.884-4.201c.426 2.707 1.037 5.344 1.879 7.886h94.914a49.863 49.863 0 0 0 2.546-15.682c.001-27.611-22.386-49.999-50.002-49.999z"></path>
+    </g>
+  </svg>
+);

public/favicon.ico

@@ -0,0 +1,12 @@
+import React from "react";
+import { Link } from "./Link";
+import { Logo } from "./Logo";
+import "twin.macro";
+
+export const Nav: React.FC = () => (
+  <nav tw="flex items-center justify-between px-3 py-3 text-center bg-pink-300">
+    <Link href="/">
+      <Logo />
+    </Link>
+  </nav>
+);

public/og.png

@@ -0,0 +1,12 @@
+import "twin.macro";
+import React from "react";
+
+export interface Props {}
+
+export const PageNav: React.FC<Props> = () => {
+  return (
+    <div tw="flex flex-col bg-yellow-300 pt-10 px-8 pb-6 sticky top-20">
+      SIDE NAV
+    </div>
+  );
+};

public/railway.svg

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { DefaultSeo, NextSeo, NextSeoProps } from "next-seo";
+import Head from "next/head";
+import { DefaultSeoProps } from "next-seo";
+
+export interface Props extends NextSeoProps {
+  title?: string;
+  description?: string;
+  image?: string;
+}
+
+const title = "Railway Docs";
+export const url = "https://docs.railway.app";
+const description = "Railway documentation website";
+const image = "https://railway.app/og.png";
+
+const config: DefaultSeoProps = {
+  title,
+  description,
+  openGraph: {
+    type: "website",
+    url,
+    site_name: title,
+    images: [{ url: image }],
+  },
+  twitter: {
+    handle: "@Railway_App",
+    cardType: "summary_large_image",
+  },
+};
+
+export const SEO: React.FC<Props> = ({ image, ...props }) => {
+  const title = props.title ?? config.title;
+  const description = props.description || config.description;
+
+  return (
+    <>
+      <DefaultSeo {...config} />
+
+      <NextSeo
+        {...props}
+        {...(image == null
+          ? {}
+          : {
+              openGraph: {
+                images: [{ url: image }],
+              },
+            })}
+      />
+
+      <Head>
+        <title>{title}</title>
+
+        <meta name="description" content={description} />
+      </Head>
+    </>
+  );
+};

public/site.webmanifest

@@ -0,0 +1,7 @@
+import "twin.macro";
+
+export interface Props {}
+
+export const Sidebar: React.FC<Props> = () => {
+  return <div tw="bg-blue-300 px-8">SIDEBAR</div>;
+};

scripts/create-table.ts

@@ -0,0 +1,29 @@
+import "twin.macro";
+import { Nav } from "../components/Nav";
+import { PageNav } from "../components/PageNav";
+import { Sidebar } from "../components/Sidebar";
+import { Page, Props as PageProps } from "./Page";
+
+export interface Props extends PageProps {}
+
+export const DocsLayout: React.FC<Props> = props => {
+  return (
+    <Page {...props}>
+      <div tw="min-h-screen flex flex-col max-w-7xl mx-auto">
+        <Nav />
+
+        <div tw="flex flex-1">
+          <Sidebar tw="" />
+
+          <main tw="flex-1 flex justify-between bg-red-200">
+            <div tw="max-w-prose flex-auto px-4 sm:px-6 xl:px-8 pt-10 pb-24 lg:pb-16 bg-red-400">
+              {props.children}
+            </div>
+
+            <PageNav />
+          </main>
+        </div>
+      </div>
+    </Page>
+  );
+};