[docs] Migrate Website to Docusaurus

docs/.gitignore

@@ -1,6 +1,20 @@
-node_modules
-public
-resources
-# Local Netlify folder
-.netlify
-TODO
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/blog/authors.yml

@@ -0,0 +1,5 @@
+flipez:
+  name: Robert
+  title: Creator of RocketLang
+  url: https://github.com/flipez
+  image_url: https://github.com/flipez.png

docs/components/CodeBlockTheme.js

@@ -0,0 +1,71 @@
+var theme = {
+  plain: {
+    color: "rgba(255,90,121,255)",
+    backgroundColor: "rgba(48,56,70,255)",
+  },
+  styles: [
+    {
+      types: ["prolog", "constant", "builtin", "boolean"],
+      style: {
+        color: "rgb(189, 147, 249)",
+      },
+    },
+    {
+      types: ["inserted", "function"],
+      style: {
+        color: "rgba(255,157,39,255)",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        color: "rgb(255, 85, 85)",
+      },
+    },
+    {
+      types: ["changed"],
+      style: {
+        color: "rgb(255, 184, 108)",
+      },
+    },
+    {
+      types: ["punctuation", "symbol"],
+      style: {
+        color: "rgb(248, 248, 242)",
+      },
+    },
+    {
+      types: ["string", "char", "tag", "selector"],
+      style: {
+        color: "rgba(79,209,217,255)",
+      },
+    },
+    {
+      types: ["keyword", "variable"],
+      style: {
+        color: "rgba(253,245,22,255)",
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["operator"],
+      style: {
+        color: "rgba(253,245,22,255)",
+      },
+    },
+    {
+      types: ["comment"],
+      style: {
+        color: "rgb(98, 114, 164)",
+      },
+    },
+    {
+      types: ["attr-name"],
+      style: {
+        color: "rgba(253,245,22,255)",
+      },
+    },
+  ],
+};
+
+module.exports = theme;

docs/components/GetStarted.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import styles from "./get-started.module.css";
+
+export const GetStarted: React.FC = () => {
+  const [clicked, setClicked] = useState<number | null>(null);
+  return (
+    <>
+      <div className={styles.myrow}>
+        <div style={{ position: "relative" }}>
+          {clicked ? (
+            <div key={clicked} className={styles.copied}>
+              Copied!
+            </div>
+          ) : null}
+          <div
+            className={styles.codeblock}
+            onClick={() => {
+              navigator.clipboard.writeText("brew install flipez/homebrew-tap/rocket-lang");
+
+              setClicked(Date.now());
+            }}
+            title="Click to copy"
+          >
+            $ brew install flipez/homebrew-tap/rocket-lang
+          </div>
+        </div>
+      </div>
+      <br />
+      <br />
+      <br />
+      <br />
+    </>
+  );
+};

docs/components/Highlights.js

@@ -0,0 +1,192 @@
+import React from "react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+import styles from "./Highlights.module.css";
+import Link from "@docusaurus/Link";
+import clsx from "clsx";
+import { GetStarted } from "./GetStarted";
+
+const WelcomeCode = `
+🚀 > puts("hello from rocket-lang!")
+"hello from rocket-lang!"
+=> nil
+
+🚀 > langs = ["ruby", "go", "crystal", "python", "php"]
+=> ["ruby", "go", "crystal", "python", "php"]
+
+🚀 > langs.yeet()
+=> "php"
+
+🚀 > langs.yoink("rocket-lang")
+=> nil
+
+🚀 > langs
+=> ["ruby", "go", "crystal", "python", "rocket-lang"]
+`
+
+function Welcome() {
+  return (
+    <section className={clsx(styles.section)}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--6">
+            <h1 className={styles.writeincsstitle}>
+              It's not <br /> rocket science.
+            </h1>
+            <p>
+              Use some of the syntax features of Ruby (but worse) and create programs that will maybe perform better.
+            </p>
+
+            < GetStarted />
+          </div>
+          <div className="col col--6">
+            <CodeBlock language="js" children={WelcomeCode} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+
+
+
+const JSONExample = `
+🚀 > JSON.parse('{"test": 123}')
+=> {"test": 123.0}
+
+🚀 > a = {"test": 1234}
+=> {"test": 1234}
+
+🚀 > a.to_json()
+=> '{"test":1234}'
+`;
+
+const HTTPExample = `
+def test()
+  puts(request["body"])
+  return("test")
+end
+
+HTTP.handle("/", test)
+
+HTTP.listen(3000)
+`;
+
+const ClosuresExample = `
+newGreeter = def (greeting)
+  return def (name)
+           puts(greeting + " " + name)
+         end
+end
+
+hello = newGreeter("Hello");
+hello("dear, future Reader!");
+`;
+
+const BuiltinList = [
+  {
+    label: "JSON",
+    value: "json",
+    content: <CodeBlock language="js" children={JSONExample} />,
+  },
+  {
+    label: "HTTP",
+    value: "http",
+    content: <CodeBlock language="js" children={HTTPExample} />,
+  },
+  {
+    label: "Closures",
+    value: "closures",
+    content: <CodeBlock language="js" children={ClosuresExample} />,
+  },
+];
+
+function Builtins() {
+  return (
+    <section className={styles.section}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--6">
+            <Tabs defaultValue="json" values={BuiltinList}>
+              {BuiltinList.map((props, idx) => {
+                return (
+                  <TabItem key={idx} value={props.value}>
+                    {props.content}
+                  </TabItem>
+                );
+              })}
+            </Tabs>
+          </div>
+          <div className="col col--6">
+            <h2>
+              Strong and stable <span className="highlight">builtins</span>
+            </h2>
+            <p>
+              RocketLang ships some neat builtins such as handling HTTP requests and responses,
+              marshaling and unmashaling of JSON objects.
+            </p>
+            <p>
+              It also comes with support of closures and modules and context sensitive variables in order
+              to create complex programs.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const ObjectExample = `
+🚀 > "test".type()
+=> "STRING"
+
+🚀 > true.wat()
+=> BOOLEAN supports the following methods:
+                plz_s()
+
+🚀 > 1.methods()
+=> ["plz_s", "plz_i", "plz_f"]
+`;
+
+function EverythingObject() {
+  return (
+    <section className={clsx(styles.section)}>
+      <div className="container">
+        <div className="row">
+          <div className="col">
+            <h2>
+              <span className="highlight">Everything</span> is an object
+            </h2>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col col--6">
+            <p className={styles.paddingTopLg}>
+              Inspired by Ruby, in RocketLang everything is an object.
+            </p>
+            <p>
+              This allows to thread unknown input in the same way and figuring out what kind of
+              information your function passes on the go.
+              Every object supports the same minimum default subset of methods to achive this.
+            </p>
+          </div>
+          <div className="col col--6">
+            <CodeBlock language="js" children={ObjectExample} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default function Highlights() {
+  return (
+    <span>
+      {Welcome()}
+      {Builtins()}
+      {EverythingObject()}
+    </span>
+  );
+}