feat: add Google Analytics integration

This commit is contained in:
Guoqi Sun 2024-12-22 17:09:37 +08:00
parent a2c473709f
commit a70c05471c
5 changed files with 27 additions and 11 deletions

View file

@ -20,6 +20,7 @@
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"astro": "^5.1.0",
"astro-google-analytics": "^1.0.3",
"astro-og-canvas": "^0.5.5",
"canvaskit-wasm": "^0.39.1",
"lucide-react": "^0.468.0",

8
pnpm-lock.yaml generated
View file

@ -35,6 +35,9 @@ importers:
astro:
specifier: ^5.1.0
version: 5.1.0(@types/node@22.10.2)(jiti@2.4.2)(rollup@4.27.4)(sass@1.83.0)(typescript@5.7.2)(yaml@2.6.1)
astro-google-analytics:
specifier: ^1.0.3
version: 1.0.3
astro-og-canvas:
specifier: ^0.5.5
version: 0.5.5(astro@5.1.0(@types/node@22.10.2)(jiti@2.4.2)(rollup@4.27.4)(sass@1.83.0)(typescript@5.7.2)(yaml@2.6.1))
@ -1260,6 +1263,9 @@ packages:
resolution: {integrity: sha512-F6NW1RJo5pp2kPnnM97M5Ohw8zAGjv83MpxHqfAochH68n/kiXN57+hYaNUCA7XkScoVNr6yzvly3hsY34TGfQ==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
astro-google-analytics@1.0.3:
resolution: {integrity: sha512-5bD7jA15yxVaUFVVEFG6KKMphYJ4AKP4+HSqCVBpTBnqh8LL0giTdAHpG9KJs3JaFbGQUTWP5Pqt8+twz7f55Q==}
astro-og-canvas@0.5.5:
resolution: {integrity: sha512-dbZ7voJAmvy8Zyv5zFsgENs9G4uhcCJ4nVuUPb7ymu8+Vp/jr/fdQDKPrLYUG2TSi/1HejYRnzkXcSv6ntlDTA==}
engines: {node: '>=18.14.1'}
@ -4895,6 +4901,8 @@ snapshots:
- supports-color
- typescript
astro-google-analytics@1.0.3: {}
astro-og-canvas@0.5.5(astro@5.1.0(@types/node@22.10.2)(jiti@2.4.2)(rollup@4.27.4)(sass@1.83.0)(typescript@5.7.2)(yaml@2.6.1)):
dependencies:
astro: 5.1.0(@types/node@22.10.2)(jiti@2.4.2)(rollup@4.27.4)(sass@1.83.0)(typescript@5.7.2)(yaml@2.6.1)

View file

@ -1,5 +1,5 @@
---
import { latestPosts } from "~/config"
import { common } from "~/config"
import { getLangFromUrl, useTranslations } from "~/i18n/utils"
import { getPostsByLocale } from "~/utils"
import PostList from "./post-list.astro"
@ -8,7 +8,7 @@ const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)
const allPosts = await getPostsByLocale(lang)
const posts = allPosts.slice(0, latestPosts)
const posts = allPosts.slice(0, common.latestPosts)
---
<div class="my-8 text-xl font-medium md:my-8">{t("blog.latest")}</div>

View file

@ -2,13 +2,12 @@ import { Github, Twitter } from "lucide-react"
export const defaultLanguage: string = "en"
export const latestPosts = 8
const common = {
export const common = {
meta: {
favicon: "/avatar.png",
url: "https://blog.sunguoqi.com",
},
googleAnalyticsId: "",
social: [
{
icon: Twitter,
@ -33,6 +32,7 @@ const common = {
],
about: true,
},
latestPosts: 8,
}
export const zh = {

View file

@ -3,6 +3,7 @@ import "~/styles/globals.css"
import { NoiseBackground } from "~/components/react/noise-background"
import { CodeBackground } from "~/components/react/code-background"
import { getLangFromUrl } from "~/i18n/utils"
import { GoogleAnalytics } from "astro-google-analytics"
import { en, zh } from "~/config"
const lang = getLangFromUrl(Astro.url)
@ -12,7 +13,7 @@ const { title, description, ogImage } = Astro.props
const ogImageURL = new URL(ogImage, Astro.site).href
const permalink = new URL(Astro.url.pathname, Astro.site).href
const config = lang === "zh" ? zh.meta : en.meta
const config = lang === "zh" ? zh : en
---
<!doctype html>
@ -20,18 +21,18 @@ const config = lang === "zh" ? zh.meta : en.meta
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href={config.favicon} />
<link rel="icon" type="image/svg+xml" href={config.meta.favicon} />
<title>
{
!title
? `${config.title} - ${config.slogan}`
: `${config.title} - ${title}`
? `${config.meta.title} - ${config.meta.slogan}`
: `${config.meta.title} - ${title}`
}
</title>
<meta name="generator" content={Astro.generator} />
<meta
name="description"
content={!description ? config.description : description}
content={!description ? config.meta.description : description}
/>
<!-- Open Graph / Facebook -->
@ -71,7 +72,13 @@ const config = lang === "zh" ? zh.meta : en.meta
defer
src="https://umami.guoqi.dev/script.js"
data-website-id="3cd55e92-cb53-4254-a97d-24441b08d7c3"
data-domains="astro-air.netlify.app"></script>
data-domains="astro-air.guoqi.dev"></script>
{
config.googleAnalyticsId && (
<GoogleAnalytics id={config.googleAnalyticsId} />
)
}
</head>
<body
class="flex min-h-screen w-full justify-center px-6 dark:bg-[#121212] dark:text-white md:px-0"