feat: link card

Signed-off-by: Innei <[email protected]>

src/app/notes/[id]/page.module.css

@@ -2,7 +2,9 @@
   :global {
     ul .indent,
     .paragraph .indent {
-      border-bottom: 1px solid #00b8bb41;
+      border-bottom: 1px solid;
+
+      @apply border-accent/20 dark:border-accent/40;
     }
 
     blockquote {
@@ -26,21 +28,15 @@
 
       margin-left: calc(-3em + 2px);
       margin-right: calc(-3em + 2px);
-      border: none;
 
       line-height: 1.8;
       padding: 1em 1em 1em 2em;
-      outline: none !important;
-      background: #f5fafd;
-      font-style: normal;
 
-      :global(html[data-theme='dark']) & {
-        background: theme(colors.base-100);
-      }
+      @apply bg-uk-cyan-light/10 font-normal dark:bg-uk-teal-light/10;
+      @apply border-none px-12 !outline-none;
 
       & span::first-letter {
-        font-size: 1em;
-        float: none;
+        @apply !float-none !text-[1em];
       }
 
       @media screen and (max-width: 599px) {

src/app/notes/[id]/page.tsx

@@ -86,7 +86,11 @@ const NotePage = memo(({ note }: { note: NoteModel }) => {
   return (
     <Suspense>
       <article
-        className={clsx('prose', styles['with-indent'], styles['with-serif'])}
+        className={clsx(
+          'prose relative',
+          styles['with-indent'],
+          styles['with-serif'],
+        )}
       >
         <header>
           <NoteTitle />

src/app/notes/layout.tsx

@@ -10,7 +10,7 @@ export default async (props: PropsWithChildren) => {
     <CurrentNoteIdProvider>
       <div
         className={clsx(
-          'relative mx-auto grid min-h-screen max-w-[60rem]',
+          'relative mx-auto grid min-h-[calc(100vh-6.5rem-10rem)] max-w-[60rem]',
           'gap-4 md:grid-cols-1 lg:max-w-[calc(60rem+400px)] lg:grid-cols-[1fr_minmax(auto,60rem)_1fr]',
           'mt-12 md:mt-24',
         )}

src/app/page.tsx

@@ -1,9 +1,13 @@
 'use client'
 
-import { useAggregationQuery } from '~/hooks/data/use-aggregation'
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 
 export default function Home() {
-  const { data } = useAggregationQuery()
+  const router = useRouter()
+  useEffect(() => {
+    router.push('/notes')
+  }, [])
 
   return null
 }

src/components/ui/image/ZoomedImage.tsx

@@ -100,7 +100,7 @@ export const ImageLazy: Component<TImageProps & BaseImageProps> = ({
   }, [zoom, zoomer_, imageLoadStatus])
 
   return (
-    <LazyLoad placeholder={placeholder}>
+    <LazyLoad placeholder={placeholder} offset={30}>
       <figure suppressHydrationWarning>
         <span className="relative block">
           <span>
@@ -167,6 +167,7 @@ const Placeholder: FC<Pick<FixedImageProps, 'src' | 'containerWidth'>> = ({
   const scaledSize = useMemo(() => {
     if (!imageMeta) return
     const { height, width } = imageMeta
+    if (containerWidth <= 0) return
     const { height: scaleHeight, width: scaleWidth } = calculateDimensions({
       width,
       height,
@@ -183,7 +184,7 @@ const Placeholder: FC<Pick<FixedImageProps, 'src' | 'containerWidth'>> = ({
   }, [imageMeta, containerWidth])
 
   if (!scaledSize) return <NoFixedPlaceholder accent={imageMeta?.accent} />
-  console.log(scaledSize, containerWidth)
+
   return (
     <span
       className={styles.base}

src/components/ui/link-card/LinkCard.module.css

@@ -0,0 +1,108 @@
+.card-grid {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  align-items: center;
+  width: 390px;
+  min-height: 84px;
+  border-radius: 8px;
+  max-width: 100%;
+  overflow: hidden;
+  margin: 16px auto;
+  padding: 12px 18px;
+
+  @apply cursor-pointer font-sans;
+
+  background-color: #f3f3f380;
+  backdrop-filter: blur(20px) saturate(180%);
+  transition: background-color 0.2s ease-in-out;
+}
+
+:global([data-theme='dark']) .card-grid {
+  background-color: #28282880;
+}
+
+.contents {
+  flex: 1 1 auto;
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.title {
+  line-height: 20px;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 15px;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.desc {
+  @apply truncate text-neutral-500 dark:text-neutral-400;
+
+  display: block;
+  margin-top: 6px;
+  min-width: 0;
+  font-size: 13px;
+  height: 18px;
+  line-height: 18px;
+}
+
+.image {
+  @apply aspect-square flex-shrink-0 bg-cover bg-center bg-no-repeat;
+  @apply bg-gray-600 dark:bg-gray-50;
+
+  height: 60px;
+  width: 60px;
+  margin-left: 20px;
+  border-radius: 8px;
+}
+
+.skeleton {
+  & .title,
+  & .desc {
+    border-radius: 99px;
+  }
+
+  & .title {
+    width: 50%;
+    height: 20px;
+
+    @apply bg-gray-200 dark:bg-neutral-700;
+  }
+
+  & .desc {
+    width: 100%;
+    margin-top: 12px;
+    height: 14px;
+
+    @apply bg-gray-200 dark:bg-neutral-700;
+  }
+
+  & .image {
+    height: 50px;
+    width: 50px;
+
+    @apply bg-gray-200 dark:bg-neutral-700;
+  }
+
+  &.error {
+    background-color: #e1534a20 !important;
+
+    & .title,
+    & .desc,
+    & .image {
+      background-color: #e1534a79;
+      color: transparent;
+    }
+
+    & .image {
+      background-image: none !important;
+    }
+  }
+}