Add canonical links to pages, improve meta tags, etc. (th0th#175)

* Add canonical links to pages, improve meta tags, etc.

* Update development.Dockerfile

Author: th0th

.idea/codeStyles/codeStyleConfig.xml

@@ -78,16 +78,16 @@ services:
       context: frontend
       dockerfile: development.Dockerfile
     environment:
-      FRONTEND_BASE_URL: ${FRONTEND_BASE_URL}
-      FRONTEND_USE_POLLING: ${FRONTEND_USE_POLLING}
+      NEXT_PUBLIC_BASE_URL: ${FRONTEND_BASE_URL}
       NEXT_PUBLIC_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
       NEXT_PUBLIC_HOSTED: ${HOSTED}
+      NEXT_PUBLIC_REST_API_BASE_URL: ${REST_API_BASE_URL}
       NEXT_PUBLIC_SENTRY_DSN: ${SENTRY_DSN}
       NEXT_PUBLIC_SENTRY_ENVIRONMENT: ${SENTRY_ENVIRONMENT}
       NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${STRIPE_PUBLISHABLE_KEY}
       NEXT_PUBLIC_WEBHOOK_URL: ${WEBHOOK_URL}
       NEXT_TELEMETRY_DISABLED: "1"
-      REST_API_BASE_URL: ${REST_API_BASE_URL}
+      USE_POLLING: ${FRONTEND_USE_POLLING}
       VIRTUAL_HOST: dev.poeticmetric.com
       VIRTUAL_PORT: "3000"
     image: ghcr.io/th0th/poeticmetric/frontend:development

docker-compose.yaml

@@ -1,6 +1,7 @@
 type DocsArticle = {
   category: Omit<DocsCategory, "articles">;
   content: string;
+  excerpt: string;
   slug: string;
   title: string;
 };

frontend/@types/docs.d.ts

@@ -6,6 +6,7 @@ RUN npm install --global [email protected]
 ARG BASE_URL
 ARG GOOGLE_CLIENT_ID
 ARG HOSTED=false
+ARG REST_API_BASE_URL
 ARG ROBOTS_TXT_ALLOW=false
 ARG SENTRY_AUTH_TOKEN
 ARG SENTRY_DSN
@@ -48,6 +49,7 @@ ENV NEXT_TELEMETRY_DISABLED=1
 ENV BASE_URL=${BASE_URL}
 ENV NEXT_PUBLIC_GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
 ENV NEXT_PUBLIC_HOSTED=${HOSTED}
+ENV NEXT_PUBLIC_REST_API_BASE_URL=${REST_API_BASE_URL}
 ENV NEXT_PUBLIC_SENTRY_DSN=${SENTRY_DSN}
 ENV NEXT_PUBLIC_SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT}
 ENV NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=${STRIPE_PUBLISHABLE_KEY}

frontend/Dockerfile

@@ -3,6 +3,7 @@ import { range } from "lodash";
 import Link from "next/link";
 import React, { useMemo } from "react";
 import { Col, Container, Pagination, Row } from "react-bootstrap";
+import { CanonicalLink } from "../CanonicalLink";
 import { Description } from "../Description";
 import { Layout } from "../Layout";
 import { Title } from "../Title";
@@ -50,7 +51,10 @@ export function BlogPage({ currentPage, pageCount, posts }: BlogPageProps) {
 
   return (
     <Layout kind="website">
+      <CanonicalLink path={currentPage === 1 ? "/blog" : `/blog/page/${currentPage}`} />
+
       <Title kind="blog">Privacy-focused web analytics tips and best practices</Title>
+
       <Description>
         Stay up to date on the latest privacy-first and regulation-compliant web analytics news, tips, and best practices with
         PoeticMetric&apos;s blog. Learn how to use data to improve your website and better understand your users, all while keeping their

frontend/components/BlogPage/index.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React, { useMemo } from "react";
 import { Container } from "react-bootstrap";
+import { CanonicalLink } from "../CanonicalLink";
 import { Description } from "../Description";
 import { Layout } from "../Layout";
 import { Markdown } from "../Markdown";
@@ -43,7 +44,10 @@ export function BlogPost({ nextPost, post, previousPost }: BlogPostProps) {
 
   return (
     <Layout kind="website">
+      <CanonicalLink path={`/blog/${post.slug}`} />
+
       <Title kind="blog">{post.title}</Title>
+
       <Description>{post.excerpt}</Description>
 
       <Container className="pt-4">

frontend/components/BlogPost/index.tsx

@@ -4,6 +4,7 @@ import { Alert, Button, Card, Container, Form, Spinner } from "react-bootstrap";
 import { AuthContext, ToastsContext } from "../../contexts";
 import { api, setUserAccessToken } from "../../helpers";
 import { useForm } from "../../hooks";
+import { Title } from "../Title";
 
 type Form = {
   createDemoSite: boolean;
@@ -93,11 +94,13 @@ export function Bootstrap() {
 
   return state.isReady ? (
     <Container className="py-5">
+      <Title>Complete PoeticMetric installation</Title>
+
       <div className="text-center">
         <h1>Welcome to PoeticMetric!</h1>
 
         <div className="mt-3">
-          Initialize your PoeticMetric installation to continue.
+          Complete PoeticMetric installation to continue.
         </div>
       </div>
 

frontend/components/Bootstrap/index.tsx

@@ -0,0 +1,15 @@
+import Head from "next/head";
+import React from "react";
+import { getUrl } from "../../helpers";
+
+export type CanonicalLinkProps = {
+  path: string;
+};
+
+export function CanonicalLink({ path }: CanonicalLinkProps) {
+  return (
+    <Head>
+      <link href={getUrl(path)} rel="canonical" />
+    </Head>
+  );
+}

frontend/components/CanonicalLink/index.tsx

@@ -1,8 +1,6 @@
+import { useRouter } from "next/router";
 import React from "react";
-import { Breadcrumb } from "../Breadcrumb";
-import { Layout } from "../Layout";
-import { Markdown } from "../Markdown";
-import { Title } from "../Title";
+import { Breadcrumb, CanonicalLink, Description, Layout, Markdown, Title } from "..";
 import { Menu } from "./Menu";
 
 type DocsArticleProps = {
@@ -11,10 +9,20 @@ type DocsArticleProps = {
 };
 
 export function DocsArticle({ article, categories }: DocsArticleProps) {
+  const router = useRouter();
+
   return (
     <Layout kind="website">
+      <CanonicalLink
+        path={router.asPath === "/docs"
+          ? `/docs/${categories[0].slug}/${categories[0].articles[0].slug}`
+          : `/docs/${article.category.slug}/${article.slug}`}
+      />
+
       <Title kind="docs">{article.title}</Title>
 
+      <Description>{article.excerpt}</Description>
+
       <div className="bg-white d-flex flex-column flex-grow-1 flex-md-row">
         <Menu article={article} categories={categories} />
 

frontend/components/DocsArticle/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CallToAction, Description, Features, FeaturesProps, Layout, Title } from "..";
+import { CallToAction, CanonicalLink, Description, Features, FeaturesProps, Layout, Title } from "..";
 import { Jumbotron } from "./Jumbotron";
 import { Preview } from "./Preview";
 
@@ -48,7 +48,10 @@ const features: FeaturesProps["features"] = [
 export function Home() {
   return (
     <Layout kind="website">
-      <Title>Privacy-first, regulation compliant Google Analytics alternative</Title>
+      <CanonicalLink path="" />
+
+      <Title>Free and open source, privacy-friendly Google Analytics alternative</Title>
+
       <Description>
         PoeticMetric is a free as in freedom, open source, privacy-first and regulation-compliant web analytics tool. You can keep track of
         your website&apos;s traffic without invading your visitors&apos; privacy.