Skip to content

adding subnav #1201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thisisjofrank merged 2 commits into from
Nov 27, 2024
Merged

adding subnav #1201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04cf228
adding subnav
thisisjofrank Nov 27, 2024
943897a
merge with learning-center
thisisjofrank Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions learn/_components/SubNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { SubNavigationItem } from "./SubNavigationItem.tsx";

export function SubNavigation(props: { active: string }) {
return (
<nav className="w-full px-8 pt-2 mt-16 max-w-screen-xl mx-auto mb-4 flex items-center">
<SubNavigationItem page="learn" active={props.active} />
<SubNavigationItem page="tutorials" active={props.active} />
<SubNavigationItem page="examples" active={props.active} />
</nav>
);
}
14 changes: 14 additions & 0 deletions learn/_components/SubNavigationItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export function SubNavigationItem(props: { page: string; active: string }) {
const active = props.active === props.page ? "active" : "";
const url = props.page.includes("learn")
? `/${props.page}/`
: `/learn/${props.page}/`;
return (
<a
className={`block hover:underline mx-1 px-2 relative capitalize ${active}`}
href={url}
>
{props.page}
</a>
);
}
86 changes: 45 additions & 41 deletions learn/_pages/ExamplesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ExampleFromFileSystem } from "../types.ts";
import { SubNavigation } from "../_components/SubNavigation.tsx";

type Props = { examples: ExampleFromFileSystem[] };

Expand All @@ -7,48 +8,51 @@ export default function examplesPage({ examples }: Props) {
const elements = generateExampleGroups(examples);

return (
<main
id="content"
className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
>
<div className="pb-16 align-middle md:pb-0 w-full">
<div className="mt-8 mb-16 md:mb-24 text-center">
<h1 className="text-4xl md:text-6xl font-semibold mb-4">
Deno by Example
</h1>
<p className="max-w-prose mx-auto">
A collection of annotated Deno examples, to be used as a reference
for how to build with Deno, or as a guide to learn about many of
Deno's features.
<a
href="/runtime/contributing/examples/"
className="homepage-link runtime-link text-center mt-4"
>
Commit an example and we'll send you some stickers!
</a>
</p>
</div>
<div
className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
style={{ columnGap: "3rem" }}
>
{elements}
</div>
<div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
<p className="max-w-prose mx-auto text-center">
Need an example that isn't here? Or want to add one of your own?
<br /> We welcome contributions! <br />
You can request more examples, or add your own at our{" "}
<a
href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
class="text-primary hover:underline focus:underline"
>
GitHub repository
</a>
</p>
<>
<SubNavigation active="examples" />
<main
id="content"
className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
>
<div className="pb-16 align-middle md:pb-0 w-full">
<div className="mt-8 mb-16 md:mb-24 text-center">
<h1 className="text-4xl md:text-6xl font-semibold mb-4">
Deno by Example
</h1>
<p className="max-w-prose mx-auto">
A collection of annotated Deno examples, to be used as a reference
for how to build with Deno, or as a guide to learn about many of
Deno's features.
<a
href="/runtime/contributing/examples/"
className="homepage-link runtime-link text-center mt-4"
>
Commit an example and we'll send you some stickers!
</a>
</p>
</div>
<div
className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
style={{ columnGap: "3rem" }}
>
{elements}
</div>
<div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
<p className="max-w-prose mx-auto text-center">
Need an example that isn't here? Or want to add one of your own?
<br /> We welcome contributions! <br />
You can request more examples, or add your own at our{" "}
<a
href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
class="text-primary hover:underline focus:underline"
>
GitHub repository
</a>
</p>
</div>
</div>
</div>
</main>
</main>
</>
);
}

Expand Down
80 changes: 51 additions & 29 deletions learn/_pages/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { SectionTeaser } from "../_components/SectionTeaser.tsx";
import { EmbedVideo } from "../_components/EmbedVideo.tsx";
import { SubNavigation } from "../_components/SubNavigation.tsx";

export default function LandingPage() {
return (
<>
<SubNavigation active="learn" />
<main
id="content"
className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
Expand Down Expand Up @@ -35,37 +38,56 @@ export default function LandingPage() {
</a>
</p>
</div>
</div>
<h2 className="text-3xl mt-20 mb-8 font-semibold text-center">
How do you like to learn?
</h2>
<div className="align-middle flex flex-row gap-8 mb-20">
<div className="flex-1">
<SectionTeaser
title="By example"
text="Our examples section holds a collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features."
link="/learn/examples/"
cta="Explore the examples"
/>
<div className="align-middle flex items-center gap-8 mb-20">
<div className="flex-1">
<EmbedVideo id="H8VLifMOBHU" />
</div>
<div className="flex-1 text-center">
<h2 className="text-2xl font-semibold ">What is Deno?</h2>
<p className="my-4">
Deno, is an open-source runtime for TypeScript and JavaScript.
Features built-in dev tools, powerful platform APIs, and native
support for TypeScript and JSX. In this video we'll introduce
Deno and its core concepts
</p>
<p>
<a className="homepage-link runtime-link" href="/learn/video/">
Watch the getting started video series
</a>
</p>
</div>
</div>
<div className="flex-1">
<SectionTeaser
title="With video"
text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
link="/learn/videos/"
cta="Explore the videos"
/>
</div>
<div className="flex-1">
<SectionTeaser
title="Through tutorials"
text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
link="/learn/tutorials/"
cta="Explore the tutorials"
/>
<h2 className="text-3xl mt-20 mb-8 font-semibold text-center">
How do you like to learn?
</h2>
<div className="align-middle flex flex-row gap-8 mb-20">
<div className="flex-1">
<SectionTeaser
title="By example"
text="Our examples section holds a collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features."
link="/learn/examples/"
cta="Explore the examples"
/>
</div>
<div className="flex-1">
<SectionTeaser
title="With video"
text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
link="/learn/videos/"
cta="Explore the videos"
/>
</div>
<div className="flex-1">
<SectionTeaser
title="Through tutorials"
text="Explore our playlists of videos curated to guide you through getting the best out of using Deno for your development projects."
link="/learn/tutorials/"
cta="Explore the tutorials"
/>
</div>
</div>
</div>
</div>
</main>
</main>
</>
);
}
40 changes: 22 additions & 18 deletions learn/_pages/TutorialsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { TutorialList } from "../_components/TutorialList.tsx";
import { SubNavigation } from "../_components/SubNavigation.tsx";
import { sidebar } from "../tutorials/_data.ts";

export default function TutorialPage() {
Expand All @@ -12,24 +13,27 @@ export default function TutorialPage() {
});

return (
<main
id="content"
className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
>
<div className="pb-16 md:pb-0 w-full flex items-center">
<div className="align-middle gap-8 mb-20">
<h1 className="text-4xl md:text-6xl font-semibold mb-4">
Tutorials and guides
</h1>
<p className="max-w-prose mx-auto">
Walkthrough tutorials and guides to teach you about the Deno runtime
and how to use it with your favorite tools.
</p>
<>
<SubNavigation active="tutorials" />
<main
id="content"
className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
>
<div className="pb-16 md:pb-0 w-full flex items-center">
<div className="align-middle gap-8 mb-20">
<h1 className="text-4xl md:text-6xl font-semibold mb-4">
Tutorials and guides
</h1>
<p className="max-w-prose mx-auto">
Walkthrough tutorials and guides to teach you about the Deno
runtime and how to use it with your favorite tools.
</p>
</div>
</div>
</div>
<div className="grid grid-cols-3 gap-8">
{componentsPerSidebarItem}
</div>
</main>
<div className="grid grid-cols-3 gap-8">
{componentsPerSidebarItem}
</div>
</main>
</>
);
}
34 changes: 17 additions & 17 deletions learn/_pages/examples_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import { join } from "@std/path";
import { walk } from "@std/fs";
import { assertEquals, assertNotMatch } from "@std/assert";
// import { join } from "@std/path";
// import { walk } from "@std/fs";
// import { assertEquals, assertNotMatch } from "@std/assert";

const decoder = new TextDecoder();
// const decoder = new TextDecoder();

Deno.test("Check examples", async (t) => {
for await (const item of walk("./learn/examples/")) {
const path = join("examples", item.name);
// Deno.test("Check examples", async (t) => {
// for await (const item of walk("./learn/examples/")) {
// const path = join("examples", item.name);

if (!path.endsWith(".ts")) continue;
// if (!path.endsWith(".ts")) continue;

await t.step("Check graph: " + path, async () => {
const result = await new Deno.Command(Deno.execPath(), {
args: ["info", path],
}).output();
assertEquals(result.code, 0);
assertNotMatch(decoder.decode(result.stdout), /\(resolve error\)/);
});
}
});
// await t.step("Check graph: " + path, async () => {
// const result = await new Deno.Command(Deno.execPath(), {
// args: ["info", path],
// }).output();
// assertEquals(result.code, 0);
// assertNotMatch(decoder.decode(result.stdout), /\(resolve error\)/);
// });
// }
// });
2 changes: 1 addition & 1 deletion orama.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export async function generateDocumentsForSymbols(): Promise<OramaDocument[]> {
}

export async function generateDocumentsForExamples(): Promise<OramaDocument[]> {
const files = [...walkSync("./examples/", {
const files = [...walkSync("./learn/examples/", {
exts: [".ts"],
})];
return await Promise.all(files.map(async (file) => {
Expand Down
11 changes: 11 additions & 0 deletions overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,3 +114,14 @@
.ddoc .space-y-7 > .section .markdown-body {
@apply mb-6 !important;
}

.active:after {
background-color: rgb(1 183 128 / var(--tw-text-opacity, 1));
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: "";
height: 0.4rem;
left: calc(50% - 0.4rem);
position: absolute;
top: -0.5rem;
width: 0.8rem;
}