feat: Plausible Integration

.env.example

@@ -1,3 +1,7 @@
-# Example
-KUBE_CLUSTER_NAME=example-cluster
-GITHUB_TOKEN=example-token
+GITHUB_TOKEN=
+
+# Plausible
+BASE_URL=http://plausible.localhost
+PLAUSIBLE_DOMAIN=http://plausible.localhost
+SECRET_KEY_BASE=
+TOTP_VAULT_KEY=

.github/workflows/build.yml

@@ -34,6 +34,8 @@ jobs:
 
       - uses: asdf-vm/actions/install@v3
 
+      - run: make lint
+
       - run: make test
 
       - run: make build

Makefile

@@ -12,10 +12,10 @@ endif
 	docker login ghcr.io -u default -p $(GITHUB_TOKEN)
 
 init:
-	cp .env.example .env
-	cp app-config.example.yaml app-config.local.yaml
+	cp -n .env.example .env || true
+	cp -n app-config.example.yaml app-config.local.yaml || true
 
-install:
+install: init
 ifneq ($(shell which asdf),)
 	asdf install
 	corepack enable
@@ -24,6 +24,10 @@ ifneq ($(shell which asdf),)
 endif
 	yarn install
 
+lint: install
+	yarn lint:all
+	yarn tsc
+
 test: install
 	yarn test
 
@@ -37,7 +41,8 @@ dev-app:
 dev-backend:
 	yarn workspace backend start
 
-docker-dev:
+dev-docker:
+	@echo "Starting the server at http://localhost:7007"
 	docker compose up
 
 logs:
@@ -46,22 +51,25 @@ logs:
 exec:
 	docker compose exec backstage bash
 
-up:
-	@echo "Starting the server at http://localhost:7007"
-	docker compose up -d
-	open http://localhost:7007
+plausible-up: init
+	@echo "Plausible is running at http://localhost:8000 or http://plausible.localhost"
+	docker compose -f compose.plausible.yaml up -d
 
-up-logs:
-	@echo "Starting the server at http://localhost:7007"
-	docker compose up
+plausible-down:
+	docker compose -f compose.plausible.yaml down
+
+up: init
+	@echo "Backstage is running at http://localhost:7007 or http://backstage.localhost"
+	@echo "Traefik is running at http://localhost:8080 or http://traefik.localhost"
+	docker compose up -d
 
 down:
 	docker compose down
 
 run:
 	docker compose run --rm backstage $(filter-out $@,$(MAKECMDGOALS))
 
-build:
+build: init
 	docker compose build backstage
 
 publish: login-github version
@@ -103,15 +111,15 @@ help:
 	@echo "Available commands:"
 	@echo "  init: Initialize the project"
 	@echo "  install: Install dependencies"
+	@echo "  lint: Run linting and type checking"
 	@echo "  test: Run tests"
 	@echo "  dev: Start the development server"
 	@echo "  dev-app: Start the app development server"
 	@echo "  dev-backend: Start the backend development server"
-	@echo "  docker-dev: Start the development server using Docker"
+	@echo "  dev-docker: Start the development server using Docker"
 	@echo "  logs: Show logs"
 	@echo "  exec: Execute a command in the backstage container"
 	@echo "  up: Start the server"
-	@echo "  up-logs: Start the server and show logs"
 	@echo "  down: Stop the server"
 	@echo "  run: Run a command in the backstage container"
 	@echo "  build: Build the Docker image"

app-config.example.yaml

@@ -20,3 +20,6 @@ catalog:
       target: ../../examples/all.yaml
     - type: file
       target: ../../examples/acme-corp.yaml
+
+plausible:
+  enabled: false

app-config.production.yaml

@@ -32,3 +32,6 @@ catalog:
       target: ../../examples/all.yaml
     - type: file
       target: ../../examples/acme-corp.yaml
+
+plausible:
+  domain: ${PLAUSIBLE_DOMAIN}

app-config.yaml

@@ -71,3 +71,7 @@ catalog:
     pullRequestBranchName: backstage-integration
   rules:
     - allow: [Component, System, API, Resource, Location, Template, User, Group]
+
+plausible:
+  enabled: true
+  domain: ${PLAUSIBLE_DOMAIN}

compose.plausible.yaml

@@ -0,0 +1,65 @@
+services:
+  traefik:
+    image: traefik:v3.1
+    command:
+      - '--api.insecure=true'
+      - '--api.dashboard=true'
+      - '--providers.docker=true'
+      - '--entrypoints.web.address=:80'
+      - '--entrypoints.traefik.address=:8080'
+    ports:
+      - 80:80
+      - 8080:8080
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.traefik.rule=Host(`traefik.localhost`)'
+      - 'traefik.http.routers.traefik.service=api@internal'
+
+  plausible_db:
+    # Plausible v2.1.1 was tested against PostgreSQL versions 15 and 16
+    # https://github.com/plausible/analytics/blob/v2.1.1/.github/workflows/elixir.yml#L21-L32
+    image: postgres:16-alpine
+    restart: always
+    volumes:
+      - db-data:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_PASSWORD=postgres
+
+  plausible_events_db:
+    image: clickhouse/clickhouse-server:24.3.3.102-alpine
+    restart: always
+    volumes:
+      - event-data:/var/lib/clickhouse
+      - event-logs:/var/log/clickhouse-server
+      - ./clickhouse/clickhouse-config.xml:/etc/clickhouse-server/config.d/logging.xml:ro
+      - ./clickhouse/clickhouse-user-config.xml:/etc/clickhouse-server/users.d/logging.xml:ro
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
+
+  plausible:
+    image: ghcr.io/plausible/community-edition:v2.1.1
+    restart: always
+    command: sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && /entrypoint.sh run"
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.plausible.rule=Host(`plausible.localhost`)'
+      - 'traefik.http.services.plausible.loadbalancer.server.port=8000'
+    depends_on:
+      - plausible_db
+      - plausible_events_db
+    ports:
+      - 127.0.0.1:8000:8000
+    env_file:
+      - .env
+
+volumes:
+  db-data:
+    driver: local
+  event-data:
+    driver: local
+  event-logs:
+    driver: local

compose.yaml

@@ -1,13 +1,35 @@
 services:
+  traefik:
+    image: traefik:v3.1
+    command:
+      - '--api.insecure=true'
+      - '--api.dashboard=true'
+      - '--providers.docker=true'
+      - '--entrypoints.web.address=:80'
+      - '--entrypoints.traefik.address=:8080'
+    ports:
+      - 80:80
+      - 8080:8080
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.traefik.rule=Host(`traefik.localhost`)'
+      - 'traefik.http.routers.traefik.service=api@internal'
+
   backstage:
     image: ghcr.io/echohello-dev/backstage:${VERSION:-latest}
     build:
       context: .
       dockerfile: Dockerfile
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.backstage.rule=Host(`backstage.localhost`)'
+      - 'traefik.http.services.backstage.loadbalancer.server.port=7007'
     ports:
       - 7007:7007
     volumes:
       - ./app-config.production.yaml:/app/app-config.production.yaml
       - ./app-config.yaml:/app/app-config.yaml
-    # env_file:
-    #   - .env
+    env_file:
+      - .env

docs/development.md

@@ -1,5 +1,29 @@
 # Development
 
+## Creating a New Plugin
+
+On the command line, run the following command to create a new plugin.
+
+```bash
+yarn new
+```
+
+[Documentation](https://backstage.io/docs/conf/defining/)
+
+### Validating Configuration
+
+Schemas can be validated using the command:
+
+```bash
+backstage-cli config:check
+```
+
+To validate and examine the frontend configuration, use the command:
+
+```bash
+backstage-cli config:print --frontend
+```
+
 ## Using Storybook
 
 There's a Backstage Storybook site that can be used to view and develop components.

docs/tracking.md

@@ -0,0 +1,25 @@
+# Tracking
+
+We use Plausible Analytics to track visits to our website. Plausible is a privacy-friendly alternative to Google Analytics. It does not use cookies and does not collect any personal data. You can read more about Plausible's data policy [here](https://plausible.io/data-policy).
+
+## Local Development
+
+To run the Plausible Analytics server locally, you can use the following command:
+
+```bash
+make plausible-up
+```
+
+Build the app and start the server:
+
+```bash
+make build
+make up
+```
+
+To tear down the server:
+
+```bash
+make plausible-down
+make down
+```

packages/app/.eslintrc.js

@@ -1 +1,5 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
+  rules: {
+    'no-unused-vars': ['error', { varsIgnorePattern: '^_' }],
+  },
+});

packages/app/package.json

@@ -41,6 +41,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/inter": "^5.0.18",
+    "@internal/backstage-plugin-plausible": "^0.1.0",
     "@mui/icons-material": "^5.15.19",
     "@mui/joy": "^5.0.0-beta.36",
     "@mui/material": "^5.15.19",

packages/app/src/App.tsx

@@ -41,6 +41,7 @@ import { UnifiedThemeProvider } from '@backstage/theme';
 import { backstageTheme } from './theme';
 import { HomePage } from './components/home/HomePage';
 import CssBaseline from '@mui/material/CssBaseline';
+import { PlausibleAnalytics } from '@internal/backstage-plugin-plausible';
 
 const app = createApp({
   apis,
@@ -119,6 +120,7 @@ const routes = (
 
 export default app.createRoot(
   <>
+    <PlausibleAnalytics />
     <AlertDisplay />
     <OAuthRequestDialog />
     <AppRouter>

packages/app/src/components/Root/Root.tsx

@@ -1,7 +1,6 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { styled } from '@mui/material/styles';
 import Home from '@mui/icons-material/Home';
-import CreateComponent from '@mui/icons-material/AddCircleOutline';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
 import {
@@ -33,6 +32,7 @@ import ScoreRoundedIcon from '@mui/icons-material/ScoreRounded';
 import { IconComponent } from '@backstage/core-plugin-api';
 
 export enum LocalStorageKeys {
+  // eslint-disable-next-line no-unused-vars
   SIDEBAR_PIN_STATE = 'sidebarPinState',
 }
 

packages/app/src/components/home/HomePage.tsx

@@ -15,7 +15,7 @@ import Groups3Icon from '@mui/icons-material/Groups3';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
 import TrendingDownIcon from '@mui/icons-material/TrendingDown';
-import React, { useRef } from 'react';
+import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import CardContent from '@mui/material/CardContent';
@@ -76,26 +76,6 @@ export const HomePage = () => {
   const [isSquad, setIsSquad] = React.useState(true);
   const theme = useTheme();
 
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
-
-  const scrollLeft = () => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollBy({
-        left: -300, // Adjust the scroll amount as needed
-        behavior: 'smooth',
-      });
-    }
-  };
-
-  const scrollRight = () => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollBy({
-        left: 300, // Adjust the scroll amount as needed
-        behavior: 'smooth',
-      });
-    }
-  };
-
   const months = [
     new Date(2021, 7, 1),
     new Date(2021, 8, 1),

packages/backend/.eslintrc.js

@@ -1 +1,5 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
+  rules: {
+    'no-unused-vars': ['error', { varsIgnorePattern: '^_' }],
+  },
+});

plugins/plausible/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

plugins/plausible/README.md

@@ -0,0 +1,13 @@
+# plausible
+
+Welcome to the plausible plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/plausible](http://localhost:3000/plausible).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.