feat: add Umami Cloud Analysis (#476)

public/locales/ja/dashboard.json

@@ -85,6 +85,7 @@
   "Name": "名前",
   "Description": "説明",
   "Integrate Google Analytics": "Google Analytics と紐付けします。Measurement ID の検索方法については、<2>こちらの文章</2>をご覧ください。",
+  "Integrate Umami Cloud Analytics": "Umami Cloud Analytics と紐付けします。Website ID の検索方法については、<2>こちらの文章</2>をご覧ください。",
   "Save": "保存",
   "Tips": "ヒント",
   "social tips": {

public/locales/zh-TW/dashboard.json

@@ -90,6 +90,7 @@
     "Name": "名稱",
     "Description": "自我介紹",
     "Integrate Google Analytics": "將 Google Analytics 整合至你的網站中。請按照<2>這裡</2>的說明查找你的 Measurement ID。",
+    "Integrate Umami Cloud Analytics": "將 Umami Cloud Analytics 整合至你的網站中。請按照<2>這裡</2>的說明查找你的 Website ID。",
     "Save": "儲存",
     "Tips": "提示",
     "social tips": {

public/locales/zh/dashboard.json

@@ -91,6 +91,7 @@
   "Name": "名称",
   "Description": "描述",
   "Integrate Google Analytics": "将 Google Analytics 集成到你的站点中。你可以按照<2>这里</2>的说明查找你的 Measurement ID。",
+  "Integrate Umami Cloud Analytics": "将 Umami Cloud Analytics 集成到你的站点中。你可以按照<2>这里</2>的说明查找你的 Website ID。",
   "Save": "保存",
   "Tips": "提示",
   "social tips": {

src/components/site/SiteFooter.tsx

@@ -89,6 +89,16 @@ export const SiteFooter: React.FC<{
           </Script>
         </div>
       )}
+      {site?.metadata?.content?.ua && (
+        <div className="xlog-umami-analytics">
+          <Script
+            id="umami-analytics" strategy="afterInteractive"
+            async src="https://analytics.umami.is/script.js"
+            data-website-id={`${site.metadata?.content?.ua}`}
+          >
+          </Script>
+        </div>
+      )}
     </>
   )
 }

src/lib/expand-unit.ts

@@ -103,6 +103,10 @@ export const expandCrossbellCharacter = (site: CharacterEntity) => {
     (expandedCharacter.metadata?.content?.attributes?.find(
       (a: any) => a.trait_type === "xlog_ga",
     )?.value as string) || ""
+  expandedCharacter.metadata.content.ua =
+    (expandedCharacter.metadata?.content?.attributes?.find(
+      (a: any) => a.trait_type === "xlog_ua",
+    )?.value as string) || ""
   expandedCharacter.metadata.content.custom_domain =
     (expandedCharacter.metadata?.content?.attributes?.find(
       (a: any) => a.trait_type === "xlog_custom_domain",

src/lib/types.ts

@@ -101,6 +101,7 @@ export type ExpandedCharacter = CharacterEntity & {
       navigation?: SiteNavigationItem[]
       css?: string
       ga?: string
+      ua?: string
       custom_domain?: string
     }
   }

src/models/site.model.ts

@@ -106,6 +106,7 @@ export async function updateSite(
     navigation?: SiteNavigationItem[]
     css?: string
     ga?: string
+    ua?: string
     custom_domain?: string
     banner?: {
       address: string
@@ -141,6 +142,7 @@ export async function updateSite(
       ...((payload.navigation !== undefined ||
         payload.css !== undefined ||
         payload.ga !== undefined ||
+        payload.ua !== undefined ||
         payload.custom_domain !== undefined) && {
         attributes: [
           ...(payload.navigation !== undefined
@@ -167,6 +169,14 @@ export async function updateSite(
                 },
               ]
             : []),
+          ...(payload.ua !== undefined
+            ? [
+                {
+                  trait_type: "xlog_ua",
+                  value: payload.ua,
+                },
+              ]
+            : []),
           ...(payload.custom_domain !== undefined
             ? [
                 {

src/pages/dashboard/[subdomain]/settings/general.tsx

@@ -45,6 +45,7 @@ export default function SiteSettingsGeneralPage() {
       name: "",
       description: "",
       ga: "",
+      ua: "",
     } as {
       icon: string
       banner?: {
@@ -54,6 +55,7 @@ export default function SiteSettingsGeneralPage() {
       name: string
       description: string
       ga: string
+      ua: string
     },
   })
 
@@ -65,6 +67,7 @@ export default function SiteSettingsGeneralPage() {
       name: values.name,
       description: values.description,
       ga: values.ga,
+      ua: values.ua,
     })
   })
 
@@ -105,6 +108,8 @@ export default function SiteSettingsGeneralPage() {
         form.setValue("description", site.data.metadata?.content?.bio || "")
       !form.getValues("ga") &&
         form.setValue("ga", site.data.metadata?.content?.ga || "")
+      !form.getValues("ua") &&
+        form.setValue("ua", site.data.metadata?.content?.ua || "")
     }
   }, [site.data, form])
 
@@ -211,6 +216,28 @@ export default function SiteSettingsGeneralPage() {
             }
           />
         </div>
+        <div className="mt-5">
+          <Input
+            id="ua"
+            {...form.register("ua")}
+            label="Umami Cloud Analytics"
+            help={
+              <p>
+                <Trans i18nKey="Integrate Umami Cloud Analytics" ns="dashboard">
+                  Integrate Umami Cloud Analytics into your site. You can follow the
+                  instructions{" "}
+                  <UniLink
+                    className="underline"
+                    href="https://umami.is/docs/collect-data"
+                  >
+                    here
+                  </UniLink>{" "}
+                  to find your Website ID.
+                </Trans>
+              </p>
+            }
+          />
+        </div>
         <div className="mt-5">
           <Button
             type="submit"