add a warning that you filtered everyething

_components/Header.tsx

@@ -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}
     >

examples/_data.ts

@@ -815,5 +815,5 @@ export const sidebar = [
   },
 ];
 
-export const sectionTitle = "Learning hub";
+export const sectionTitle = "Examples";
 export const sectionHref = "/examples/";

examples/_pages/LandingPage.tsx

@@ -24,7 +24,7 @@ export default function LandingPage() {
       <div className="w-full mb-6 max-w-screen-xl mx-auto hub-header">
         <div className="max-w-prose mb-8">
           <h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
-            Learning hub
+            Examples
           </h1>
           <p>
             A collection of walkthrough tutorials, examples, videos and guides
@@ -79,9 +79,15 @@ export default function LandingPage() {
           </label>
         </div>
       </div>
-      <div className="columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8">
+      <div className="unfiltered columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8">
         {componentsPerSidebarItem}
       </div>
+      <div className="fully-filtered">
+
+        <h2 class="text-2xl font-semibold sm:text-3xl md:text-4xl">Oops! You've filtered everything</h2>
+        <p class="md:text-lg mt-4">Maybe remove a filter to see some examples?</p>
+        <img src="/examples/tutorials/images/skateboard.png" alt="deno on a skateboard" />
+      </div>
       <p class="max-w-prose mx-auto text-center pt-4 mt-3">
         Need an example that isn't here? Or want to add one of your own?<br />
         {" "}
@@ -96,7 +102,7 @@ export default function LandingPage() {
       </p>
       <a
         href="/runtime/contributing/examples/"
-        class="homepage-link runtime-link text-center mt-4"
+        class="text-primary hover:underline focus:underline text-center mt-4"
       >
         Commit an example and we'll send you some stickers!
       </a>

examples/_pages/VideoPage.tsx

@@ -8,8 +8,9 @@ export default function VideoPage({ video }: Props) {
     <>
       <EmbedVideo id={video.externalURL} />
       <div className="my-12">
-        Find more videos in the <a href="/examples/">Learning Hub</a> and on our
-        {"  "}<a href="https://www.youtube.com/@deno_land">YouTube channel</a>.
+        Find more videos in the <a href="/examples/">Exampples page</a>{" "}
+        and on our{"  "}
+        <a href="https://www.youtube.com/@deno_land">YouTube channel</a>.
       </div>
     </>
   );

examples/tutorials/create_react.md

@@ -13,7 +13,7 @@ a list of dinosaurs. When you click on one, it'll take you to a dinosaur page
 with more details. You can see the
 [finished app repo on GitHub](https://github.com/denoland/tutorial-with-react)
 
-![demo of the app](../images/how-to/react/react-dinosaur-app-demo.gif)
+![demo of the app](./images/how-to/react/react-dinosaur-app-demo.gif)
 
 ## Create a React app with Vite and Deno
 
@@ -332,7 +332,7 @@ Navigate to the local Vite server in your browser (`localhost:5173`) and you
 should see the list of dinosaurs displayed which you can click through to find
 out about each one.
 
-![demo of the app](../images/how-to/react/react-dinosaur-app-demo.gif)
+![demo of the app](./images/how-to/react/react-dinosaur-app-demo.gif)
 
 ## Build and deploy
 

examples/tutorials/next.md

@@ -13,7 +13,7 @@ In this tutorial, we'll build a simple Next.js application and run it with Deno.
 The app will display a list of dinosaurs. When you click on one, it'll take you
 to a dinosaur page with more details.
 
-![demo of the app](../images/how-to/next/dinoapp.gif)
+![demo of the app](./images/how-to/next/dinoapp.gif)
 
 Start by verifying that you have the latest version of Deno installed, you will
 need at least Deno 1.46.0:
@@ -265,7 +265,7 @@ Now you can run the app with `deno task dev` and visit `http://localhost:3000`
 in your browser to see the list of dinosaurs. Click on a dinosaur to see more
 details!
 
-![demo of the app](../images/how-to/next/dinoapp.gif)
+![demo of the app](./images/how-to/next/dinoapp.gif)
 
 🦕 Now you can build and run a Next.js app with Deno! To build on your app you
 could consider [adding a database](/runtime/tutorials/connecting_to_databases/)

examples/tutorials/prisma.md

@@ -158,7 +158,7 @@ deno run -A npm:prisma studio
 
 You should see something similar to the following screenshot:
 
-![New dinosaurs are in Prisma dashboard](../images/how-to/prisma/1-dinosaurs-in-prisma.png)
+![New dinosaurs are in Prisma dashboard](./images/how-to/prisma/1-dinosaurs-in-prisma.png)
 
 ## Create your API routes
 
@@ -258,7 +258,7 @@ deno run -A --env main.ts
 
 Let's visit `localhost:8000/dinosaurs`:
 
-![List of all dinosaurs from REST API](../images/how-to/prisma/2-dinosaurs-from-api.png)
+![List of all dinosaurs from REST API](./images/how-to/prisma/2-dinosaurs-from-api.png)
 
 Next, let's `POST` a new user with this `curl` command:
 
@@ -268,7 +268,7 @@ curl -X POST http://localhost:8000/dinosaur -H "Content-Type: application/json"
 
 You should now see a new row on Prisma Studio:
 
-![New dinosaur Deno in Prisma](../images/how-to/prisma/3-new-dinosaur-in-prisma.png)
+![New dinosaur Deno in Prisma](./images/how-to/prisma/3-new-dinosaur-in-prisma.png)
 
 Nice!
 

examples/tutorials/react.md

@@ -15,7 +15,7 @@ a list of dinosaurs. When you click on one, it'll take you to a dinosaur page
 with more details. You can see the
 [finished app repo on GitHub](https://github.com/denoland/tutorial-with-react-denojson)
 
-![demo of the app](../images/how-to/react/react-dinosaur-app-demo.gif)
+![demo of the app](./images/how-to/react/react-dinosaur-app-demo.gif)
 
 This tutorial will use [Vite](https://vitejs.dev/) to serve the app locally.
 Vite is a build tool and development server for modern web projects. It pairs
@@ -362,7 +362,7 @@ Navigate to the local Vite server in your browser (`localhost:5173`) and you
 should see the list of dinosaurs displayed which you can click through to find
 out about each one.
 
-![demo of the app](../images/how-to/react/react-dinosaur-app-demo.gif)
+![demo of the app](./images/how-to/react/react-dinosaur-app-demo.gif)
 
 ## Build and deploy
 

examples/tutorials/redis.md

@@ -82,7 +82,7 @@ deno run --allow-net main.ts
 If we then go to [http://localhost:3000/ry](http://localhost:3000/ry) in
 Postman, we'll get the Github response:
 
-![uncached-redis-body.png](../images/how-to/redis/uncached-redis-body.png)
+![uncached-redis-body.png](./images/how-to/redis/uncached-redis-body.png)
 
 Let's cache this response using Redis.
 
@@ -145,16 +145,16 @@ server.listenAndServe();
 Running this first time gives us the same response as above, and we'll see the
 `is-cached` header set to `false`:
 
-![uncached-redis-header.png](../images/how-to/redis/uncached-redis-header.png)
+![uncached-redis-header.png](./images/how-to/redis/uncached-redis-header.png)
 
 But call with the same username again, and we get the cached result. The body is
 identical:
 
-![cached-redis-body.png](../images/how-to/redis/cached-redis-body.png)
+![cached-redis-body.png](./images/how-to/redis/cached-redis-body.png)
 
 But the header shows we have the cache:
 
-![cached-redis-header.png](../images/how-to/redis/cached-redis-header.png)
+![cached-redis-header.png](./images/how-to/redis/cached-redis-header.png)
 
 We can also see that the response was ~200ms quicker!
 

examples/tutorials/vue.md

@@ -15,7 +15,7 @@ will display a list of dinosaurs. When you click on one, it'll take you to a
 dinosaur page with more details. You can see the
 [finished app on GitHub](https://github.com/denoland/tutorial-with-vue).
 
-![The Vue.js app in action](../images/how-to/vue/vue.gif)
+![The Vue.js app in action](./images/how-to/vue/vue.gif)
 
 ## Create a Vue.js app with Vite and Deno
 
@@ -350,7 +350,7 @@ deno task dev
 Visit the output localhost link in your browser to see the app. Click on a
 dinosaur to see more details!
 
-![The vue app in action](../images/how-to/vue/vue.gif)
+![The vue app in action](./images/how-to/vue/vue.gif)
 
 🦕 Now that you can run a Vue app in Deno with Vite you're ready to build real
 world applications! If you'd like to expand upon this demo you could consider

overrides.css

@@ -173,18 +173,45 @@
   transform: translateX(calc(0.8rem));
 }
 
-[data-category="tutorial"], [data-category="video"], [data-category="example"] {
+[data-category="tutorial"],
+[data-category="video"],
+[data-category="example"],
+.unfiltered {
   display: none;
 }
 
-main:has(#tutorial:checked) [data-category="tutorial"] {
-  display: block;
+main:has(#tutorial:checked) {
+  .fully-filtered {
+    display: none;
+  }
+  .unfiltered {
+    display: block;
+  }
+  & [data-category="tutorial"] {
+    display: block;
+  }
 }
 
-main:has(#video:checked) [data-category="video"] {
-  display: block;
+main:has(#video:checked) {
+  .fully-filtered {
+    display: none;
+  }
+  .unfiltered {
+    display: block;
+  }
+  & [data-category="video"] {
+    display: block;
+  }
 }
 
-main:has(#example:checked) [data-category="example"] {
-  display: block;
+main:has(#example:checked) {
+  .fully-filtered {
+    display: none;
+  }
+  .unfiltered {
+    display: block;
+  }
+  & [data-category="example"] {
+    display: block;
+  }
 }