update all docs

Author: coffee-cup

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Railway Corp.
+
+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

@@ -1,30 +1,19 @@
-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).
+# Railway Documentation
 
-## Getting Started
+Visit [docs.railway.app](https://docs.railway.app)
 
-First, run the development server:
+![](https://railway.app/og.png)
+
+## Contributing
+
+Thi is a [NextJS](https://nextjs.org) project.
+
+Develop with
 
 ```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.
+Open [http://localhost:3000](http://localhost:3000) to see the result.

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "railway-blog",
+  "name": "railway-docs",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/components/Icons.tsx

@@ -0,0 +1,35 @@
+import { Twitter } from "react-feather";
+import tw, { styled } from "twin.macro";
+
+export const TwitterIcon = styled(Twitter)`
+  stroke: none;
+  fill: #1da1f2;
+`;
+
+export const DiscordIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 245 240"
+    css={[tw`w-8 h-8`, `fill: #7289da`]}
+  >
+    <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z" />
+    <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z" />
+  </svg>
+);
+
+export const RssIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    tw="w-8 h-8"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z"
+    />
+  </svg>
+);

src/components/Nav.tsx

@@ -18,7 +18,10 @@ export const Nav: React.FC<Props> = () => {
   return (
     <>
       <header
-        css={[tw`flex items-center justify-between`, tw`px-8 py-6 text-center`]}
+        css={[
+          tw`flex items-center justify-between`,
+          tw`px-4 md:px-8 py-6 text-center`,
+        ]}
       >
         <div>
           <Logo tw="md:hidden" />

src/components/SEO.tsx

@@ -11,7 +11,7 @@ export interface Props extends NextSeoProps {
 
 const title = "Railway Docs";
 export const url = "https://docs.railway.app";
-const description = "Railway documentation website";
+const description = "Documentation for Railway";
 const image = "https://railway.app/og.png";
 
 const config: DefaultSeoProps = {

src/components/Sidebar.tsx

@@ -50,12 +50,12 @@ const SidebarContent: React.FC = () => {
             {section.pages.map(page => (
               <li key={page.slug}>
                 <Link
-                  href={`/docs/${page.slug}`}
+                  href={page.slug}
                   css={[
                     tw`text-gray-700 text-sm`,
                     tw`block px-4 py-2`,
                     tw`hover:bg-gray-100 hover:text-foreground`,
-                    pathname === `/docs/${page.slug}` &&
+                    pathname === page.slug &&
                       tw`bg-pink-100 text-pink-900 hover:bg-pink-100`,
                   ]}
                 >

src/data/sidebar.ts

@@ -2,16 +2,18 @@ import { IPage, ISidebarContent } from "../types";
 
 const makePage = (title: string, subPath?: string, slug?: string): IPage => ({
   title,
-  slug: `${subPath != null ? subPath + "/" : ""}${
-    slug ?? title.toLowerCase().replace(/\s+/g, "-")
-  }`,
+  slug:
+    slug ??
+    `/${subPath != null ? subPath + "/" : ""}${title
+      .toLowerCase()
+      .replace(/\s+/g, "-")}`,
 });
 
 export const sidebarContent: ISidebarContent = [
   {
     title: "General",
     pages: [
-      makePage("Introduction"),
+      makePage("Introduction", undefined, "/"),
       makePage("Getting Started"),
       makePage("Environments"),
     ],
@@ -27,12 +29,13 @@ export const sidebarContent: ISidebarContent = [
   {
     title: "Deployments",
     pages: [
-      makePage("Railway Up", "deployment", "up"),
+      makePage("Railway Up", "deployment", "/deployment/up"),
       makePage("GitHub Triggers", "deployment"),
       makePage("Builds", "deployment"),
       makePage("Serverless", "deployment"),
       makePage("Self Hosted Server", "deployment"),
       makePage("Project Tokens", "deployment"),
+      makePage("Procfiles", "deployment"),
     ],
   },
   {

src/layouts/DocsLayout.tsx

@@ -1,8 +1,5 @@
-import { useState } from "react";
 import "twin.macro";
-import { Nav } from "../components/Nav";
 import { PageNav } from "../components/PageNav";
-import { Sidebar } from "../components/Sidebar";
 import { FrontMatter } from "../types";
 import { Page, Props as PageProps } from "./Page";
 
@@ -16,24 +13,14 @@ export const DocsLayout: React.FC<Props> = ({
   ...props
 }) => {
   return (
-    <Page {...props}>
-      <div tw="min-h-screen relative flex max-w-6xl mx-auto">
-        <Sidebar />
+    <Page {...props} seo={{ title: `${frontMatter.title} - Railway` }}>
+      <div tw="max-w-prose flex-auto prose">
+        <h1>{frontMatter.title}</h1>
 
-        <div tw="flex flex-col flex-1">
-          <Nav />
-
-          <main tw="flex justify-between ">
-            <div tw="max-w-prose flex-auto px-4 sm:px-6 xl:px-8 pt-8 pb-24 lg:pb-16 prose">
-              <h1>{frontMatter.title}</h1>
-
-              <div className="docs-content">{children}</div>
-            </div>
-
-            <PageNav title={frontMatter.title} />
-          </main>
-        </div>
+        <div className="docs-content">{children}</div>
       </div>
+
+      <PageNav title={frontMatter.title} />
     </Page>
   );
 };

src/layouts/Page.tsx

@@ -1,9 +1,9 @@
+import GoogleFonts from "next-google-fonts";
 import React from "react";
-import { Footer } from "../components/Footer";
+import "twin.macro";
 import { Nav } from "../components/Nav";
 import { Props as SEOProps, SEO } from "../components/SEO";
-import GoogleFonts from "next-google-fonts";
-import "twin.macro";
+import { Sidebar } from "../components/Sidebar";
 
 export interface Props {
   seo?: SEOProps;
@@ -15,7 +15,17 @@ export const Page: React.FC<Props> = props => {
       <SEO {...props.seo} />
       <GoogleFonts href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" />
 
-      {props.children}
+      <div tw="min-h-screen relative flex max-w-6xl mx-auto">
+        <Sidebar />
+
+        <div tw="flex flex-col flex-1">
+          <Nav />
+
+          <main tw="flex justify-between px-4 md:px-8 pt-8 pb-24">
+            {props.children}
+          </main>
+        </div>
+      </div>
     </>
   );
 };

src/pages/404.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Page } from "../layouts/Page";
+import "twin.macro";
+
+const NotFoundPage: React.FC = () => (
+  <Page seo={{ title: "Not Found" }}>
+    <div tw="prose">
+      <h1>Page not found</h1>
+
+      <p>Maybe you were looking for one of the following</p>
+    </div>
+  </Page>
+);
+
+export default NotFoundPage;

src/pages/docs/cli/api-reference.md src/pages/cli/api-reference.md

@@ -32,6 +32,12 @@ infrastructure hosted on Railway by injecting environment variables.
 railway run CMD
 ```
 
+For example, to run your node project with Railway:
+
+```bash
+railway run npm start
+```
+
 ## Deploy
 
 Deploy current directory to Railway.

src/pages/docs/cli/installation.md src/pages/cli/installation.md

@@ -0,0 +1,7 @@
+---
+title: Procfiles
+---
+
+Railway supports [Procfiles](https://devcenter.heroku.com/articles/procfile), a
+file that can be included in the project to specify which command to run when
+the deployment starts.

src/pages/docs/cli/quick-start.md src/pages/cli/quick-start.md

@@ -1,17 +1,82 @@
 import { NextPage } from "next";
 import React from "react";
+import { DocsLayout } from "../layouts/DocsLayout";
 import { Page } from "../layouts/Page";
+import tw, { styled } from "twin.macro";
+import { Link } from "../components/Link";
+import { Twitter } from "react-feather";
+import { DiscordIcon, RssIcon, TwitterIcon } from "../components/Icons";
 
 const Home: NextPage = () => {
   return (
     <Page>
-      <div className="max-w-4xl px-4 mx-auto">
-        <header className="py-20">
-          <h1 className="text-6xl font-bold text-center">Railway Docs</h1>
-        </header>
+      <div>
+        <h1 tw="text-6xl font-bold mb-12">Railway Docs</h1>
+
+        <div tw="flex items-center space-x-4 mb-8">
+          <ButtonLink
+            href="/getting-started"
+            css={[
+              tw`bg-foreground border-2 border-foreground text-background`,
+              tw`hover:bg-background hover:text-foreground`,
+              tw`focus:ring-2 focus:ring-pink-700`,
+            ]}
+          >
+            Get Started
+          </ButtonLink>
+
+          <ButtonLink
+            href="https://railway.app"
+            css={[
+              tw`bg-pink-500 text-white border-2 border-pink-500`,
+              tw`hover:bg-pink-400`,
+              tw`focus:ring-2 focus:ring-pink-700`,
+            ]}
+          >
+            Visit Railway
+          </ButtonLink>
+        </div>
+
+        <div tw="prose mt-16">
+          <section>
+            <h2>Connect with Us</h2>
+
+            <h3 tw="flex items-center space-x-4">
+              <RssIcon /> <span>Changelog</span>
+            </h3>
+            <p>Weekly update with features and improvements made to Railway.</p>
+            <p>
+              <Link href="https://railway.app/changelog">View Changelog</Link>
+            </p>
+
+            <h3 tw="flex items-center space-x-4">
+              <TwitterIcon /> <span>Twitter</span>
+            </h3>
+            <p>Keep up with the latest news and updates.</p>
+            <p>
+              <Link href="https://twitter.com/Railway_App">
+                Follow @Railway_App
+              </Link>
+            </p>
+
+            <h3 tw="flex items-center space-x-4">
+              <DiscordIcon /> <span>Discord</span>
+            </h3>
+            <p>Chat with our Railway members, ask questions, hang out.</p>
+            <p>
+              <Link href="https://discord.gg/xAm2w6g">Join Discord</Link>
+            </p>
+          </section>
+        </div>
       </div>
     </Page>
   );
 };
 
 export default Home;
+
+const ButtonLink = styled(Link)`
+  ${tw`block font-medium rounded shadow`}
+  ${tw`px-3 py-2`}
+  ${tw`focus:outline-none`}
+`;