Merge branch 'master' into darkyzhou-blog

darkyzhou · Feb 25, 2024 · c0a23d2 · c0a23d2
2 parents a667460 + b46bcb4
commit c0a23d2
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 67 deletions.
diff --git a/src/app.html b/src/app.html
@@ -22,6 +22,6 @@
   </head>
 
   <body data-overlayscrollbars-initialize>
-    %sveltekit.body%
+    <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/components/TabContainer.svelte b/src/components/TabContainer.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { getCssSegment } from '../routes/_utils';
   import { OverlayScrollbarsComponent } from 'overlayscrollbars-svelte';
   import { OVERLAY_SCROLLBAR_SETTINGS_OTHER } from '../utils/constants';
 
@@ -10,77 +9,45 @@
   export { extraClasses as class };
   export let tabContents = [];
 
-  $: toggleCss = tabContents
-    .map(
-      (_, i) => `
-  #toggle${i + 1}:checked ~ .tabContent div:nth-child(${i + 1}) {
-    display: block;
-  }
-
-  #toggle${i + 1}:checked ~ .tabHeader li:nth-child(${i + 1}) .icon {
-    color: var(--bg-carbongray-800);
-    background-color: var(--bg-carbongray-200);
-  }
-  `
-    )
-    .join('');
-
-  $: toggleCssWrapped = getCssSegment(toggleCss);
+  let activeTabIndex = 0;
 </script>
 
-<svelte:head>
-  {@html toggleCssWrapped}
-</svelte:head>
-
 <div class="flex {extraClasses}">
-  {#each tabContents as _, i}
-    <input id="toggle{i + 1}" type="radio" name="tab" class="hidden" checked={!i} />
-  {/each}
-  <div class="tabContent flex-grow p-2 h-full text-carbongray-100 leading-relaxed">
-    {#each tabContents as tab}
-      <div class="h-full hidden">
-        <OverlayScrollbarsComponent class="h-full" options={OVERLAY_SCROLLBAR_SETTINGS_OTHER}>
-          <div class="h-full prose markdown">
-            {@html tab.contentHtml}
-          </div>
-        </OverlayScrollbarsComponent>
-      </div>
+  <div
+    id="profileTabContainer"
+    class="tabContent flex-grow p-2 h-full text-carbongray-100 leading-relaxed"
+  >
+    {#each tabContents as tab, i}
+      {#if activeTabIndex === i}
+        <div class="h-full">
+          <OverlayScrollbarsComponent class="h-full" options={OVERLAY_SCROLLBAR_SETTINGS_OTHER}>
+            <div class="prose markdown">
+              {@html tab.contentHtml}
+            </div>
+          </OverlayScrollbarsComponent>
+        </div>
+      {/if}
     {/each}
   </div>
   <ul class="tabHeader flex-none list-none flex flex-col">
-    {#each tabContents as tab, i}
-      <li>
-        <label
-          class="icon cursor-pointer outline-none border-transparent hover:border-carbongray-300 focus:border-carbongray-300 border-2"
-          for="toggle{i + 1}"
-          tabindex="0"
-        >
-          <span class="w-8 h-8">
-            <svelte:component this={ICONS[i]} />
-          </span>
-        </label>
+    {#each tabContents as _, i}
+      <li
+        class="flex-1 flex items-center px-1 py-2 h-full text-carbongray-200 cursor-pointer outline-none border-transparent hover:border-carbongray-300 focus:border-carbongray-300 border-2 {activeTabIndex ===
+          i && 'text-carbongray-800 bg-carbongray-200'}"
+        tabindex="0"
+        on:click={() => {
+          activeTabIndex = i;
+        }}
+      >
+        <span class="w-8 h-8">
+          <svelte:component this={ICONS[i]} />
+        </span>
       </li>
     {/each}
   </ul>
 </div>
 
 <style>
-  .tabHeader > * {
-    flex: 1 1 0%;
-  }
-
-  .tabHeader .icon {
-    color: var(--bg-carbongray-200);
-    display: flex;
-    align-items: center;
-    padding: 4px 6px;
-    height: 100%;
-  }
-
-  .tabContent > * {
-    display: none;
-  }
-
   @media (max-width: 767px) {
     .tabContent .markdown {
       font-size: 0.875rem !important;

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -60,6 +60,7 @@
     }
 
     for (const element of document.querySelectorAll('.code-wrapper pre')) {
+      console.log('>>> init', element);
       scrollbarHandles.push(OverlayScrollbars(element, OVERLAY_SCROLLBAR_SETTINGS_OTHER));
     }
   });

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -64,7 +64,7 @@
         />
       </picture>
       <div class="info py-2 md:py-4 px-3 md:px-6 flex flex-col gap-2 justify-between items-center">
-        <h1 class="text-carbongray-100 text-xl md:text-2xl">
+        <h1 class="text-carbongray-100 text-xl md:text-2xl tracking-wide">
           {basicConfiguration.authorName}
         </h1>
         <p class="text-carbongray-200 flex-grow text-sm md:text-xl mb-4 md:mb-0">

diff --git a/src/routes/_utils.js b/src/routes/_utils.js
@@ -17,10 +17,6 @@ export function concatPageUrl(pathName) {
   return url.href;
 }
 
-export function getCssSegment(styles) {
-  return `<style type='text/css'>${styles}</style>`;
-}
-
 // workaround for a very strange bug that for prerendered output,
 // the `page` from `$app/stores` will have a url whose `pathname`
 // has a prefix of `//prerender`

diff --git a/src/routes/categories/+page.svelte b/src/routes/categories/+page.svelte
@@ -18,7 +18,7 @@
     目前有 {sorted.length} 个分类：
   {/if}
 </h1>
-<CategoriesContainer items={categories} isCategories={true} style="max-width: 1000px;" />
+<CategoriesContainer items={categories} style="max-width: 1000px;" />
 
 <!-- workaround a bug that sveltekit static adapter cannot detect data-sveltekit-preload-data inside deeply nested <CategoriesContainer> structures here -->
 <div class="hidden">
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,6 +60,7 @@ @@
         }
         for (const element of document.querySelectorAll('.code-wrapper pre')) {
+          console.log('>>> init', element);
           scrollbarHandles.push(OverlayScrollbars(element, OVERLAY_SCROLLBAR_SETTINGS_OTHER));
         }
       });
@@ Expand Down @@