new examples section which holds all examples, tutorials and videos

README.md

@@ -104,7 +104,10 @@ authored.
 ## Examples
 
 [Deno by Example](https://docs.deno.com/examples) is a collection of small
-snippets showcasing various functions of the APIs implemented in Deno.
+snippets of code, tutorials and videos showcasing various functions of the APIs
+implemented in Deno.
+
+### Adding an example script
 
 - Examples are written in TypeScript
 - Each example should be a single file, no more than 50 lines
@@ -122,11 +125,11 @@ snippets showcasing various functions of the APIs implemented in Deno.
 
 ### Adding an example
 
-To add an example, create a file in the `examples` directory. The file name
-should be a short description of the example (in kebab case) and the contents
-should be the code for the example. The file should be in the `.ts` format. The
-file should start with a JSDoc style multi line comment that describes the
-example:
+To add an example, create a file in the `examples/scripts` directory. The file
+name should be a short description of the example (in kebab case) and the
+contents should be the code for the example. The file should be in the `.ts`
+format. The file should start with a JSDoc style multi line comment that
+describes the example:
 
 ```ts
 /**
@@ -169,7 +172,7 @@ hundreds of developers since 2018. You can view a list of historical
 contributors to the Deno documentation in this repository and the manual with
 this command:
 
-```
+```bash
 git shortlog -s -n
 ```
 

_components/Footer.tsx

@@ -17,19 +17,19 @@ const data = [
     items: [
       {
         label: "Deno Runtime",
-        to: "/runtime/manual",
+        to: "/runtime/",
       },
       {
         label: "Deno Deploy",
-        to: "/deploy/manual",
+        to: "/deploy/manual/",
       },
       {
         label: "Deno Subhosting",
-        to: "/subhosting/manual",
+        to: "/subhosting/manual/",
       },
       {
         label: "Examples",
-        href: "/examples",
+        href: "/examples/",
       },
       {
         label: "Standard Library",

_components/Header.tsx

@@ -50,16 +50,16 @@ export default function Header({
           />
           <HeaderItem
             url={url}
-            activeOn="/examples"
-            href="/examples"
-            name="Examples"
+            activeOn="/api"
+            href="/api/deno"
+            name="API reference"
             hideOnMobile
           />
           <HeaderItem
             url={url}
-            activeOn="/api"
-            href="/api/deno"
-            name="API reference"
+            activeOn="/examples"
+            href="/examples"
+            name="Examples"
             hideOnMobile
           />
           <span class="hidden xl:inline-block text-foreground-secondary mx-2">
@@ -183,8 +183,8 @@ function HeaderItem({
         firstItem ? "ml-0" : ""
       } mx-1 px-2 text-md hover:bg-background-secondary ring-1 ring-transparent hover:ring-background-tertiary hover:rounded transition-colors duration-200 ease-in-out text-nowrap flex items-center ${
         activeOn && url.startsWith(activeOn)
-          ? "text-primary mx-2.5 px-0.5 underline font-semibold underline-offset-[6px] decoration-primary/20"
-          : ""
+          ? "text-primary underline font-semibold underline-offset-[6px] decoration-primary/20"
+          : "[letter-spacing:0.2px]"
       } ${hideOnMobile ? "max-xl:!hidden" : ""}`}
       href={href}
     >

_components/SearchInput.tsx

@@ -1,6 +1,10 @@
 export default function SearchInput() {
   return (
-    <form action="https://www.google.com/search" method="get" class="search">
+    <form
+      action="https://www.google.com/search"
+      method="get"
+      class="search m-0"
+    >
       <input type="hidden" name="q" id="q" value="site:https://deno.com" />
       <input
         type="search"

_components/Sidebar.tsx

@@ -125,7 +125,8 @@ function SidebarItem(props: {
       <a
         class={LINK_CLASS}
         href={"id" in item ? item.id : "href" in item ? item.href : undefined}
-        aria-current={("id" in item && item.id === props.url)
+        aria-current={("id" in item &&
+            (item.id === props.url || item.id + "/" === props.url))
           ? "page"
           : undefined}
       >

_config.ts

@@ -92,14 +92,14 @@ site.copy("runtime/fundamentals/images");
 site.copy("runtime/getting_started/images");
 site.copy("runtime/reference/images");
 site.copy("runtime/contributing/images");
-site.copy("runtime/tutorials/images");
+site.copy("examples/tutorials/images");
 site.copy("deploy/manual/images");
 site.copy("deno.json");
 site.copy("go.json");
 site.copy("oldurls.json");
 site.copy("server.ts");
 site.copy("middleware");
-site.copy("examples");
+site.copy("examples/examples");
 site.copy(".env");
 
 site.use(
@@ -117,7 +117,7 @@ site.use(
 );
 site.use(
   esbuild({
-    extensions: [".client.ts"],
+    extensions: [".client.ts", ".client.js"],
     options: {
       minify: false,
       splitting: true,
@@ -205,9 +205,7 @@ site.ignore(
   (path) => path.match(/\/reference_gen.*.ts/) !== null,
   (path) => path.includes("/reference_gen/node_modules"),
   (path) => path.includes("/reference_gen/node_descriptions"),
-  "examples",
   // "deploy",
-  // "examples.page.tsx",
   // "runtime",
   // "subhosting",
 );