Skip to content

Commit

Permalink
clean doc styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@reednel
reednel committed Jan 14, 2024
1 parent aa07447 commit 7c1feab
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 295 deletions.
181 changes: 0 additions & 181 deletions src/layouts/Search.tsx
View file

This file was deleted.

14 changes: 8 additions & 6 deletions src/layouts/components/DocBrowser.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ const isCurrentPage = (item) => {
const getLinkClasses = (link) => {
const baseClasses =
"block py-2 px-6 my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900";
"text-xl block py-1 px-2 my-1 rounded hover:bg-theme-light dark:hover:bg-darkmode-theme-light";
if (isCurrentPage(link)) {
return baseClasses + " border-slate-500 text-slate-900";
return baseClasses + "rounded bg-theme-light dark:bg-darkmode-theme-light";
} else {
return baseClasses;
}
Expand All @@ -31,15 +31,17 @@ const { main }: { main: doc_data[] } = docs;
---

<nav aria-labelledby="grid-left" class="w-64 border-r">
<div class="px-4 py-16">
<div class="mx-4 my-16">
<ul>
{
main.map((item) =>
item.header ? (
<h3 class="font-semibold text-slate-700">{item.text}</h3>
<h3 class="mt-4">{item.text}</h3>
) : (
<li class={getLinkClasses(item)}>
<a href={item.link}>{item.text}</a>
<li>
<a class={getLinkClasses(item)} href={item.link}>
{item.text}
</a>
</li>
),
)
Expand Down
50 changes: 24 additions & 26 deletions src/layouts/components/DocContents.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,29 @@ const { headings } = Astro.props;
---

<nav aria-labelledby="grid-right">
<div class="px-4 py-16">
<h3 class="dark:text-white mb-4">On This Page</h3>
{
headings && headings.map((heading) => {
let className = `peer border-l-2 border-l-zinc-400 dark:border-l-zinc-700 `;
const sizeAndIndent = {
1: `pl-0 text-3xl`,
2: `pl-2 text-2xl`,
3: `pl-4 text-xl`,
4: `pl-6 text-lg`,
5: `pl-8 text-base`,
6: `pl-10 text-sm`,
};
className += sizeAndIndent[heading.depth] || "";
return (
<p class={className}>
<a
href={`#${heading.slug}`}
class="block py-1 text-zinc-600 dark:text-zinc-400 hover:text-green-600 dark:hover:text-zinc-300 transition-colors"
>
{heading.text}
</a>
</p>
);
})
}
<div class="mx-4 my-16">
<h3 class="my-4">On This Page</h3>
{
headings &&
headings.map((heading) => {
let className = ``;
const sizeAndIndent = {
1: `pl-0 text-2xl`,
2: `pl-2 text-xl`,
3: `pl-4 text-lg`,
4: `pl-6 text-base`,
5: `pl-8 text-sm`,
6: `pl-10 text-xs`,
};
className += sizeAndIndent[heading.depth] || "";
return (
<p class={className}>
<a href={`#${heading.slug}`} class="block py-1">
{heading.text}
</a>
</p>
);
})
}
</div>
</nav>
85 changes: 3 additions & 82 deletions src/layouts/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import ThemeSwitcher from "@/components/ThemeSwitcher.astro";
import config from "@/config/config.json";
import menu from "@/config/menu.json";
import SearchBar from "@/components/SearchBar.astro";
import { IoSearch, IoClose } from "react-icons/io5/index.js";
export interface ChildNavigationLink {
Expand Down Expand Up @@ -99,96 +100,16 @@ const { pathname } = Astro.url;
))
}
</ul>
<div class="order-1 ml-auto flex items-center lg:order-2 lg:ml-0">
<div class="order-1 ml-auto flex items-center lg:order-2 lg:ml-2">
<div class="mr-4 flex items-center">
<ThemeSwitcher />
</div>

{
settings.search && (
// <a
// class="mr-5 inline-block border-border text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
// href="/search"
// aria-label="search"
// >
// <IoSearch />
// </a>
<>

<div class="lg:hidden border-border text-xl text-dark hover:text-primary dark:text-white flex items-center hover:rotate-12 transition-all duration-300">
<button id="mobile-search" aria-label="Search">
<IoSearch />
</button>
</div>


<span class="z-20 bg-theme-light dark:bg-darkmode-theme-light rounded-md max-lg:!mx-[10%] max-lg:absolute max-lg:left-0 max-lg:w-[80%] max-lg:rounded-md hidden lg:flex lg:space-x-4 flex-row-reverse py-2 px-2">

<div
id="mobile-search-close"
class="cursor-pointer lg:hidden lg:mr-1 flex items-center text-xl text-dark hover:text-primary dark:text-white hover:rotate-12 transition-all duration-300"
>
<IoClose />
</div>

<input
id="search"
type="text"
class="max-lg:text-lg bg-transparent border-transparent w-full lg:w-60 focus:outline-none p-0 m-0"
placeholder="Search..."
/>

<div class="text-xl m-0 p-0 text-dark hover:text-primary dark:border-darkmode-border dark:text-white flex items-center">
<IoSearch />
</div>

<div
id="results"
class="peer-placeholder-shown:hidden empty:hidden focus:block absolute top-16 max-lg:-mr-2 w-full lg:w-72 rounded-lg overflow-y-auto max-h-96 lg:max-h-72"
/>
</span>
</>
<SearchBar />
)
}
</div>
</nav>
</header>

<script is:inline>
document.querySelector("#mobile-search")?.addEventListener("click", () => {
document.querySelector("#search")?.parentElement.classList.toggle("hidden");
document.querySelector("#search")?.parentElement.classList.toggle("flex");
});

document
.querySelector("#mobile-search-close")
?.addEventListener("click", () => {
document.querySelector("#search")?.parentElement.classList.add("hidden");
document.querySelector("#search")?.parentElement.classList.remove("flex");
});

document.querySelector("#search")?.addEventListener("input", async (e) => {
// only load the pagefind script once
if (e.target.dataset.loaded !== "true") {
e.target.dataset.loaded = "true";
// load the pagefind script
window.pagefind = await import("/pagefind/pagefind.js");
}

// search the index using the input value
const search = await window.pagefind.search(e.target.value);

// clear the old results
document.querySelector("#results").innerHTML = "";

// add the new results
for (const result of search.results) {
const data = await result.data();
document.querySelector("#results").innerHTML += `
<a href="${data.url}" class="block px-4 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-700">
<h3 class="font-bold">${data.meta.title}</h3>
<p>${data.excerpt}</p>
</a>`;
}
});
</script>

0 comments on commit 7c1feab

Please sign in to comment.