hyro/website
1
0
Fork 0
mirror of https://github.com/xHyroM/website.git synced 2024-11-22 06:51:05 +01:00
Code Issues Projects Releases Wiki Activity Actions

fix: remove last slash from currentPageMatch, format

Browse source
This commit is contained in:
xHyroM 2023-06-04 18:57:37 +02:00
parent 90098f9c20
commit 9cd69c442a
No known key found for this signature in database
GPG key ID: BE0423F386C436AA
6 changed files with 91 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.prettierrc.cjs
View file

@ -1,5 +1,8 @@
module.exports = {
plugins: [require.resolve("prettier-plugin-astro")],
plugins: [
require.resolve("prettier-plugin-astro"),
require.resolve("prettier-plugin-tailwindcss"),
],
overrides: [
{
files: "*.astro",

6
docs/config.ts
View file

@ -1,8 +1,8 @@
export interface Docs {
sidebar: Sidebar[];
sidebar: SidebarItem[];
}
export interface Sidebar {
export interface SidebarItem {
text: string;
header?: boolean;
link?: string;
@ -26,6 +26,6 @@ export const docs: Docs = {
{
text: "Stats",
link: "/docs/discord-experiments-api/stats",
}
},
],
};

10
src/components/widgets/docs/LeftSidebar.astro
View file

@ -1,16 +1,18 @@
---
import { docs, type Sidebar } from "@docs/config";
import { docs, type SidebarItem } from "@docs/config";
const { currentPage } = Astro.props;
const currentPageMatch = currentPage.slice(1);
const currentPageMatch = currentPage.slice(1).endsWith("/")
? currentPage.slice(1).slice(0, -1)
: currentPage.slice(1);
const isCurrentPage = (item: Sidebar) => {
const isCurrentPage = (item: SidebarItem) => {
if (item.link) {
return item.link.includes(currentPageMatch);
}
return false;
};
const getLinkClasses = (link: Sidebar) => {
const getLinkClasses = (link: SidebarItem) => {
const baseClasses = "py-1 px-6 my-1 transition-colors border-l -ml-px pl-4";
if (isCurrentPage(link)) {

2
src/components/widgets/docs/RightSidebar.astro
View file

@ -20,7 +20,7 @@ const headings = item
{
headings.length > 1 && (
<nav aria-labelledby="grid-right" class="p-4 invisible md:visible">
<nav aria-labelledby="grid-right" class="invisible p-4 md:visible">
<div class="pl-8">
<TableOfContents headings={headings} client:idle />
</div>

4
src/components/widgets/docs/TableOfContents.tsx
View file

@ -99,8 +99,8 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
<li
className={`border-l py-1 ${
currentId === slug
? "text-gold border-gold"
: "text-gray-100 hover:text-gray-200 border-transparent"
? "border-gold text-gold"
: "border-transparent text-gray-100 hover:text-gray-200"
}`}
>
<a

115
src/pages/blog/[...page].astro
View file

@ -5,58 +5,93 @@ import Container from "@components/atoms/Container.astro";
import Button from "~/components/widgets/Button.astro";
import type { PaginateFunction } from "astro";
export async function getStaticPaths({ paginate }: {
paginate: PaginateFunction;
export async function getStaticPaths({
paginate,
}: {
paginate: PaginateFunction;
}) {
// Load your data with fetch(), Astro.glob(), etc.
const posts = (await Astro.glob('@blog/*.md')).sort(
(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()
).map((post) => ({
...post,
url: `/blog/posts/${post.file.split("/blog/")[1].split("/")[0].replace(".md", "")}`,
}));
const posts = (await Astro.glob("@blog/*.md"))
.sort(
(a, b) =>
new Date(b.frontmatter.date).valueOf() -
new Date(a.frontmatter.date).valueOf()
)
.map((post) => ({
...post,
url: `/blog/posts/${post.file
.split("/blog/")[1]
.split("/")[0]
.replace(".md", "")}`,
}));
return paginate(posts, { pageSize: 3 });
}
const { page } = Astro.props;
const posts = page.data as {
url: string;
frontmatter: {
title: string;
date: string;
description: string;
};
url: string;
frontmatter: {
title: string;
date: string;
description: string;
};
}[];
---
<Layout>
<Navbar />
<h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
Blog
</h1>
<Navbar />
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
Blog
</h1>
<Container class="flex content-center justify-center">
<main>
{posts.map(post => {
return (
<a class="text-2xl font-semibold text-gold text-opacity-80 mb-4 break-all" href={post.url}>{post.frontmatter.title}</a>
<p class="text-1xl text-opacity-40 text-white italic break-all">
{new Date(post.frontmatter.date).toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</p>
<p class="text-1xl text-white break-all">{post.frontmatter.description}</p>
<hr class="mt-4 mb-4 text-dark-200" />
)
})}
<Container class="flex content-center justify-center">
<main>
{
posts.map((post) => {
return (
<>
<a
class="mb-4 break-all text-2xl font-semibold text-gold text-opacity-80"
href={post.url}
>
{post.frontmatter.title}
</a>
<p class="text-1xl break-all italic text-white text-opacity-40">
{new Date(post.frontmatter.date).toLocaleDateString("en-us", {
year: "numeric",
month: "short",
day: "numeric",
})}
</p>
<p class="text-1xl break-all text-white">
{post.frontmatter.description}
</p>
<hr class="mb-4 mt-4 text-dark-200" />
</>
);
})
}
<div class="flex flex-row gap-3">
<Button label="Previous" link={page.url.prev} type="primary" icon="/icons/chevrons-right.svg" iconClass="mr-2 h-6 w-5 rotate-180" iconPosition="left" disabled={!page.url.prev} />
<Button label="Next" link={page.url.next} type="primary" icon="/icons/chevrons-right.svg" iconClass="ml-2 mt-[1px] h-[23px] w-5" disabled={!page.url.next} />
</div>
</main>
</Container>
<div class="flex flex-row gap-3">
<Button
label="Previous"
link={page.url.prev}
type="primary"
icon="/icons/chevrons-right.svg"
iconClass="mr-2 h-6 w-5 rotate-180"
iconPosition="left"
disabled={!page.url.prev}
/>
<Button
label="Next"
link={page.url.next}
type="primary"
icon="/icons/chevrons-right.svg"
iconClass="ml-2 mt-[1px] h-[23px] w-5"
disabled={!page.url.next}
/>
</div>
</main>
</Container>
</Layout>