add plausible analytics

.env.development.example

@@ -5,3 +5,6 @@ SITE_URL=http://localhost:3000
 
 # always true in development, set only on prod build
 # PREVIEW_MODE=
+
+# plausible analytics url
+PLAUSIBLE_SCRIPT_URL=

.env.production.example

@@ -7,3 +7,6 @@ SITE_URL=https://nemanjam.github.io
 # see draft posts and projects, true | false | empty
 # optional, default false, set only on prod build
 PREVIEW_MODE=
+
+# plausible analytics url
+PLAUSIBLE_SCRIPT_URL=

.github/workflows/bash__deploy-nginx.yml

@@ -13,6 +13,7 @@ on:
 
 env:
   SITE_URL: 'https://nemanjamitic.com'
+  PLAUSIBLE_SCRIPT_URL: 'https://plausible.arm1.nemanjamitic.com/js/script.js'
   SSH_ALIAS: arm1
 
 jobs:

.github/workflows/default__build-push-docker.yml

@@ -14,6 +14,7 @@ on:
 env:
   IMAGE_NAME: ${{ github.event.repository.name }}
   SITE_URL: 'https://nmc-docker.arm1.nemanjamitic.com'
+  PLAUSIBLE_SCRIPT_URL: 'https://plausible.arm1.nemanjamitic.com/js/script.js'
 
 jobs:
   build:

.github/workflows/default__deploy-nginx.yml

@@ -13,6 +13,7 @@ on:
 
 env:
   SITE_URL: 'https://nemanjamitic.com'
+  PLAUSIBLE_SCRIPT_URL: 'https://plausible.arm1.nemanjamitic.com/js/script.js'
 
 jobs:
   deploy:

.github/workflows/gh-pages__deploy-astro.yml

@@ -23,6 +23,7 @@ permissions:
 # set env vars in Github settings here
 env:
   SITE_URL: 'https://nemanjam.github.io'
+  PLAUSIBLE_SCRIPT_URL: 'https://plausible.arm1.nemanjamitic.com/js/script.js'
 
 jobs:
   # build with astro action, unusable for monorepo

.github/workflows/gh-pages__deploy-manual.yml

@@ -20,6 +20,7 @@ permissions:
 # set env vars in Github settings here
 env:
   SITE_URL: 'https://nemanjam.github.io'
+  PLAUSIBLE_SCRIPT_URL: 'https://plausible.arm1.nemanjamitic.com/js/script.js'
 
 jobs:
   build-manual:

astro.config.ts

@@ -1,4 +1,5 @@
 import mdx from '@astrojs/mdx';
+import partytown from '@astrojs/partytown';
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
 import icon from 'astro-icon';
@@ -32,6 +33,9 @@ export default defineConfig({
     // applyBaseStyles: false prevents double loading of tailwind
     tailwind({ applyBaseStyles: false }),
     icon({ iconDir: 'src/assets/icons' }),
+    partytown({
+      config: { forward: ['dataLayer.push'] },
+    }),
   ],
   markdown: { remarkPlugins },
   vite: {

docker/Dockerfile

@@ -25,6 +25,10 @@ ARG ARG_SITE_URL
 ENV SITE_URL=$ARG_SITE_URL
 RUN echo "SITE_URL=$SITE_URL"
 
+ARG ARG_PLAUSIBLE_SCRIPT_URL
+ENV PLAUSIBLE_SCRIPT_URL=$ARG_PLAUSIBLE_SCRIPT_URL
+RUN echo "PLAUSIBLE_SCRIPT_URL=$PLAUSIBLE_SCRIPT_URL"
+
 RUN yarn build
 
 FROM nginx:stable-alpine3.17-slim AS runtime

docs/working-notes/todo3.md

@@ -525,5 +525,10 @@ fix image sizes for gallery and other
 -----
 gallery scroll pagination, blur loading
 odvojen ARG_SITE_URL za x86 i arm
+folder name for slug and index.mdx and images
+
+// plausible
+<script defer data-domain="nemanjamitic.com" src="https://plausible.arm1.nemanjamitic.com/js/script.js"></script>
+add zod schema that checks node_env for plausible_url instead of optional
 ------------
 ```

package.json

@@ -7,8 +7,8 @@
     "start": "serve ./dist",
     "preview": "astro preview",
     "build": "astro build",
-    "build:nginx": "SITE_URL='https://nemanjamitic.com' astro build",
-    "build:nginx:local": "SITE_URL='https://blog.local.nemanjamitic.com' astro build",
+    "build:nginx": "SITE_URL='https://nemanjamitic.com' PLAUSIBLE_SCRIPT_URL: 'https://plausible.arm1.nemanjamitic.com/js/script.js' astro build",
+    "build:nginx:local": "SITE_URL='https://blog.local.nemanjamitic.com' PLAUSIBLE_SCRIPT_URL: 'https://plausible.arm1.nemanjamitic.com/js/script.js' astro build",
     "astro": "astro",
     "sync": "astro sync",
     "lint": "eslint --ext .astro,.tsx,.ts,.js,.mdx src",
@@ -19,12 +19,13 @@
     "deploy:nginx:local": "bash scripts/deploy-nginx.sh '~/traefik-proxy/apps/nmc-nginx-with-volume/website' lxc11",
     "deploy:docker": "bash scripts/deploy-docker.sh arm1 '~/traefik-proxy/apps/nmc-docker' nemanjamitic/nemanjam.github.io",
     "deploy:docker:local": "bash scripts/deploy-docker.sh lxc11 '~/traefik-proxy/apps/nmc-docker' nemanjamitic/nemanjam.github.io",
-    "docker:build:push:arm": "docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL='https://nmc-docker.arm1.nemanjamitic.com' --platform linux/arm64 --push .",
-    "docker:build:push:x86": "docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL='https://nmc-docker.local.nemanjamitic.com' --platform linux/amd64 --push .",
+    "docker:build:push:arm": "docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL='https://nmc-docker.arm1.nemanjamitic.com' ARG_PLAUSIBLE_SCRIPT_URL='https://plausible.arm1.nemanjamitic.com/js/script.js' --platform linux/arm64 --push .",
+    "docker:build:push:x86": "docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL='https://nmc-docker.local.nemanjamitic.com' ARG_PLAUSIBLE_SCRIPT_URL='https://plausible.arm1.nemanjamitic.com/js/script.js' --platform linux/amd64 --push .",
     "docker:push": "docker push nemanjamitic/nemanjam.github.io"
   },
   "dependencies": {
     "@astrojs/mdx": "^3.1.3",
+    "@astrojs/partytown": "^2.1.2",
     "@astrojs/react": "^3.6.1",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",

src/components/BaseHead.astro

@@ -13,7 +13,7 @@ import { filterUndefined } from '@/utils/objects';
 
 import type { Metadata } from '@/types/common';
 
-const { AUTHOR_NAME } = CONFIG_CLIENT;
+const { AUTHOR_NAME, PLAUSIBLE_SCRIPT_URL } = CONFIG_CLIENT;
 
 export interface BaseHeadProps {
   metadata: Metadata;
@@ -25,7 +25,7 @@ const { metadata } = Astro.props as BaseHeadProps;
 // site: SITE_URL var + '/'
 // url: full page url, cannonical url, per page
 const { url } = Astro; // objects
-const { host } = url;
+const { host } = url; // host - nemanjamitic.com
 
 const handledMetadata = handleTitle(metadata);
 
@@ -103,12 +103,16 @@ const ogImageUrl = new URL(image, url);
   <meta property="twitter:image" content={ogImageUrl} />
 
   {/* Analytics */}
-  <!-- 
-  <link rel="preconnect" href="set-url-here" />
-  <script async data-goatcounter="set-url-here" src="set-url-here"></script>
-  <script src="set-url-here" crossorigin="anonymous"></script>
- -->
-
+  {
+    PLAUSIBLE_SCRIPT_URL && (
+      <>
+        <link rel="preconnect" href={PLAUSIBLE_SCRIPT_URL} />
+        <script defer type="text/partytown" data-domain={host} src={PLAUSIBLE_SCRIPT_URL} />
+      </>
+    )
+  }
+
+  {/* Theme */}
   {/* MUST be inside <head /> to avoid white flash, IMPORTANT */}
   <ThemeScript />
 

src/config/client.ts

@@ -1,4 +1,4 @@
-import { SITE_URL } from 'astro:env/client';
+import { PLAUSIBLE_SCRIPT_URL, SITE_URL } from 'astro:env/client';
 
 import { configClientSchema } from '@/schemas/config';
 import { validateData } from '@/utils/validation';
@@ -10,6 +10,7 @@ const configClientData: ConfigClientType = {
   SITE_URL,
   SITE_TITLE: 'Nemanja Mitic',
   SITE_DESCRIPTION: 'I am Nemanja, full stack developer',
+  PLAUSIBLE_SCRIPT_URL,
   PAGE_SIZE_POST_CARD: 3,
   PAGE_SIZE_POST_CARD_SMALL: 6,
   MORE_POSTS_COUNT: 3,

src/config/process-env.ts

@@ -31,6 +31,7 @@ const processEnvData: ProcessEnvType = {
   NODE_ENV: process.env.NODE_ENV,
   PREVIEW_MODE: process.env.PREVIEW_MODE,
   SITE_URL: process.env.SITE_URL,
+  PLAUSIBLE_SCRIPT_URL: process.env.PLAUSIBLE_SCRIPT_URL,
 };
 
 export const PROCESS_ENV = validateData(processEnvData, processEnvSchema);
@@ -56,5 +57,10 @@ export const envSchema = {
       access: 'public',
       // default: omit to have explicit validation
     }),
+    PLAUSIBLE_SCRIPT_URL: envField.string({
+      context: 'client',
+      access: 'public',
+      optional: true,
+    }),
   },
 };

src/config/server.ts

@@ -1,4 +1,4 @@
-import { NODE_ENV as NODE_ENV_STRING, PREVIEW_MODE } from 'astro:env/server';
+import { NODE_ENV as NODE_ENV_STRING, PLAUSIBLE_SCRIPT_URL, PREVIEW_MODE } from 'astro:env/server';
 
 import { configServerSchema } from '@/schemas/config';
 import { CONFIG_CLIENT } from '@/config/client';
@@ -11,7 +11,7 @@ import type { ConfigServerType } from '@/types/config';
 const NODE_ENV = NODE_ENV_STRING as ConfigServerType['NODE_ENV'];
 
 /** SSG - all env vars are build time only. */
-const configServerData: ConfigServerType = { NODE_ENV, PREVIEW_MODE };
+const configServerData: ConfigServerType = { NODE_ENV, PREVIEW_MODE, PLAUSIBLE_SCRIPT_URL };
 
 export const CONFIG_SERVER = validateData(configServerData, configServerSchema);
 

src/schemas/config.ts

@@ -14,6 +14,7 @@ export const processEnvSchema = z.object({
     .default('false'),
   // ensure no trailing slash
   SITE_URL: z.string().url().regex(/[^/]$/, 'SITE_URL should not end with a slash "/"'),
+  PLAUSIBLE_SCRIPT_URL: z.string().url().or(z.literal('')).optional(),
 });
 
 export const configServerSchema = processEnvSchema

yarn.lock

@@ -166,6 +166,14 @@
     unist-util-visit "^5.0.0"
     vfile "^6.0.2"
 
+"@astrojs/partytown@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@astrojs/partytown/-/partytown-2.1.2.tgz#2df6745eb6add076e721ebd7e32c1bcd28063d1f"
+  integrity sha512-1a9T5lqxtnrw0qLPo1KwliUvaaUzPNPtWucD8VxdwT7zqcpODFk1RzGgAgqVo+YhutFrTu/qclbtnOfXBuskjw==
+  dependencies:
+    "@builder.io/partytown" "^0.10.2"
+    mrmime "^2.0.0"
+
 "@astrojs/[email protected]":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@astrojs/prism/-/prism-3.1.0.tgz#1b70432e0b16fafda191ce780c2820822a55bc46"
@@ -415,6 +423,11 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@builder.io/partytown@^0.10.2":
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.10.2.tgz#102c909f805c945a638e249275003ef6ba828287"
+  integrity sha512-A9U+4PREWcS+CCYzKGIPovtGB/PBgnH/8oQyCE6Nr9drDJk6cMPpLQIEajpGPmG9tYF7N3FkRvhXm/AS9+0iKg==
+
 "@ctrl/tinycolor@^4.0.4":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-4.1.0.tgz#91a8f8120ffc9da2feb2a38f7862b300d5e9691a"