feat(tracking): migrate to vercel/speed-insights (#254)

markdown/partials/license.md

@@ -4,17 +4,7 @@ title: Licenses and Resources
 
 The Wiki is unofficial _Magic: the Gathering_ fan content permitted under the
 [Fan Content Policy][wizards:fcp]. Portions of the materials used such as mana
-symbols and game mechanics are property of _Wizards of the Coast_. Card arts are
-made available from the unaltered [Scryfall's API][scryfall:api] and are
-copyright _Wizard of the Coast_ or their respective artists for older sets. For
-cropped arts where the artist line of a card is not visible, the artists are
-mentioned in the accessible text.
-
-Mana symbols are rendered using the _Mana_ icon font made available by [Andrew
-Gioia][mana]. See their section about licensing for more details.
-
-Phyrexian scripture and the corresponding unofficial font assets were provided
-from the work of [Stas][stas].
+symbols and game mechanics are property of _Wizards of the Coast_.
 
 All original code for the Wiki is available under the terms of the [MIT
 license][code:license]. For more information about the underlying code, refer to
@@ -24,15 +14,38 @@ All original content such as articles and chapters is available under the terms
 of the [Attribution-NonCommercial-NoDerivatives 4.0 International][wiki:license]
 license.
 
+###### Imagery
+
+Card arts are made available from the unaltered [Scryfall's API][scryfall:api]
+and are copyright _Wizard of the Coast_ or their respective artists for older
+sets. For cropped arts where the artist line of a card is not visible, the
+artists are mentioned in the accessible text.
+
+###### Iconography and Assets
+
+Mana symbols are rendered using the _Mana_ icon font made available by [Andrew
+Gioia][mana]. See their section about licensing for more details.
+
 In addition, the Wiki displays icons from the [Material Design Icons][icons:mdi]
 library as well as from the [Simple Icons][icons:simple-icons] library for brand
 icons. Please check their respective licensing for more details, which can be
 adapted from one icon to another.
 
+Phyrexian scripture and the corresponding unofficial font assets were provided
+from the work of [Stas][stas].
+
+###### Analytics
+
+We collect anonymous analytics in order to improve user experience. We do not
+use cookies. See the respective privacy policies for [Vercel][legal:vercel] and
+for [PostHog][legal:posthog].
+
 [code:license]: https://github.com/angrybacon/doomsday-wiki/blob/master/LICENSE.org
 [code:repository]: https://github.com/angrybacon/doomsday-wiki
 [icons:mdi]: https://pictogrammers.com/library/mdi/
 [icons:simple-icons]: https://simpleicons.org
+[legal:posthog]: https://posthog.com/privacy
+[legal:vercel]: https://vercel.com/legal/privacy-policy
 [mana]: https://mana.andrewgioia.com/
 [scryfall:api]: https://scryfall.com/docs/api
 [stas]: http://stas.tk/

package.json

@@ -37,7 +37,7 @@
     "@mui/material": "6.1.1",
     "@mui/system": "6.1.1",
     "@mui/utils": "6.1.1",
-    "@vercel/analytics": "1.3.1",
+    "@vercel/speed-insights": "1.0.12",
     "async-sema": "3.1.1",
     "mana-font": "1.15.9",
     "mdast-util-find-and-replace": "3.0.1",
@@ -53,7 +53,7 @@
     "remark-directive": "3.0.0",
     "remark-gfm": "4.0.0",
     "remark-toc": "9.0.0",
-    "simple-icons": "13.11.0",
+    "simple-icons": "13.12.0",
     "unified": "11.0.4",
     "unist-util-select": "5.1.0",
     "unist-util-visit": "5.0.0",

src/components/Footer/Footer.tsx

@@ -1,7 +1,6 @@
 import {
   Box,
   ThemeProvider as MuiThemeProvider,
-  Typography,
   type SxProps,
 } from '@mui/material';
 import { type FunctionComponent, type ReactNode } from 'react';
@@ -19,22 +18,19 @@ export const Footer: FunctionComponent<Props> = ({ isClear, sx }) => {
     <Box
       component="footer"
       sx={[
-        { color: 'text.secondary', textAlign: 'center' },
+        { color: 'text.secondary', textAlign: 'center', typography: 'caption' },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <Typography component="p" variant="caption">
-        Copyright &copy; 2017-2024 Doomsday Wiki contributors. Read the notice
-        about <Link href="/license">licenses and resources</Link>.
-      </Typography>
-      <Typography component="p" variant="caption">
-        This page collects anonymous analytics through Vercel. See their
-        GDPR-compliant{' '}
-        <Link href="https://vercel.com/legal/privacy-policy">
-          privacy policy
-        </Link>
-        .
-      </Typography>
+      <p>
+        &copy; 2017-2024 Doomsday Wiki contributors. Read the notice about{' '}
+        <Link href="/license">licenses and resources</Link>.
+      </p>
+      <p>
+        This page collects anonymous analytics in order to improve its contents.
+        By browsing the Wiki, you consent to the collection and use of that
+        data.
+      </p>
     </Box>
   );
   return isClear ? (

src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import { CssBaseline } from '@mui/material';
-import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/next';
 import { type AppProps } from 'next/app';
 import Head from 'next/head';
 import postHog from 'posthog-js';
@@ -10,7 +10,7 @@ import { ThemeProvider } from '@/theme/ThemeContext';
 if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
   postHog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
     api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-    person_profiles: 'always',
+    persistence: 'localStorage',
   });
 }
 
@@ -29,8 +29,8 @@ export default function Application({ Component, pageProps }: AppProps) {
         <PostHogProvider client={postHog}>
           <Component {...pageProps} />
         </PostHogProvider>
+        <SpeedInsights />
       </ThemeProvider>
-      {process.env.NODE_ENV === 'production' && <Analytics />}
     </>
   );
 }

src/pages/license.tsx

@@ -16,7 +16,7 @@ const Page: NextPage<Props> = ({ license, menu }) => (
   <Layout menu={menu} title="License">
     <Card>
       <CardContent>
-        <Typography align="center" variant="h1">
+        <Typography align="center" gutterBottom variant="h1">
           License
         </Typography>
         <Markdown markdown={license} />