From 8a6f8be986e3714624109f76344411d4aa741654 Mon Sep 17 00:00:00 2001
From: Mark Ross <krazkidd@gmail.com>
Date: Fri, 24 Nov 2023 08:45:06 -0700
Subject: [PATCH] About page (#27)

---
 README.md                                     |  2 +-
 app.vue                                       |  6 +-
 .../scoreboard/ScoreboardShareButton.vue      |  2 +-
 components/settings/SettingsButton.vue        |  2 +-
 components/settings/SettingsHelpButton.vue    |  2 +-
 components/settings/SettingsLockButton.vue    |  2 +-
 data/nav.ts                                   | 14 ++++-
 nuxt.config.ts                                |  8 +++
 pages/about/index.vue                         | 16 ++++++
 pages/index.vue                               | 56 +++++++++----------
 10 files changed, 70 insertions(+), 40 deletions(-)
 create mode 100644 pages/about/index.vue

diff --git a/README.md b/README.md
index a85f724..ae93d18 100644
--- a/README.md
+++ b/README.md
@@ -99,4 +99,4 @@ An app spec is available under `.do/` which will run the SSG command and publish
 
 The softball favicon (`public/favicon/favicon.ico`) is used under the [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/) license from the [twemoji](https://github.com/twitter/twemoji) project.
 
-The emoji images (`assets/images/fluentui-emoji`) are used under the MIT license (`assets/images/fluentui-emoji/LICENSE`) from the [Fluent Emoji](https://github.com/microsoft/fluentui-emoji) project.
\ No newline at end of file
+The react emojis (`assets/images/fluentui-emoji`) are used under the [MIT license](https://opensource.org/license/mit/) from the [Fluent Emoji](https://github.com/microsoft/fluentui-emoji) project.
\ No newline at end of file
diff --git a/app.vue b/app.vue
index 9348f0d..1e5af9e 100644
--- a/app.vue
+++ b/app.vue
@@ -32,15 +32,15 @@ const menuPassThroughOptions = {
         title="Color mode"
       >
         <template v-if="colorMode.preference === 'system'">
-          <i class="pi pi-fw pi-desktop pr-2"></i>
+          <i class="pi pi-desktop pi-fw pr-2"></i>
           System
         </template>
         <template v-if="colorMode.preference === 'dark'">
-          <i class="pi pi-fw pi-moon pr-2"></i>
+          <i class="pi pi-moon pi-fw pr-2"></i>
           Dark
         </template>
         <template v-if="colorMode.preference === 'light'">
-          <i class="pi pi-fw pi-sun pr-2"></i>
+          <i class="pi pi-sun pi-fw pr-2"></i>
           Light
         </template>
       </Button>
diff --git a/components/scoreboard/ScoreboardShareButton.vue b/components/scoreboard/ScoreboardShareButton.vue
index 6b7d4ad..8226f70 100644
--- a/components/scoreboard/ScoreboardShareButton.vue
+++ b/components/scoreboard/ScoreboardShareButton.vue
@@ -50,7 +50,7 @@ function clickQrCode(path: string) {
     <Button
         @click="isDialogVisible = true"
         v-bind="$attrs"
-        icon="pi pi-fw pi-share-alt"
+        icon="pi pi-share-alt pi-fw"
         severity="secondary"
         text
         rounded
diff --git a/components/settings/SettingsButton.vue b/components/settings/SettingsButton.vue
index 800fec8..1539329 100644
--- a/components/settings/SettingsButton.vue
+++ b/components/settings/SettingsButton.vue
@@ -21,7 +21,7 @@ const isDialogVisible = ref(false);
 <template>
   <Button
     @click="isDialogVisible = true"
-    icon="pi pi-fw pi-cog"
+    icon="pi pi-cog pi-fw"
     severity="secondary"
     text
     rounded
diff --git a/components/settings/SettingsHelpButton.vue b/components/settings/SettingsHelpButton.vue
index 2654039..d721134 100644
--- a/components/settings/SettingsHelpButton.vue
+++ b/components/settings/SettingsHelpButton.vue
@@ -23,7 +23,7 @@ const isDialogVisible = ref(false);
 <template>
   <Button
     @click="isDialogVisible = true"
-    icon="pi pi-fw pi-question-circle"
+    icon="pi pi-question-circle pi-fw"
     severity="secondary"
     text
     rounded
diff --git a/components/settings/SettingsLockButton.vue b/components/settings/SettingsLockButton.vue
index 5beb373..5cab9bc 100644
--- a/components/settings/SettingsLockButton.vue
+++ b/components/settings/SettingsLockButton.vue
@@ -13,7 +13,7 @@ const buttonPassThroughOptions = {
 <template>
   <Button
     @click="teamStore.isLocked = !teamStore.isLocked"
-    :icon="`pi pi-fw pi-${ teamStore.isLocked ? 'lock' : 'lock-open' }`"
+    :icon="`pi ${ teamStore.isLocked ? 'pi-lock' : 'pi-lock-open' } pi-fw`"
     :severity="`${ teamStore.isLocked ? 'secondary' : 'warning' }`"
     text
     rounded
diff --git a/data/nav.ts b/data/nav.ts
index 406b061..17f3ce4 100644
--- a/data/nav.ts
+++ b/data/nav.ts
@@ -4,27 +4,35 @@ import type { MenuItem } from "primevue/menuitem";
 export const homeMenuItem: MenuItem = {
     key: 'home',
     label: 'Home',
-    icon: 'pi pi-fw pi-home',
+    icon: 'pi pi-home pi-fw',
     //TODO deprecated
     to: { path: '/' } as MatcherLocationAsPath
 };
 export const lineupMenuItem: MenuItem = {
     key: 'lineup',
     label: 'Lineup',
-    icon: 'pi pi-fw pi-user-edit',
+    icon: 'pi pi-user-edit pi-fw',
     //TODO deprecated
     to: { path: '/lineup' } as MatcherLocationAsPath
 };
 export const scoreboardMenuItem: MenuItem = {
     key: 'scoreboard',
     label: 'Scoreboard',
-    icon: 'pi pi-fw pi-play',
+    icon: 'pi pi-play pi-fw',
     //TODO deprecated
     to: { path: '/scoreboard' } as MatcherLocationAsPath
 };
+export const aboutMenuItem: MenuItem = {
+    key: 'about',
+    label: 'About',
+    icon: 'pi pi-info-circle pi-fw',
+    //TODO deprecated
+    to: { path: '/about' } as MatcherLocationAsPath
+};
 
 export const navMenuItems: MenuItem[] = [
     homeMenuItem,
     lineupMenuItem,
     scoreboardMenuItem,
+    aboutMenuItem
 ];
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8e02811..9640351 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -43,6 +43,14 @@ export default defineNuxtConfig({
   // nitro: {
   //   // prefer to set this in build environment
   //   preset: '',
+  //   // copy local files to build output
+  //   publicAssets: [
+  //     {
+  //       baseURL: "node_modules/...",
+  //       dir: "public/images",
+  //       maxAge: 60 * 60 * 24 * 7, // 7 days
+  //     },
+  //   ]
   // },
   vuefire: {
     emulators: {
diff --git a/pages/about/index.vue b/pages/about/index.vue
new file mode 100644
index 0000000..80ba879
--- /dev/null
+++ b/pages/about/index.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <article class="prose dark:prose-invert lg:prose-xl max-w-none">
+        <h2>Attributions</h2>
+
+        <p>
+            The softball favicon is used under the <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> license from the <a href="https://github.com/twitter/twemoji">twemoji</a> project.
+        </p>
+        <p>
+            The react emojis are used under the <a href="https://opensource.org/license/mit/">MIT license</a> from the <a href="https://github.com/microsoft/fluentui-emoji">Fluent Emoji</a> project.
+        </p>
+    </article>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 0755fde..9f34623 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,38 +2,36 @@
 </script>
 
 <template>
-    <div>
-        <article class="prose dark:prose-invert lg:prose-xl max-w-none">
-            <h1>Welcome, coach!</h1>
+    <article class="prose dark:prose-invert lg:prose-xl max-w-none">
+        <h1>Welcome, coach!</h1>
 
-            <p>
-                Plan your softball team's batting order and field positions. Then share a live scoreboard through a URL!
-            </p>
+        <p>
+            Plan your softball team's batting order and field positions. Then share a live scoreboard through a URL!
+        </p>
 
-            <h2>Features</h2>
+        <h2>Features</h2>
 
-            <p>
-                <ul>
-                    <li>Set player jersey numbers and field positions</li>
-                    <li>Drag-and-drop to reorder players</li>
-                    <li>
-                        Lock the lineup
-                        <ul>
-                            <li>Only field positions can be changed after locking</li>
-                        </ul>
-                    </li>
-                    <li>
-                        Live (real time) scoreboard which can be accessed by friends through a URL
-                        <ul>
-                            <li>React with emojis!</li>
-                        </ul>
-                    </li>
-                    <li>Customizable team colors</li>
-                    <li>Dark mode</li>
-                </ul>
-            </p>
-        </article>
-    </div>
+        <p>
+            <ul>
+                <li>Set player jersey numbers and field positions</li>
+                <li>Drag-and-drop to reorder players</li>
+                <li>
+                    Lock the lineup
+                    <ul>
+                        <li>Only field positions can be changed after locking</li>
+                    </ul>
+                </li>
+                <li>
+                    Live (real time) scoreboard which can be accessed by friends through a URL
+                    <ul>
+                        <li>React with emojis!</li>
+                    </ul>
+                </li>
+                <li>Customizable team colors</li>
+                <li>Dark mode</li>
+            </ul>
+        </p>
+    </article>
 </template>
 
 <style scoped>