fix some bugs and Improve the semantics of the controls

SeaniaTwix · Jan 6, 2023 · 4c40b68 · 4c40b68
1 parent 5a6648f
commit 4c40b68
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -115,6 +115,7 @@
 		"tlds": "^1.236.0",
 		"unified": "^10.1.2",
 		"uuid": "^9.0.0",
+		"vite-plugin-compression": "^0.5.1",
 		"wysiwyg-editor-node-sdk": "^4.0.16",
 		"youtube-player": "^5.5.2"
 	}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -9,14 +9,15 @@
   <link rel="icon" href="/favicon.png">
   <meta name="msapplication-TileColor" content="#38BDF9">
   <meta name="msapplication-TileImage" content="/tileicon.png">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"/>
   <meta name="theme-color" content="<>META-THEME-COLOR<>"/>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-  <script src="/polyfill-event-path.js"></script>
   %sveltekit.head%
 </head>
 <body class="<>BODY-CLASS<>">
-%sveltekit.body%
+<div>
+  %sveltekit.body%
+</div>
 </body>
 </html>
diff --git a/src/lib/components/Article.svelte b/src/lib/components/Article.svelte
@@ -224,23 +224,23 @@
           {#if ($client?.user ?? data?.user)}
             <div class="w-max py-2 md:py-0.5">
               {#if ($client?.user ?? data?.user)?.uid !== article.author._key}
-                    <span class="mt-0.5 cursor-pointer hover:text-red-600">
-                      <Report size="1rem"/>
-                    </span>
+                <button class="mt-0.5 cursor-pointer hover:text-red-600">
+                  <Report size="1rem"/>
+                </button>
               {/if}
               {#if article.author._key === ($client?.user ?? data?.user)?.uid}
-                <a href="/community/{article.board}/{article._key}/edit"
+                <a role="button" aria-label="이 게시글 수정" href="/community/{article.board}/{article._key}/edit"
                    class="inline-block mt-0.5 cursor-pointer hover:text-sky-400">
                   <Edit size="1rem"/>
                 </a>
               {/if}
               {#if article.author._key === ($client?.user ?? data?.user)?.uid || ($client?.user ?? data?.user)?.rank >= EUserRanks.Manager}
-                <span on:click={deleteArticle} class="mt-0.5 cursor-pointer hover:text-red-400">
+                <button on:click={deleteArticle} class="mt-0.5 cursor-pointer hover:text-red-400">
                   <Delete size="1rem"/>
-                </span>
+                </button>
               {/if}
               {#if ($client?.user ?? data?.user)?.rank >= EUserRanks.Manager}
-                <a href="/community/{article.board}/{article._key}/manage" class="mt-0.5 cursor-pointer hover:text-red-400">
+                <a role="button" aria-label="관리" href="/community/{article.board}/{article._key}/manage" class="mt-0.5 cursor-pointer hover:text-red-400">
                   <Admin size="1rem"/>
                 </a>
               {/if}
@@ -261,7 +261,7 @@
       </div>
     </div>
     <div class="flex space-x-3 items-center">
-      <div class="w-12 min-h-[3rem] inline-block">
+      <div class="w-12 h-12 inline-block">
         <CircleAvatar fallback="{toImageSource(article.author._key)}"/>
       </div>
       <span class="inline-block leading-none hover:text-sky-400">{article.author?.id}</span>

diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
@@ -166,25 +166,26 @@
       {#if showSearch}
 
         <li>
-          <span on:click={enableSearchMode} aria-label="검색 모드 활성화"
+          <button on:click={enableSearchMode} aria-label="검색 모드 활성화"
                 class="px-4 py-2 inline-block hover:bg-zinc-100 rounded-md cursor-pointer
                        dark:hover:bg-gray-500">
             <Search size="1.25rem" />
-          </span>
+          </button>
         </li>
       {/if}
 
       <li>
-      <span on:click={switchTheme} aria-label="라이트 - 다크 모드 스위치"
-            class="px-4 py-2 inline-block hover:bg-zinc-100 rounded-md cursor-pointer
-                   dark:hover:bg-gray-500 leading-zero">
-        <Switch size="20px" />
-      </span>
+        <button on:click={switchTheme} aria-label="라이트 - 다크 모드 스위치"
+              class="px-4 py-2 inline-block hover:bg-zinc-100 rounded-md cursor-pointer
+                     dark:hover:bg-gray-500 leading-zero">
+          <Switch size="20px" />
+        </button>
       </li>
 
       {#if $client?.user && $client.user.rank > EUserRanks.User}
         <li>
-          <a class="px-4 py-2 inline-block hover:bg-zinc-100 rounded-md transition-colors
+          <a role="button" aria-label="관리 페이지로"
+             class="px-4 py-2 inline-block hover:bg-zinc-100 rounded-md transition-colors
                   dark:hover:bg-gray-500"
              href="/community/admin">
             <Console size="20px"/>
@@ -198,7 +199,7 @@
         </li>
       {:else}
         <li>
-          <a data-sveltekit-prefetch aria-label="로그인 버튼" on:click={gotoLogin}
+          <a data-sveltekit-prefetch role="button" aria-label="로그인 버튼" on:click={gotoLogin}
              class="px-4 py-2 inline-block hover:bg-zinc-100 rounded-md transition-colors
                   dark:hover:bg-gray-500"
              href="/login">

diff --git a/src/lib/notifications/client.ts b/src/lib/notifications/client.ts
@@ -13,7 +13,7 @@ export class NotificationsClient {
   static init(uid: string, preloaded: IPublicNotify[] = []) {
     if (!this.isUnloadEventRegistered) {
       this.isUnloadEventRegistered = true;
-      window.addEventListener('unload', () => this.pusher.close());
+      window.addEventListener('pagehide', () => this.pusher.close());
     }
     if (this.pusher) {
       this.pusher.close();

diff --git a/src/lib/pusher/client.ts b/src/lib/pusher/client.ts
@@ -28,7 +28,7 @@ export class Pusher {
   constructor(context: string) {
     this.target = context;
     if (window) {
-      window.addEventListener('unload', this.close);
+      window.addEventListener('pagehide', this.close);
       window.addEventListener('online', this.online, true);
       window.addEventListener('offline', this.offline, true);
       // @ts-ignore

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 
 <svelte:head>
   <title>루헨 - 홈</title>
+  <meta name="description" content="커뮤니티 루헨">
 </svelte:head>
 
 <div class="w-full text-center mt-4">

diff --git a/src/routes/community/[id=integer]/+page.svelte b/src/routes/community/[id=integer]/+page.svelte
@@ -280,7 +280,7 @@
             {/if}
           </button>
         </span>
-        <a class="underline decoration-sky-400" href="/community/{$page.params.id}/best">전체 보기</a>
+        <a class="underline decoration-sky-400" href="/community/{$page.params.id}/best">모두 보기</a>
       </div>
 
       <div id="__top-list" on:scroll={checkPage}

diff --git a/src/routes/community/[id=integer]/[article=integer]/+page.svelte b/src/routes/community/[id=integer]/[article=integer]/+page.svelte
@@ -440,7 +440,7 @@
 
     pusher = new Pusher(`${$page.params.article}@${$page.params.id}`);
 
-    window.addEventListener('unload', clearSubscribes);
+    window.addEventListener('pagehide', clearSubscribes);
 
     try {
       // ky.put(`/community/${$page.params.id}/${$page.params.article}/api/viewcount`).then();

diff --git a/src/routes/user/$types.d.ts b/src/routes/user/$types.d.ts
@@ -0,0 +1,5 @@
+import type {PageData as RootPageData} from '$lib/types/$types';
+
+export interface PageData extends RootPageData {
+  isAdult: boolean;
+}
diff --git a/src/routes/user/+layout.server.ts b/src/routes/user/+layout.server.ts
@@ -0,0 +1,11 @@
+import type {ServerLoadEvent} from '@sveltejs/kit';
+import {redirect} from '$lib/kit';
+import HttpStatus from 'http-status-codes';
+
+export async function load({locals}: ServerLoadEvent): Promise<any> {
+  // console.log('user/+layout.server.ts:', !locals.user);
+  if (!locals.user) {
+    // @ts-ignore
+    throw redirect(HttpStatus.MOVED_TEMPORARILY, '/login');
+  }
+}
diff --git a/src/routes/user/+page.server.ts b/src/routes/user/+page.server.ts
@@ -1,10 +1,15 @@
 import type {ServerLoadEvent} from '@sveltejs/kit';
 import {redirect} from '$lib/kit';
 import HttpStatus from 'http-status-codes';
+import {User} from '$lib/auth/user/server';
 
 export async function load({locals}: ServerLoadEvent): Promise<any> {
-  console.log('user/+page.server.ts:', !locals.user);
-  if (!locals.user) {
+  if (!locals || !locals.user) {
+    // @ts-ignore
     throw redirect(HttpStatus.MOVED_TEMPORARILY, '/login');
   }
+  const id = locals.user.sub.split('/')[1]!;
+  const user = new User(id);
+  const isAdult = await user.isAdult();
+  return {isAdult};
 }
diff --git a/src/routes/user/+page.svelte b/src/routes/user/+page.svelte
@@ -31,7 +31,7 @@
      href="/user/profile/edit">
     내 프로필 수정
   </a>
-  {#if !$client?.user.adult || !data?.user?.adult}
+  {#if !data.isAdult}
     <a data-sveltekit-prefetch
        class="w-full block bg-zinc-100 rounded-md hover:bg-zinc-200 dark:bg-gray-500 transition-colors py-2 text-center shadow-md flex flex-row justify-center space-x-2 items-center hover:ring-2 ring-red-400 ring-offset-2 dark:ring-offset-gray-600"
        href="/user/settings/adult">

diff --git a/static/css/BinggraeMelona.css b/static/css/BinggraeMelona.css
@@ -3,10 +3,12 @@
   src: url('https://s3.ru.hn/fonts/BinggraeMelona.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'BinggraeMelona'; /* 'Tanugo'; */
-  src: url("https://s3.ru.hn/fonts/umeboshi_.woff2") format('woff2');
+  src: url('https://s3.ru.hn/fonts/umeboshi_.woff2') format('woff2');
   unicode-range: U+4e00-9fbf, U+3040-309f, U+30A0-30FF;
+  font-display: swap;
 }
diff --git a/static/robots.txt b/static/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/svelte.config.js b/svelte.config.js
@@ -13,6 +13,7 @@ const config = {
   kit: {
     adapter: adapter({
       out: './build',
+      precompress: true,
     }),
     alias: {
       '@root': path.resolve('./src'),

diff --git a/vite.config.js b/vite.config.js
@@ -1,9 +1,13 @@
 // vite.config.js
 import {sveltekit} from '@sveltejs/kit/vite';
+import compression from 'vite-plugin-compression';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-  plugins: [sveltekit()],
+  plugins: [
+    sveltekit(),
+    compression({algorithm: 'brotliCompress'})
+  ],
 };
 
 export default config;