mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
🎨 Design improvements + fixed content page size + improve accessibility
This commit is contained in:
pheralb
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { tCategory } from "@/types/categories";
|
||||
import type { Category } from "@/types/categories";
|
||||
|
||||
import { cn } from "@/utils/cn";
|
||||
import { svgs } from "@/data/svgs";
|
||||
@@ -10,7 +10,7 @@
|
||||
import { sidebarBadgeClasses } from "./sidebarBadgeClasses";
|
||||
|
||||
// Get category counts:
|
||||
const categories: tCategory[] = getCategories();
|
||||
const categories: Category[] = getCategories();
|
||||
let categoryCounts: Record<string, number> = {};
|
||||
categories.forEach((category) => {
|
||||
categoryCounts[category] = svgs.filter((svg) =>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<ShowSidebarLinks />
|
||||
</nav>
|
||||
<Separator orientation="horizontal" />
|
||||
<nav class="flex flex-col space-y-0.5 overflow-y-auto">
|
||||
<nav class="relative flex h-auto flex-col space-y-0.5 overflow-y-auto">
|
||||
<ShowCategories />
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@@ -5,70 +5,14 @@
|
||||
</script>
|
||||
|
||||
<svg
|
||||
name="SVGL Logo"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
name="SVGL Logo"
|
||||
viewBox="0 0 512 512"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
class={props.className}
|
||||
>
|
||||
<rect
|
||||
id="svgl__r4"
|
||||
width="512"
|
||||
height="512"
|
||||
x="0"
|
||||
y="0"
|
||||
rx="128"
|
||||
fill="#222"
|
||||
stroke="#FFFFFF"
|
||||
stroke-width="0"
|
||||
stroke-opacity="100%"
|
||||
paint-order="stroke"
|
||||
/><rect
|
||||
width="512"
|
||||
height="512"
|
||||
x="0"
|
||||
y="0"
|
||||
fill="url(#svgl__r6)"
|
||||
rx="128"
|
||||
style="mix-blend-mode: overlay;"
|
||||
/><clipPath id="svgl__clip"><use xlink:href="#svgl__r4" /></clipPath><defs
|
||||
><linearGradient
|
||||
id="svgl__r5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="rotate(135)"
|
||||
style="transform-origin: center center;"
|
||||
><stop stop-color="#222" /><stop
|
||||
offset="1"
|
||||
stop-color="#222222"
|
||||
/></linearGradient
|
||||
><radialGradient
|
||||
id="svgl__r6"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(256) rotate(90) scale(512)"
|
||||
><stop stop-color="white" /><stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
/></radialGradient
|
||||
></defs
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="310"
|
||||
height="310"
|
||||
fill="#e8e8e8"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
x="101"
|
||||
y="101"
|
||||
alignment-baseline="middle"
|
||||
style="color: rgb(255, 255, 255);"
|
||||
><path
|
||||
><path d="M216,136c-8,24-56,72-80,80V184a48,48,0,0,1,48-48Z" opacity="0.2"
|
||||
></path><path
|
||||
d="M168,32H88A56.06,56.06,0,0,0,32,88v80a56.06,56.06,0,0,0,56,56h48a8.07,8.07,0,0,0,2.53-.41c26.23-8.75,76.31-58.83,85.06-85.06A8.07,8.07,0,0,0,224,136V88A56.06,56.06,0,0,0,168,32ZM48,168V88A40,40,0,0,1,88,48h80a40,40,0,0,1,40,40v40H184a56.06,56.06,0,0,0-56,56v24H88A40,40,0,0,1,48,168Zm96,35.14V184a40,40,0,0,1,40-40h19.14C191,163.5,163.5,191,144,203.14Z"
|
||||
/></svg
|
||||
>
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<button
|
||||
class={cn(
|
||||
"cursor-pointer transition-colors hover:animate-pulse",
|
||||
"text-neutral-500 hover:text-red-700 dark:text-neutral-400 dark:hover:text-red-400",
|
||||
"text-neutral-500 hover:text-red-700 dark:text-neutral-400 dark:hover:text-red-600",
|
||||
isFavorite && "text-red-500",
|
||||
)}
|
||||
onclick={toggleFavorite}
|
||||
@@ -36,6 +36,6 @@
|
||||
<HeartIcon
|
||||
size={16}
|
||||
strokeWidth={1.8}
|
||||
class={cn(isFavorite && "fill-red-500")}
|
||||
class={cn(isFavorite && "fill-red-500 dark:fill-red-600")}
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -564,8 +564,8 @@
|
||||
class="mt-1 flex w-full items-center text-center text-[12px] text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
<p>
|
||||
Remember to request permission from the creators for the use of the SVG.
|
||||
Modification is not allowed.
|
||||
Please ensure you have permission from the creators before using the
|
||||
SVG. Modifications are not permitted.
|
||||
</p>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
|
||||
@@ -306,11 +306,15 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<Dialog.Footer class="text-xs text-neutral-600 dark:text-neutral-400">
|
||||
<p>
|
||||
Remember to request permission from the creators for the use of the
|
||||
SVG. Modification is not allowed.
|
||||
<Dialog.Footer>
|
||||
<div
|
||||
class="mt-2 flex w-full items-center justify-center text-sm text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
<p class="w-full text-center text-sm">
|
||||
Please ensure you have permission from the creators before using the
|
||||
SVG. Modifications are not permitted.
|
||||
</p>
|
||||
</div>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
|
||||
@@ -90,9 +90,9 @@ export const rehypeCopyBtn = () => {
|
||||
type: "button",
|
||||
title: "Copy code to clipboard",
|
||||
class: cn(
|
||||
"cursor-pointer absolute top-0 right-0 px-1.5 py-0.5 rounded-bl-md",
|
||||
"cursor-pointer z-40 absolute top-[1px] right-[1px] px-1.5 py-0.5 rounded-bl-md",
|
||||
"border-b border-l border-neutral-200 dark:border-neutral-800",
|
||||
"transition-colors hover:text-neutral-700 dark:hover:text-neutral-300",
|
||||
"transition-colors text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-white",
|
||||
),
|
||||
onclick: `
|
||||
const button = this;
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from "./$types";
|
||||
import { cn } from "@/utils/cn";
|
||||
|
||||
import PageCard from "@/components/pageCard.svelte";
|
||||
import PageHeader from "@/components/pageHeader.svelte";
|
||||
|
||||
import Container from "@/components/container.svelte";
|
||||
import PageHeader from "@/components/pageHeader.svelte";
|
||||
import TableOfContents from "@/components/tableOfContents/tableOfContents.svelte";
|
||||
import * as Collapsible from "@/components/ui/collapsible";
|
||||
|
||||
import FileText from "@lucide/svelte/icons/file-text";
|
||||
|
||||
// Markdown:
|
||||
import "@/styles/markdown.css";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import ChevronDown from "@lucide/svelte/icons/chevron-down";
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
let tocOpen = $state(false);
|
||||
const document = $derived(data.document);
|
||||
</script>
|
||||
|
||||
@@ -21,7 +27,7 @@
|
||||
|
||||
<PageCard
|
||||
containerClass="mt-0"
|
||||
contentCardClass="max-h-[calc(100vh-5rem)] min-h-[calc(100vh-5rem)]"
|
||||
contentCardClass="min-h-[calc(100vh-5.4rem)] md:min-h-[calc(100vh-5rem)]"
|
||||
>
|
||||
<PageHeader>
|
||||
<div
|
||||
@@ -33,7 +39,42 @@
|
||||
</p>
|
||||
</div>
|
||||
</PageHeader>
|
||||
<Container className="my-6">
|
||||
<Collapsible.Root class="block lg:hidden" bind:open={tocOpen}>
|
||||
<Collapsible.Trigger
|
||||
class={buttonVariants({
|
||||
variant: "outline",
|
||||
class: "mb-4 w-full rounded-none border-x-0 border-t-0",
|
||||
})}
|
||||
>
|
||||
<span>On this page</span>
|
||||
<ChevronDown
|
||||
size={14}
|
||||
class={cn(
|
||||
"transition-transform duration-200",
|
||||
tocOpen ? "rotate-180" : "rotate-0",
|
||||
)}
|
||||
/>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content class="px-4">
|
||||
<TableOfContents toc={document.tableOfContents} />
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
<div class="flex min-h-screen gap-8 lg:gap-12">
|
||||
<Container
|
||||
className={cn(
|
||||
"flex-1 mt-8 mb-6 max-w-3xl",
|
||||
"animate-in duration-500 fill-mode-backwards fade-in slide-in-from-bottom-4",
|
||||
)}
|
||||
>
|
||||
<article class="markdown">{@html document.html}</article>
|
||||
</Container>
|
||||
<aside class="sticky top-20 hidden w-60 flex-shrink-0 self-start lg:block">
|
||||
<div
|
||||
class="mb-2 text-sm font-medium text-neutral-900 dark:text-neutral-50"
|
||||
>
|
||||
On this page
|
||||
</div>
|
||||
<TableOfContents toc={document.tableOfContents} />
|
||||
</aside>
|
||||
</div>
|
||||
</PageCard>
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
</section>
|
||||
<Container
|
||||
className={cn(
|
||||
"max-w-3xl",
|
||||
"max-w-4xl",
|
||||
"animate-in delay-500 duration-500 fill-mode-backwards fade-in slide-in-from-bottom-4",
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user