Merge branch 'moirelog:main' into main

Author: anig1scur

src/lib/memo.svelte.ts

@@ -40,6 +40,7 @@ export function createMemoList(getData: () => any, config: any) {
 
     function selectTag(tag: string | null) {
         selectedTag = selectedTag === tag ? null : tag;
+      visibleCount = config.pageSize || 20;
     }
 
     return {

src/themes/academic/index.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
+  import { slide } from 'svelte/transition';
   import {format} from 'date-fns';
   import type {PageData} from '../../routes/$types';
   import {createMemoList} from '$lib/memo.svelte';
   import Background from './Background.svelte';
 
   let {data, config}: {data: PageData; config: any} = $props();
   const memoList = createMemoList(() => data, config);
+
+  $effect(() => {
+    if (memoList.selectedTag) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  });
 </script>
 
 <div class="max-w-4xl mx-auto min-h-screen text-[var(--text-color)] p-5 md:p-10 {config.theme} relative isolate">
@@ -65,8 +72,8 @@
     </aside>
 
     <main class="md:col-span-9 space-y-16 max-w-2xl">
-      {#each Object.entries(memoList.groupedMemos) as [dateKey, memos]}
-        <section>
+      {#each Object.entries(memoList.groupedMemos) as [dateKey, memos] (dateKey)}
+        <section in:slide>
           <div class="flex items-baseline gap-4 mb-10 border-b border-[var(--text-color)] pb-3">
             <h2 class="text-3xl font-black italic text-[var(--text-color)] tracking-tight">
               {format(new Date(dateKey + 'T00:00:00'), 'MMMM dd, yyyy')}
@@ -77,8 +84,9 @@
           </div>
 
           <div class="space-y-14">
-            {#each memos as memo}
+            {#each memos as memo (memo.slug)}
               <article
+                in:slide
                 class="group relative"
                 id={memo.slug}
               >
@@ -102,7 +110,7 @@
                         [&_a]:text-[var(--accent-color)] [&_a]:no-underline [&_a]:border-b [&_a]:border-[var(--accent-color)]/30 [&_a]:underline-offset-4 [&_a]:hover:border-[var(--accent-color)] [&_a]:hover:bg-[var(--accent-color)]/5 [&_a]:transition-all
                         [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5
                         [&_p]:my-4
-                        [&_table]:border-collapse [&_table]:border-y-1 [&_table]:border-black [&_table]:my-6 [&_table]:w-full [&_table]:text-sm
+                        [&_table]:border-collapse [&_table]:border-y-1 [&_table]:border-black [&_table]:my-6 [&_table]:w-full [&_table]:text-xs
                         [&_th]:border-b-1 [&_th]:border-black [&_th]:border-dashed [&_th]:font-bold [&_th]:p-3 [&_th]:text-center [&_th]:uppercase
                         [&_td]:border-b [&_td]:border-[var(--text-color)]/10 [&_td]:border-dashed [&_td]:p-3 [&_td]:text-center
                         [&_blockquote]:border-l-4 [&_blockquote]:italic [&_blockquote]:border-[var(--accent-color)] [&_blockquote]:bg-[var(--accent-color)]/5 [&_blockquote_p]:py-3 [&_blockquote]:px-4 [&_blockquote]:my-4 [&_blockquote]:not-italic [&_blockquote]:text-[0.95rem] [&_blockquote]:text-[var(--text-color)]/80 [&_blockquote]:rounded-r-sm
@@ -127,7 +135,7 @@
         </section>
       {/each}
 
-      {#if memoList.visibleCount < data.memos.length}
+      {#if memoList.visibleCount < memoList.filteredMemos.length}
         <div class="pt-12 text-center border-t border-[#333]/10">
           <button
             class="text-lg italic text-[#666] hover:text-[#d33682] transition-colors"

src/themes/bento/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { slide } from 'svelte/transition';
   import {format} from 'date-fns';
   import {config} from '../../../moire.config';
   import {createMemoList} from '$lib/memo.svelte';
@@ -8,6 +9,12 @@
   let {data}: {data: PageData} = $props();
   const memoList = createMemoList(() => data, config);
 
+  $effect(() => {
+    if (memoList.selectedTag) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  });
+
   function handleMouseMove(e: MouseEvent) {
     const target = e.currentTarget as HTMLElement;
     const rect = target.getBoundingClientRect();
@@ -45,9 +52,10 @@
   </header>
 
   <div class="mx-auto grid grid-cols-1 gap-6 px-4 2xl:grid-cols-2" data-selected-tag={memoList.selectedTag}>
-    {#each memoList.visibleMemos as memo, i}
+    {#each memoList.visibleMemos as memo, i (memo.slug)}
       <div
         class="group relative flex h-full flex-col justify-between overflow-hidden rounded-2xl md:rounded-[2rem] border border-white/50 bg-white/30 p-3 md:p-7 shadow-sm backdrop-blur-3xl backdrop-saturate-150 transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.1)] animate-in fade-in slide-in-from-bottom-8 duration-700"
+        in:slide
         onmousemove={handleMouseMove}
         id={memo.slug}
         style="--x: 50%; --y: 50%; animation-delay: {(i % 15) * 100}ms; animation-fill-mode: both;"
@@ -112,7 +120,7 @@
     </div>
   {/if}
   <footer class="mt-20 text-center text-xs mx-5 tracking-wide text-slate-500 opacity-80">
-    <p>© {new Date().getFullYear()} {config.author} , synced from Apple Notes and powered by <a href="https://moire.blog/" target="_blank" class="hover:text-slate-600 transition-colors">Moire</a></p>
+    <p>© {new Date().getFullYear()} {config.author}, synced from Apple Notes and powered by <a href="https://moire.blog/" target="_blank" class="hover:text-slate-600 transition-colors">Moire</a></p>
   </footer>
 </div>
 

src/themes/classic/index.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
+  import { slide } from 'svelte/transition';
   import { format } from 'date-fns';
   import type { PageData } from '../../routes/$types';
   import { createMemoList } from '$lib/memo.svelte';
 
   let { data, config }: { data: PageData; config: any } = $props();
   const memoList = createMemoList(() => data, config);
+
+  $effect(() => {
+    if (memoList.selectedTag) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  });
 </script>
 
 <div class="min-h-screen bg-white text-[0.95rem] {config.theme}">
@@ -31,8 +38,8 @@
     </header>
 
     <div class="divide-y divide-gray-100">
-      {#each memoList.visibleMemos as memo}
-        <article class="py-6" id={memo.slug}>
+      {#each memoList.visibleMemos as memo (memo.slug)}
+        <article class="py-6" id={memo.slug} in:slide>
           <div class="text-[0.75rem] font-400 text-gray-500 mb-2">{format(memo.date, 'MMMM d, yyyy')}</div>
           <div 
             class=" leading-[1.8] text-gray-800
@@ -77,7 +84,7 @@
       {/each}
     </div>
 
-    {#if memoList.visibleCount < data.memos.length}
+    {#if memoList.visibleCount < memoList.filteredMemos.length}
       <div class="py-6 text-center">
         <button 
           class="text-[0.8rem] text-gray-400"
@@ -90,6 +97,6 @@
   </div>
 
     <footer class="mt-16 text-center mx-9 text-[0.8rem] text-gray-400 pb-8">
-      <p>© {new Date().getFullYear()} {config.author} , synced from Apple Notes and powered by <a href="https://moire.blog/" target="_blank" class="hover:text-gray-600 transition-colors">Moire</a></p>
+      <p>© {new Date().getFullYear()} {config.author}, synced from Apple Notes and powered by <a href="https://moire.blog/" target="_blank" class="hover:text-gray-600 transition-colors">Moire</a></p>
     </footer>
 </div>

src/themes/cyberpunk/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { slide } from 'svelte/transition';
   import {config} from '../../../moire.config';
   import {createMemoList} from '$lib/memo.svelte';
   import type {PageData} from '../../routes/$types';
@@ -9,6 +10,12 @@
   let {data}: {data: PageData} = $props();
   const memoList = createMemoList(() => data, config);
 
+  $effect(() => {
+    if (memoList.selectedTag) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  });
+
   let time = $state(new Date());
   let fps = $state(60);
   let scrollY = $state(0);
@@ -104,8 +111,9 @@
     class="relative z-10 pt-32 pb-32 px-4 max-w-2xl mx-auto space-y-12"
     data-selected-tag={memoList.selectedTag}
   >
-    {#each memoList.visibleMemos as memo}
+    {#each memoList.visibleMemos as memo (memo.slug)}
       <article
+        in:slide
         class="group relative pl-6 border-l-2 border-[var(--text-color)]/20 hover:border-[var(--accent-color)] transition-colors duration-300"
         id={memo.slug}
       >

src/themes/global.css

@@ -39,7 +39,7 @@ body.pixel {
   --card-bg: #fffae8;
   --border-color: #a98467;
   --font-family: 'zpix', monospace;
-  -webkit-font-smoothing: none;
+  -webkit-font-smoothing: antialiased;
 }
 
 body.classic {
@@ -82,12 +82,18 @@ ul {
   margin-bottom: 0.5rem;
 }
 
+ul ul, ol ul {
+  padding-left: 1.25rem;
+}
 ol {
   list-style-type: decimal;
   padding-left: 1.25rem;
   margin-bottom: 0.5rem;
 }
 
+ol ol, ul ol {
+  padding-left: 1.5rem;
+}
 :is(ul, ol) :is(ul, ol) {
   margin-bottom: 0;
 }

src/themes/pixel/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { slide } from 'svelte/transition';
   import {config} from '../../../moire.config';
   import {createMemoList} from '$lib/memo.svelte';
   import type {PageData} from '../../routes/$types';
@@ -10,6 +11,12 @@
   let {data}: {data: PageData} = $props();
   const memoList = createMemoList(() => data, config);
 
+  $effect(() => {
+    if (memoList.selectedTag) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  });
+
   let isMoving = $state(false);
   let scrollTimeout: ReturnType<typeof setTimeout>;
 
@@ -56,8 +63,9 @@
   </header>
 
   <div class="mx-auto grid grid-cols-1 gap-8 2xl:grid-cols-2" data-selected-tag={memoList.selectedTag}>
-    {#each memoList.visibleMemos as memo}
+    {#each memoList.visibleMemos as memo (memo.slug)}
       <article
+        in:slide
         class="window-frame relative flex flex-col bg-[var(--card-bg)] border-2 border-[var(--border-color)] shadow-[4px_4px_0_0_var(--accent-color)]/50 hover:translate-y-[-2px] hover:shadow-[6px_6px_0_0_var(--accent-color)]/50 transition-all duration-200 rounded-xl overflow-hidden"
         id={memo.slug}
       >

src/themes/receipt/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { slide } from 'svelte/transition';
   import {format} from 'date-fns';
   import avatar from '$lib/assets/avatar.png';
   import type {PageData} from '../../routes/$types';
@@ -7,6 +8,12 @@
 
   let {data, config}: {data: PageData; config: any} = $props();
   const memoList = createMemoList(() => data, config);
+
+  $effect(() => {
+    if (memoList.selectedTag) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  });
 </script>
 
 <div class="flex justify-center sm:m-10 min-h-screen {config.theme} relative isolate">
@@ -46,14 +53,14 @@
       }}
       role="presentation"
     >
-      {#each Object.entries(memoList.groupedMemos) as [dateKey, memos]}
-        <div class="mb-[30px]">
+      {#each Object.entries(memoList.groupedMemos) as [dateKey, memos] (dateKey)}
+        <div class="mb-[30px]" in:slide>
           <div class="text-center mb-4 font-bold text-sm">
             <span>*** {format(new Date(dateKey + 'T00:00:00'), 'MMM dd, yyyy').toUpperCase()} ***</span>
           </div>
 
-          {#each memos as memo}
-            <div class="flex gap-2 mb-4 items-start -mx-1" id={memo.slug}>
+          {#each memos as memo (memo.slug)}
+            <div class="flex gap-2 mb-4 items-start -mx-1" id={memo.slug} in:slide>
               <div class="flex flex-col items-center gap-1 w-10 shrink-0 mt-4">
                 <div class="w-8 h-8 md:w-9 md:h-9 rounded-full overflow-hidden">
                   <img
@@ -69,7 +76,7 @@
                 class="flex-1 text-[0.95rem] 
                   [&_h1]:text-[1.2rem] [&_h1]:uppercase [&_h1]:font-black [&_h1]:mb-2 [&_h1]:mt-4
                   [&_h2]:text-[1.1rem] [&_h2]:uppercase [&_h2]:font-bold [&_h2]:mb-2 [&_h2]:mt-4
-                  [&_h3]:text-[1.05rem] [&_h3]:font-bold [&_h3]:mb-1.5 [&_h3]:mt-3
+                  [&_h3]:text-[1.0rem] [&_h3]:font-bold [&_h3]:mb-1.5 [&_h3]:mt-3
                   [&_h4]:text-[0.9rem] [&_h4]:font-bold [&_h4]:mb-1 [&_h4]:mt-2
                   [&_h5]:text-[0.8rem] [&_h5]:font-bold [&_h5]:italic [&_h5]:mb-1
                   [&_p]:my-4 [&_img]:grayscale [&_img]:contrast-120 [&_img]:max-w-full [&_img]:my-5 [&_img]:border-2 [&_img]:border-black
@@ -95,7 +102,7 @@
           <p class="text-center">NO DATA.</p>
       {/if}
 
-      {#if memoList.visibleCount < data.memos.length}
+      {#if memoList.visibleCount < memoList.filteredMemos.length}
         <div class="text-center my-5">
           <button
             class="bg-transparent border-2 dashed border-black px-4 py-1 text-xs cursor-pointer uppercase font-bold hover:bg-black hover:text-white transition-colors"