{componentsPerSidebarItem}
+
+
+ 
+
Oops! You've filtered everything
+Maybe remove a filter to see some examples?
+
+
Need an example that isn't here? Or want to add one of your own?
{" "}
@@ -96,7 +102,7 @@ export default function LandingPage() {
- Find more videos in the Learning Hub and on our
- {" "}YouTube channel.
+ Find more videos in the Exampples page{" "}
+ and on our{" "}
+ YouTube channel.
);
diff --git a/examples/tutorials/create_react.md b/examples/tutorials/create_react.md
index 870404d2..2eaa9646 100644
--- a/examples/tutorials/create_react.md
+++ b/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)
-
+
## 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.
-
+
## Build and deploy
diff --git a/examples/tutorials/images/skateboard.png b/examples/tutorials/images/skateboard.png
new file mode 100644
index 00000000..73398601
Binary files /dev/null and b/examples/tutorials/images/skateboard.png differ
diff --git a/examples/tutorials/next.md b/examples/tutorials/next.md
index ad13cff5..0bd0d807 100644
--- a/examples/tutorials/next.md
+++ b/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.
-
+
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!
-
+
🦕 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/)
diff --git a/examples/tutorials/prisma.md b/examples/tutorials/prisma.md
index f4a9eece..fdc75320 100644
--- a/examples/tutorials/prisma.md
+++ b/examples/tutorials/prisma.md
@@ -158,7 +158,7 @@ deno run -A npm:prisma studio
You should see something similar to the following screenshot:
-
+
## Create your API routes
@@ -258,7 +258,7 @@ deno run -A --env main.ts
Let's visit `localhost:8000/dinosaurs`:
-
+
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:
-
+
Nice!
diff --git a/examples/tutorials/react.md b/examples/tutorials/react.md
index 7fe37132..cea7ef6a 100644
--- a/examples/tutorials/react.md
+++ b/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)
-
+
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.
-
+
## Build and deploy
diff --git a/examples/tutorials/redis.md b/examples/tutorials/redis.md
index 1a100628..33f474a2 100644
--- a/examples/tutorials/redis.md
+++ b/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:
-
+
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`:
-
+
But call with the same username again, and we get the cached result. The body is
identical:
-
+
But the header shows we have the cache:
-
+
We can also see that the response was ~200ms quicker!
diff --git a/examples/tutorials/vue.md b/examples/tutorials/vue.md
index 885f3b1f..53675995 100644
--- a/examples/tutorials/vue.md
+++ b/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).
-
+
## 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!
-
+
🦕 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
diff --git a/overrides.css b/overrides.css
index 8a8992e5..6fde5ab4 100644
--- a/overrides.css
+++ b/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;
+ }
}