From f26461b0b5e6d01b999d80a1ce671f9a13c94687 Mon Sep 17 00:00:00 2001 From: eliassjogreen Date: Fri, 25 Mar 2022 01:24:10 +0100 Subject: [PATCH 01/15] feat: initial stuff for a playground --- .../characters_letters_digits.md | 8 ++-- docs/specification/expressions.md | 16 +++---- docs/specification/literals.md | 35 ++++++++------- docs/specification/primary_expressions.md | 0 docs/toc.json | 3 +- www/client_deps.ts | 7 ++- www/components/Header.tsx | 18 ++++++++ www/components/NavigationBar.tsx | 8 ++-- www/fresh.gen.ts | 7 ++- www/islands/Playground.tsx | 16 +++++++ www/routes/_render.ts | 7 ++- www/routes/blog/[...slug].tsx | 27 ++---------- www/routes/blog/index.tsx | 25 +---------- www/routes/docs/[...slug].tsx | 2 +- www/routes/playground.tsx | 44 +++++++++++++++++++ 15 files changed, 139 insertions(+), 84 deletions(-) create mode 100644 docs/specification/primary_expressions.md create mode 100644 www/components/Header.tsx create mode 100644 www/islands/Playground.tsx create mode 100644 www/routes/playground.tsx diff --git a/docs/specification/characters_letters_digits.md b/docs/specification/characters_letters_digits.md index 5e7701d..6d7ac86 100644 --- a/docs/specification/characters_letters_digits.md +++ b/docs/specification/characters_letters_digits.md @@ -1,7 +1,7 @@ -There are a few predefined rules that could not easily be written as valid -EBNF or are used multiple times and therefor defined here to avoid repeating -them. The EBNF rules for the identifiers `unicode_*` are written within -comments as there is no real way to define them otherways. +There are a few predefined rules that could not easily be written as valid EBNF +or are used multiple times and therefor defined here to avoid repeating them. +The EBNF rules for the identifiers `unicode_*` are written within comments as +there is no real way to define them otherways. ```EBNF unicode_any = // any Unicode code point diff --git a/docs/specification/expressions.md b/docs/specification/expressions.md index c83eb16..6a6fdf0 100644 --- a/docs/specification/expressions.md +++ b/docs/specification/expressions.md @@ -1,16 +1,16 @@ -An expression in _Whistle_ evaluates to a value, this could be through either [binary](#binary) or -[unary expressions](#unary), or the special [conditional expression](#conditional). +An expression in _Whistle_ evaluates to a value, this could be through either +[binary](#binary) or [unary expressions](#unary), or the special +[conditional expression](#conditional). -> In the future, once [PR #21](https://github.com/whistle-lang/whistle/pull/21) gets merged, there -> will be a new type of expression: that of the array slice and index accessors. +> In the future, once [PR #21](https://github.com/whistle-lang/whistle/pull/21) +> gets merged, there will be a new type of expression: that of the array slice +> and index accessors. ## Unary A unary expression can be one of two things, either a primary or an operation. - -### Primary - -> TODO, Probably move this to a new file +Due to the complexity and many different types of primary expressions the +specification for them can be found [here](./primary_expressions). ### Operation diff --git a/docs/specification/literals.md b/docs/specification/literals.md index 4df66b3..4469f0e 100644 --- a/docs/specification/literals.md +++ b/docs/specification/literals.md @@ -1,8 +1,8 @@ -Literals are one of the essential parts of any program, they express values and one of the possible -building blocks of an [expression](./expressions). +Literals are one of the essential parts of any program, they express values and +one of the possible building blocks of an [expression](./expressions). -In _Whistle_ there are six literal types: booleans, integers, floats, characters, strings and the -none literal. +In _Whistle_ there are six literal types: booleans, integers, floats, +characters, strings and the none literal. ```EBNF literal = bool_literal @@ -15,7 +15,8 @@ literal = bool_literal ## Booleans -Booleans represent a true or false value, it does this through the keywords `true` and `false`. +Booleans represent a true or false value, it does this through the keywords +`true` and `false`. ```EBNF bool_literal = "true" | "false" @@ -23,10 +24,10 @@ bool_literal = "true" | "false" ## Integers -Integers represent a whole number in either binary, octal, decimal or hexadecimal base. Integer -literals are always positive/unsigned numbers, but this does not mean _Whistle_ only supports -unsigned integers, instead to use signed integers one would use the [negate](./operators#unary) -operator. +Integers represent a whole number in either binary, octal, decimal or +hexadecimal base. Integer literals are always positive/unsigned numbers, but +this does not mean _Whistle_ only supports unsigned integers, instead to use +signed integers one would use the [negate](./operators#unary) operator. ```EBNF int_literal = int_literal_binary @@ -41,10 +42,11 @@ int_literal_hex = "0" , ( "x" | "X" ) , { digit_hex } ## Floating point numbers -The float literal represents an [ieee754](https://en.wikipedia.org/wiki/IEEE_754) floating point -number. This number can contain an optional fractional part and or exponent along with the whole -part. Once again to negate the float literal one would use the [negate](./operators#unary) -operator. +The float literal represents an +[ieee754](https://en.wikipedia.org/wiki/IEEE_754) floating point number. This +number can contain an optional fractional part and or exponent along with the +whole part. Once again to negate the float literal one would use the +[negate](./operators#unary) operator. ```EBNF float_literal = { digit_decimal } , [ float_decimal ] , [ float_exponent ] @@ -54,9 +56,10 @@ float_exponent = ( "e" | "E" ) , [ "+" | "-" ] , { digit_decimal } ## Characters and strings -The character literal represents a single unicode character while a string represents an sequence -of these unicode characters. There are certain escaped values for things like newlines, tabs and -null bytes. These escaped values apply for both the inner values of strings and characters. +The character literal represents a single unicode character while a string +represents an sequence of these unicode characters. There are certain escaped +values for things like newlines, tabs and null bytes. These escaped values apply +for both the inner values of strings and characters. ```EBNF escaped_value = "\" , (""" | "\" | "r" | "n" | "t" | "0" | "'") diff --git a/docs/specification/primary_expressions.md b/docs/specification/primary_expressions.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/toc.json b/docs/toc.json index 8f1887a..142701b 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -13,7 +13,8 @@ "title": "Characters, letters and digits" }, "literals": { "title": "Literals" }, - "expressions": { "title": "Expressions" } + "expressions": { "title": "Expressions" }, + "primary_expressions": { "title": "Primary Expressions" } } } } diff --git a/www/client_deps.ts b/www/client_deps.ts index 5063c36..5631e0f 100644 --- a/www/client_deps.ts +++ b/www/client_deps.ts @@ -1,7 +1,12 @@ export * from "https://raw.githubusercontent.com/lucacasonato/fresh/main/runtime.ts"; +export { default as MonacoEditor } from "https://esm.sh/@monaco-editor/react@4.3.1?alias=react:@preact/compat,react-dom:@preact/compat"; import { IS_BROWSER } from "https://raw.githubusercontent.com/lucacasonato/fresh/main/runtime.ts"; import { apply, setup, tw } from "https://esm.sh/twind@0.16.16"; export { apply, setup, tw }; if (IS_BROWSER) { - setup({}); + setup({ + plugins: { + grow: { "flex-grow": "1" }, + }, + }); } diff --git a/www/components/Header.tsx b/www/components/Header.tsx new file mode 100644 index 0000000..852bb70 --- /dev/null +++ b/www/components/Header.tsx @@ -0,0 +1,18 @@ +/** @jsx h */ +/** @jsxFrag Fragment */ + +import { h, tw } from "../client_deps.ts"; + +export default function Header() { + return ( +
+
+

+ + + +

+
+
+ ); +} diff --git a/www/components/NavigationBar.tsx b/www/components/NavigationBar.tsx index 59e7f68..5df4ed8 100644 --- a/www/components/NavigationBar.tsx +++ b/www/components/NavigationBar.tsx @@ -16,10 +16,10 @@ export default function NavigationBar(props: { active: string }) { name: "Blog", href: "/blog", }, - // { - // name: "Playground", - // href: "/playground", - // }, + { + name: "Playground", + href: "/playground", + }, ]; return ( diff --git a/www/fresh.gen.ts b/www/fresh.gen.ts index 0fa8ad6..e444fe8 100644 --- a/www/fresh.gen.ts +++ b/www/fresh.gen.ts @@ -8,6 +8,8 @@ import * as $2 from "./routes/blog/index.tsx"; import * as $3 from "./routes/docs/[...slug].tsx"; import * as $4 from "./routes/gfm.css.ts"; import * as $5 from "./routes/index.tsx"; +import * as $6 from "./routes/playground.tsx"; +import * as $$0 from "./islands/Playground.tsx"; const manifest = { routes: { @@ -17,8 +19,11 @@ const manifest = { "./routes/docs/[...slug].tsx": $3, "./routes/gfm.css.ts": $4, "./routes/index.tsx": $5, + "./routes/playground.tsx": $6, + }, + islands: { + "./islands/Playground.tsx": $$0, }, - islands: {}, baseUrl: import.meta.url, }; diff --git a/www/islands/Playground.tsx b/www/islands/Playground.tsx new file mode 100644 index 0000000..2cafc95 --- /dev/null +++ b/www/islands/Playground.tsx @@ -0,0 +1,16 @@ +/** @jsx h */ +/** @jsxFrag Fragment */ + +import { Fragment, h, MonacoEditor, tw } from "../client_deps.ts"; + +export default function Playground() { + return ( +
+
+ +
+
+
+
+ ); +} diff --git a/www/routes/_render.ts b/www/routes/_render.ts index 73847be..6ee76b7 100644 --- a/www/routes/_render.ts +++ b/www/routes/_render.ts @@ -5,7 +5,12 @@ import { RenderContext, RenderFn, virtualSheet } from "../server_deps.ts"; const sheet = virtualSheet(); sheet.reset(); -setup({ sheet }); +setup({ + sheet, + plugins: { + "grow": { "flex-grow": "1" }, + }, +}); export function render(ctx: RenderContext, render: RenderFn) { const snapshot = ctx.state.get("twindSnapshot") as unknown[] | null; diff --git a/www/routes/blog/[...slug].tsx b/www/routes/blog/[...slug].tsx index 6fc1b87..6999d1f 100644 --- a/www/routes/blog/[...slug].tsx +++ b/www/routes/blog/[...slug].tsx @@ -1,9 +1,10 @@ /** @jsx h */ /** @jsxFrag Fragment */ -import { apply, Fragment, h, Head, PageProps, tw } from "../../client_deps.ts"; +import { Fragment, h, Head, PageProps, tw } from "../../client_deps.ts"; import { gfm, Handlers } from "../../server_deps.ts"; import Footer from "../../components/Footer.tsx"; +import Header from "../../components/Header.tsx"; import NavigationBar from "../../components/NavigationBar.tsx"; import { BlogPost, POSTS } from "../../data/blog.ts"; @@ -42,7 +43,7 @@ export default function BlogPage(props: PageProps) { return ( <> - Whistle blog + {props.data.page.title} - Whistle Blog
@@ -53,28 +54,6 @@ export default function BlogPage(props: PageProps) { ); } -function Header() { - return ( -
-
- - </div> - </header> - ); -} - -function Title() { - return ( - <> - <p class={tw`flex items-center`}> - <a href="/"> - <img class={tw`h-12 mx-4`} src="/whistle_horizontal_dark.svg" /> - </a> - </p> - </> - ); -} - function Main( { page: { slug, title, short, date, authors, href, file, markdown } }: { page: Page; diff --git a/www/routes/blog/index.tsx b/www/routes/blog/index.tsx index 39d7fdb..e0fd90e 100644 --- a/www/routes/blog/index.tsx +++ b/www/routes/blog/index.tsx @@ -3,6 +3,7 @@ import { Fragment, h, Head, tw } from "../../client_deps.ts"; import Footer from "../../components/Footer.tsx"; +import Header from "../../components/Header.tsx"; import NavigationBar from "../../components/NavigationBar.tsx"; import { BlogPost, POSTS } from "../../data/blog.ts"; @@ -10,7 +11,7 @@ export default function Index() { return ( <> <Head> - <title>Whistle blog + Whistle Blog
@@ -20,28 +21,6 @@ export default function Index() { ); } -function Header() { - return ( -
-
- - </div> - </header> - ); -} - -function Title() { - return ( - <> - <p class={tw`flex items-center`}> - <a href="/"> - <img class={tw`h-12 mx-4`} src="/whistle_horizontal_dark.svg" /> - </a> - </p> - </> - ); -} - function Main() { return ( <> diff --git a/www/routes/docs/[...slug].tsx b/www/routes/docs/[...slug].tsx index cf7c433..fc2d23d 100644 --- a/www/routes/docs/[...slug].tsx +++ b/www/routes/docs/[...slug].tsx @@ -47,7 +47,7 @@ export default function DocsPage(props: PageProps<Data>) { return ( <> <Head> - <title>{props.data.page?.title ?? "Not Found"} | Whistle docs + {props.data.page?.title ?? "Not Found"} - Whistle Docs
diff --git a/www/routes/playground.tsx b/www/routes/playground.tsx new file mode 100644 index 0000000..2d1487c --- /dev/null +++ b/www/routes/playground.tsx @@ -0,0 +1,44 @@ +/** @jsx h */ +/** @jsxFrag Fragment */ + +import { Fragment, h, Head, tw } from "../client_deps.ts"; +import { default as PlaygroundIsland } from "../islands/Playground.tsx"; +import Footer from "../components/Footer.tsx"; +import Header from "../components/Header.tsx"; +import NavigationBar from "../components/NavigationBar.tsx"; + +export default function Playground() { + return ( + <> + + Whistle Playground + +
+
+ +
+
+