Add about page

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 1.4.6
 
 -   Fix context menu showing up on all pages instead of only Rumble video pages
+-   Add About page
 
 ## 1.4.5
 

README.md

@@ -191,5 +191,5 @@ If you want to support me:
 -   [PayPal](https://www.paypal.me/stevencrader)
 -   [$craders](https://www.cash.app/$craders)
 -   [Venmo](https://venmo.com/code?user_id=467277291978752568&created=1654152122)
--   [Twitter (Rant Stats)](https://twitter.com/stevencrader)
--   [Twitter (Me)](https://twitter.com/rantstats_com)
+-   [X (Rant Stats)](https://x.com/stevencrader)
+-   [X (Me)](https://x.com/rantstats_com)

package.json

@@ -7,7 +7,7 @@
     "scripts": {
         "build": "run-p -cln 'build:*'",
         "build:webpack": "webpack --mode=development",
-        "build:sass": "sass src/styles.scss:output/styles.css src/pages/rants/rants.scss:output/pages/rants/rants.css src/pages/pages.scss:output/pages/pages.css src/pages/options/options.scss:output/pages/options/options.css src/components/rants/rants.scss:output/components/rants/rants.css src/components/rants/rant.scss:output/components/rants/rant.css src/components/open-chat/open-chat.scss:output/components/open-chat/open-chat.css",
+        "build:sass": "sass src/styles.scss:output/styles.css src/pages/rants/rants.scss:output/pages/rants/rants.css src/pages/pages.scss:output/pages/pages.css src/pages/options/options.scss:output/pages/options/options.css src/pages/about/about.scss:output/pages/about/about.css src/components/rants/rants.scss:output/components/rants/rants.css src/components/rants/rant.scss:output/components/rants/rant.css src/components/open-chat/open-chat.scss:output/components/open-chat/open-chat.css",
         "watch": "run-p -cln 'watch:*'",
         "watch:webpack:": "yarn build:webpack --watch",
         "watch:sass": "yarn build:sass --watch",
@@ -21,7 +21,7 @@
         "build-release": "run-p -cln 'build-release:*'",
         "build-release:lint": "yarn lint",
         "build-release:js": "yarn build --mode=production",
-        "build-release:sass": "sass --style=compressed src/styles.scss output/styles.css"
+        "build-release:sass": "sass --style=compressed src/styles.scss:output/styles.css src/pages/rants/rants.scss:output/pages/rants/rants.css src/pages/pages.scss:output/pages/pages.css src/pages/options/options.scss:output/pages/options/options.css src/pages/about/about.scss:output/pages/about/about.css src/components/rants/rants.scss:output/components/rants/rants.css src/components/rants/rant.scss:output/components/rants/rant.css src/components/open-chat/open-chat.scss:output/components/open-chat/open-chat.css"
     },
     "repository": {
         "type": "git",

src/background.ts

@@ -27,6 +27,20 @@ const handleOpenRantsPage = (): void => {
     )
 }
 
+/**
+ * Handle receiving message {@link Messages.OPEN_ABOUT}
+ *
+ * Opens about page
+ */
+const handleOpenAboutPage = (): void => {
+    chrome.tabs.create(
+        {
+            url: "pages/about/about.html",
+        },
+        () => {},
+    )
+}
+
 /**
  * Handle receiving message {@link Messages.PAGE_LOADED}
  *
@@ -122,6 +136,9 @@ chrome.runtime.onMessage.addListener((message: Message, _sender, sendResponse) =
         case Messages.OPEN_RANTS:
             handleOpenRantsPage()
             break
+        case Messages.OPEN_ABOUT:
+            handleOpenAboutPage()
+            break
         case Messages.PAGE_LOADED:
             handlePageLoaded(message.data.tab as string)
             break

src/components/events/events.ts

@@ -18,6 +18,13 @@ export const triggerOpenRantsPage = (): void => {
     sendAction(Messages.OPEN_RANTS)
 }
 
+/**
+ * Send Message to open about page
+ */
+export const triggerOpenAboutPage = (): void => {
+    sendAction(Messages.OPEN_ABOUT)
+}
+
 /**
  * Send Message with updated Options
  * @param options updated option values

src/manifest.json

@@ -35,6 +35,7 @@
                 "components/open-chat/open-chat.css",
                 "components/rants/rants.css",
                 "components/rants/rant.css",
+                "pages/about/about.css",
                 "pages/options/options.css",
                 "pages/rants/rants.css"
             ],

src/pages/about/about.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html class="rantstats">
+    <head>
+        <title>About | RantStats Extension for Rumble.com</title>
+
+        <!--suppress HtmlUnknownTarget -->
+        <link rel="stylesheet" type="text/css" href="about.css" />
+    </head>
+
+    <body id="about">
+        <header>
+            <h1>About</h1>
+        </header>
+
+        <main>
+            <p>If you want to support me:</p>
+            <ul>
+                <li><a href="https://www.paypal.me/stevencrader" target="_blank">PayPal</a></li>
+                <li><a href="https://www.cash.app/$craders" target="_blank">$craders</a></li>
+                <li>
+                    <a href="https://venmo.com/code?user_id=467277291978752568&created=1654152122" target="_blank"
+                        >Venmo</a
+                    >
+                </li>
+                <li><a href="https://x.com/stevencrader" target="_blank">X (Rant Stats)</a></li>
+                <li><a href="https://x.com/rantstats_com" target="_blank">X (Me)</a></li>
+            </ul>
+        </main>
+
+        <!--suppress HtmlUnknownTarget -->
+        <script src="about.js"></script>
+    </body>
+</html>

src/pages/about/about.scss

@@ -0,0 +1,11 @@
+@import "../pages";
+
+#about {
+    p,
+    a {
+        font-size: 1.5em;
+    }
+}
+
+html.theme-dark {
+}

src/pages/about/about.ts

@@ -0,0 +1,23 @@
+import { registerTab } from "../../components/events/events"
+import { registerSystemColorSchemeWatcher, updateTheme, updateThemeStyle } from "../../theme"
+import { Message, Messages } from "../../types/messages"
+import { Theme } from "../../types/option-types"
+
+chrome.runtime.onMessage.addListener((message: Message, _sender, sendResponse) => {
+    if (message.action === Messages.RUMBLE_THEME_CHANGED_TAB) {
+        updateThemeStyle(message.data.theme as Theme)
+    }
+    sendResponse({ done: true })
+})
+
+/**
+ * Initialize the page
+ */
+const populateView = async (): Promise<void> => {
+    registerSystemColorSchemeWatcher()
+    await updateTheme()
+}
+
+populateView().then()
+
+registerTab()

src/pages/options/options.html

@@ -109,8 +109,7 @@ <h1>RantStats Extension Options</h1>
             </div>
 
             <div class="row">
-                <p><a href="https://rantstats.com" target="_blank">RantStats.com</a></p>
-                <p><a href="https://twitter.com/stevencrader" target="_blank">By Steven Crader</a></p>
+                <button id="open-about">About</button>
             </div>
         </footer>
 

src/pages/options/options.scss

@@ -113,6 +113,7 @@
 
     footer {
         font-size: 10px;
+        padding-bottom: 10px;
 
         .clear-section {
             font-size: 12px;

src/pages/options/options.ts

@@ -1,5 +1,5 @@
 import { cleanHistory, getOptions, getUsage, updateOptions } from "../../cache"
-import { optionsSaved, registerTab, triggerOpenRantsPage } from "../../components/events/events"
+import { optionsSaved, registerTab, triggerOpenAboutPage, triggerOpenRantsPage } from "../../components/events/events"
 import { handleUpdateOptions } from "../../message-options"
 import { registerSystemColorSchemeWatcher, updateTheme, updateThemeStyle } from "../../theme"
 import { CONSTS } from "../../types/consts"
@@ -203,6 +203,7 @@ bytesUseSpan.addEventListener("change", optionChanged)
 alternateColorsCheckbox.addEventListener("change", optionChanged)
 document.getElementById("clear").addEventListener("click", clearOptions)
 document.getElementById("open-rants").addEventListener("click", triggerOpenRantsPage)
+document.getElementById("open-about").addEventListener("click", triggerOpenAboutPage)
 
 document.querySelectorAll(".has-sub-options").forEach((optionDiv: HTMLDivElement) => {
     optionDiv.querySelectorAll(".option-row .selector input").forEach((checkbox) => {

src/pages/rants/rants.html

@@ -35,8 +35,7 @@ <h1>Cached Rants</h1>
             </div>
 
             <div class="row">
-                <p><a href="https://rantstats.com" target="_blank">RantStats.com</a></p>
-                <p><a href="https://twitter.com/stevencrader" target="_blank">By Steven Crader</a></p>
+                <button id="open-about">About</button>
             </div>
         </footer>
 

src/pages/rants/rants.ts

@@ -1,5 +1,5 @@
 import { cleanHistory, getAllStreams, getOptions, getStream, removeStream } from "../../cache"
-import { registerTab } from "../../components/events/events"
+import { registerTab, triggerOpenAboutPage } from "../../components/events/events"
 import { displayCachedRants } from "../../components/rants/cached-rants"
 import { parseLevels } from "../../components/rants/levels"
 import { clearDisplayedMessages, setLastSortOrder, updateTotalText } from "../../components/rants/rant"
@@ -262,3 +262,5 @@ document.addEventListener("click", async (event) => {
 })
 
 registerTab()
+
+document.getElementById("open-about").addEventListener("click", triggerOpenAboutPage)

src/types/messages.ts

@@ -8,6 +8,7 @@ export enum Messages {
     OPEN_OPTIONS,
     OPTIONS_SAVED,
     OPEN_RANTS,
+    OPEN_ABOUT,
     PAGE_LOADED,
     PAGE_UNLOADED,
     OPTIONS_SAVED_TAB,

webpack.config.js

@@ -12,6 +12,7 @@ module.exports = (env, argv) => {
             background: "./src/background.ts",
             options: "./src/pages/options/options.ts",
             rants: "./src/pages/rants/rants.ts",
+            about: "./src/pages/about/about.ts",
         },
         output: {
             path: path.resolve(__dirname, "./output"),
@@ -53,6 +54,10 @@ module.exports = (env, argv) => {
                         from: "src/pages/rants/rants.html",
                         to: "pages/rants",
                     },
+                    {
+                        from: "src/pages/about/about.html",
+                        to: "pages/about",
+                    },
                 ],
             }),
         ],