Merge pull request #331 from visualize-admin/feat/page-titles

Page titles
visualize-admin · Feb 7, 2022 · c6fec51 · c6fec51
2 parents 49fbe37 + 700f952
commit c6fec51
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 3 deletions.
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
@@ -1,4 +1,5 @@
 import { Trans } from "@lingui/macro";
+import Head from "next/head";
 import * as React from "react";
 import { Box, Flex, Text } from "theme-ui";
 import { ChartDataFilters } from "../charts/shared/chart-data-filters";
@@ -65,6 +66,14 @@ export const ChartPreview = ({ dataSetIri }: { dataSetIri: string }) => {
                   state.meta.title[locale]
                 )}
               </Text>
+              <Head>
+                <title key="title">
+                  {state.meta.title[locale] === ""
+                    ? metaData?.dataCubeByIri?.title
+                    : state.meta.title[locale]}{" "}
+                  - visualize.admin.ch
+                </title>
+              </Head>
               <Text
                 variant="paragraph1"
                 sx={{

diff --git a/app/configurator/components/dataset-preview.tsx b/app/configurator/components/dataset-preview.tsx
@@ -8,6 +8,7 @@ import { useLocale } from "../../locales/use-locale";
 import { DataCubePublicationStatus } from "../../graphql/resolver-types";
 import DebugPanel from "../../components/debug-panel";
 import LinkButton from "./link-button";
+import Head from "next/head";
 
 export interface Preview {
   iri: string;
@@ -44,6 +45,11 @@ export const DataSetPreview = ({ dataSetIri }: { dataSetIri: string }) => {
         <Flex
           sx={{ alignItems: "center", justifyContent: "space-between", mb: 6 }}
         >
+          <Head>
+            <title key="title">
+              {dataCubeByIri.title} - visualize.admin.ch
+            </title>
+          </Head>
           <Text as="div" variant="heading1">
             {dataCubeByIri.title}
           </Text>

diff --git a/app/configurator/components/select-dataset-step.tsx b/app/configurator/components/select-dataset-step.tsx
@@ -1,4 +1,5 @@
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
+import Head from "next/head";
 import NextLink from "next/link";
 import { Router, useRouter } from "next/router";
 import React, { useMemo } from "react";
@@ -171,9 +172,26 @@ export const SelectDatasetStepContent = () => {
   );
 };
 
+const PageTitle = () => {
+  const { search, filters } = useBrowseContext();
+  return (
+    <Head>
+      <title key="title">
+        {search
+          ? `"${search}"`
+          : filters?.length > 0 && filters[0].__typename !== "DataCubeAbout"
+          ? filters[0].label
+          : t({ id: "browse.datasets.all-datasets" })}{" "}
+        - visualize.admin.ch
+      </title>
+    </Head>
+  );
+};
+
 export const SelectDatasetStep = () => {
   return (
     <BrowseStateProvider>
+      <PageTitle />
       <SelectDatasetStepContent />
     </BrowseStateProvider>
   );

diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
@@ -63,7 +63,7 @@ msgstr "Create visualization"
 
 #: app/configurator/components/select-dataset-step.tsx:133
 msgid "browse.datasets.all-datasets"
-msgstr "All Datasets"
+msgstr "All datasets"
 
 #: app/configurator/components/select-dataset-step.tsx:145
 msgid "browse.datasets.description"

diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
@@ -77,7 +77,7 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
-        <title>visualize.admin.ch</title>
+        <title key="title">visualize.admin.ch</title>
         <meta property="og:type" content="website" />
         <meta property="og:title" content={"visualize.admin.ch"} />
         <meta property="og:url" content={`${PUBLIC_URL}${asPath}`} />