diff --git a/docs/components/CodeBlockTheme.js b/docs/components/CodeBlockTheme.js new file mode 100644 index 0000000..8cbdf68 --- /dev/null +++ b/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; diff --git a/docs/components/GetStarted.tsx b/docs/components/GetStarted.tsx index 21f2ad5..5b621c8 100644 --- a/docs/components/GetStarted.tsx +++ b/docs/components/GetStarted.tsx @@ -1,7 +1,5 @@ import React, { useState } from "react"; -import { BlueButton } from "./layout/Button"; import styles from "./get-started.module.css"; -import { GithubButton } from "./GithubButton"; export const GetStarted: React.FC = () => { const [clicked, setClicked] = useState(null); @@ -27,6 +25,10 @@ export const GetStarted: React.FC = () => { +
+
+
+
); }; diff --git a/docs/components/GithubButton.tsx b/docs/components/GithubButton.tsx deleted file mode 100644 index a561d5d..0000000 --- a/docs/components/GithubButton.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { useEffect, useState } from "react"; -import styles from "./github.module.css"; - -const GithubIcon: React.FC = () => { - return ( - - - - ); -}; - -export const GithubButton: React.FC = () => { - const [stars, setStars] = useState(null); - - useEffect(() => { - fetch(`https://api.github.com/repos/remotion-dev/remotion`) - .then((res) => res.json()) - .then((json) => json.watchers) - .then((w) => setStars(w)) - .catch((err) => { - console.log(err); - setStars(null); - }); - }, []); - - return ( -
- GitHub{" "} -
- {stars ? Math.floor(stars / 1000) + "k" : null} -
-
- ); -}; diff --git a/docs/components/Highlights.js b/docs/components/Highlights.js new file mode 100644 index 0000000..a55e23c --- /dev/null +++ b/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 ( +
+
+
+
+

+ It's not
rocket science. +

+

+ Use some of the syntax features of Ruby (but worse) and create programs that will maybe perform better. +

+ + < GetStarted /> +
+
+ +
+
+
+
+ ); +} + + + + +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: , + }, + { + label: "HTTP", + value: "http", + content: , + }, + { + label: "Closures", + value: "closures", + content: , + }, +]; + +function Builtins() { + return ( +
+
+
+
+ + {BuiltinList.map((props, idx) => { + return ( + + {props.content} + + ); + })} + +
+
+

+ Strong and stable builtins +

+

+ RocketLang ships some neat builtins such as handling HTTP requests and responses, + marshaling and unmashaling of JSON objects. +

+

+ It also comes with support of closures and modules and context sensitive variables in order + to create complex programs. +

+
+
+
+
+ ); +} + +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 ( +
+
+
+
+

+ Everything is an object +

+
+
+
+
+

+ Inspired by Ruby, in RocketLang everything is an object. +

+

+ 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. +

+
+
+ +
+
+
+
+ ); +} + +export default function Highlights() { + return ( + + {Welcome()} + {Builtins()} + {EverythingObject()} + + ); +} diff --git a/docs/components/Highlights.module.css b/docs/components/Highlights.module.css new file mode 100644 index 0000000..3c5bb3a --- /dev/null +++ b/docs/components/Highlights.module.css @@ -0,0 +1,59 @@ +.section { + display: flex; + padding: 4rem 0; + align-items: center; + vertical-align: center; + position: relative; + font-size: 1rem; +} + +.section.darker { + background: #f9f9f9; +} + +.section h2 { + font-size: 2rem; + text-align: center; + padding: 0 0 2rem; +} + +.section p { + font-size: 1.2rem; +} + +.paddingTopLg { + padding-top: 2rem; +} + +@media (max-width: 996px) { + .paddingTopLg { + padding-top: 0; + } +} + +.section code { + font-size: 0.83rem; +} + +.wantMore { + border-top: 1px dashed #d4d5d8; + margin-top: 1rem; + padding: 2rem 0 1rem 0; +} + +.writeincsstitle { + font-size: 4em; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-weight: 700; + line-height: 1; + -webkit-text-fill-color: transparent; + background: linear-gradient( + to right, + var(--text-color), + var(--light-text-color) + ); + -webkit-background-clip: text; + max-width: 600px; + margin-top: 50px +} \ No newline at end of file diff --git a/docs/components/WriteInReact.tsx b/docs/components/WriteInReact.tsx deleted file mode 100644 index c8f5446..0000000 --- a/docs/components/WriteInReact.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import { GetStarted } from "./GetStarted"; -import styles from "./writeinreact.module.css"; - -export const WriteInReact: React.FC = () => { - return ( -
-
-

- It's not
rocket science. -

-

- Use some of the syntax features of Ruby (but worse) and create programs that will maybe perform better. -

- - < GetStarted /> -
-
- -
-
- ); -}; diff --git a/docs/components/github.module.css b/docs/components/github.module.css deleted file mode 100644 index a894fe1..0000000 --- a/docs/components/github.module.css +++ /dev/null @@ -1,26 +0,0 @@ -.container { - display: flex; - flex-direction: row; - font-weight: bold; - justify-content: center; - align-items: center; -} - -.stars { - font-size: 0.75em; - display: inline-block; - background: var(--hover-color); - margin-left: 8px; - line-height: 1; - border-radius: 5px; - padding: 7px; -} - -@media screen and (max-width: 900px) { - .githubicon { - display: none; - } - .stars { - display: none; - } -} diff --git a/docs/components/layout/Button.tsx b/docs/components/layout/Button.tsx deleted file mode 100644 index f294208..0000000 --- a/docs/components/layout/Button.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { opacify } from "polished"; -import type { ButtonHTMLAttributes, DetailedHTMLProps } from "react"; -import React from "react"; -import styles from "./button.module.css"; -import { RED, UNDERLAY_RED } from "./colors"; - -type ExtraProps = { - size: Size; - fullWidth: boolean; - background: string; - hoverColor: string; - color: string; - loading: boolean; -}; - -type Size = "sm" | "bg"; - -type Props = DetailedHTMLProps< - ButtonHTMLAttributes, - HTMLButtonElement -> & - ExtraProps; -type MandatoryProps = Omit; -type PrestyledProps = DetailedHTMLProps< - ButtonHTMLAttributes, - HTMLButtonElement -> & - MandatoryProps; - -export const Button: React.FC = (props) => { - const { children, loading, hoverColor, fullWidth, color, size, ...other } = - props; - const actualDisabled = other.disabled || loading; - - return ( - - ); -}; - -export const BlueButton: React.FC = (props) => { - return ( -