Add support for meta image override

.parcelrc

@@ -2,7 +2,7 @@
   "extends": ["@parcel/config-default"],
   "bundler": "@parcel/bundler-experimental",
   "reporters": ["...", "@parcel/reporter-bundle-analyzer"],
-  "resolvers": ["parcel-resolver-veda", "@parcel/resolver-glob", "..."],
+  "resolvers": ["parcel-resolver-ignore", "parcel-resolver-veda", "@parcel/resolver-glob", "..."],
   "transformers": {
     "raw:*": ["@parcel/transformer-raw"],
     "*.mdx": ["parcel-transformer-mdx-frontmatter", "parcel-transformer-mdx"]

app/index.html

@@ -6,10 +6,10 @@
   <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
   <meta name='theme-color' content='#2276AC'>
 
-  <link rel='icon' sizes='any' href='./graphics/meta/favicon.ico' />
-  <link rel='icon' type='image/svg+xml' href='./graphics/meta/icon.svg' />
-  <link rel='apple-touch-icon' sizes='180x180' href='./graphics/meta/apple-touch-icon.png' />
-  <link rel='manifest' href='./graphics/meta/site.webmanifest' />
+  <link rel='icon' sizes='any' href='{{baseurl}}meta/favicon.ico' />
+  <link rel='icon' type='image/svg+xml' href='{{baseurl}}meta/icon.svg' />
+  <link rel='apple-touch-icon' sizes='180x180' href='{{baseurl}}meta/apple-touch-icon.png' />
+  <link rel='manifest' href='{{baseurl}}meta/site.webmanifest' />
 
   <title>{{appTitle}}</title>
   <meta name='description' content='{{appDescription}}' data-react-helmet="true" />
@@ -18,13 +18,13 @@
   <meta name='twitter:site' content='' data-react-helmet="true" />
   <meta name='twitter:title' content='{{appTitle}}' data-react-helmet="true" />
   <meta name='twitter:description' content='{{appDescription}}' data-react-helmet="true" />
-  <meta name='twitter:image' content='./graphics/meta/meta-image.png' data-react-helmet="true" />
+  <meta name='twitter:image' content='{{baseurl}}meta/meta-image.png' data-react-helmet="true" />
 
   <meta property='og:type' content='website' data-react-helmet="true" />
   <meta property='og:url' content='{{baseurl}}' data-react-helmet="true" />
   <meta property='og:site_name' content='{{appTitle}}' data-react-helmet="true" />
   <meta property='og:title' content='{{appTitle}}' data-react-helmet="true" />
-  <meta property='og:image' content='./graphics/meta/meta-image.png' data-react-helmet="true" />
+  <meta property='og:image' content='{{baseurl}}meta/meta-image.png' data-react-helmet="true" />
   <meta property='og:description' content='{{appDescription}}' data-react-helmet="true" />
 
   <link rel='preconnect' href='https://fonts.gstatic.com'>

app/scripts/components/common/meta-tags.js

@@ -3,10 +3,12 @@ import T from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useTheme } from 'styled-components';
 import { useLocation } from 'react-router-dom';
-import defaultMetaImage from '~app/graphics/meta/meta-image.png';
 
 const appTitle = process.env.APP_TITLE;
 const baseUrl = window.location.origin;
+
+const defaultMetaImage = `${process.env.PUBLIC_URL ?? '/'}/meta/meta-image.png`;
+
 function MetaTags({ title, description, thumbnail, children }) {
   const theme = useTheme();
   const location = useLocation();

docs/content/CONFIGURATION.md

@@ -1,5 +1,11 @@
 # Configuration
 
+- [Configuration](#configuration)
+  - [veda.config.js](#vedaconfigjs)
+    - [Taxonomy Index file](#taxonomy-index-file)
+    - [Page overrides](#page-overrides)
+  - [Meta files](#meta-files)
+
 The base properties used by Veda are set through the `.env` file.  
 This includes values like the application title, and contact email. These values are then used throughout the app.
 
@@ -29,44 +35,17 @@ The default configuration is:
 ### Page overrides
 To adapt the Veda dashboard to the individual needs of you instance, some content/component overrides are provided. These overrides allow you to alter certain parts of the application, or inject code without having to fork the UI part of veda.
 
-There are essentially 2 types of possible overrides:
-- `Content Overrides` - allow you to change the default content of a page. Like with the different content types (discoveries, datasets), you'll have access to all [MDX_BLOCK.md](./MDX_BLOCKS.md). Depending on the content override you'll also be able to provide some frontmatter variables. The name of the override config variable will follow the `<name>Content` scheme.
-- `Component Overrides` - allow you to alter a specific component of the app, by providing new javascript code for it (advanced usage). No Mdx Blocks are available.
-
-The overrides are defined in the `veda.config.js` under `pageOverrides` by specifying the path to the mdx file to load.  
-These are the current available overrides:
-
-```js
-  pageOverrides: {
-    // Type: Content override
-    aboutContent: '<file path>.mdx'
-
-    // There are currently no component overrides defined.
-  }
-```
+See [PAGE_OVERRIDES](./PAGE_OVERRIDES.md) for a full list of elements to customize.
 
-#### aboutContent
-Type: `Content Override`  
+## Meta files
 
-The `aboutContent` allows you to specify new content for the global about page (locally at http://localhost:9000/about).  
-Besides the new content, this page also frontmatter variables to modify the page title and description.  
+_There is currently not a lot of customization that can be done to meta images._
 
-Example:
-```js
-// veda.config.js pageOverrides
-aboutContent: './overrides/about.mdx'
+The following meta files must exist and be placed in the `static/meta` folder:
 ```
-```jsx
----
-title: About the Dashboard
-description: A brief description
----
-
-<Block>
-  <Prose>
-    <p>
-      This is my new about page.
-    </p>
-  </Prose>
-</Block>
+apple-touch-icon.png
+favicon.ico
+icon.svg
+meta-image.png
+site.webmanifest
 ```

docs/development/ARCHITECTURE.md

@@ -84,3 +84,22 @@ Currently the following aliases exist:
 
 To add a new alias, add the respecting naming and path under `alias` in the `package.json`.  
 The test runner (Jest) also has to be made aware of the mapping, and this is done through some code in `jest.config.js` under `moduleNameMapper`. You shouldn't need to do anything there, but if things break it is a place to look at.
+
+
+## Meta files
+
+To allow for the override of meta files, they are places in the `static` folder which means that they'll be copied to the `dist` directory by the bundler.
+
+The files are then included in `index.html`. Example:
+```
+<link rel='icon' sizes='any' href='{{baseurl}}meta/favicon.ico' />
+```
+
+The issue with this approach is that `parcel` will try to process and load the file if the path doesn't contain the protocol (no `https`, effectively being `/meta/favicon.ico`) and it will fail because at the time of build the file won't be found.
+
+Parcel [doesn't have a native way around this](https://github.com/parcel-bundler/parcel/issues/1186), but through the use of [`parcel-resolver-ignore`](https://www.npmjs.com/package/parcel-resolver-ignore) we can achieve the desired outcome, albeit with needing to add the ignore condition to the `package.json`:
+```json
+"parcelIgnore": [
+  ".*/meta/"
+]
+```

package.json

@@ -73,6 +73,7 @@
     "jest": "^28.1.3",
     "jest-css-modules-transform": "^4.3.0",
     "parcel": "^2.7.0",
+    "parcel-resolver-ignore": "^2.1.3",
     "parcel-resolver-veda": "link:./parcel-resolver-veda",
     "parcel-transformer-mdx": "link:./parcel-transformer-mdx",
     "parcel-transformer-mdx-frontmatter": "link:./parcel-transformer-mdx-frontmatter",
@@ -156,11 +157,14 @@
     "styled-components": "^5.3.3",
     "use-deep-compare": "^1.1.0"
   },
+  "parcelIgnore": [
+    ".*/meta/"
+  ],
   "alias": {
     "$components": "~/app/scripts/components",
     "$styles": "~/app/scripts/styles",
     "$utils": "~/app/scripts/utils",
     "$context": "~/app/scripts/context",
     "$test": "~/test"
   }
-}
+}

posthtml.config.js

@@ -28,7 +28,7 @@ module.exports = {
       locals: {
         appTitle: process.env.APP_TITLE,
         appDescription: process.env.APP_DESCRIPTION,
-        baseurl: process.env.PUBLIC_URL || ''
+        baseurl: process.env.PUBLIC_URL || '/'
       }
     }
   }

yarn.lock

@@ -9650,6 +9650,11 @@ papaparse@^5.3.2:
   resolved "http://verdaccio.ds.io:4873/papaparse/-/papaparse-5.3.2.tgz#d1abed498a0ee299f103130a6109720404fbd467"
   integrity sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw==
 
+parcel-resolver-ignore@^2.1.3:
+  version "2.1.3"
+  resolved "http://3.220.121.64:4873/parcel-resolver-ignore/-/parcel-resolver-ignore-2.1.3.tgz#869673c40ccab1985af74020cd28b360b149155f"
+  integrity sha512-C8uLvR4o7SPRSsQ/Nylm1/PdsLwn/Z9bzCs66qT3XIebJC7ojaFFF3MDl/mie5audngjcFF8wzU0AoEQkZq2pA==
+
 "parcel-resolver-veda@link:./parcel-resolver-veda":
   version "0.0.0"
   uid ""