Skip to content

Commit

Permalink
Merge branch 'main' into feat/example-sveltekit
Browse files Browse the repository at this point in the history
  • Loading branch information
s-petey authored Feb 14, 2025
2 parents e9c76b9 + db9acfb commit 15119f9
Show file tree
Hide file tree
Showing 62 changed files with 1,199 additions and 383 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ jobs:

- name: Run server
working-directory: _site
run: deno run --no-lock --allow-read=. --allow-net --allow-env server.ts &
run: deno run --allow-read=. --allow-net --allow-env --lock=../deno.lock server.ts &

- name: Link checker
env:
Expand Down
10 changes: 5 additions & 5 deletions 404.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const styles = /*css*/ `
text-wrap: balance;
}`;

export default function Page(props: Lume.Data, _helpers: Lume.Helpers) {
export default function Page(data: Lume.Data, _helpers: Lume.Helpers) {
return (
<main
id="content"
Expand All @@ -43,11 +43,11 @@ export default function Page(props: Lume.Data, _helpers: Lume.Helpers) {
</p>
</div>

<props.comp.Sidebar
<data.comp.Sidebar
sidebar={sidebar}
search={props.search}
url={props.url}
headerPath={props.headerPath!}
search={data.search}
url={data.url}
headerPath={data.headerPath!}
/>
</main>
);
Expand Down
8 changes: 8 additions & 0 deletions _components/ExternalLink.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.external {
display: none;
}
@media (min-width: 650px) {
.external {
display: block;
}
}
15 changes: 15 additions & 0 deletions _components/ExternalLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default function ExternalLink(
{ href, children }: { href: string; children: string },
) {
return (
<a
href={href}
className="external blocklink"
target="_blank"
>
{children}
</a>
);
}

export const css = "@import './_components/ExternalLink.css';";
49 changes: 49 additions & 0 deletions _components/Footer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
footer {
padding: 3rem;
border-top: 1px solid hsl(var(--foreground-tertiary));
}

.footer-nav {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}

.footer-section-heading {
margin-bottom: 1rem;
font-size: 1rem;
font-weight: bold;
color: hsl(var(--foreground-secondary));
}

.footer-list {
margin: 0;
padding: 0;
list-style: none;
}

.footer-link {
display: block;
margin-bottom: 0.5rem;
color: hsl(var(--foreground-secondary));
&:hover {
color: var(--primary);
}
}

.copyright {
margin: 4rem auto 0;
text-align: center;
font-size: 0.9rem;
color: hsl(var(--foreground-secondary));
}

@media screen and (min-width: 1240px) {
footer {
padding: 2vw 3vw;
}
.footer-nav {
max-width: 1240px;
margin: 0 auto;
}
}
62 changes: 31 additions & 31 deletions _components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,34 @@
export default function Footer_new() {
return (
<footer>
<nav aria-labelledby="footer-navigation" className="footer-nav">
{data.map((category) => (
<section className="footer-section">
<h3 class="footer-section-heading">{category.title}</h3>
<ul class="footer-list">
{category.items.map((item) => (
<li>
<a
class="footer-link"
href={item.to ?? item.href}
>
{item.label}
</a>
</li>
))}
</ul>
</section>
))}
</nav>
<p class="copyright">
Copyright © {new Date().getFullYear()} the Deno authors.
</p>
</footer>
);
}

export const css = "@import './_components/Footer.css';";

interface FooterCategory {
title: string;
items: FooterItem[];
Expand Down Expand Up @@ -105,34 +136,3 @@ const data = [
],
},
] satisfies FooterCategory[];

export default function Footer() {
return (
<footer class="w-full border-t border-foreground-secondary/20 pt-12">
<div class="max-w-screen-xl mx-auto pb-16 px-4 sm:px-8 md:px-16">
<div class="grid md:grid-cols-2 lg:grid-cols-4 md:-mx-8">
{data.map((category) => (
<div class="md:mx-4 mb-12">
<h3 class="font-bold mb-4">{category.title}</h3>
<ul>
{category.items.map((item) => (
<li>
<a
class="block items-center py-1 text-foreground-secondary hover:text-primary hover:underline"
href={item.to ?? item.href}
>
{item.label}
</a>
</li>
))}
</ul>
</div>
))}
</div>
<p class="text-center mt-12 text-sm col-span-4">
Copyright © {new Date().getFullYear()} the Deno authors.
</p>
</div>
</footer>
);
}
54 changes: 54 additions & 0 deletions _components/Hamburger.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
.hamburger-checkbox {
display: none;
}

.hamburger-label {
position: fixed;
top: 0rem;
left: 0rem;
height: 4rem;
width: 3rem;
}

.hamburger-icon {
:focus {
border: 2px solid var(--foreground-primary);
}
}

.hamburger-bar {
display: block;
position: absolute;
top: 50%;
margin-top: -1px;
left: 1rem;
width: 1.3rem;
height: 2px;
background-color: var(--foreground-primary);
transition: all 0.3s ease;
}

.hamburger-bar--top {
transform: translate(0, -7px);
}
.hamburger-bar--bottom {
transform: translate(0, 7px);
}

.hamburger-label:has(+ .hamburger-checkbox:checked) {
.hamburger-bar--top {
transform: translate(0, 0) rotate(45deg);
}
.hamburger-bar--middle {
opacity: 0;
}
.hamburger-bar--bottom {
transform: translate(0, 0) rotate(-45deg);
}
}

@media screen and (min-width: 1240px) {
.hamburger-label {
display: none;
}
}
14 changes: 14 additions & 0 deletions _components/Hamburger.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export default function (data: Lume.Data) {
return (
<>
<label htmlFor="hamburger" className="hamburger-label">
<span class="hamburger-bar hamburger-bar--top"></span>
<span class="hamburger-bar hamburger-bar--middle"></span>
<span class="hamburger-bar hamburger-bar--bottom"></span>
</label>
<input type="checkbox" id="hamburger" className="hamburger-checkbox" />
</>
);
}

export const css = "@import './_components/Hamburger.css';";
42 changes: 42 additions & 0 deletions _components/Header.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
header {
position: sticky;
top: 0;
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
padding-left: 3rem;
border-bottom: 1px solid hsl(var(--foreground-tertiary));
background-color: hsl(var(--background-primary));

nav {
display: none;
}

.external {
margin-left: auto;
}

.logo-link {
display: flex;
height: 2.3rem;
}

.logo {
width: 100%;
max-height: 2.5rem;
}
}

@media (min-width: 1240px) {
header {
padding-left: 1rem;
nav {
display: flex;
}
}
.header-nav-link[data-active="true"] {
color: hsl(var(--primary));
}
}
37 changes: 4 additions & 33 deletions _components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import Logo from "./Logo.tsx";
import SearchInput from "./SearchInput.tsx";
export default function Header({
data,
url,
hasSidebar,
}: {
data: Lume.Data;
url: string;
hasSidebar?: boolean;
}) {
Expand Down Expand Up @@ -89,38 +90,8 @@ export default function Header({
external
hideOnMobile
/>
<div class="min-w-[150px] md:w-32 xl:w-64">
<SearchInput />
</div>
<div class="dark-mode-toggle">
<button class="dark-mode-toggle button p-1 rounded bg-background-primary ring ring-transparent hover:ring-foreground-tertiary">
<span class="dark:hidden">
<svg
class="fill-foreground-primary w-6 h-6"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z">
</path>
</svg>
</span>
<span class="hidden dark:block">
<svg
class="fill-foreground-primary w-6 h-6"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"
>
</path>
</svg>
</span>
</button>
</div>
<data.comp.SearchInput />
<data.comp.ThemeToggle />
</div>
</nav>

Expand Down
26 changes: 26 additions & 0 deletions _components/MainNav.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.main-nav {
display: flex;
flex-direction: column;
margin: 0.5rem 0.5rem 1rem;
padding: 0.5rem;
border-radius: 0.5rem;
border: 1px solid hsl(var(--background-tertiary));
background-color: hsl(var(--background-secondary));
list-style: none;
}

.main-nav-link {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
color: hsl(var(--foreground-primary));
&:hover {
background-color: hsl(var(--background-tertiary));
text-decoration: none;
}
}

.main-nav-link[data-active="true"] {
font-weight: bold;
background-color: hsl(var(--background-tertiary));
}
23 changes: 23 additions & 0 deletions _components/MainNav.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { NavData } from "../types.ts";

export default function (data: Lume.Data) {
return (
<nav aria-labelledby="primary-navigation">
<ul className="main-nav">
{data.navigation.map((nav: NavData) => (
<li>
<a
href={nav.url}
className="main-nav-link"
data-active={data.currentUrl === nav.url}
>
{nav.name}
</a>
</li>
))}
</ul>
</nav>
);
}

export const css = "@import './_components/MainNav.css';";
Loading

0 comments on commit 15119f9

Please sign in to comment.