Merge pull request #191 from koloml/feature/build-extension-for-local-philomena

Added build option to build it against local Philomena

.vite/pack-extension.js

@@ -69,6 +69,12 @@ export async function packExtension(settings) {
   })
 
   switch (process.env.SITE) {
+    case 'localhost':
+      manifest.replaceHostTo('localhost');
+      manifest.replaceBooruNameWith('Philomena');
+      manifest.setGeckoIdentifier('philomena-tagging-assistant@thecore.city');
+      break;
+
     case 'derpibooru':
       manifest.replaceHostTo([
         'derpibooru.org',

manifest.json

@@ -30,8 +30,7 @@
             ],
             "js": [
                 "src/content/deps/amd.ts",
-                "src/content/user-details.ts",
-                "src/content/fun.ts"
+                "src/content/user-details.ts"
             ]
         },
         {

package.json

@@ -7,6 +7,7 @@
         "build": "npm run build:popup && npm run build:extension",
         "build:derpibooru": "cross-env SITE=derpibooru npm run build",
         "build:tantabus": "cross-env SITE=tantabus npm run build",
+        "build:local": "cross-env SITE=localhost npm run build",
         "build:popup": "vite build",
         "build:extension": "node build-extension.js",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

src/content/fun.ts

@@ -1,34 +0,0 @@
-import roundFeatherFontUrl from "../assets/icon/fonts/roundfeather-regular-1.001.ttf?url";
-import FunPreferences from "$lib/extension/preferences/FunPreferences";
-
-const preferences = new FunPreferences();
-const url = (browser ?? chrome).runtime.getURL(roundFeatherFontUrl);
-const avaliFontDefinitionStyleTag = document.createElement('style');
-
-// language=CSS
-avaliFontDefinitionStyleTag.textContent = `
-    @font-face {
-      font-family: Roundfeather;
-      url('${url}') format('truetype');
-    }
-    
-    :root {
-      --font-family-base: Roundfeather, verdana, arial, helvetica, sans-serif !important;
-      --font-family-monospace: Roundfeather, "Droid Sans Mono", monospace !important;
-    }
-  `;
-
-function refreshAvaliFont(isFontEnabled: boolean) {
-  if (!isFontEnabled) {
-    avaliFontDefinitionStyleTag.remove();
-    return;
-  }
-
-  document.head.append(avaliFontDefinitionStyleTag);
-}
-
-preferences.subscribe(settings => {
-  refreshAvaliFont(settings.useAvaliFont ?? false);
-});
-
-preferences.useAvaliFont.get().then(refreshAvaliFont);

src/lib/extension/preferences/FunPreferences.ts

@@ -1,16 +0,0 @@
-import CacheablePreferences, { PreferenceField, type WithFields } from "$lib/extension/base/CacheablePreferences";
-
-interface FunPreferencesFields {
-  useAvaliFont: boolean;
-}
-
-export default class FunPreferences extends CacheablePreferences<FunPreferencesFields> implements WithFields<FunPreferencesFields> {
-  constructor() {
-    super('fun');
-  }
-
-  readonly useAvaliFont = new PreferenceField(this, {
-    field: "useAvaliFont",
-    defaultValue: false,
-  });
-}

src/routes/preferences/+page.svelte

@@ -11,7 +11,6 @@
   <hr>
   <MenuItem href="/preferences/tags">Tagging</MenuItem>
   <MenuItem href="/preferences/misc">Misc & Tools</MenuItem>
-  <MenuItem href="/preferences/fun">Fun</MenuItem>
   <hr>
   <MenuItem href="/preferences/debug">Debug</MenuItem>
 </Menu>

src/routes/preferences/fun/+page.svelte

@@ -1,31 +0,0 @@
-<script>
-  import Menu from "$components/ui/menu/Menu.svelte";
-  import MenuItem from "$components/ui/menu/MenuItem.svelte";
-  import FormContainer from "$components/ui/forms/FormContainer.svelte";
-  import FormControl from "$components/ui/forms/FormControl.svelte";
-  import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
-  import { useAvaliFont } from "$stores/preferences/fun";
-  import Notice from "$components/ui/Notice.svelte";
-</script>
-
-<Menu>
-  <MenuItem href="/preferences" icon="arrow-left">Back</MenuItem>
-  <hr>
-</Menu>
-<Notice level="warning">
-  These features are not to mean be really useful. Just a little bit of fun.
-</Notice>
-<Menu>
-  <hr>
-</Menu>
-<FormContainer>
-  <FormControl>
-    <CheckboxField bind:checked={$useAvaliFont}>
-      <strong>Display everything in Avali Scratch</strong><br>
-      <small>
-        This will apply the special font across the whole website, making it unusable unless you can read Avali Scratch
-        alphabet. Unfortunately, text will flicker on every page load.
-      </small>
-    </CheckboxField>
-  </FormControl>
-</FormContainer>

src/stores/preferences/fun.ts

@@ -1,11 +0,0 @@
-import FunPreferences from "$lib/extension/preferences/FunPreferences";
-import { PreferenceSync } from "$lib/store-sync";
-import { writable } from "svelte/store";
-
-export const useAvaliFont = writable<boolean>(false);
-
-const preferences = new FunPreferences();
-
-void PreferenceSync.for(preferences)
-  .connect(preferences.useAvaliFont, useAvaliFont, {updateToStore: Boolean})
-  .startSync()