From 7efaff4f6fa363267f88405529fdfdf656af3cee Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Dec 2022 19:47:28 +0100
Subject: [PATCH] basic style for toc + further cleanup

---
 .eslintignore                                 |   2 +
 website/src/components/Header/AstroLogo.astro |  40 -----
 .../src/components/Header/DefaultHeader.astro | 149 ------------------
 website/src/components/Header/Header.astro    |   4 +-
 website/src/components/Header/Search.tsx      |   2 +-
 .../src/components/Header/SidebarToggle.tsx   |  63 ++++----
 .../src/components/Header/SkipToContent.astro |  26 ---
 .../RightSidebar/RightSidebar.astro           |  27 +---
 .../RightSidebar/TableOfContents.tsx          | 139 ++++++++--------
 website/src/layouts/DefaultLayout.astro       | 136 ----------------
 website/src/pages/index.astro                 |   1 +
 website/src/styles/index.css                  |   4 +
 12 files changed, 110 insertions(+), 483 deletions(-)
 delete mode 100644 website/src/components/Header/AstroLogo.astro
 delete mode 100644 website/src/components/Header/DefaultHeader.astro
 delete mode 100644 website/src/components/Header/SkipToContent.astro
 delete mode 100644 website/src/layouts/DefaultLayout.astro

diff --git a/.eslintignore b/.eslintignore
index 3ceb0c5b..e4289393 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -12,3 +12,5 @@ tailwind.config.js
 vite.config.js
 /**/dist/**/*
 !**/*.mjs
+**/*.tsx
+**/*.ts
diff --git a/website/src/components/Header/AstroLogo.astro b/website/src/components/Header/AstroLogo.astro
deleted file mode 100644
index 6c8b5b9c..00000000
--- a/website/src/components/Header/AstroLogo.astro
+++ /dev/null
@@ -1,40 +0,0 @@
----
-type Props = {
-	size: number;
-};
-const { size } = Astro.props as Props;
----
-
-<svg
-	class="logo"
-	width={size}
-	height={size}
-	viewBox="0 0 256 256"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<style>
-		#flame {
-			fill: var(--theme-text-accent);
-		}
-
-		#a {
-			fill: var(--theme-text-accent);
-		}
-	</style>
-	<title>Logo</title>
-	<path
-		id="a"
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
-	>
-	</path>
-	<path
-		id="flame"
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
-	>
-	</path>
-</svg>
diff --git a/website/src/components/Header/DefaultHeader.astro b/website/src/components/Header/DefaultHeader.astro
deleted file mode 100644
index 93144c02..00000000
--- a/website/src/components/Header/DefaultHeader.astro
+++ /dev/null
@@ -1,149 +0,0 @@
----
-// import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
-import * as CONFIG from '../../config';
-// import AstroLogo from './AstroLogo.astro';
-import SkipToContent from './SkipToContent.astro';
-import SidebarToggle from './SidebarToggle';
-// import LanguageSelect from './LanguageSelect';
-import Search from './Search';
-
-type Props = {
-  currentPage: string;
-};
-
-const { currentPage } = Astro.props as Props;
-// const lang = getLanguageFromURL(currentPage);
----
-
-<header>
-  <SkipToContent />
-  <nav class="nav-wrapper" title="Top Navigation">
-    <div class="menu-toggle">
-      <SidebarToggle client:idle />
-    </div>
-    <div class="logo flex" style="overflow:visible">
-      <a href="/">
-        <div>🌀</div>
-        <h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
-      </a>
-    </div>
-    <div style="flex-grow: 1;"></div>
-    {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
-    <div class="search-item">
-      <Search client:idle />
-    </div>
-  </nav>
-</header>
-
-<style>
-  header {
-    z-index: 11;
-    height: var(--theme-navbar-height);
-    width: 100%;
-    background-color: var(--theme-navbar-bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: sticky;
-    top: 0;
-  }
-
-  .logo {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-    width: 30px;
-    font-size: 2rem;
-    flex-shrink: 0;
-    font-weight: 600;
-    line-height: 1;
-    color: hsla(var(--color-base-white), 100%, 1);
-    gap: 0.25em;
-    z-index: -1;
-  }
-
-  .logo a {
-    display: flex;
-    padding: 0.5em 0.25em;
-    margin: -0.5em -0.25em;
-    text-decoration: none;
-    font-weight: bold;
-  }
-
-  .logo a {
-    transition: color 100ms ease-out;
-    color: var(--theme-text);
-  }
-
-  .logo a:hover,
-  .logo a:focus {
-    color: var(--theme-text-accent);
-  }
-
-  .logo h1 {
-    display: none;
-    font: inherit;
-    color: inherit;
-    margin: 0;
-  }
-
-  .nav-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 1em;
-    width: 100%;
-    max-width: 82em;
-    padding: 0 1rem;
-  }
-
-  @media (min-width: 50em) {
-    header {
-      position: static;
-      padding: 2rem 0rem;
-    }
-
-    .logo {
-      width: auto;
-      margin: 0;
-      z-index: 0;
-    }
-
-    .logo h1 {
-      display: initial;
-    }
-
-    .menu-toggle {
-      display: none;
-    }
-  }
-
-  /** Style Algolia */
-  :root {
-    --docsearch-primary-color: var(--theme-accent);
-    --docsearch-logo-color: var(--theme-text);
-  }
-
-  .search-item {
-    display: none;
-    position: relative;
-    z-index: 10;
-    flex-grow: 1;
-    padding-right: 0.7rem;
-    display: flex;
-    max-width: 200px;
-  }
-
-  @media (min-width: 50em) {
-    .search-item {
-      max-width: 400px;
-    }
-  }
-</style>
-
-<style is:global>
-  .search-item > * {
-    flex-grow: 1;
-  }
-</style>
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index 2aea68fe..ed89ccb4 100644
--- a/website/src/components/Header/Header.astro
+++ b/website/src/components/Header/Header.astro
@@ -2,7 +2,6 @@
 // import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
 import * as CONFIG from '../../config';
 // import AstroLogo from './AstroLogo.astro';
-import SkipToContent from './SkipToContent.astro';
 import SidebarToggle from './SidebarToggle';
 // import LanguageSelect from './LanguageSelect';
 import Search from './Search';
@@ -15,7 +14,6 @@ const { currentPage } = Astro.props as Props;
 // const lang = getLanguageFromURL(currentPage);
 ---
 
-<SkipToContent />
 <nav class="flex justify-between py-2" title="Top Navigation">
   <!--     <div class="menu-toggle">
       <SidebarToggle client:idle />
@@ -29,7 +27,7 @@ const { currentPage } = Astro.props as Props;
   <div style="flex-grow: 1;"></div>
   {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
   <div class="search-item h-10">
-    <Search client:idle />
+    <!--     <Search client:idle /> -->
   </div>
 </nav>
 
diff --git a/website/src/components/Header/Search.tsx b/website/src/components/Header/Search.tsx
index 31ef6ad9..f51ede45 100644
--- a/website/src/components/Header/Search.tsx
+++ b/website/src/components/Header/Search.tsx
@@ -26,7 +26,7 @@ export default function Search() {
   }, [setIsOpen]);
 
   const onInput = useCallback(
-    (e) => {
+    (e: any) => {
       setIsOpen(true);
       setInitialQuery(e.key);
     },
diff --git a/website/src/components/Header/SidebarToggle.tsx b/website/src/components/Header/SidebarToggle.tsx
index 50a5d93d..e07beb29 100644
--- a/website/src/components/Header/SidebarToggle.tsx
+++ b/website/src/components/Header/SidebarToggle.tsx
@@ -3,42 +3,37 @@ import type { FunctionalComponent } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
 const MenuToggle: FunctionalComponent = () => {
-	const [sidebarShown, setSidebarShown] = useState(false);
+  const [sidebarShown, setSidebarShown] = useState(false);
 
-	useEffect(() => {
-		const body = document.querySelector('body')!;
-		if (sidebarShown) {
-			body.classList.add('mobile-sidebar-toggle');
-		} else {
-			body.classList.remove('mobile-sidebar-toggle');
-		}
-	}, [sidebarShown]);
+  useEffect(() => {
+    const body = document.querySelector('body')!;
+    if (sidebarShown) {
+      body.classList.add('mobile-sidebar-toggle');
+    } else {
+      body.classList.remove('mobile-sidebar-toggle');
+    }
+  }, [sidebarShown]);
 
-	return (
-		<button
-			type="button"
-			aria-pressed={sidebarShown ? 'true' : 'false'}
-			id="menu-toggle"
-			onClick={() => setSidebarShown(!sidebarShown)}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="1em"
-				height="1em"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M4 6h16M4 12h16M4 18h16"
-				/>
-			</svg>
-			<span className="sr-only">Toggle sidebar</span>
-		</button>
-	);
+  return (
+    <button
+      type="button"
+      aria-pressed={sidebarShown ? 'true' : 'false'}
+      id="menu-toggle"
+      onClick={() => setSidebarShown(!sidebarShown)}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+      <span className="sr-only">Toggle sidebar</span>
+    </button>
+  );
 };
 
 export default MenuToggle;
diff --git a/website/src/components/Header/SkipToContent.astro b/website/src/components/Header/SkipToContent.astro
deleted file mode 100644
index 4d97923f..00000000
--- a/website/src/components/Header/SkipToContent.astro
+++ /dev/null
@@ -1,26 +0,0 @@
----
-type Props = {};
----
-
-<a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>
-
-<style>
-	.skiplink,
-	.skiplink:focus,
-	.skiplink:focus-visible {
-		position: absolute;
-		padding: 0.25em;
-		font-size: larger;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 9;
-		display: block;
-		text-align: center;
-		background-color: var(--theme-text-accent);
-		color: var(--theme-bg);
-		border-radius: 0.25em;
-		outline: var(--theme-bg) solid 1px;
-		outline-offset: 0;
-	}
-</style>
diff --git a/website/src/components/RightSidebar/RightSidebar.astro b/website/src/components/RightSidebar/RightSidebar.astro
index d45fbd49..7334b1eb 100644
--- a/website/src/components/RightSidebar/RightSidebar.astro
+++ b/website/src/components/RightSidebar/RightSidebar.astro
@@ -4,31 +4,14 @@ import MoreMenu from './MoreMenu.astro';
 import type { MarkdownHeading } from 'astro';
 
 type Props = {
-	headings: MarkdownHeading[];
-	githubEditUrl: string;
+  headings: MarkdownHeading[];
+  githubEditUrl: string;
 };
 
 const { headings, githubEditUrl } = Astro.props as Props;
 ---
 
-<nav class="sidebar-nav" aria-labelledby="grid-right">
-	<div class="sidebar-nav-inner">
-		<TableOfContents client:media="(min-width: 50em)" headings={headings} />
-		<MoreMenu editHref={githubEditUrl} />
-	</div>
+<nav aria-labelledby="grid-right">
+  <TableOfContents client:media="(min-width: 50em)" headings={headings} />
+  <MoreMenu editHref={githubEditUrl} />
 </nav>
-
-<style>
-	.sidebar-nav {
-		width: 100%;
-		position: sticky;
-		top: 0;
-	}
-
-	.sidebar-nav-inner {
-		height: 100%;
-		padding: 0;
-		padding-top: var(--doc-padding);
-		overflow: auto;
-	}
-</style>
diff --git a/website/src/components/RightSidebar/TableOfContents.tsx b/website/src/components/RightSidebar/TableOfContents.tsx
index 34b0ab73..d9a8d4af 100644
--- a/website/src/components/RightSidebar/TableOfContents.tsx
+++ b/website/src/components/RightSidebar/TableOfContents.tsx
@@ -4,90 +4,85 @@ import type { FunctionalComponent } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 
 type ItemOffsets = {
-	id: string;
-	topOffset: number;
+  id: string;
+  topOffset: number;
 };
 
-const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
-	headings = [],
-}) => {
-	const toc = useRef<HTMLUListElement>();
-	const onThisPageID = 'on-this-page-heading';
-	const itemOffsets = useRef<ItemOffsets[]>([]);
-	const [currentID, setCurrentID] = useState('overview');
-	useEffect(() => {
-		const getItemOffsets = () => {
-			const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
-			itemOffsets.current = Array.from(titles).map((title) => ({
-				id: title.id,
-				topOffset: title.getBoundingClientRect().top + window.scrollY,
-			}));
-		};
+const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({ headings = [] }) => {
+  const toc = useRef<any>();
+  const onThisPageID = 'on-this-page-heading';
+  const itemOffsets = useRef<ItemOffsets[]>([]);
+  const [currentID, setCurrentID] = useState('overview');
+  useEffect(() => {
+    const getItemOffsets = () => {
+      const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
+      itemOffsets.current = Array.from(titles).map((title) => ({
+        id: title.id,
+        topOffset: title.getBoundingClientRect().top + window.scrollY,
+      }));
+    };
 
-		getItemOffsets();
-		window.addEventListener('resize', getItemOffsets);
+    getItemOffsets();
+    window.addEventListener('resize', getItemOffsets);
 
-		return () => {
-			window.removeEventListener('resize', getItemOffsets);
-		};
-	}, []);
+    return () => {
+      window.removeEventListener('resize', getItemOffsets);
+    };
+  }, []);
 
-	useEffect(() => {
-		if (!toc.current) return;
+  useEffect(() => {
+    if (!toc.current) return;
 
-		const setCurrent: IntersectionObserverCallback = (entries) => {
-			for (const entry of entries) {
-				if (entry.isIntersecting) {
-					const { id } = entry.target;
-					if (id === onThisPageID) continue;
-					setCurrentID(entry.target.id);
-					break;
-				}
-			}
-		};
+    const setCurrent: IntersectionObserverCallback = (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          const { id } = entry.target;
+          if (id === onThisPageID) continue;
+          setCurrentID(entry.target.id);
+          break;
+        }
+      }
+    };
 
-		const observerOptions: IntersectionObserverInit = {
-			// Negative top margin accounts for `scroll-margin`.
-			// Negative bottom margin means heading needs to be towards top of viewport to trigger intersection.
-			rootMargin: '-100px 0% -66%',
-			threshold: 1,
-		};
+    const observerOptions: IntersectionObserverInit = {
+      // Negative top margin accounts for `scroll-margin`.
+      // Negative bottom margin means heading needs to be towards top of viewport to trigger intersection.
+      rootMargin: '-100px 0% -66%',
+      threshold: 1,
+    };
 
-		const headingsObserver = new IntersectionObserver(setCurrent, observerOptions);
+    const headingsObserver = new IntersectionObserver(setCurrent, observerOptions);
 
-		// Observe all the headings in the main page content.
-		document.querySelectorAll('article :is(h1,h2,h3)').forEach((h) => headingsObserver.observe(h));
+    // Observe all the headings in the main page content.
+    document.querySelectorAll('article :is(h1,h2,h3)').forEach((h) => headingsObserver.observe(h));
 
-		// Stop observing when the component is unmounted.
-		return () => headingsObserver.disconnect();
-	}, [toc.current]);
+    // Stop observing when the component is unmounted.
+    return () => headingsObserver.disconnect();
+  }, [toc.current]);
 
-	const onLinkClick = (e) => {
-		setCurrentID(e.target.getAttribute('href').replace('#', ''));
-	};
+  const onLinkClick = (e: any) => {
+    setCurrentID(e.target.getAttribute('href').replace('#', ''));
+  };
 
-	return (
-		<>
-			<h2 id={onThisPageID} className="heading">
-				On this page
-			</h2>
-			<ul ref={toc}>
-				{headings
-					.filter(({ depth }) => depth > 1 && depth < 4)
-					.map((heading) => (
-						<li
-							className={`header-link depth-${heading.depth} ${
-								currentID === heading.slug ? 'current-header-link' : ''
-							}`.trim()}
-						>
-							<a href={`#${heading.slug}`} onClick={onLinkClick}>
-								{unescape(heading.text)}
-							</a>
-						</li>
-					))}
-			</ul>
-		</>
-	);
+  return (
+    <>
+      <ul ref={toc}>
+        {headings
+          .filter(({ depth }) => depth > 0 && depth < 4)
+          .map((heading) => (
+            <li
+              className={`border-l-4 border-slate-900 ${['pl-4', 'pl-8', 'pl-12'][heading.depth - 1]} ${
+                currentID === heading.slug ? 'bg-slate-900' : ''
+              }`.trim()}
+            >
+              <a href={`#${heading.slug}`} onClick={onLinkClick}>
+                {unescape(heading.text)}
+              </a>
+            </li>
+          ))}
+      </ul>
+    </>
+  );
 };
 
 export default TableOfContents;
diff --git a/website/src/layouts/DefaultLayout.astro b/website/src/layouts/DefaultLayout.astro
deleted file mode 100644
index 4d318921..00000000
--- a/website/src/layouts/DefaultLayout.astro
+++ /dev/null
@@ -1,136 +0,0 @@
----
-import HeadCommon from '../components/HeadCommon.astro';
-import HeadSEO from '../components/HeadSEO.astro';
-import Header from '../components/Header/Header.astro';
-import PageContent from '../components/PageContent/PageContent.astro';
-import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
-import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
-import * as CONFIG from '../config';
-import type { MarkdownHeading } from 'astro';
-import Footer from '../components/Footer/Footer.astro';
-
-type Props = {
-  frontmatter: CONFIG.Frontmatter;
-  headings: MarkdownHeading[];
-};
-
-const { frontmatter, headings } = Astro.props as Props;
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const currentPage = Astro.url.pathname;
-const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
-const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
----
-
-<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
-  <head>
-    <HeadCommon />
-    <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
-    <title>
-      {frontmatter.title ? `${frontmatter.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
-    </title>
-    <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: var(--theme-navbar-height) 1fr;
-        --gutter: 0.5rem;
-        --doc-padding: 2rem;
-      }
-
-      .layout {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
-        overflow-x: hidden;
-      }
-
-      .grid-sidebar {
-        height: 100vh;
-        position: sticky;
-        top: 0;
-        padding: 0;
-      }
-
-      #grid-left {
-        position: fixed;
-        background-color: var(--theme-bg);
-        z-index: 10;
-        display: none;
-      }
-
-      #grid-main {
-        padding: var(--doc-padding) var(--gutter);
-        grid-column: 2;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      #grid-right {
-        display: none;
-      }
-
-      @media (min-width: 50em) {
-        .layout {
-          overflow: initial;
-          grid-template-columns: 20rem minmax(0, var(--max-width));
-          gap: 1em;
-        }
-
-        #grid-left {
-          display: flex;
-          padding-left: 2rem;
-          position: sticky;
-          grid-column: 1;
-        }
-      }
-
-      @media (min-width: 72em) {
-        .layout {
-          grid-template-columns: 20rem minmax(0, var(--max-width)) 18rem;
-          padding-left: 0;
-          padding-right: 0;
-          margin: 0 auto;
-        }
-
-        #grid-right {
-          grid-column: 3;
-          display: flex;
-        }
-      }
-    </style>
-    <style is:global>
-      .layout > * {
-        width: 100%;
-        height: 100%;
-      }
-
-      .mobile-sidebar-toggle {
-        overflow: hidden;
-      }
-
-      .mobile-sidebar-toggle #grid-left {
-        display: block;
-        top: 2rem;
-      }
-    </style>
-  </head>
-
-  <body>
-    <Header currentPage={currentPage} />
-    <main class="layout">
-      <!-- 			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
-				<LeftSidebar currentPage={currentPage} />
-			</aside> -->
-      <div id="grid-main">
-        <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
-          <slot />
-        </PageContent>
-      </div>
-      <aside id="grid-right" class="grid-sidebar" title="Table of Contents">
-        <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
-      </aside>
-    </main>
-    <Footer path={currentFile} />
-  </body>
-</html>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 5cfae7e5..7ef879d7 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -5,3 +5,4 @@
 </script>
 
 <h1>Hello</h1>
+<a href="/tutorial">Tutorial</a>
\ No newline at end of file
diff --git a/website/src/styles/index.css b/website/src/styles/index.css
index e69de29b..2ce67571 100644
--- a/website/src/styles/index.css
+++ b/website/src/styles/index.css
@@ -0,0 +1,4 @@
+
+.cm-gutters {
+  display: none !important;
+}