feat: logo animation

package.json

@@ -60,6 +60,7 @@
     "ioredis": "5.3.1",
     "js-yaml": "4.1.0",
     "jsonfeed-to-rss": "^3.0.6",
+    "lottie-react": "^2.4.0",
     "mdast-util-to-string": "3.1.1",
     "mdast-util-toc": "6.1.1",
     "nanoid": "4.0.1",

pnpm-lock.yaml

@@ -78,6 +78,7 @@ specifiers:
   js-yaml: 4.1.0
   jsonfeed-to-rss: ^3.0.6
   lint-staged: 13.1.2
+  lottie-react: ^2.4.0
   mdast-util-to-string: 3.1.1
   mdast-util-toc: 6.1.1
   nanoid: 4.0.1
@@ -176,6 +177,7 @@ dependencies:
   ioredis: 5.3.1
   js-yaml: 4.1.0
   jsonfeed-to-rss: 3.0.6
+  lottie-react: 2.4.0_biqbaboplfbrettd7655fr4n2y
   mdast-util-to-string: 3.1.1
   mdast-util-toc: 6.1.1
   nanoid: 4.0.1
@@ -8978,6 +8980,21 @@ packages:
     dependencies:
       js-tokens: 4.0.0
 
+  /lottie-react/2.4.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      lottie-web: 5.10.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /lottie-web/5.10.2:
+    resolution: {integrity: sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A==}
+    dev: false
+
   /loupe/2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:

src/components/common/Logo.tsx

@@ -0,0 +1,46 @@
+import React, { useRef } from "react"
+import Lottie, { type LottieRefCurrentProps } from "lottie-react"
+import LogoLottieJSON from "../../../public/assets/logo.json"
+import { Image } from "~/components/ui/Image"
+
+export const Logo: React.FC<{
+  type: "svg" | "png" | "lottie"
+  width?: number
+  height?: number
+}> = ({ type, width, height }) => {
+  const ref = useRef<LottieRefCurrentProps>(null)
+
+  switch (type) {
+    case "svg":
+      return (
+        <Image
+          alt="logo"
+          src="/assets/logo.svg"
+          width={width || 100}
+          height={height || 100}
+        />
+      )
+    case "png":
+      return (
+        <Image
+          alt="logo"
+          src="/assets/logo.png"
+          width={width || 100}
+          height={height || 100}
+        />
+      )
+    case "lottie":
+      return (
+        <Lottie
+          animationData={LogoLottieJSON}
+          loop={false}
+          lottieRef={ref}
+          onMouseEnter={() => ref.current?.goToAndPlay(0)}
+          style={{
+            width: width || 100,
+            height: height || 100,
+          }}
+        />
+      )
+  }
+}

src/components/main/MainLayout.tsx

@@ -9,9 +9,9 @@ import { SEOHead } from "../common/SEOHead"
 import { UniLink } from "../ui/UniLink"
 import { ConnectButton } from "../common/ConnectButton"
 import { getSiteLink } from "~/lib/helpers"
-import Image from "next/image"
 import { Link } from "react-scroll"
 import { useTranslation } from "next-i18next"
+import { Logo } from "~/components/common/Logo"
 
 export function MainLayout({
   children,
@@ -35,12 +35,7 @@ export function MainLayout({
         <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
           <div className="text-2xl font-extrabold flex items-center">
             <div className="inline-block w-9 h-9 mr-3">
-              <Image
-                alt={APP_NAME}
-                src="/assets/logo.svg"
-                width={100}
-                height={100}
-              />
+              <Logo type="lottie" width={36} height={36} />
             </div>
             xLog
           </div>

src/components/site/SiteFooter.tsx

@@ -5,23 +5,26 @@ import Script from "next/script"
 import Image from "next/image"
 import { Platform } from "~/components/site/Platform"
 import { Trans } from "next-i18next"
+import { Logo } from "~/components/common/Logo"
+import { useEffect, useState } from "react"
 
 export const SiteFooter: React.FC<{
   site?: Profile | null
   page?: Note | null
 }> = ({ site, page }) => {
+  const [logoType, setLogoType] = useState<"svg" | "png" | "lottie">("svg")
+
+  useEffect(() => {
+    setLogoType("lottie")
+  }, [])
+
   const LogoWithLink = () => {
     return (
       <UniLink
         href={SITE_URL}
-        className="hover:text-accent inline-flex items-center align-text-top mx-1"
+        className="inline-flex items-center align-text-top mx-1"
       >
-        <Image
-          alt={APP_NAME}
-          src={`${SITE_URL}/assets/logo.svg`}
-          width={20}
-          height={20}
-        />
+        <Logo type={logoType} width={20} height={20} />
       </UniLink>
     )
   }
@@ -30,7 +33,7 @@ export const SiteFooter: React.FC<{
     <>
       <footer className="text-zinc-500 border-t">
         <div className="max-w-screen-md mx-auto px-5 py-10 text-xs flex justify-between">
-          <p className="font-medium text-base">
+          <div className="font-medium text-base">
             &copy;{" "}
             <UniLink href="/" className="hover:text-accent">
               {site?.name}
@@ -44,7 +47,7 @@ export const SiteFooter: React.FC<{
               }}
               ns="site"
             />
-          </p>
+          </div>
           {site?.connected_accounts && (
             <div className="ml-5 -mr-5">
               {site?.connected_accounts.map((account, index) => (

src/pages/dashboard/[subdomain]/index.tsx

@@ -12,6 +12,7 @@ import { useTranslation, Trans } from "next-i18next"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/dashboard/DashboardLayout.server"
 import { GetServerSideProps } from "next"
 import { serverSidePropsHandler } from "~/lib/server-side-props"
+import { Logo } from "~/components/common/Logo"
 
 export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
   async (ctx) => {
@@ -65,7 +66,7 @@ export default function SubdomainIndex() {
     <DashboardMain>
       <div className="prose min-w-[270px] max-w-screen-md">
         <div className="w-14 h-14 mb-8">
-          <Image alt="logo" src="/assets/logo.svg" width={100} height={100} />
+          <Logo type="lottie" width={100} height={100} />
         </div>
         <p className="text-2xl font-bold">{t("Site Stats")}</p>
         <div className="grid gap-4 sm:grid-cols-3 grid-cols-2 mb-8">

src/pages/index.tsx

@@ -36,7 +36,7 @@ import {
 import { useTranslation, Trans } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { languageDetector } from "~/lib/language-detector"
-import { cn } from "~/lib/utils"
+import { Logo } from "~/components/common/Logo"
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const queryClient = new QueryClient()
@@ -548,13 +548,8 @@ export default function Home() {
             </Element>
           </div>
           <div className="my-20 text-center">
-            <div className="w-20 h-20 mx-auto mb-8">
-              <Image
-                alt="logo"
-                src="/assets/logo.svg"
-                width={100}
-                height={100}
-              />
+            <div className="w-20 h-20 mx-auto mb-10">
+              <Logo type="lottie" width={100} height={100} />
             </div>
             {isConnected ? (
               <UniLink