toiljs 0.0.4 → 0.0.6

package/src/compiler/vite.ts

@@ -1,8 +1,10 @@
+import { createRequire } from 'node:module';
 import path from 'node:path';
+import { pathToFileURL } from 'node:url';
 
 import react from '@vitejs/plugin-react';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import { mergeConfig, type InlineConfig } from 'vite';
+import { mergeConfig, type InlineConfig, type PluginOption } from 'vite';
 
 import { type ResolvedToilConfig } from './config.js';
 import { toilPlugin } from './plugin.js';
@@ -21,6 +23,23 @@ function assetFileName(name: string): string {
     return 'assets/[name][extname]';
 }
 
+/**
+ * Loads the Tailwind v4 Vite plugin if the project has `@tailwindcss/vite` installed (added by
+ * `toiljs create`/`configure` when Tailwind is enabled). Resolved from the project root so it picks
+ * up the project's copy; returns `undefined` when Tailwind is off, so the plugin simply isn't added.
+ */
+async function tailwindPlugin(root: string): Promise<PluginOption | undefined> {
+    let resolved: string;
+    try {
+        resolved = createRequire(path.join(root, 'package.json')).resolve('@tailwindcss/vite');
+    } catch {
+        return undefined;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- dynamic import() is typed any
+    const mod: { default?: () => PluginOption } = await import(pathToFileURL(resolved).href);
+    return mod.default?.();
+}
+
 /** Splits React's runtime into its own long-lived chunk for better caching. */
 function manualChunks(id: string): string | undefined {
     if (!id.includes('node_modules')) return undefined;
@@ -36,21 +55,24 @@ function manualChunks(id: string): string | undefined {
 
 /**
  * Builds the framework-owned Vite config. Vite's `root` is the generated `.toil` dir so its
- * `index.html` emits at the output root (assets resolve correctly); `fs.allow` opens the
- * project (for `client/`) and the framework runtime. The opinionated default — Node polyfills
+ * `index.html` (built from the project's `public/index.html` template) emits at the output root
+ * with assets resolving correctly; static `public/` assets are mirrored to `.toil/public` and
+ * picked up via Vite's default publicDir. `fs.allow` opens the project (for `client/`) and the
+ * framework runtime. The opinionated default — Node polyfills
  * (Buffer/global/process), React plugin, toil route plugin, typed asset folders, React chunk
  * splitting and tuned build options — is applied here; `toiljs/client` is aliased to the
  * runtime, and the user's `client.vite` overrides deep-merge on top.
  */
-export function createViteConfig(cfg: ResolvedToilConfig): InlineConfig {
-    // .../build/client/index.js -> framework package root (covers build/ + node_modules in dev)
+export async function createViteConfig(cfg: ResolvedToilConfig): Promise<InlineConfig> {
     const frameworkRoot = path.resolve(path.dirname(cfg.runtimePath), '..', '..');
+    const tailwind = await tailwindPlugin(cfg.root);
 
     const base: InlineConfig = {
         root: cfg.toilDir,
         base: cfg.base,
         configFile: false,
         plugins: [
+            tailwind,
             nodePolyfills({ globals: { Buffer: true, global: true, process: true } }),
             react(),
             toilPlugin(cfg),
@@ -58,6 +80,7 @@ export function createViteConfig(cfg: ResolvedToilConfig): InlineConfig {
         resolve: {
             alias: {
                 'toiljs/client': cfg.runtimePath,
+                'toiljs/routes': path.join(cfg.toilDir, 'routes.ts'),
             },
             dedupe: ['react', 'react-dom'],
         },

package/src/io/BinaryReader.ts

@@ -25,7 +25,6 @@ export class BinaryReader {
         return this.buffer.byteLength;
     }
 
-    // Helpers for comparisons; unchanged
     public static stringCompare(a: string, b: string): number {
         return a.localeCompare(b);
     }
@@ -123,7 +122,6 @@ export class BinaryReader {
     public readU128(be: boolean = true): bigint {
         const raw = this.readBytes(U128_BYTE_LENGTH);
         let bytes = raw;
-        // If data was written in little-endian, we reverse before interpreting
         if (!be) {
             bytes = this.reverseBytes(raw);
         }
@@ -150,10 +148,8 @@ export class BinaryReader {
             bytes = this.reverseBytes(raw);
         }
 
-        // Construct as a 128-bit two's complement
         let value = BigInt('0x' + this.toHexString(bytes));
 
-        // If the top bit is set (sign bit in big-endian), interpret negative
         const signBitMask = 0x80;
         if ((bytes[0] as number) & signBitMask) {
             const twoTo128 = BigInt(1) << BigInt(128);
@@ -281,7 +277,7 @@ export class BinaryReader {
     }
 
     public readU8Array(): u8[] {
-        const length = this.readU16(true); // by default big-endian
+        const length = this.readU16(true);
         const result: u8[] = new Array<u8>(length);
         for (let i = 0; i < length; i++) {
             result[i] = this.readU8();

package/src/io/BinaryWriter.ts

@@ -46,7 +46,7 @@ export class BinaryWriter implements Disposable {
         let totalLength: u32 = U16_BYTE_LENGTH;
 
         for (let i = 0; i < values.length; i++) {
-            totalLength += U32_BYTE_LENGTH + (values[i] as Uint8Array).length; // each entry has a u32 length prefix
+            totalLength += U32_BYTE_LENGTH + (values[i] as Uint8Array).length;
         }
 
         return totalLength;
@@ -159,7 +159,7 @@ export class BinaryWriter implements Disposable {
     public writeU256(bigIntValue: bigint, be: boolean = true): void {
         if (
             bigIntValue >
-                115792089237316195423570985008687907853269984665640564039457584007913129639935n &&
+                115792089237316195423570985008687907853269984665640564039457584007913129639935n ||
             bigIntValue < 0n
         ) {
             throw new Error('u256 value is too large or negative.');
@@ -184,7 +184,7 @@ export class BinaryWriter implements Disposable {
     }
 
     public writeU128(bigIntValue: bigint, be: boolean = true): void {
-        if (bigIntValue > 340282366920938463463374607431768211455n && bigIntValue < 0n) {
+        if (bigIntValue > 340282366920938463463374607431768211455n || bigIntValue < 0n) {
             throw new Error('u128 value is too large or negative.');
         }
 

package/src/server/index.ts

@@ -1,9 +1,8 @@
 /**
- * AssemblyScript server (WASM) entry, compiled by the `toilscript` fork via `asc`.
+ * toilscript server (WASM) entry, compiled to WebAssembly by `toilscript`.
  *
- * Placeholder module: a trivial exported function that compiles with the stock fork std.
- * Custom native instructions/decorators (e.g. `@main`) ship from the `toilscript`
- * fork directly — no transformer required.
+ * Placeholder module: a trivial exported function that compiles with the toilscript std.
+ * Native decorators (e.g. `@main`) ship from toilscript directly — no transformer required.
  */
 
 export function add(a: i32, b: i32): i32 {

package/src/server/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "toilscript/std/assembly.json",
+    "include": ["./**/*.ts"]
+}

package/templates/app/client/404.tsx

@@ -0,0 +1,11 @@
+export default function NotFound() {
+    return (
+        <main>
+            <h1>404 — Page not found</h1>
+            <p>
+                This custom page is served from <code>client/404.tsx</code> whenever no route matches.
+            </p>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

package/templates/app/client/components/.gitkeep

@@ -0,0 +1 @@
+# Place shared React components here.

package/templates/app/client/components/Footer.tsx

@@ -0,0 +1,8 @@
+export default function Footer() {
+    return (
+        <footer className="footer">
+            Built with ToilJS · Powered by Dacely
+        </footer>
+    );
+}
+

package/templates/app/client/components/HoneycombBackground.tsx

@@ -0,0 +1,162 @@
+import { useRef, useEffect } from 'react';
+
+const HEX_R = 34;
+const GAP = 3;
+const DRAW_R = HEX_R - GAP;
+const GLOW_DIST = 140;
+
+function tracePath(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
+    ctx.beginPath();
+
+    for (let i = 0; i < 6; i++) {
+        const a = (Math.PI / 3) * i - Math.PI / 6;
+        const x = cx + r * Math.cos(a);
+        const y = cy + r * Math.sin(a);
+
+        if (i === 0) {
+            ctx.moveTo(x, y);
+        } else {
+            ctx.lineTo(x, y);
+        }
+    }
+
+    ctx.closePath();
+}
+
+function buildGrid(w: number, h: number): Array<{ x: number; y: number }> {
+    const colW = Math.sqrt(3) * HEX_R;
+
+    const rowH = HEX_R * 1.5;
+    const cols = Math.ceil(w / colW) + 2;
+    const rows = Math.ceil(h / rowH) + 2;
+    const hexes: Array<{ x: number; y: number }> = [];
+
+    for (let row = -1; row < rows; row++) {
+        for (let col = -1; col < cols; col++) {
+            hexes.push({
+                x: col * colW + (row % 2 !== 0 ? colW / 2 : 0),
+                y: row * rowH,
+            });
+        }
+    }
+
+    return hexes;
+}
+
+export default function HoneycombBackground() {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const mouse = useRef({ x: -9999, y: -9999 });
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) return;
+
+        const dpr = window.devicePixelRatio || 1;
+        let hexes: Array<{ x: number; y: number }> = [];
+        let raf: number;
+
+        function resize() {
+            if (!canvas || !ctx) return;
+
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            canvas.width = w * dpr;
+            canvas.height = h * dpr;
+            canvas.style.width = `${w}px`;
+            canvas.style.height = `${h}px`;
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            hexes = buildGrid(w, h);
+        }
+
+        function draw() {
+            if (!ctx) return;
+
+            const w = window.innerWidth;
+            const h = window.innerHeight;
+            ctx.clearRect(0, 0, w, h);
+
+            const mx = mouse.current.x;
+            const my = mouse.current.y;
+
+            for (const { x, y } of hexes) {
+                const dist = Math.hypot(x - mx, y - my);
+                const t = Math.max(0, 1 - dist / GLOW_DIST);
+                const ease = t * t * (3 - 2 * t);
+
+                tracePath(ctx, x, y, DRAW_R);
+
+                ctx.fillStyle = 'rgba(255,255,255,0.018)';
+                ctx.fill();
+
+                if (ease > 0) {
+                    ctx.fillStyle = `rgba(72,148,255,${ease * 0.025})`;
+                    ctx.fill();
+                }
+
+                ctx.strokeStyle = 'rgba(255,255,255,0.055)';
+                ctx.lineWidth = 1;
+                ctx.stroke();
+
+                if (ease > 0) {
+                    ctx.save();
+                    ctx.shadowColor = `rgba(72,148,255,${ease * 0.2})`;
+                    ctx.shadowBlur = 8 * ease;
+                    ctx.strokeStyle = `rgba(120,180,255,${ease * 0.2})`;
+                    ctx.lineWidth = 1 + ease * 0.4;
+                    ctx.stroke();
+                    ctx.restore();
+                }
+            }
+
+            raf = requestAnimationFrame(draw);
+        }
+
+        resize();
+        draw();
+
+        const onResize = () => {
+            cancelAnimationFrame(raf);
+            resize();
+            draw();
+        };
+
+        const onMove = (e: MouseEvent) => {
+            mouse.current = { x: e.clientX, y: e.clientY };
+        };
+
+        const onLeave = () => {
+            mouse.current = { x: -9999, y: -9999 };
+        };
+
+        window.addEventListener('resize', onResize);
+        window.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseleave', onLeave);
+
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseleave', onLeave);
+        };
+    }, []);
+
+    return (
+        <canvas
+            ref={canvasRef}
+            style={{
+                position: 'fixed',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                zIndex: 0,
+            }}
+        />
+    );
+}
+

package/templates/app/client/layout.tsx

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import Footer from './components/Footer';
+import HoneycombBackground from './components/HoneycombBackground';
+
+const GitHubIcon = () => (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.341-3.369-1.341-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
+    </svg>
+);
+
+export default function Layout({ children }: { children?: ReactNode }) {
+    return (
+        <div className="app">
+            <HoneycombBackground />
+            <Toil.Head
+                titleTemplate="%s By Dacely"
+                title="ToilJS"
+                meta={[{ name: 'description', content: 'The most performant React framework.' }]}
+            />
+            <header className="nav">
+                <Toil.Link href="/" className="nav-logo">
+                    <img src="images/logo.svg" alt="ToilJS" width={28} height={28} />
+                    <span>ToilJS</span>
+                </Toil.Link>
+
+                <nav className="nav-center">
+                    <Toil.NavLink href="/" end className="nav-center-link">
+                        Home
+                    </Toil.NavLink>
+                    <Toil.NavLink href="/get-started" className="nav-center-link">
+                        Get Started
+                    </Toil.NavLink>
+                </nav>
+
+                <nav className="nav-links">
+                    <Toil.Link href="https://toil.org/docs">Docs</Toil.Link>
+                    <a
+                        href="https://github.com/btc-vision/toiljs"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="nav-github">
+                        <GitHubIcon />
+                        GitHub
+                    </a>
+                </nav>
+            </header>
+
+            <main className="content">{children}</main>
+
+            <Footer />
+        </div>
+    );
+}

package/templates/app/client/public/images/.gitkeep

@@ -0,0 +1 @@
+# Place images and other static assets here; served at /images/*.

package/templates/app/client/public/images/logo.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+
+      .st1 {
+        fill: url(#linear-gradient1);
+      }
+
+      .st2 {
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="43.27" y1="43.27" x2="467.12" y2="467.12" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6990ff"/>
+      <stop offset=".03" stop-color="#6479f9"/>
+      <stop offset=".08" stop-color="#5d57f0"/>
+      <stop offset=".12" stop-color="#583de9"/>
+      <stop offset=".17" stop-color="#542ae3"/>
+      <stop offset=".23" stop-color="#521ee0"/>
+      <stop offset=".28" stop-color="#521be0"/>
+      <stop offset=".66" stop-color="#6900f4"/>
+      <stop offset="1" stop-color="#7f00f6"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient1" x1="149.99" y1="355.49" x2="149.99" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset=".15" stop-color="#6990ff" stop-opacity=".6"/>
+      <stop offset=".55" stop-color="#531ae1"/>
+    </linearGradient>
+  </defs>
+  <rect class="st2" width="500" height="500" rx="130" ry="130"/>
+  <path class="st1" d="M299.98,0L0,355.49v-225.49C0,58.2,58.2,0,130,0h169.98Z"/>
+  <path class="st0" d="M106.17,111.11h285.24c9.9,0,16.7,9.96,13.09,19.18l-17.98,45.96c-2.11,5.39-7.31,8.94-13.09,8.94h-74.65c-7.76,0-14.06,6.29-14.06,14.06v214.94c0,7.76-6.29,14.06-14.06,14.06h-45.96c-7.76,0-14.06-6.29-14.06-14.06v-217.25c0-7.76-6.29-14.06-14.06-14.06h-73.66c-5.82,0-11.04-3.59-13.12-9.02l-16.76-43.64c-3.54-9.21,3.26-19.1,13.12-19.1Z"/>
+</svg>

package/templates/app/client/public/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#080D11" />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <title>ToilJS By Dacely</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet" />
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

package/templates/app/client/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/templates/app/client/routes/about.tsx

@@ -0,0 +1,11 @@
+export default function About() {
+    return (
+        <main>
+            <h1>About</h1>
+            <p>
+                This page is served by <code>client/routes/about.tsx</code>.
+            </p>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

package/templates/app/client/routes/blog/[id].tsx

@@ -0,0 +1,12 @@
+export default function BlogPost() {
+    const { id } = Toil.useParams();
+    return (
+        <main>
+            <h1>Blog post {id}</h1>
+            <p>
+                Dynamic route from <code>client/routes/blog/[id].tsx</code>.
+            </p>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

package/templates/app/client/routes/docs/[...slug].tsx

@@ -0,0 +1,12 @@
+export default function Docs() {
+    const { slug } = Toil.useParams();
+    return (
+        <main>
+            <h1>Docs</h1>
+            <p>
+                Catch-all route <code>client/routes/docs/[...slug].tsx</code> matched: <code>{slug}</code>
+            </p>
+            <Toil.Link href="/">Back home</Toil.Link>
+        </main>
+    );
+}

package/templates/app/client/routes/get-started.tsx

@@ -0,0 +1,84 @@
+export default function GetStarted() {
+    return (
+        <div className="gs-page">
+
+            {/* Hero */}
+            <div className="gs-hero">
+                <h1 className="gs-title">Get Started</h1>
+                <p className="gs-desc">Everything you need to build your first ToilJS app.</p>
+            </div>
+
+
+            {/* Info grid */}
+            <section className="gs-section">
+                <h2 className="gs-section-title">Project Structure</h2>
+                <div className="gs-grid">
+
+                    <div className="gs-card gs-card--accent1">
+                        <div className="gs-card-icon">
+                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+                        </div>
+                        <h3>File-based Routing</h3>
+                        <p>Every <code>.tsx</code> file in <code>client/routes/</code> becomes a route. No config required.</p>
+                        <pre><code>{`index.tsx     →  /
+about.tsx     →  /about
+[id].tsx      →  /:id
+[...slug].tsx →  /*`}</code></pre>
+                    </div>
+
+                    <div className="gs-card gs-card--accent2">
+                        <div className="gs-card-icon">
+                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
+                        </div>
+                        <h3>Public Folder</h3>
+                        <p>Files in <code>public/</code> are copied as-is to the build root. Reference them with an absolute path.</p>
+                        <pre><code>{`public/images/logo.svg
+→  /images/logo.svg`}</code></pre>
+                    </div>
+
+                    <div className="gs-card gs-card--accent3">
+                        <div className="gs-card-icon">
+                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+                        </div>
+                        <h3>Layout</h3>
+                        <p><code>client/layout.tsx</code> wraps every page. Use it for your nav, footer, providers, and global styles.</p>
+                    </div>
+
+                    <div className="gs-card gs-card--accent4">
+                        <div className="gs-card-icon">
+                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+                        </div>
+                        <h3>Entry Point</h3>
+                        <p><code>client/toil.tsx</code> is the app entry. Import global CSS and call <code>Toil.mount()</code> — runs once on startup.</p>
+                    </div>
+
+                </div>
+            </section>
+
+            {/* Navigation section */}
+            <section className="gs-section">
+                <h2 className="gs-section-title">Navigation</h2>
+                <div className="gs-card gs-card--flat">
+                    <div className="gs-card-icon">
+                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                    </div>
+                    <h3>Use <code>{'<Toil.Link>'}</code> for client-side navigation</h3>
+                    <p>Avoids full page reloads and keeps transitions instant. Use a regular <code>{'<a>'}</code> only for external links.</p>
+                    <pre><code>{`// ✅ Internal navigation
+<Toil.Link href="/about">About</Toil.Link>
+
+// ✅ External link
+<a href="https://toil.org" target="_blank">Docs</a>`}</code></pre>
+                </div>
+            </section>
+
+            <div className="gs-actions">
+                <Toil.Link href="/" className="btn btn-secondary">← Back home</Toil.Link>
+                <a href="https://toil.org/docs" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
+                    Read the Docs
+                </a>
+            </div>
+
+        </div>
+    );
+}