add opengraph info maybe

src/mainPage.tsx

@@ -5,6 +5,8 @@ import { FoodExcludeTypes } from "./types";
 
 const FONT_TYPES = [
   ["default", "Default (Comic Sans, Comic Neue or Default)"],
+  ["system", "System Sans Font (as picked by Bootstrap Defaults)"],
+
   ["comicneue", "Comic Neue"],
   ["opendyslexic", "Open Dyslexic"]
 ];

src/theme.scss

@@ -63,6 +63,9 @@ body {
 html [data-font="default"] {
     font-family: $fonts-comic-sans-neue;
 }
+html [data-font="system"] {
+    font-family: $default-fonts;
+}
 html [data-font="comicneue"] {
     font-family: $fonts-comic-neue;
 }

webpack-dev.config.js

@@ -5,73 +5,80 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  mode: "production",
+    mode: "production",
-  cache: false,
+    cache: false,
-  entry: './src/main.tsx',
+    entry: './src/main.tsx',
-  output: {
+    output: {
-    path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js',
+        filename: 'bundle.js',
-    publicPath: '/',
+        publicPath: '/',
-  },
+    },
-  stats: {
+    stats: {
-    colors: true,
+        colors: true,
-    timings: true,
+        timings: true,
-  },
+    },
-  performance: {
+    performance: {
-    hints: false,
+        hints: false,
-  },
+    },
-  devtool: "eval-source-map",
+    devtool: "eval-source-map",
-  plugins: [
+    plugins: [
-    new HtmlWebpackPlugin({ title: "Chaos's Food Likes/Dislikes" })
+        new HtmlWebpackPlugin({
-  ],
+            title: "Chaos's Food Likes/Dislikes",
-  devServer: {
+            aseUrl: './',
-    historyApiFallback: true,
+            meta: {
-  },
+                'og:title': { property: 'og:title', content: "Chaos's Food Likes/Dislikes" },
-  resolve: {
+                'og:description': { property: 'og:description', content: "A list for all the foods we like, dislike and find unable to eat due to sensory difficulties." },
-    modules: ['node_modules'],
+            },
-    extensions: ['.tsx', '.ts', '.js', ".mjs"],
+        })
-    alias: { os: false }
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.(scss)$/,
-        use: [{
-          loader: 'style-loader',
-        }, {
-          loader: 'css-loader',
-        }, {
-          loader: 'postcss-loader',
-          options: {
-            postcssOptions: {
-              options: function () {
-                return [
-                  require('precss'),
-                  require('autoprefixer')
-                ];
-              }
-            }
-          }
-        }, {
-          loader: 'sass-loader'
-        }]
-      },
-      {
-        test: /\.ts(x?)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'ts-loader'
-          }
-        ]
-      },
     ],
-  },
+    devServer: {
+        historyApiFallback: true,
+    },
+    resolve: {
+        modules: ['node_modules'],
+        extensions: ['.tsx', '.ts', '.js', ".mjs"],
+        alias: { os: false }
+    },
 
-  optimization: {
+    module: {
-    minimize: false,
+        rules: [
-    minimizer: [
+            {
-    ],
+                test: /\.(scss)$/,
-  },
+                use: [{
+                    loader: 'style-loader',
+                }, {
+                    loader: 'css-loader',
+                }, {
+                    loader: 'postcss-loader',
+                    options: {
+                        postcssOptions: {
+                            options: function () {
+                                return [
+                                    require('precss'),
+                                    require('autoprefixer')
+                                ];
+                            }
+                        }
+                    }
+                }, {
+                    loader: 'sass-loader'
+                }]
+            },
+            {
+                test: /\.ts(x?)$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'ts-loader'
+                    }
+                ]
+            },
+        ],
+    },
+
+    optimization: {
+        minimize: false,
+        minimizer: [
+        ],
+    },
 };

webpack.config.js

@@ -20,7 +20,14 @@ module.exports = {
     hints: false,
   },
   plugins: [
-    new HtmlWebpackPlugin({ title: "Chaos's Food Likes/Dislikes", baseUrl: './' })
+    new HtmlWebpackPlugin({
+      title: "Chaos's Food Likes/Dislikes",
+      aseUrl: './',
+      meta: {
+        'og:title': { property: 'og:title', content: "Chaos's Food Likes/Dislikes" },
+        'og:description': { property: 'og:description', content: "A list for all the foods we like, dislike and find unable to eat due to sensory difficulties." },
+      },
+    })
   ],
   devServer: {
     historyApiFallback: true,