Skip to content

Commit

Permalink
Merge pull request #80 from SkyCryptWebsite/dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarthGigi
DarthGigi authored Jan 8, 2025
2 parents 5ef1d8e + d6dc938 commit 61f47e4
Show file tree
Hide file tree
Showing 10 changed files with 104 additions and 215 deletions.
34 changes: 4 additions & 30 deletions .github/workflows/website.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,34 +41,8 @@ jobs:
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2

es-lint:
name: Check linting (es-lint)
runs-on: ubuntu-latest
steps:
- name: Git checkout
uses: actions/checkout@v3

- name: PNPM Install
uses: ./.github/actions/pnpm-install

- name: Check ESlint
run: pnpm lint

prettier:
name: Check formatting (prettier)
runs-on: ubuntu-latest
steps:
- name: Git checkout
uses: actions/checkout@v3

- name: PNPM Install
uses: ./.github/actions/pnpm-install

- name: Check Prettier
run: pnpm prettier --check .

sveltecheck:
name: Svelte Check
formatting-checks:
name: Check linting (es-lint), formatting (prettier), and svelte checks (svelte-check)
runs-on: ubuntu-latest
steps:
- name: Git checkout
Expand All @@ -83,8 +57,8 @@ jobs:
ls -a .
mv .env.example .env
- name: Check Svelte
run: pnpm run check
- name: Check linting, formatting, and svelte checks
run: pnpm lint

build:
name: Svelte Build
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"runbuild": "node ./build/index.js",
"test": "vitest",
"lint": "prettier --check . && eslint .",
"lint": "prettier --check . && eslint . && pnpm check",
"format": "prettier --write ."
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@
}

[data-tooltip-content] {
@apply max-w-[min(20rem,100vw-2.5rem)] text-pretty text-sm;
@apply text-pretty text-sm;
}
}

Expand Down
252 changes: 84 additions & 168 deletions src/lib/components/Item.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,77 @@
});
</script>

{#snippet item()}
{#snippet itemContents(isDrawer: boolean = false)}
<div class={cn(`nice-colors-dark flex flex-nowrap items-center justify-center gap-4 p-5`, { "rounded-t-[10px]": isDrawer }, bgColor)}>
<Avatar.Root class="shrink-0 px-2">
<Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-8 flex-none shrink-0 overflow-hidden [image-rendering:pixelated]" data-enchanted={enchanted} />
<Avatar.Fallback>
<Image class="size-8" />
</Avatar.Fallback>
</Avatar.Root>

<p class="relative text-wrap text-center text-base font-semibold uppercase data-[multicolor=true]:rounded-full data-[multicolor=true]:bg-background-lore data-[multicolor=true]:px-2 data-[multicolor=true]:py-1 data-[multicolor=false]:text-text sm:text-lg" data-multicolor={isMulticolor}>
{@html isMulticolor ? itemNameHtml : removeFormatting(itemNameHtml)}
</p>
</div>
<div class="w-full overflow-auto">
<div class="w-full p-6 font-semibold leading-snug">
{#each skyblockItem.lore as lore}
{@html renderLore(lore)}
{/each}
{#if skyblockItem.containsItems && skyblockItem.containsItems.length > 0}
<div class="mt-4 border-t border-text/10 pt-4">
<div class="grid grid-cols-9 gap-1">
{#each skyblockItem.containsItems.slice(0, Math.min(skyblockItem.containsItems.length, 54)) as containedItem}
{#if containedItem.texture_path}
<div class="flex aspect-square items-center justify-center rounded bg-text/[0.04]">
<ContainedItem piece={containedItem} />
</div>
{:else}
<div class="aspect-square rounded bg-text/[0.04]"></div>
{/if}
{/each}
</div>
</div>
{/if}

{#if packData}
<div class="pt-4">
<Button.Root href={packData.link} target="_blank">
<div class="flex items-center justify-between gap-4 rounded-[0.625rem] bg-text/[0.05] p-2 transition-colors hover:bg-text/[0.08]">
<div class="flex items-center gap-2">
<Avatar.Root class="shrink-0 select-none">
<Avatar.Image loading="lazy" src="/resourcepacks/{packData.folder}/pack.png" alt={packData.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg" />
<Avatar.Fallback class="flex size-10 items-center justify-center rounded-lg bg-icon/90 text-center font-semibold uppercase">
{packData.name.slice(0, 2)}
</Avatar.Fallback>
</Avatar.Root>
<div class="flex flex-col">
<div class="font-semibold text-link">
<span class="underline">
{packData.name}
</span>
<span class="text-sm text-text/60">{packData.version}</span>
</div>
<div class="text-sm text-text/60">
by <span class="text-text/80">{packData.author}</span>
</div>
</div>
</div>
</div>
</Button.Root>
</div>
{/if}
</div>
</div>
{/snippet}

{#snippet itemIcon()}
<div class={cn(`relative flex aspect-square items-center justify-center overflow-clip rounded-lg`, isInventory ? "p-0" : `p-2 ${bgColor}`, { shine: shine })}>
<Avatar.Root>
<Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-14 select-none" data-enchanted={enchanted} />
<Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-14 select-none [image-rendering:pixelated]" data-enchanted={enchanted} />
<Avatar.Fallback>
<Image class="size-14" />
<Image class={cn(isInventory ? "size-8 sm:size-14" : "size-14")} />
</Avatar.Fallback>
</Avatar.Root>
{#if recombobulated}
Expand All @@ -68,190 +133,41 @@

{#snippet tooltip()}
<Tooltip.Root group="armor" openDelay={0} closeDelay={0}>
<Tooltip.Trigger class={cn(`nice-colors-dark relative flex aspect-square items-center justify-center overflow-clip rounded-lg`, isInventory ? "p-0" : `p-2 ${bgColor}`, { shine: enchanted })} onclick={() => showDialog.set(!$showDialog)}>
<Avatar.Root>
<Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-14 select-none" data-enchanted={enchanted} />
<Avatar.Fallback>
<Image class="size-14" />
</Avatar.Fallback>
</Avatar.Root>
{#if recombobulated}
<div class="absolute -right-3 -top-3 z-10 size-6 rotate-45 bg-[--color]" style="--color: var(--§{RARITY_COLORS[RARITIES[RARITIES.indexOf(piece.rarity ?? 'common') - 1]]})"></div>
{/if}
{#if showNumbers}
<div class="absolute bottom-0.5 right-0.5 text-sm font-semibold text-white text-shadow-[.1em_.1em_.1em_#000] sm:text-2xl">
{skyblockItem.Count ?? 1}
</div>
{/if}
<Tooltip.Trigger class="nice-colors-dark" onclick={() => showDialog.set(!$showDialog)}>
{@render itemIcon()}
</Tooltip.Trigger>
<Tooltip.Content class="pointer-events-none z-50 flex max-h-[calc(96%-3rem)] w-max min-w-96 max-w-[calc(100vw-2.5rem)] select-text flex-col overflow-hidden rounded-lg bg-background-lore font-icomoon" transition={flyAndScale} transitionConfig={{ x: -8, duration: 150 }} sideOffset={8} side="right" align="center">
<div class={cn(`nice-colors-dark flex flex-nowrap items-center justify-center gap-4 p-5`, bgColor)}>
<Avatar.Root>
<Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-8 flex-none overflow-hidden" data-enchanted={enchanted} />
<Avatar.Fallback>
<Image class="size-8" />
</Avatar.Fallback>
</Avatar.Root>

<p class="relative flex-1 text-center text-lg font-semibold uppercase data-[multicolor=true]:rounded-full data-[multicolor=true]:bg-background-lore data-[multicolor=true]:px-2 data-[multicolor=true]:py-1 data-[multicolor=false]:text-text" data-multicolor={isMulticolor}>
{@html isMulticolor ? itemNameHtml : removeFormatting(itemNameHtml)}
</p>
</div>
<div class="mx-auto w-full max-w-md overflow-auto p-6 font-semibold leading-snug">
{#each skyblockItem.lore as lore}
{@html renderLore(lore)}
{/each}
{#if skyblockItem.containsItems && skyblockItem.containsItems.length > 0}
<div class="mt-4 border-t border-text/10 pt-4">
<div class="grid grid-cols-9 gap-1">
{#each skyblockItem.containsItems.slice(0, Math.min(skyblockItem.containsItems.length, 54)) as containedItem}
{#if containedItem.texture_path}
<div class="flex aspect-square items-center justify-center rounded bg-text/[0.04]">
<ContainedItem piece={containedItem} />
</div>
{:else}
<div class="aspect-square rounded bg-text/[0.04]"></div>
{/if}
{/each}
</div>
</div>
{/if}

{#if packData}
<div class="pt-4">
<Button.Root href={packData.link} target="_blank">
<div class="flex items-center justify-between gap-4 rounded-[0.625rem] bg-text/[0.05] p-2 transition-colors hover:bg-text/[0.08]">
<div class="flex items-center gap-2">
<Avatar.Root class="shrink-0 select-none">
<Avatar.Image src="/resourcepacks/{packData.folder}/pack.png" alt={packData.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg" />
<Avatar.Fallback class="flex size-10 items-center justify-center rounded-lg bg-icon/90 text-center font-semibold uppercase">
{packData.name.slice(0, 2)}
</Avatar.Fallback>
</Avatar.Root>
<div class="flex flex-col">
<div class="font-semibold text-link">
<span class="underline">
{packData.name}
</span>
<span class="text-sm text-text/60">{packData.version}</span>
</div>
<div class="text-sm text-text/60">
by <span class="text-text/80">{packData.author}</span>
</div>
</div>
</div>
</div>
</Button.Root>
</div>
{/if}
</div>
<Tooltip.Content class="pointer-events-none z-50 flex max-h-[calc(96%-3rem)] max-w-[calc(100vw-2.5rem)] select-text flex-col overflow-hidden rounded-lg bg-background-lore font-icomoon" transition={flyAndScale} transitionConfig={{ x: -8, duration: 150 }} sideOffset={8} side="right" align="center">
{@render itemContents()}
</Tooltip.Content>
</Tooltip.Root>
{/snippet}

{#if isHover.current && $showDialog}
<Dialog.Root bind:open={$showDialogDelayed}>
<Dialog.Portal>
<Dialog.Overlay transition={fade} transitionConfig={{ duration: 150 }} class="fixed inset-0 z-40 bg-black/80" />
<Dialog.Content class="fixed left-[50%] top-[50%] z-50 flex max-h-[calc(96%-3rem)] w-max min-w-96 max-w-[calc(100vw-2.5rem)] -translate-x-1/2 -translate-y-1/2 select-text flex-col overflow-hidden rounded-lg bg-background-lore font-icomoon" transition={flyAndScale} transitionConfig={{ x: -8, duration: 150 }}>
<div class={cn(`nice-colors-dark flex flex-nowrap items-center justify-center gap-4 p-5`, bgColor)}>
<Avatar.Root>
<Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-8 flex-none overflow-hidden" data-enchanted={enchanted} />
<Avatar.Fallback>
<Image class="size-8" />
</Avatar.Fallback>
</Avatar.Root>

<p class="relative flex-1 text-center text-lg font-semibold uppercase data-[multicolor=true]:rounded-full data-[multicolor=true]:bg-background-lore data-[multicolor=true]:px-2 data-[multicolor=true]:py-1 data-[multicolor=false]:text-text" data-multicolor={isMulticolor}>
{@html isMulticolor ? itemNameHtml : removeFormatting(itemNameHtml)}
</p>
</div>
<div class="mx-auto w-full max-w-md overflow-auto p-6 font-semibold leading-snug">
{#each skyblockItem.lore as lore}
{@html renderLore(lore)}
{/each}
{#if skyblockItem.containsItems && skyblockItem.containsItems.length > 0}
<div class="mt-4 border-t border-text/10 pt-4">
<div class="grid grid-cols-9 gap-1">
{#each skyblockItem.containsItems.slice(0, Math.min(skyblockItem.containsItems.length, 54)) as containedItem}
{#if containedItem.texture_path}
<div class="flex aspect-square items-center justify-center rounded bg-text/[0.04]">
<ContainedItem piece={containedItem} />
</div>
{:else}
<div class="aspect-square rounded bg-text/[0.04]"></div>
{/if}
{/each}
</div>
</div>
{/if}

{#if packData}
<div class="pt-4">
<Button.Root href={packData.link} target="_blank">
<div class="flex items-center justify-between gap-4 rounded-[0.625rem] bg-text/[0.05] p-2 transition-colors hover:bg-text/[0.08]">
<div class="flex items-center gap-2">
<Avatar.Root class="shrink-0 select-none">
<Avatar.Image src="/resourcepacks/{packData.folder}/pack.png" alt={packData.name} class="pointer-events-none aspect-square size-10 h-full select-none rounded-lg" />
<Avatar.Fallback class="flex size-10 items-center justify-center rounded-lg bg-icon/90 text-center font-semibold uppercase">
{packData.name.slice(0, 2)}
</Avatar.Fallback>
</Avatar.Root>
<div class="flex flex-col">
<div class="font-semibold text-link">
<span class="underline">
{packData.name}
</span>
<span class="text-sm text-text/60">{packData.version}</span>
</div>
<div class="text-sm text-text/60">
by <span class="text-text/80">{packData.author}</span>
</div>
</div>
</div>
</div>
</Button.Root>
</div>
{/if}
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
{/if}

{#snippet drawer()}
<Drawer.Root shouldScaleBackground={true} setBackgroundColorOnScale={false}>
<Drawer.Trigger class="nice-colors-dark">
{@render item()}
{@render itemIcon()}
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay class="fixed inset-0 z-40 bg-black/80" />
<Drawer.Content class="fixed bottom-0 left-0 right-0 z-50 flex max-h-[96%] flex-col rounded-t-[10px] bg-background-lore">
<div class={cn(`nice-colors-dark flex flex-nowrap items-center justify-center gap-4 rounded-t-[10px] p-5`, bgColor)}>
<Avatar.Root>
<Avatar.Image loading="lazy" src={$page.url.origin + piece.texture_path} alt={piece.display_name} class="data-[enchanted=true]:enchanted h-auto w-8 flex-none overflow-hidden" data-enchanted={enchanted} />
<Avatar.Fallback>
<Image class="size-8" />
</Avatar.Fallback>
</Avatar.Root>

<p class="relative flex-1 text-center text-lg font-semibold uppercase data-[multicolor=true]:rounded-full data-[multicolor=true]:bg-background-lore data-[multicolor=true]:px-2 data-[multicolor=true]:py-1 data-[multicolor=false]:text-text" data-multicolor={isMulticolor}>
{@html isMulticolor ? itemNameHtml : removeFormatting(itemNameHtml)}
</p>
</div>

<div class="mx-auto w-full max-w-md overflow-auto p-6 font-semibold leading-snug">
{#each skyblockItem.lore as lore}
{@html renderLore(lore)}
{/each}
</div>
{@render itemContents(true)}
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
{/snippet}

{#if isHover.current}
{@render tooltip()}
{#if $showDialog}
<Dialog.Root bind:open={$showDialogDelayed}>
<Dialog.Portal>
<Dialog.Overlay transition={fade} transitionConfig={{ duration: 150 }} class="fixed inset-0 z-40 bg-black/80" />
<Dialog.Content class="fixed left-[50%] top-[50%] z-50 flex max-h-[calc(96%-3rem)] max-w-[calc(100vw-2.5rem)] -translate-x-1/2 -translate-y-1/2 select-text flex-col overflow-hidden rounded-lg bg-background-lore font-icomoon" transition={flyAndScale} transitionConfig={{ x: -8, duration: 150 }}>
{@render itemContents()}
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
{/if}
{:else}
{@render drawer()}
{/if}
10 changes: 5 additions & 5 deletions src/lib/components/SEO.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@
vampire: "🩸"
} as Record<string, string>;
function getDescription() {
function getLongDescription() {
let output = "";
// Skyblock Level
if (profile.skyblock_level.xp !== 0 && profile.skyblock_level.level !== 0) {
if (profile.skyblock_level.xp !== 0 && profile.skyblock_level?.level !== 0) {
output += `🌟 Skyblock Level: ${formatNumber(profile.skyblock_level.levelWithProgress)}\n`;
}
Expand Down Expand Up @@ -160,7 +160,7 @@
return metaTitle;
}
function getMetaDescription() {
function getShortDescription() {
let description = "";
// Base
Expand Down Expand Up @@ -189,11 +189,11 @@

<SvelteSeo
title="{profile.displayName} | SkyCrypt"
description={getDescription()}
description={getShortDescription()}
canonical="https://sky.shiiyu.moe/stats/{profile.uuid}/{profile.profile_id}"
openGraph={{
title: getMetaTitle(),
description: getMetaDescription(),
description: getLongDescription(),
type: "profile",
profile: {
username: profile.username
Expand Down
Loading

0 comments on commit 61f47e4

Please sign in to comment.