prehistoric-systems/web
1
0
Fork 0
mirror of https://codeberg.org/Freedium-cfd/web.git synced 2026-03-11 09:04:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: enhance icon library usage and layout in elements

Browse source
This commit is contained in:
ZhymabekRoman 2024-11-21 20:47:15 +05:00
parent a21e6a493c
commit 6a1b2a75dc
12 changed files with 45 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
new-web/bun.lockb
View file

Binary file not shown.

5
new-web/package.json
View file

@ -12,7 +12,12 @@
"format": "prettier --write ."
},
"devDependencies": {
"@iconify-json/heroicons": "^1.2.1",
"@iconify-json/heroicons-outline": "^1.2.0",
"@iconify-json/mage": "^1.2.1",
"@iconify-json/mdi": "^1.2.1",
"@iconify-json/simple-icons": "^1.2.12",
"@iconify-json/teenyicons": "^1.2.1",
"@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/kit": "^2.7.4",
"@sveltejs/vite-plugin-svelte": "^3.1.2",

12
new-web/src/app.css
View file

@ -91,9 +91,9 @@ html {
}
@layer base {
/**
* Shiki
*/
/* Shiki */
/* --shiki-light: white; */
/* --shiki-dark: black; */
pre.shiki {
counter-reset: line-number;
}
@ -104,14 +104,14 @@ html {
pre.shiki,
pre.shiki span {
color: var(--shiki-light) !important;
/* color: var(--shiki-light) !important; */
background-color: transparent;
}
/* html.dark pre.shiki,
html.dark pre.shiki,
html.dark pre.shiki span {
color: var(--shiki-dark) !important;
} */
}
pre.shiki .line {
counter-increment: line-number;

6
new-web/src/lib/elements/ArticlePage.svelte
View file

@ -2,9 +2,9 @@
import Header from '$lib/elements/Header.svelte';
import { formatDate } from '$lib/utils/dateFormatter';
import { onMount } from 'svelte';
import Icon from '@iconify/svelte';
import ImageZoom from '$lib/elements/ImageZoom.svelte';
import Skeleton from '$lib/components/ui/skeleton/skeleton.svelte';
import Footer from '$lib/elements/Footer.svelte';
let data = {
title: 'UploadThing is 5x Faster',
@ -51,7 +51,7 @@
href="/"
class="flex items-center justify-center transition bg-white rounded-full shadow-md text-primary hover:text-primary/90 group size-8 shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20"
>
<Icon icon="heroicons:arrow-left-20-solid" class="size-6" />
<span class="icon-[heroicons--arrow-left-20-solid] size-6" />
</a>
<a href="/" class="font-bold text-primary hover:text-primary/90"> Original article</a>
</nav>
@ -154,6 +154,8 @@
</div>
</main>
<Footer />
<style lang="postcss">
/* Headings */
:global(.prose h1) {

3
new-web/src/lib/elements/BlogCard.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import Lazy from 'svelte-lazy';
const sizes = ['small', 'medium', 'large'];
@ -60,7 +59,7 @@
<div
class="flex flex-wrap items-center p-4 mt-2 space-x-2 text-sm text-gray-500 dark:text-white"
>
<Icon icon="mage:medium" class="w-4 h-4 mr-1" />
<span class="icon-[mage--medium] size-4 mr-1" />
{#if collection}
<div class="flex items-center">
<img

13
new-web/src/lib/elements/BookmarkButton.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
import * as Dialog from '$lib/components/ui/dialog';
@ -22,7 +21,7 @@
<Dialog.Root bind:open>
<Dialog.Trigger class="w-full">
<DropdownMenu.Item on:click={($event) => $event.preventDefault()}>
<Icon icon="mdi:bookmark" class="w-4 h-4 mr-2" />
<span class="icon-[mdi--bookmark] size-4 mr-2" />
<span>Bookmark</span>
</DropdownMenu.Item>
</Dialog.Trigger>
@ -57,7 +56,7 @@
`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`
)}
>
<Icon icon="mdi:content-copy" class="w-4 h-4" />
<span class="icon-[mdi--content-copy] size-4" />
</Button>
</div>
<p class="mb-2">Create a new bookmark with the following code as the URL:</p>
@ -79,7 +78,7 @@
`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`
)}
>
<Icon icon="mdi:content-copy" class="w-4 h-4" />
<span class="icon-[mdi--content-copy] w-4 h-4" />
</Button>
</div>
@ -101,7 +100,7 @@
<Drawer.Root bind:open>
<Drawer.Trigger class="w-full">
<DropdownMenu.Item on:click={($event) => $event.preventDefault()}>
<Icon icon="mdi:bookmark" class="w-4 h-4 mr-2" />
<span class="icon-[mdi--bookmark] w-4 h-4 mr-2" />
<span>Bookmark</span>
</DropdownMenu.Item>
</Drawer.Trigger>
@ -134,7 +133,7 @@
`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`
)}
>
<Icon icon="mdi:content-copy" class="w-4 h-4" />
<span class="icon-[mdi--content-copy] w-4 h-4" />
</Button>
</div>
<p class="mb-2">Create a new bookmark with the following code as the URL:</p>
@ -156,7 +155,7 @@
`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`
)}
>
<Icon icon="mdi:content-copy" class="w-4 h-4" />
<span class="icon-[mdi--content-copy] w-4 h-4" />
</Button>
</div>

15
new-web/src/lib/elements/ExtensionsButton.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { Button } from '$lib/components/ui/button/index.js';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
import BookmarkButton from './BookmarkButton.svelte';
@ -11,7 +10,7 @@
builders={[builder]}
variant="ghost"
class="px-3 text-gray-600 py-7 dark:text-white hover:text-primary dark:hover:text-primary"
><Icon icon="mdi:puzzle" class="size-5" /></Button
><span class="icon-[mdi--puzzle] size-5" /></Button
>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="w-56 text-zinc-600 dark:text-zinc-300 ">
@ -28,14 +27,14 @@
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Item>
<Icon icon="mdi:firefox" class="w-4 h-4 mr-2" />
<span class="icon-[mdi--firefox] w-4 h-4 mr-2" />
<span>Firefox</span>
<Icon icon="heroicons-outline:external-link" class="size-3.5" />
<span class="icon-[heroicons-outline--external-link] size-3.5" />
</DropdownMenu.Item>
<DropdownMenu.Item>
<Icon icon="mdi:google-chrome" class="w-4 h-4 mr-2" />
<span class="icon-[mdi--google-chrome] w-4 h-4 mr-2" />
<span>Chrome</span>
<Icon icon="heroicons-outline:external-link" class="size-3.5" />
<span class="icon-[heroicons-outline--external-link] size-3.5" />
</DropdownMenu.Item>
</DropdownMenu.Group>
<DropdownMenu.Separator />
@ -45,9 +44,9 @@
href="https://gist.github.com/mathix420/e0604ab0e916622972372711d2829555"
target="_blank"
>
<Icon icon="mdi:script-text" class="w-4 h-4 mr-2" />
<span class="icon-[mdi--script-text] w-4 h-4 mr-2" />
<span>Userscript - only Medium</span>
<Icon icon="heroicons-outline:external-link" class="size-3.5" />
<span class="icon-[heroicons-outline--external-link] size-3.5" />
</a>
</DropdownMenu.Item>
<DropdownMenu.Separator />

5
new-web/src/lib/elements/Footer.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { Button } from '$lib/components/ui/button/index.js';
</script>
@ -40,7 +39,7 @@
target="_blank"
rel="noopener noreferrer"
>
<Icon class="size-5" icon="simple-icons:github" />
<span class="icon-[simple-icons--github] size-5" />
</Button>
<Button
variant="ghost"
@ -49,7 +48,7 @@
target="_blank"
rel="noopener noreferrer"
>
<Icon class="size-5" icon="simple-icons:codeberg" />
<span class="icon-[simple-icons--codeberg] size-5" />
</Button>
</div>
</div>

19
new-web/src/lib/elements/Header.svelte
View file

@ -5,7 +5,6 @@
import ReportProblem from './ReportProblem.svelte';
import PayButtons from './PayButtons.svelte';
import ExtensionsButton from './ExtensionsButton.svelte';
import Icon from '@iconify/svelte';
import SearchDialog from './SearchDialog.svelte';
import { Menu } from 'lucide-svelte';
@ -44,24 +43,24 @@
on:click={toggleSearch}
aria-label="Open search"
>
<Icon icon="heroicons:magnifying-glass" />
<span class="icon-[heroicons-outline--magnifying-glass]" />
<span>Search articles...</span>
</Button>
</div>
<div class="items-center hidden space-x-2 md:flex">
<Button class="lg:hidden" variant="ghost" size="icon" on:click={toggleSearch}>
<Icon class="size-5" icon="heroicons:magnifying-glass" />
<span class="icon-[heroicons-outline--magnifying-glass] size-5" />
</Button>
<ExtensionsButton />
<div class="w-px h-6 bg-zinc-300 dark:bg-zinc-700"></div>
<PayButtons name="Ko-fi" url="https://ko-fi.com/zhymabekroman" icon="teenyicons:cup-solid" />
<PayButtons name="Ko-fi" url="https://ko-fi.com/zhymabekroman" icon="icon-[teenyicons--cup-solid]" />
<PayButtons
name="Liberapay"
url="https://liberapay.com/ZhymabekRoman/"
icon="simple-icons:liberapay"
icon="icon-[simple-icons--liberapay]"
/>
<PayButtons name="Discord" url="discord.gg/dAxCuG9nYM" icon="simple-icons:discord" />
<PayButtons name="Discord" url="https://discord.gg/dAxCuG9nYM" icon="icon-[simple-icons--discord]" />
<div class="w-px h-6 bg-zinc-300 dark:bg-zinc-700"></div>
<ThemeToggle />
<ReportProblem />
@ -69,7 +68,7 @@
<div class="flex items-center space-x-2 md:hidden">
<Button class="lg:hidden" variant="ghost" size="icon" on:click={toggleSearch}>
<Icon class="size-5" icon="heroicons:magnifying-glass" />
<span class="icon-[heroicons-outline--magnifying-glass] size-5" />
</Button>
<ThemeToggle />
<Button
@ -95,14 +94,14 @@
<PayButtons
name="Ko-fi"
url="https://ko-fi.com/zhymabekroman"
icon="teenyicons:cup-solid"
icon="icon-[teenyicons--cup-solid]"
/>
<PayButtons
name="Liberapay"
url="https://liberapay.com/ZhymabekRoman/"
icon="simple-icons:liberapay"
icon="icon-[simple-icons--liberapay]"
/>
<PayButtons name="Discord" url="discord.gg/dAxCuG9nYM" icon="simple-icons:discord" />
<PayButtons name="Discord" url="discord.gg/dAxCuG9nYM" icon="icon-[simple-icons--discord]" />
<!-- <ExtensionsButton /> -->
<ReportProblem />
</div>

5
new-web/src/lib/elements/PayButtons.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import Icon from '@iconify/svelte';
export let name: string;
export let url: string;
@ -9,12 +8,12 @@
<Button variant="ghost" class="w-24 px-3 py-7">
<a
class="transition-colors text-zinc-600 dark:text-zinc-300 hover:text-primary dark:hover:text-primary"
class="flex flex-col items-center gap-1 transition-colors text-zinc-600 dark:text-zinc-300 hover:text-primary dark:hover:text-primary"
href={url}
target="_blank"
rel="noopener noreferrer"
>
<Icon {icon} class="size-5" />
<span class={`${icon} size-5`} />
{name}
</a>
</Button>

5
new-web/src/lib/elements/ReportProblem.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { Label, Separator } from 'bits-ui';
import { mediaQuery } from 'svelte-legos';
import { Textarea } from '$lib/components/ui/textarea/index.js';
@ -27,7 +26,7 @@
<Dialog.Root bind:open>
<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>
<div class="flex items-center space-x-2 text-white">
<Icon icon="heroicons:exclamation-triangle-solid" class="size-5" />
<span class="icon-[heroicons--exclamation-triangle-solid] size-5" />
<span class="hidden text-sm font-medium lg:block">Report a problem</span>
</div>
</Dialog.Trigger>
@ -98,7 +97,7 @@
<Drawer.Root bind:open>
<Drawer.Trigger class={buttonVariants({ variant: 'default' })}>
<div class="flex items-center space-x-2 text-white">
<Icon icon="heroicons:exclamation-triangle-solid" class="size-5" />
<span class="icon-[heroicons--exclamation-triangle-solid] size-5" />
<span class="hidden text-sm font-medium lg:block">Report a problem</span>
</div>
</Drawer.Trigger>

3
new-web/src/lib/elements/ThemeToggle.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { Button } from '$lib/components/ui/button/index.js';
import { browser } from '$app/environment';
@ -32,5 +31,5 @@
on:click={handleSwitchDarkMode}
variant="ghost"
>
<Icon icon={darkMode ? 'heroicons:moon-solid' : 'heroicons:sun-solid'} class="size-5" />
<span class={`${darkMode ? 'icon-[heroicons--moon-solid]' : 'icon-[heroicons--sun-solid]'} size-5`} />
</Button>