updating some components and configs

src/.env.example

@@ -6,7 +6,6 @@ APP_DOMAIN=localhost
 APP_URL="https://${APP_DOMAIN}"
 APP_UID_BYTES=8
 
-APP_JS_INTEGRITY_HASH=""
 GIT_HASH="00000000"
 GIT_TAG="x.x.x"
 GIT_BRANCH="master"
@@ -57,3 +56,10 @@ PUSHER_APP_CLUSTER=mt1
 
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+INTEGRITY_HASH_HUMANS_TXT=""
+INTEGRITY_HASH_COPYRIGHT_HTML=""
+INTEGRITY_HASH_NUNITO_REGULAR_WOFF2_FONT=""
+INTEGRITY_HASH_POIRETONE_REGULAR_WOFF2_FONT=""
+INTEGRITY_HASH_APP_CSS=""
+INTEGRITY_HASH_APP_JS=""

src/resources/js/Components/Card.vue

@@ -1,3 +1,28 @@
+<script setup>
+import { ref } from 'vue'
+
+defineEmits([])
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+
+// computed properties
+const hasHeader = computed(() => !! useSlots().header);
+
+// watchers
+
+// lifecycle hooks
+
+// methods
+
+</script>
+
 <template>
     <div class="card" :class="class">
         <div class="card-header" v-if="hasHeader">
@@ -8,26 +33,3 @@
         </div>
     </div>
 </template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  props: {
-    class: {
-      type: String,
-      default: '',
-    },
-  },
-
-  setup(props, {slots}) {
-    const hasHeader = ref(false)
-
-    if (slots.header && slots.header().length) {
-      hasHeader.value = true
-    }
-
-    return { hasHeader }
-  },
-})
-</script>

src/resources/js/Layouts/AppLayout.vue

@@ -239,6 +239,7 @@ import { Head, Link } from '@inertiajs/inertia-vue3'
 import SuccessNotifications from '@/Components/Notifications/SuccessNotifications.vue'
 import ErrorNotifications from '@/Components/Notifications/ErrorNotifications.vue'
 import GenericNotifications from '@/Components/Notifications/GenericNotifications.vue'
+import WarningNotifications from '@/Components/Notifications/WarningNotifications.vue'
 import ApplicationMark from '@/Jetstream/ApplicationMark.vue'
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue'
 import SidenavLink from '@/Components/SidenavLink.vue'
@@ -257,6 +258,7 @@ export default defineComponent({
     SuccessNotifications,
     ErrorNotifications,
     GenericNotifications,
+    WarningNotifications,
     ApplicationMark,
     ResponsiveNavLink,
     SidenavLink,

src/resources/views/app.blade.php

@@ -4,15 +4,25 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
+        <!-- Set the base URL for all relative URLs within the document -->
+        <base href="https://example.com/">
+
         <meta name="robots" content="index,follow">
         <meta name="googlebot" content="index,follow">
 
         <meta name="format-detection" content="telephone=no">
-        <meta http-equiv="x-dns-prefetch-control" content="off">
 
         <meta name="google" content="notranslate">
         <meta name="google" content="nositelinkssearchbox">
 
+        <!-- Prefetching, preloading, prebrowsing -->
+        <meta http-equiv="x-dns-prefetch-control" content="off">
+        <link rel="dns-prefetch" href="//example.com/">
+        <link rel="preconnect" href="https://www.example.com/">
+        <link rel="prefetch" href="https://www.example.com/">
+        <link rel="prerender" href="https://example.com/">
+        <link rel="preload" href="image.png" as="image">
+
         <meta name="rating" content="General">
 
         <meta name="url" content="{{ url('/') }}">
@@ -21,8 +31,12 @@
 
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
+        <!-- Name of web application (only should be used if the website is used as an app) -->
+        <meta name="application-name" content="Application Name">
+
         <!-- Privacy -->
         <meta name="twitter:dnt" content="on">
+        <meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">
 
         <!-- analytics -->
         <!-- -->
@@ -37,23 +51,27 @@
         {{-- <link href="{{ url('/.webmanifest') }}" rel="manifest"> --}}
 
         <!-- Files listing who was involved in this site and copyrights -->
-        <link href="{{ url('/humans.txt') }}" rel="author">
+        <link href="{{ url('/humans.txt') }}" rel="author" integrity="{{ env('INTEGRITY_HASH_HUMANS_TXT') }}">
-        <link href="{{ url('/copyright.html') }}" rel="copyright">
+        <link href="{{ url('/copyright.html') }}" rel="copyright" integrity="{{ env('INTEGRITY_HASH_COPYRIGHT_HTML') }}">
 
         <!-- Feeds -->
         {{-- <link href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS" rel="alternate"> --}}
         {{-- <link href="{{ url('/feed.atom') }}" type="application/atom+xml" title="Atom 0.3" rel="alternate"> --}}
 
+        <!-- oEmbed links -->
+        <link rel="alternate" type="application/json+oembed" href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json" title="oEmbed Profile: JSON">
+        <link rel="alternate" type="text/xml+oembed" href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml" title="oEmbed Profile: XML">
+
         <!-- Favicon -->
         {{-- <link href="{{ asset('/favicon.ico') }}" rel="icon" sizes="16x16" type="image/icon"> --}}
         {{-- <link href="{{ asset('/favicon.svg') }}" rel="icon" type="image/svg+xml"> --}}
         {{-- <link href="{{ asset('/favicon.png') }}" rel="icon" sizes="192x192"> --}}
 
         <!-- Font preloads (should be done for each font file) -->
-        <link href="{{ asset('/fonts/Nunito/Nunito-Regular.woff2') }}" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="{{ asset('/fonts/Nunito/Nunito-Regular.woff2') }}" rel="preload" as="font" type="font/woff2" integrity="{{ env('INTEGRITY_HASH_NUNITO_REGULAR_WOFF2_FONT') }}" crossorigin="anonymous">
 
         <!-- CSS -->
-        <link href="{{ mix('/css/app.css') }}" rel="stylesheet" media="screen">
+        <link href="{{ mix('/css/app.css') }}" rel="stylesheet" integrity="{{ env('INTEGRITY_HASH_APP_CSS') }}" media="screen">
 
         <!-- JS that must be executed before the document is loaded -->
         <script>
@@ -65,9 +83,11 @@
         </script>
 
         @routes
-        <script src="{{ mix('/js/app.js') }}" defer></script>
+        <script src="{{ mix('/js/app.js') }}" integrity="{{ env('INTEGRITY_HASH_APP_JS') }}" defer></script>
     </head>
     <body class="bg-gray-100 font-sans antialiased">
+        <x-country-flags></x-country-flags>
+
         @inertia
 
     </body>

src/tailwind.config.js

@@ -12,6 +12,12 @@ module.exports = {
   darkMode: 'class',
 
   theme: {
+    fontFamily: {
+      display: ['PoiretOne'],
+      body: ['OpenSans'],
+    },
+
+    extend: {
       colors: {
         // use https://uicolors.app/create
         // neutals
@@ -43,18 +49,7 @@ module.exports = {
         },
 
         // oranges
-      'vesuvius': {
+
-        50: '#fffbeb',
-        100: '#fef3c7',
-        200: '#fde58a',
-        300: '#fbd24e',
-        400: '#fabe25',
-        500: '#f49d0c',
-        600: '#d87607',
-        700: '#bc560a',
-        800: '#923f0e',
-        900: '#78340f',
-      },
 
         // yellows
 
@@ -242,11 +237,8 @@ module.exports = {
         sans: ['OpenSans', ...defaultTheme.fontFamily.sans],
         serif: ['Nunito', ...defaultTheme.fontFamily.serif],
         mono: ['RobotoMono', ...defaultTheme.fontFamily.mono],
-      display: ['PoiretOne', ...defaultTheme.fontFamily.display],
-      body: ['OpenSans', ...defaultTheme.fontFamily.body],
       },
-
+    },
-    extend: {},
   },
 
   plugins: [

src/webpack.mix.js

@@ -1,7 +1,14 @@
 const mix = require('laravel-mix');
 const { exec } = require('child_process');
 
-const shaCmd = "cat public/js/app.js | openssl dgst -sha512 -binary | openssl base64 -A";
+const resIntegrityFiles = [
+    { "envKey": "HUMANS_TXT", "path": "public/humans.txt" },
+    { "envKey": "COPYRIGHT_HTML", "path": "public/copyright.html" },
+    { "envKey": "NUNITO_REGULAR_WOFF2_FONT", "path": "public/fonts/Nunito/Nunito-Regular.woff2" },
+    { "envKey": "POIRETONE_REGULAR_WOFF2_FONT", "path": "public/fonts/PoiretOne/PoiretOne-Regular.woff2" },
+    { "envKey": "APP_CSS", "path": "public/css/app.css" },
+    { "envKey": "APP_JS", "path": "public/js/app.js" },
+];
 
 /*
  |--------------------------------------------------------------------------
@@ -17,38 +24,40 @@ const shaCmd = "cat public/js/app.js | openssl dgst -sha512 -binary | openssl ba
 mix.js('resources/js/app.js', 'public/js')
     .vue()
     .sourceMaps()
-    .after(stats => {
-        exec(shaCmd, (shaError, shaStdout, shaStderr) => {
-            if (shaError) {
-                console.error(`shaCmd error: ${shaError.message}`);
-                return;
-            }
-            if (shaStderr) {
-                console.error(`shaCmd stderr: ${shaStderr}`);
-                return;
-            }
-            let sha512Hash = shaStdout;
-            let sedCmd = `sed -i '/^APP_JS_INTEGRITY_HASH="*/c\APP_JS_INTEGRITY_HASH="sha512-${sha512Hash}"' .env`;
-
-            exec(sedCmd, (sedError, sedStdout, sedStderr) => {
-                if (sedError) {
-                    console.error(`sedCmd error: ${sedError.message}`);
-                    return;
-                }
-                if (sedStderr) {
-                    console.error(`sedCmd stderr: ${sedStderr}`);
-                    return;
-                }
-                console.log('Replaced SHA512 hash for integrity attribute.');
-            })
-        })
-    })
     .postCss('resources/css/app.css', 'public/css', [
         require('postcss-import'),
         require('tailwindcss'),
     ])
     .sourceMaps()
-    .webpackConfig(require('./webpack.config'));
+    .webpackConfig(require('./webpack.config'))
+    .after(stats => {
+        resIntegrityFiles.forEach(file => {
+            exec(`cat ${file.path} | openssl dgst -sha512 -binary | openssl base64 -A`, (shaError, shaStdout, shaStderr) => {
+                if (shaError) {
+                    console.error(`error getting SHA hash for ${file.path}: ${shaError.message}`);
+                    return;
+                }
+                if (shaStderr) {
+                    console.error(`error getting SHA hash for ${file.path}: ${shaStderr}`);
+                    return;
+                }
+                let sha512Hash = shaStdout;
+                let sedCmd = `sed -i '/^INTEGRITY_HASH_${file.envKey}="*/c\INTEGRITY_HASH_${file.envKey}="sha512-${sha512Hash}"' .env`;
+
+                exec(sedCmd, (sedError, sedStdout, sedStderr) => {
+                    if (sedError) {
+                        console.error(`error executing sed command for ${file.envKey}: ${sedError.message}`);
+                        return;
+                    }
+                    if (sedStderr) {
+                        console.error(`error executing sed command for ${file.envKey}`);
+                        return;
+                    }
+                    console.log(`Replaced SHA512 hash for ${file.envKey}.`);
+                });
+            });
+        });
+    });
 
 if (mix.inProduction()) {
     mix.version();