Skip to content

Commit

Permalink
Merge pull request #10 from Fleco-Development/main
Browse files Browse the repository at this point in the history
New sidebar & fixes
  • Loading branch information
shanecaf authored Nov 7, 2023
2 parents 095b119 + d923d81 commit d39e2e7
Show file tree
Hide file tree
Showing 14 changed files with 142 additions and 18 deletions.
3 changes: 2 additions & 1 deletion astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export default defineConfig({
discord: 'https://discord.gg/jjytrCZgrE'
},
components: {
Footer: './src/overrides/Footer.astro'
Footer: './src/overrides/Footer.astro',
Sidebar: './src/overrides/Sidebar.astro',
},
sidebar: [{
label: 'Fleco',
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/fleco/guides/development.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Development Setup
description: Setup Fleco for Development
---

:::note
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/fleco/guides/get-started.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Getting Started
description: Getting Started with the bot
---

import { Card } from '@astrojs/starlight/components';
Expand Down
1 change: 0 additions & 1 deletion src/content/docs/packages/duration/classes/duration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ Everything in this package is based around the `Duration` class, where you can c
import CodeBlock from '../../../../../overrides/CodeBlock.astro';
import Table from '../../../../../overrides/Table.astro';


<CodeBlock
lang="typescript"
code={`new Duration('1w 2d');
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: DiscordTimestamp
description: Contains all of the different types of timestamps that can be used in Discord.
---

Contains all of the different types of timestamps that can be used in Discord.
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/packages/duration/examples/discord.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: An example of @fleco/duration with Discord.JS

import CodeBlock from '../../../../../overrides/CodeBlock.astro';
import CodeCopy from '../../../../../overrides/CodeCopy.astro';
import { Tabs, TabItem } from '@astrojs/starlight/components';
import { Tabs, TabItem } from '@astrojs/starlight/components';

This example uses Discord.JS with TypeScript

Expand Down Expand Up @@ -52,4 +52,4 @@ client.on(Events.InteractionCreate, async (interaction: Interaction) => {
client.login(token);
`
}
/>
/>
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: DurationOptions
description: Options for setting/adding/subtracing a duration.
---

Options for setting/adding/subtracing a duration.
Expand Down
1 change: 1 addition & 0 deletions src/overrides/CodeBlock.astro
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import "../assets/prism.css";
class="!m-0 p-4 absolute top-0 right-0 daisy_tooltip daisy_tooltip-left cursor-pointer bg-transparent flex-shrink-0 codeblock_copy_button"
role="button"
data-tip="Copy to Clipboard"
aria-label="Copy to Clipboard"
>
<svg
id="test-2"
Expand Down
9 changes: 5 additions & 4 deletions src/overrides/CodeCopy.astro
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ import { Prism } from "@astrojs/prism";
import "../assets/prism.css";
---

<div
class="overflow-x-none my-3 text-sm flex max-w-fit text-left items-center space-x-4 bg-gray-800 text-white rounded-lg p-4 pl-6 shadow-lg"
<span
class="flex overflow-clip my-3 text-sm max-w-fit text-left items-center bg-gray-800 text-white rounded-lg p-4 shadow-lg"
>
<span class="flex overflow-x-auto gap-4 text-center items-center">
<span class="shrink-0 text-gray-500 font-bold">$</span>

<div
class="overflow-x-auto whitespace-nowrap flex-1 font-mono code_content"
class="overflow-x-none whitespace-nowrap flex-1 font-mono code_content"
>
<Prism
class="!p-0 code_content relative !border-none !bg-gray-800"
Expand All @@ -31,6 +31,7 @@ import "../assets/prism.css";
class="daisy_tooltip cursor-pointer bg-transparent flex-shrink-0 code_copy_button"
role="button"
data-tip="Copy to Clipboard"
aria-label="Copy to Clipboard"
>
<svg
id="testing"
Expand All @@ -50,7 +51,7 @@ import "../assets/prism.css";
</path>
</svg>
</button>
</div>
</span>

<script>
let isCopied = false;
Expand Down
15 changes: 9 additions & 6 deletions src/overrides/Footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,22 @@ const links = Object.entries(config.social || {}) as [Platform, SocialConfig][];
<footer>
<Pagination {...Astro.props} />
<div
class="rounded-lg bg-gray-800 daisy_footer items-center p-4 copyright shadow-lg flex justify-between"
class="flex justify-between rounded-lg bg-gray-800 daisy_footer items-center p-4 copyright shadow-lg"
>
<aside class="items-center inline-flex flex-start">
<img width="36" height="36" src="/fleco.svg" />
<img width="36" height="36" src="/fleco.svg" alt="fleco-logo" />
<p>Copyright © {year} - All rights reserved</p>
</aside>
{
links.length > 0 && (
<nav class="flex gap-4 md:place-self-center">
<nav class="inline-flex gap-4 text-center items-center">
{links.map(([platform, { label, url }]) => (
<a href={url} rel="me">
<span class="sr-only" />
<Icon name={platform} />
<a href={url} rel="me" class="flex items-center">
<span class="sr-only">{label}</span>
<Icon
class="transition hover:opacity-60 text-xl"
name={platform}
/>
</a>
))}
</nav>
Expand Down
12 changes: 12 additions & 0 deletions src/overrides/Sidebar.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
import type { Props } from "@astrojs/starlight/props";
import MobileMenuFooter from "@astrojs/starlight/components/MobileMenuFooter.astro";
import SidebarSublist from "./SidebarSublist.astro";
const { sidebar } = Astro.props;
---

<SidebarSublist sublist={sidebar} />
<div class="md:sl-hidden">
<MobileMenuFooter {...Astro.props} />
</div>
94 changes: 94 additions & 0 deletions src/overrides/SidebarSublist.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
---
import Badge from "@astrojs/starlight/components/Badge.astro";
import type { Badge as BadgeType } from "../utils/badge";
interface Link {
type: "link";
label: string;
href: string;
isCurrent: boolean;
badge: BadgeType | undefined;
attrs: any;
}
interface Group {
type: "group";
label: string;
entries: (Link | Group)[];
collapsed: boolean;
}
type SidebarEntry = Link | Group;
function flattenSidebar(sidebar: SidebarEntry[]): Link[] {
return sidebar.flatMap((entry) =>
entry.type === "group" ? flattenSidebar(entry.entries) : entry,
);
}
interface Props {
sublist: SidebarEntry[];
nested?: boolean;
}
---

<ul class:list={{ "top-level": !Astro.props.nested }} class="!daisy_menu gap-2">
{
Astro.props.sublist.map((entry) => (
<li>
{entry.type === "link" ? (
<a
href={entry.href}
aria-current={entry.isCurrent && "page"}
class:list={[
{
large: !Astro.props.nested,
current_page: entry.isCurrent,
"text-white": !entry.isCurrent,
},
entry.attrs.class,
"no-underline",
]}
{...entry.attrs}
>
<span>{entry.label}</span>
{entry.badge && (
<>
{" "}
<Badge
text={entry.badge.text}
variant={
entry.isCurrent
? "outline"
: entry.badge.variant
}
/>
</>
)}
</a>
) : (
<details
open={
flattenSidebar(entry.entries).some(
(i) => i.isCurrent,
) || !entry.collapsed
}
>
<summary>
<span class="text-md font-bold">{entry.label}</span>
</summary>
<Astro.self sublist={entry.entries} nested />
</details>
)}
</li>
))
}
</ul>

<style>
.current_page {
color: var(--sl-color-text-invert);
background-color: var(--sl-color-text-accent);
font-weight: bold;
}
</style>
8 changes: 4 additions & 4 deletions src/overrides/Table.astro
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ marked.use({ renderer });

<div class="overflow-x-auto">
<div
class="flex flex-col min-w-max xl:min-w-0 p-4 rounded-lg border border-gray-700"
class="flex flex-shrink-0 flex-col min-w-max xl:min-w-0 p-4 rounded-lg border border-gray-700"
>
<div
class="flex flex-shrink-0 p-2 rounded-lg bg-gray-800 font-bold text-center"
class="flex overflow-x-auto flex-shrink-0 p-2 rounded-lg bg-gray-800 font-bold text-center"
>
{headers.map((header) => <span class="flex-1 p-2">{header}</span>)}
</div>
Expand All @@ -40,10 +40,10 @@ marked.use({ renderer });

return (
<>
<div class="flex flex-shrink-0 p-2 min-w-max text-center">
<div class="flex p-2 min-w-max items-center text-center">
{row.map((entry) => (
<span
class="flex-1"
class="flex-1 p-2"
set:html={marked.parseInline(entry)}
/>
))}
Expand Down
9 changes: 9 additions & 0 deletions src/utils/badge.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { z } from 'astro/zod';

const badgeSchema = () =>
z.object({
variant: z.enum(['note', 'danger', 'success', 'caution', 'tip', 'default']).default('default'),
text: z.string(),
});

export type Badge = z.output<ReturnType<typeof badgeSchema>>;

0 comments on commit d39e2e7

Please sign in to comment.