feat: signature

Author: coderz-w

src/app/(app)/notes/[nid]/page.tsx

@@ -11,6 +11,7 @@ import {
 
 import { LayoutRightSidePortal } from '@/providers/shared/LayoutRightSideProvider';
 import { ArticleRightAside } from '@/components/modules/shared/ArticleRightAside';
+import { Signature } from '@/components/modules/shared/signature';
 
 export default async function Page({ params }: { params: Record<string, any> }) {
   const { nid } = params;
@@ -35,6 +36,9 @@ const PageInner = () => (
     </div>
     <IndentArticleContainer>
       <NoteMarkdown />
+      <div className="signature-animated my-2 flex w-full justify-end" data-hide-print="true">
+        <Signature />
+      </div>
       <LayoutRightSidePortal>
         <ArticleRightAside></ArticleRightAside>
       </LayoutRightSidePortal>

src/components/modules/shared/signature.tsx

@@ -0,0 +1,8 @@
+export const Signature = () => (
+  <svg width="65" height="45" viewBox="0 0 65 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.24688 44.488C4.67887 44.488 3.41487 44.008 2.45487 43.048C1.46287 42.12 0.966875 40.872 0.966875 39.304C0.966875 37.672 1.43087 36.136 2.35887 34.696C3.25487 33.256 4.45487 31.976 5.95888 30.856C7.46288 29.768 9.12688 28.904 10.9509 28.264C12.8069 27.656 14.6469 27.352 16.4709 27.352C16.9829 27.352 17.4469 27.384 17.8629 27.448C18.2789 27.512 18.6789 27.608 19.0629 27.736V27.496C19.0629 26.088 18.5989 24.824 17.6709 23.704C16.8389 22.552 15.7029 21.976 14.2629 21.976C14.1029 21.976 13.7029 22.12 13.0629 22.408C12.4549 22.728 12.0549 22.888 11.8629 22.888C11.3829 22.888 11.1429 22.664 11.1429 22.216C11.1429 22.12 11.3509 21.88 11.7669 21.496C12.1829 21.08 12.8389 20.568 13.7349 19.96C15.4629 18.616 16.3269 17.384 16.3269 16.264C16.3269 14.952 15.6229 14.296 14.2149 14.296C13.4149 14.296 12.5989 14.632 11.7669 15.304C10.9349 15.944 10.1189 16.76 9.31888 17.752C8.51888 18.712 7.73488 19.704 6.96688 20.728C6.87088 20.824 6.75888 20.872 6.63087 20.872C6.50288 20.872 6.43888 20.792 6.43888 20.632C6.43888 20.44 6.55088 20.2 6.77488 19.912C7.70288 18.632 8.56688 17.496 9.36688 16.504C10.1669 15.512 10.9989 14.728 11.8629 14.152C12.7589 13.576 13.7509 13.288 14.8389 13.288C16.0869 13.288 16.9989 13.592 17.5749 14.2C18.1509 14.776 18.4389 15.528 18.4389 16.456C18.4389 17.224 18.2309 17.928 17.8149 18.568C17.4309 19.176 16.9829 19.704 16.4709 20.152C15.9589 20.568 15.5429 20.872 15.2229 21.064C17.0149 21.384 18.3909 22.184 19.3509 23.464C20.3109 24.712 20.7909 26.28 20.7909 28.168C22.3269 28.968 23.0949 29.528 23.0949 29.848C23.0949 29.976 23.0309 30.04 22.9029 30.04C22.4869 29.88 22.1029 29.72 21.7509 29.56C21.3989 29.432 21.0949 29.304 20.8389 29.176C20.8389 30.904 20.4069 32.664 19.5429 34.456C18.7109 36.248 17.5909 37.896 16.1829 39.4C14.7749 40.936 13.2069 42.168 11.4789 43.096C9.75088 44.024 8.00688 44.488 6.24688 44.488ZM6.58288 43.624C7.95888 43.624 9.33488 43.176 10.7109 42.28C12.0869 41.416 13.3669 40.296 14.5509 38.92C15.7349 37.576 16.6949 36.184 17.4309 34.744C18.4549 32.536 19.0149 30.52 19.1109 28.696C18.3109 28.312 17.3189 28.12 16.1349 28.12C14.6949 28.12 13.1909 28.408 11.6229 28.984C10.0549 29.56 8.58288 30.344 7.20688 31.336C5.83088 32.36 4.72687 33.544 3.89487 34.888C3.03087 36.264 2.59887 37.72 2.59887 39.256C2.59887 40.472 2.95087 41.496 3.65487 42.328C4.35887 43.192 5.33488 43.624 6.58288 43.624ZM22.7806 26.008C22.3966 26.008 21.9966 25.848 21.5806 25.528C21.1966 25.24 21.0046 24.904 21.0046 24.52C21.0046 23.496 21.4046 21.672 22.2046 19.048C23.4206 15.048 24.9566 11.32 26.8126 7.864C29.5646 2.616 32.1726 -0.00800133 34.6366 -0.00800133C36.1406 -0.00800133 36.8926 1.24 36.8926 3.736C36.8926 5.56 35.5486 7.848 32.8606 10.6L26.6686 16.36C26.4446 16.584 26.1886 16.856 25.9006 17.176C25.6446 17.464 25.3406 17.816 24.9886 18.232C24.7646 18.584 24.4286 19.336 23.9806 20.488C23.5966 21.64 23.4046 22.44 23.4046 22.888C23.4046 23.24 23.4846 23.544 23.6446 23.8C23.7086 23.736 23.8846 23.592 24.1726 23.368C24.4926 23.112 24.9086 22.76 25.4206 22.312C28.4926 19.72 30.7486 18.424 32.1886 18.424C32.4766 18.424 32.7166 18.664 32.9086 19.144C33.1326 19.624 33.3566 20.328 33.5806 21.256C34.1246 23.272 34.9726 24.28 36.1246 24.28C37.1486 24.28 38.5086 23.48 40.2046 21.88C40.4926 21.56 40.7806 21.24 41.0686 20.92C41.3886 20.568 41.6766 20.232 41.9326 19.912C42.0926 19.656 42.2526 19.528 42.4126 19.528C42.6046 19.528 42.6526 19.656 42.5566 19.912C42.5246 20.04 42.4606 20.2 42.3646 20.392C42.2686 20.552 42.1886 20.664 42.1246 20.728C41.4846 21.592 40.8446 22.376 40.2046 23.08C39.4046 23.848 38.6046 24.456 37.8046 24.904C37.0046 25.352 36.2366 25.576 35.5006 25.576C34.8286 25.576 34.1886 25.384 33.5806 25C33.0046 24.584 32.4926 23.944 32.0446 23.08C31.1486 21.352 30.4766 20.488 30.0286 20.488C29.4206 20.488 28.6526 20.824 27.7246 21.496C26.7966 22.136 25.7406 23.144 24.5566 24.52L23.4046 25.864C23.1806 25.96 22.9726 26.008 22.7806 26.008ZM25.4206 16.264C26.4766 15.528 27.5486 14.664 28.6366 13.672C29.7566 12.648 30.8766 11.528 31.9966 10.312C34.7806 7.176 36.1726 4.744 36.1726 3.016C36.1726 1.992 35.7726 1.48 34.9726 1.48C32.7966 1.48 29.9486 5.544 26.4286 13.672C25.7566 15.144 25.4206 16.008 25.4206 16.264ZM43.6591 27.16C42.0271 27.16 41.2111 26.12 41.2111 24.04C41.2111 22.76 41.5471 21.208 42.2191 19.384C42.5711 18.456 42.9391 17.672 43.3231 17.032C43.7071 16.36 44.1231 15.816 44.5711 15.4C45.0511 14.92 45.5311 14.68 46.0111 14.68C46.3951 14.68 46.5871 14.792 46.5871 15.016C46.5871 15.112 46.5551 15.192 46.4911 15.256C46.0751 15.768 45.6591 16.408 45.2431 17.176C44.8271 17.944 44.3951 18.808 43.9471 19.768C43.0191 21.912 42.5551 23.528 42.5551 24.616C42.5551 25.64 42.9391 26.152 43.7071 26.152C45.3711 26.152 47.3551 23.768 49.6591 19C49.7871 18.68 49.9151 18.36 50.0431 18.04C50.2031 17.688 50.3951 17.304 50.6191 16.888C50.7471 16.664 51.0191 16.552 51.4351 16.552C51.9471 16.552 52.2351 16.776 52.2991 17.224C51.4031 19.208 50.9551 20.872 50.9551 22.216C50.9551 22.792 51.0511 23.256 51.2431 23.608C51.4671 23.96 51.7551 24.136 52.1071 24.136C52.4911 24.136 52.8751 23.896 53.2591 23.416C53.6751 22.936 54.0431 22.344 54.3631 21.64C54.7151 20.936 54.9871 20.248 55.1791 19.576C55.4031 18.904 55.5151 18.392 55.5151 18.04C55.5151 17.848 55.4991 17.56 55.4671 17.176C55.4351 16.76 55.4191 16.472 55.4191 16.312C55.4191 15 55.7231 14.344 56.3311 14.344C56.9071 14.344 57.1951 14.888 57.1951 15.976C57.1951 16.2 57.1311 16.568 57.0031 17.08C56.9071 17.56 56.8591 17.832 56.8591 17.896C56.8911 18.536 57.0031 19.208 57.1951 19.912C57.3871 20.584 57.7071 21.16 58.1551 21.64C58.6351 22.12 59.2751 22.36 60.0751 22.36C60.5231 22.36 61.0671 22.184 61.7071 21.832C62.3471 21.448 63.0031 20.808 63.6751 19.912C63.7391 19.848 63.8351 19.816 63.9631 19.816C64.0591 19.816 64.1071 19.912 64.1071 20.104C64.1071 20.296 64.0271 20.504 63.8671 20.728C63.4511 21.304 62.9071 21.848 62.2351 22.36C61.5631 22.84 60.8431 23.08 60.0751 23.08C58.8271 23.08 57.8991 22.728 57.2911 22.024C56.7151 21.288 56.2671 20.392 55.9471 19.336C55.8191 20.136 55.5631 21 55.1791 21.928C54.8271 22.824 54.3631 23.608 53.7871 24.28C53.2111 24.92 52.5551 25.24 51.8191 25.24C50.8271 25.24 50.1551 24.872 49.8031 24.136C49.4831 23.4 49.3231 22.552 49.3231 21.592C49.0031 22.424 48.5071 23.272 47.8351 24.136C47.1631 25 46.4431 25.72 45.6751 26.296C44.9391 26.872 44.2671 27.16 43.6591 27.16Z"
+      fill="black"
+    />
+  </svg>
+);

src/components/modules/toc/TocTree.tsx

@@ -151,6 +151,8 @@ const MemoedItem = memo<{
   const { heading, isActive, onClick, rootDepth } = props;
   const itemRef = useRef<HTMLLIElement>(null);
 
+  console.log(heading);
+
   return (
     <m.li
       initial={{ x: 60, opacity: 0 }}

src/styles/layer.css

@@ -101,29 +101,28 @@
     stroke-dasharray: 2400;
     stroke-dashoffset: 2400;
     fill: transparent;
-    animation: drawSignature 8s linear infinite both;
-    stroke-width: 2px;
+    animation: drawSignature 12s linear infinite both;
+    stroke-width: 1px;
     stroke: theme('colors.base-content');
   }
-
   @keyframes drawSignature {
     0% {
       stroke-dashoffset: 2400;
     }
-    15% {
-      fill: transparent;
-    }
-    35%,
-    75% {
+    50% {
       stroke-dashoffset: 0;
+    }
+    60% {
       fill: theme('colors.base-content');
     }
-    90%,
-    100% {
+    90% {
       stroke-dashoffset: 2400;
+    }
+    100% {
       fill: transparent;
     }
   }
+  
 
   .animation-wave {
     animation: wave 2s infinite;