@fastly/expressly 1.0.0--canary.4.2464710183.0

package/docs/docusaurus.config.js

@@ -0,0 +1,119 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require("prism-react-renderer/themes/github");
+const darkCodeTheme = require("prism-react-renderer/themes/nightOwl");
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: "expressly",
+  tagline: "Express-style router for Fastly's Compute@Edge",
+  url: "https://expressly.edgecompute.app",
+  baseUrl: "/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.ico",
+  organizationName: "fastly", 
+  projectName: "expressly", 
+
+  presets: [
+    [
+      "@docusaurus/preset-classic",
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: require.resolve("./sidebars.js"),
+          sidebarCollapsed: false,
+          editUrl: 'https://github.com/fastly/expressly/edit/main/docs/',
+        },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      colorMode: {
+        respectPrefersColorScheme: true,
+      },
+      navbar: {
+        title: "expressly",
+        logo: {
+          alt: "expressly Logo",
+          src: 'img/logo.png',
+        },
+        items: [
+          {
+            type: "doc",
+            docId: "intro",
+            position: "left",
+            label: "Docs",
+          },
+          {
+            href: "https://developer.fastly.com/solutions/examples/javascript/",
+            label: "Examples",
+            position: "left",
+          },
+          {
+            href: "https://github.com/fastly/expressly",
+            label: "GitHub",
+            position: "right",
+          },
+        ],
+      },
+      footer: {
+        style: "dark",
+        links: [
+          {
+            title: "expressly",
+            items: [
+              {
+                label: "Documentation",
+                to: "/docs/intro",
+              },
+              {
+                label: "Examples",
+                href: "https://developer.fastly.com/solutions/examples/javascript/",
+              },
+            ],
+          },
+          {
+            title: "Compute@Edge",
+            items: [
+              {
+                label: "Learn about Compute@Edge",
+                href: "https://developer.fastly.com/learning/compute/",
+              },
+              {
+                label: "Create your first JavaScript app",
+                href: "https://developer.fastly.com/learning/compute/javascript/",
+              },
+              {
+                label: "Fastly Developer Hub",
+                href: "https://developer.fastly.com/",
+              },
+            ],
+          },
+          {
+            title: "Fastly",
+            items: [
+              {
+                label: "Twitter",
+                href: "https://twitter.com/fastly",
+              },
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} Fastly Inc. All rights reserved.`,
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+    }),
+};
+
+module.exports = config;

package/docs/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "expressly-docs",
+  "version": "0.0.0",
+  "description": "Documentation for expressly - an Express-style router for Fastly's Compute@Edge",
+  "private": true,
+  "engines": {
+    "node": "^16.15.0"
+  },
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/preset-classic": "2.0.0-beta.21",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.1.1",
+    "prism-react-renderer": "^1.3.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
+    "@tsconfig/docusaurus": "^1.0.5",
+    "@types/react": "^17.0.2",
+    "typescript": "^4.7.3"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/docs/sidebars.js

@@ -0,0 +1,31 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  main: [{ type: "autogenerated", dirName: "." }],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['hello'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;

package/docs/src/components/HomepageFeatures.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

package/docs/src/components/HomepageFeatures.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './HomepageFeatures.module.css';
+
+type FeatureItem = {
+  title: string;
+  description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Easy to use',
+    description: (
+      <>
+        <strong>expressly</strong> was designed for JavaScript developers and inspired by the popular framework, <a href="https://expressjs.com/" target="_blank">Express</a>.
+      </>
+    ),
+  },
+  {
+    title: 'Focus on what matters',
+    description: (
+      <>
+        <strong>expressly</strong> lets you focus on your business logic, and makes it easier than ever to get started with <a href="https://www.fastly.com/products/edge-compute" target="_blank">Compute@Edge</a>.
+      </>
+    ),
+  },
+  {
+    title: 'Open source',
+    description: (
+      <>
+        Available for free to make the web a better place! Your contributions are welcomed and appreciated.
+      </>
+    ),
+  },
+];
+
+function Feature({title, description}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/docs/src/css/custom.css

@@ -0,0 +1,45 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-darker: rgb(31, 165, 136);
+  --ifm-color-primary-darkest: rgb(26, 136, 112);
+  --ifm-color-primary-light: rgb(70, 203, 174);
+  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme='dark'] {
+  background-color: #182931;
+}
+
+html[data-theme='dark'] .navbar {
+  background-color: #303846;
+}
+
+.hero-logo {
+  border-radius: 10px;
+  max-width: 200px;
+}
+
+.footer__copyright {
+  font-size: 0.8em;
+}

package/docs/src/pages/index.module.css

@@ -0,0 +1,35 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  background-color: #182931;
+}
+
+.heroSubtitle, .heroTitle {
+  color: white;
+}
+
+.description {
+  display: flex;
+  align-items: center;
+  height:auto;
+  margin:auto;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/docs/src/pages/index.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./index.module.css";
+import HomepageFeatures from "../components/HomepageFeatures";
+import CodeBlock from '@theme/CodeBlock';
+
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+      <div className="container">
+       
+        <img src="/img/logo.png" className="hero-logo" />
+        <h1 className={clsx("hero__title", styles.heroTitle)}>{siteConfig.title}</h1> 
+        <p className={clsx("hero__subtitle", styles.heroSubtitle)}>
+          {siteConfig.tagline}
+        </p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/intro"
+          >
+            GET STARTED
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): JSX.Element {
+  const exampleCode = `import { Router } from "@fastly/expressly";
+
+const router = new Router();
+
+router.use((req, res) => {
+  res.setHeader("x-powered-by", "expressly");
+});
+
+router.get("/", async (req, res) => {
+  return res.send("Hello world!");
+});
+
+router.listen();`;
+
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Routing for C@E`}
+      description="Express-style router for Fastly Compute@Edge"
+    >
+      <HomepageHeader />
+      <main>
+        <br />
+
+        <div className="container">
+          <div className="row">
+            <div className={clsx("col col--6", styles.description)}>
+              <div>
+                <h2>Don't waste time on boilerplate code</h2>
+                <p>
+                  <strong>expressly</strong> is a lightweight and minimalist routing layer for
+                  JavaScript apps running on Fastly's Compute@Edge.
+                </p>
+                <p>
+                  <dl>
+                    <dt>Install <strong>expressly</strong> from <a href="https://www.npmjs.com/package/@fastly/expresly" target="_blank">npm</a>:</dt>
+                    <dd>
+                      <CodeBlock
+                        language="shell"
+                        showLineNumbers={false}
+                      >
+                        npm i @fastly/expressly
+                      </CodeBlock>
+                    </dd>
+                    <dd>
+                      <CodeBlock
+                        language="shell"
+                      
+                        showLineNumbers={false}
+                      >
+                        yarn add @fastly/expressly
+                      </CodeBlock>
+                    </dd>
+                  </dl>
+                </p>
+              </div>
+            </div>
+            <div className="col col--6">
+              <CodeBlock
+                language="javascript"
+                showLineNumbers={true}
+              >
+                {exampleCode}
+              </CodeBlock>
+            </div>
+          </div>
+        </div>
+
+        <hr />
+
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}