Skip to content

Commit

Permalink
feat: Improve chunking, vite preproccessing
Browse files Browse the repository at this point in the history
  • Loading branch information
kiosion committed Oct 3, 2023
1 parent 41fe274 commit 4aaeb6d
Show file tree
Hide file tree
Showing 12 changed files with 85 additions and 245 deletions.
1 change: 0 additions & 1 deletion svelte-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
"svelte-eslint-parser": "^0.32.2",
"svelte-highlight": "^7.3.0",
"svelte-maybe-transition": "^0.1.2",
"svelte-preprocess": "^5.0.4",
"tailwindcss": "^3.3.3",
"tippy.js": "^6.3.7",
"typescript": "^5.2.2",
Expand Down
3 changes: 0 additions & 3 deletions svelte-app/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions svelte-app/src/app.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<link rel="favicon" href="%sveltekit.assets%/favicon.ico" />
<link rel="icon" href="%sveltekit.assets%/favicon-16x16.png" sizes="16x16" />
<link rel="icon" href="%sveltekit.assets%/favicon-32x32.png" sizes="32x32" />
<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
<link rel="android-chrome" href="%sveltekit.assets%/android-chrome-192x192.png" sizes="192x192" />
<link rel="android-chrome" href="%sveltekit.assets%/android-chrome-512x512.png" sizes="512x512" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="og:icon" content="%sveltekit.assets%/android-chrome-512x512.png" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
rel="stylesheet"
/>
%sveltekit.head%
</head>
<body>
Expand Down
121 changes: 0 additions & 121 deletions svelte-app/src/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -118,124 +118,3 @@ body {
}
}
}

.loading-spinner {
&-container {
width: 40px;
height: 40px;
position: relative;
animation: chase 2.5s infinite linear both;
}
&-spinner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: chase-dot 2s infinite ease-in-out both;

&:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #f1f5f9;
border-radius: 9999px;
animation: chase-dot-before 2s infinite ease-in-out both;
}

&:nth-child(1) {
&,
&:before {
animation-delay: -1.1s;
}
}
&:nth-child(2) {
&,
&:before {
animation-delay: -1s;
}
}
&:nth-child(3) {
&,
&:before {
animation-delay: -0.9s;
}
}
&:nth-child(4) {
&,
&:before {
animation-delay: -0.8s;
}
}
&:nth-child(5) {
&,
&:before {
animation-delay: -0.7s;
}
}
&:nth-child(6) {
&,
&:before {
animation-delay: -0.6s;
}
}
}
}

.loading-line-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;

> div {
height: 100%;
display: flex;
transform: translateZ(0);

div {
flex: 1;
animation: pulse 700ms infinite alternate cubic-bezier(0.16, -0.05, 0.35, 1.02);

@for $i from 1 through 8 {
&:nth-child(#{$i}) {
animation-delay: -(calc(700ms / 8) * (8 - $i));
}
}
}
}
}

@keyframes pulse {
100% {
background: transparent;
flex: 10;
box-shadow: 0 0 0 rgba(196 181 253 / 0.25);
}
}

@keyframes chase {
100% {
transform: rotate(360deg);
}
}

@keyframes chase-dot {
80%,
100% {
transform: rotate(360deg);
}
}

@keyframes chase-dot-before {
50% {
transform: scale(0.4);
}
100%,
0% {
transform: scale(1);
}
}
22 changes: 0 additions & 22 deletions svelte-app/src/components/loading/animations/line.svelte

This file was deleted.

5 changes: 0 additions & 5 deletions svelte-app/src/components/loading/animations/spinner.svelte

This file was deleted.

8 changes: 0 additions & 8 deletions svelte-app/src/components/loading/bar.svelte

This file was deleted.

3 changes: 2 additions & 1 deletion svelte-app/src/components/loading/spinner.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
class="!opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
style="opacity: 0;"
/>
<path
class="opacity-75"
Expand Down
103 changes: 65 additions & 38 deletions svelte-app/src/lib/icons.ts
Original file line number Diff line number Diff line change
@@ -1,54 +1,81 @@
import Logger from '$lib/logger';

import Alert from 'pixelarticons/svg/alert.svg';
import ArrowBarUp from 'pixelarticons/svg/arrow-bar-up.svg';
import ArrowLeft from 'pixelarticons/svg/arrow-left.svg';
import ArrowRight from 'pixelarticons/svg/arrow-right.svg';
import Cast from 'pixelarticons/svg/cast.svg';
import CloseBox from 'pixelarticons/svg/close-box.svg';
import Code from 'pixelarticons/svg/code.svg';
import Copy from 'pixelarticons/svg/copy.svg';
import Downasaur from 'pixelarticons/svg/downasaur.svg';
import Link from 'pixelarticons/svg/link.svg';
import MailArrowRight from 'pixelarticons/svg/mail-arrow-right.svg';
import Menu from 'pixelarticons/svg/menu.svg';
import MoonStars from 'pixelarticons/svg/moon-stars.svg';
import Open from 'pixelarticons/svg/open.svg';
import Reload from 'pixelarticons/svg/reload.svg';
import Save from 'pixelarticons/svg/save.svg';
import Script from 'pixelarticons/svg/script.svg';
import Sun from 'pixelarticons/svg/sun.svg';

import type { PixelIcon } from '$types';

const iconNames = [
'alert',
'arrow-bar-up',
'arrow-left',
'arrow-right',
'cast',
'close-box',
'code',
'copy',
'downasaur',
'link',
'mail-arrow-right',
'menu',
'moon-stars',
'open',
'reload',
'save',
'script',
'sun'
] as const;

const iconMap = new Map([
['alert', Alert],
['arrow-bar-up', ArrowBarUp],
['arrow-left', ArrowLeft],
['arrow-right', ArrowRight],
['cast', Cast],
['close-box', CloseBox],
['code', Code],
['copy', Copy],
['downasaur', Downasaur],
['link', Link],
['mail-arrow-right', MailArrowRight],
['menu', Menu],
['moon-stars', MoonStars],
['open', Open],
['reload', Reload],
['save', Save],
['script', Script],
['sun', Sun]
]) satisfies Map<(typeof iconNames)[number], PixelIcon>;

const transformName = (name: string) => {
return name
.replace(/([a-z])([A-Z])/g, '$1-$2')
.replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
.replace(/([a-zA-Z])(\d)/g, '$1-$2')
.replace(/([a-z])([A-Z])|([A-Z])([A-Z](?=[a-z]))|([a-zA-Z])(\d)/g, '$1$3$5-$2$4$6')
.toLowerCase();
};

const iconProxy = new Proxy(
new Map<string, PixelIcon>([
['alert', Alert],
['sun', Sun],
['moon-stars', MoonStars]
]),
{
get: (target, prop) => {
switch (prop) {
case 'get': {
return (iconName: string) => {
iconName = transformName(iconName);
if (!target.has(iconName)) {
return import(`../../node_modules/pixelarticons/svg/${iconName}.svg`)
.then((res: { default: PixelIcon } | undefined) => {
if (!res) {
Logger.error(`Icon ${iconName} not found`);
return target.get('alert');
}
target.set(iconName, res.default);
return res.default;
})
.catch(() => target.get('alert'));
}
return target.get(iconName);
};
}
default: {
return undefined;
}
}
}
const getIcon = (iconName: string) => {
const name = transformName(iconName) as (typeof iconNames)[number];
if (!iconMap.has(name)) {
Logger.error(`Icon ${name} not found`);
return iconMap.get('alert');
}
) as unknown as {
get: (iconName: string) => PixelIcon;
return iconMap.get(name);
};

export default iconProxy;
export default { get: getIcon };
14 changes: 1 addition & 13 deletions svelte-app/src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,13 @@
import { onDestroy, onMount, setContext } from 'svelte';
import { circInOut } from 'svelte/easing';
import { fade, fly, slide } from 'svelte/transition';
import { fly, slide } from 'svelte/transition';
import { classList } from 'svelte-body';
import { useMediaQuery } from 'svelte-breakpoints';
import { browser } from '$app/environment';
import { navigating, page } from '$app/stores';
import { isDesktop } from '$helpers/responsive';
import { check as checkTranslations, currentLang, isLocalized, t } from '$i18n';
import { APP_LANGS, BASE_ANIMATION_DURATION, DEFAULT_APP_LANG } from '$lib/consts';
import { ENV, SELF_BASE_URL } from '$lib/env';
Expand All @@ -21,7 +20,6 @@
import ContextMenu from '$components/context-menu.svelte';
import PageTransition from '$components/layouts/page-transition.svelte';
import ScrollContainer from '$components/layouts/scroll-container.svelte';
import BarLoader from '$components/loading/bar.svelte';
import Nav from '$components/nav.svelte';
import type { Navigation } from '@sveltejs/kit';
Expand Down Expand Up @@ -112,16 +110,6 @@
on:contextmenu|preventDefault={(e) => setMenuState(e, pageContainer)}
/>

{#if !$isDesktop && $loading}
<span
class="fixed left-0 top-0 z-[50] h-[3px] w-[100vw]"
in:fade={{ duration: 50 }}
out:fade={{ duration: 50, delay: 500 }}
>
<BarLoader width="100vw" height="3px" />
</span>
{/if}

{#if $menuState.open}
<ContextMenu />
{/if}
Expand Down
Loading

0 comments on commit 4aaeb6d

Please sign in to comment.