feat: Remove redundant folder links from api sidebar

This commit is contained in:
Araozu 2024-08-26 11:29:42 -05:00
parent eee2f60c61
commit 97f10385ba
3 changed files with 66 additions and 25 deletions

View File

@ -1,14 +1,10 @@
--- ---
import type { Hierarchy, Post } from "../../layouts/ApiLayout.astro"; import type { Hierarchy, Post } from "../../layouts/ApiLayout.astro";
import { splitAndLast } from "../utils";
const hierarchy: Hierarchy = Astro.props.hierarchy; const hierarchy: Hierarchy = Astro.props.hierarchy;
function splitAndLast(s: string): string { export function postComparison(a: Post, b: Post): number {
const segments = s.split("/");
return segments[segments.length - 1]!;
}
function postComparison(a: Post, b: Post): number {
const s1 = splitAndLast(a.url); const s1 = splitAndLast(a.url);
const s2 = splitAndLast(b.url); const s2 = splitAndLast(b.url);
@ -17,11 +13,21 @@ function postComparison(a: Post, b: Post): number {
--- ---
{ {
Object.entries(hierarchy.children).map(([folderName, children]) => ( Object.entries(hierarchy.children).map(
([folderName, [folderPost, children]]) => (
<> <>
{folderPost !== null ? (
<a
class="inline-block rounded-2xl w-full hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors px-3 py-2"
href={folderPost.url}
>
{splitAndLast(folderPost.url)}
</a>
) : (
<div class="mt-6 px-2 py-1 uppercase font-display text-c-text-2 font-medium"> <div class="mt-6 px-2 py-1 uppercase font-display text-c-text-2 font-medium">
{folderName} {folderName}
</div> </div>
)}
<div class="pl-2 my-1"> <div class="pl-2 my-1">
<ul class="border-l border-c-border-1"> <ul class="border-l border-c-border-1">
@ -29,7 +35,8 @@ function postComparison(a: Post, b: Post): number {
</ul> </ul>
</div> </div>
</> </>
)) ),
)
} }
{ {
hierarchy.posts.sort(postComparison).map((p) => ( hierarchy.posts.sort(postComparison).map((p) => (

View File

@ -58,3 +58,7 @@ function trimWhitespace(input: string, count: number): string {
} }
} }
export function splitAndLast(s: string): string {
const segments = s.split("/");
return segments[segments.length - 1]!;
}

View File

@ -3,6 +3,7 @@ import Navbar from "../components/Navbar.astro";
import BaseLayout from "./BaseLayout.astro"; import BaseLayout from "./BaseLayout.astro";
import TOC from "../components/TOC.astro"; import TOC from "../components/TOC.astro";
import Sidebar from "../components/ApiLayout/Sidebar.astro"; import Sidebar from "../components/ApiLayout/Sidebar.astro";
import { splitAndLast } from "../components/utils";
const { headings } = Astro.props; const { headings } = Astro.props;
@ -21,7 +22,7 @@ const posts: Posts = await Astro.glob("../pages/api/std/**/*.{md,mdx}");
export type Hierarchy = { export type Hierarchy = {
posts: Array<Post>; posts: Array<Post>;
children: Record<string, Hierarchy>; children: Record<string, [Post | null, Hierarchy]>;
}; };
function createHierarchy(posts: Posts): Hierarchy { function createHierarchy(posts: Posts): Hierarchy {
@ -57,13 +58,17 @@ function createHierarchy(posts: Posts): Hierarchy {
// check if folder exists, create otherwise // check if folder exists, create otherwise
if (!hierarchy.children[folderName]) { if (!hierarchy.children[folderName]) {
// create if doesnt exist // create if doesnt exist
hierarchy.children[folderName] = { hierarchy.children[folderName] = [
null,
{
posts: [], posts: [],
children: {}, children: {},
}; },
];
} }
currentHierarchy = hierarchy.children[folderName]; const [_, childrenHierarchy] = hierarchy.children[folderName]!;
currentHierarchy = childrenHierarchy;
} }
// add the page // add the page
@ -73,7 +78,32 @@ function createHierarchy(posts: Posts): Hierarchy {
return hierarchy; return hierarchy;
} }
const hierarchy = createHierarchy(posts); function normalizeHierarchy(h: Hierarchy): Hierarchy {
let posts = h.posts;
for (const folderName in h.children) {
// search if there is a post with the same name
// as the folder
const postIdx = h.posts.findIndex(
(post) => splitAndLast(post.url) === folderName,
);
if (postIdx !== -1) {
const post = h.posts[postIdx]!;
h.children[folderName]![0] = post;
posts.splice(postIdx, 1);
}
}
// do the same to all children
// TODO
return {
children: h.children,
posts,
};
}
const hierarchy = normalizeHierarchy(createHierarchy(posts));
--- ---
<BaseLayout> <BaseLayout>