docs: More complete favicon package

Author: ntucker

docs/core/concepts/normalization.md

@@ -60,7 +60,7 @@ values={[
 ]}>
 <TabItem value="State">
 
-![Entities cache](/img/entities.png)
+![Entities cache](/img/entities.png 'Entities cache')
 
 </TabItem>
 <TabItem value="Response">
@@ -387,7 +387,7 @@ per update.
 [DevTools browser extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)
 can be installed to inspect and [debug the store](../guides/debugging.md).
 
-![browser-devtools](/img/devtool-state.png)
+![browser-devtools](/img/devtool-state.png 'Reactive Data Client devtools')
 
 <center>
 

docs/core/guides/debugging.md

@@ -41,7 +41,7 @@ After installing and running your site, a new icon should appear in your locatio
 Clicking that will open the inspector, which allows you to observe dispatched actions,
 their effect on the cache state as well as current cache state.
 
-![browser-devtools](/img/devtool-action.png)
+![browser-devtools](/img/devtool-action.png 'Reactive Data Client devtools')
 
 The [Controller](../api/Controller.md) dispatches actions, making that page useful for understanding
 what actions you see. Here we observe the most common actions of [fetch](../api/Controller.md#fetch)
@@ -72,7 +72,7 @@ values={[
 ]}>
 <TabItem value="State">
 
-![Entities cache](/img/entities.png)
+![Entities cache](/img/entities.png 'Entities cache')
 
 </TabItem>
 <TabItem value="Response">
@@ -128,14 +128,14 @@ Once [normalized](../concepts/normalization.md), these [entities](/rest/api/Enti
 tab in devtools to see the entire state. This can be useful to determine exactly where data is. There is
 also a 'meta' section of the cache for information like when the request took place (useful for [TTL](../concepts/expiry-policy.md)).
 
-![Dev tools state inspector](/img/devtool-state.png)
+![Dev tools state inspector](/img/devtool-state.png 'Reactive Data Client devtools state inspector')
 
 ## State Diff
 
 For monitoring a particular fetch response, it might be more useful to see how the cache state updates.
 Click on the 'Diff' tab to see what changed.
 
-![Dev tools diff inspector](/img/devtool-diff.png)
+![Dev tools diff inspector](/img/devtool-diff.png 'Reactive Data Client devtools diff')
 
 Here we toggled the 'completed' status of a todo using an [optimistic update](/rest/guides/optimistic-updates).
 

website/docusaurus.config.ts

@@ -24,20 +24,6 @@ const config: Config = {
   },
   scripts: [],
   stylesheets: [
-    /*{
-      rel: 'preload',
-      href: '/font/Rubik-VariableFont_wght.ttf',
-      as: 'font',
-      type: 'font/ttf',
-      crossOrigin: 'anonymous',
-    },
-    {
-      rel: 'preload',
-      href: '/font/Rubik-Italic-VariableFont_wght.ttf',
-      as: 'font',
-      type: 'font/ttf',
-      crossOrigin: 'anonymous',
-    },*/
     {
       rel: 'preconnect',
       href: 'https://fonts.gstatic.com',
@@ -107,7 +93,8 @@ const config: Config = {
     },
     {
       rel: 'icon',
-      href: '/img/favicon/favicon.ico',
+      href: '/favicon.ico',
+      type: 'image/x-icon',
     },
     {
       rel: 'icon',
@@ -122,24 +109,20 @@ const config: Config = {
       sizes: '32x32',
     },
     {
-      rel: 'icon',
+      rel: 'apple-touch-icon',
       type: 'image/png',
-      href: '/img/favicon/favicon-96x96.png',
-      sizes: '96x96',
+      href: '/apple-touch-icon.png',
+      sizes: '180x180',
+    },
+    {
+      rel: 'manifest',
+      href: '/img/favicon/site.webmanifest',
+    },
+    {
+      rel: 'mask-icon',
+      href: '/img/favicon/safari-pinned-tab.svg',
+      color: '#3E96DB',
     },
-    // TODO: figure out where to put this
-    // {
-    //   name: 'application-name',
-    //   content: 'Reactive Data Client',
-    // },
-    // {
-    //   name: 'msapplication-TileColor',
-    //   content: '#FFFFFF',
-    // },
-    // {
-    //   name: 'msapplication-TileImage',
-    //   content: '/img/favicon/mstile-144x144.png',
-    // },
     /*{
       rel: 'preload',
       href: '/assets/css/root.css',
@@ -153,8 +136,38 @@ const config: Config = {
       media: 'all',
     }, TODO: figure out how to load this*/
   ],
+  headTags: [
+    {
+      tagName: 'link',
+      attributes: {
+        name: 'application-name',
+        content: 'Reactive Data Client',
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'msapplication-TileColor',
+        content: '#3e96db',
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'msapplication-config',
+        content: '/browserconfig.xml',
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'theme-color',
+        content: '#003a67',
+      },
+    },
+  ],
   clientModules: [require.resolve('./src/gtagfix.ts')],
-  //favicon: 'img/favicon/favicon.ico',
+  //favicon: '/favicon.ico', we declare our own headers for this above
   themes: ['@docusaurus/theme-live-codeblock', '@docusaurus/theme-mermaid'],
   customFields: {
     repoUrl: 'https://github.com/reactive/data-client',

website/static/apple-touch-icon.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/img/favicon/mstile-150x150.png"/>
+            <TileColor>#3e96db</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>