Merge pull request #97 from doki-theme/v74.2-2.0.0-switch

v74.2-2.0.0 [Synapse break. Vanishment, this world!]

Author: Unthrottled

CHANGELOG.md

@@ -1,7 +1,23 @@
 Changelog
 ---
 
-# Unreleased
+# v74.2-2.0.0 [Synapse break. Vanishment, this world!]
+
+**4 New Dark Themes!**
+
+- Decimate errors in the code alongside the Wicked Lord Shingan. Let your inner fantasies go rampant with Rikka Takanashi from: "Love, Chuunibyou, and Other Delusions".
+- It is comfy time! Don't let feature requests stress you out, because you can now code with Nadeshiko from Yuru Camp.
+- A Certain Scientific RailGun go: bzzzzzzt. Zap bugs out of existence with the electromaster Mikoto Misaka.
+- Raccoon + Tanuki = one really cute cinnamon bun. Enjoy your time coding with Raphtalia from: "Rising of the Shield Hero."
+
+![v74 Girls](https://doki.assets.unthrottled.io/misc/v74_girls.png)
+
+### Other Stuff
+
+- Moved the Firefox extension [from doki-theme-web](https://github.com/doki-theme/doki-theme-web) to [doki-theme-firefox](https://github.com/doki-theme/doki-theme-firefox).
+- Removed the `masterExtension` in favor of a `theme` and `newTab` theme specific extension for both Edge & Chrome.
+- Any maintainer now has the ability successfully run a build, no private dependencies now.
+- Updated extension to use centrally defined asset anchoring data.
 
 # 18.1.0 [Opt-In FireFox Features]
 

CONTRIBUTING.md

@@ -5,6 +5,7 @@ Contributing
 
 - [Build Process](#build-process-high-level-overview)
 - [Getting Started](#getting-started)
+- [Dev Notes](#dev-notes)
 - [Editing Themes](#editing-themes)
 - [Creating New Themes](#creating-new-themes)
 
@@ -29,7 +30,6 @@ more familiar with the process as a whole.
 
 - Yarn package manager
 - Node 14
-- Firefox
 - Chrome
 - Microsoft Edge
 
@@ -63,12 +63,22 @@ on Windows, have you considered Linux? Just kidding (mostly), you'll need to run
 ```shell
 git clone https://github.com/doki-theme/doki-master-theme.git masterThemes
 ```
+**Get the Assets**
+
+In the same parent folder as `doki-theme-web` you'll need to clone the `doki-theme-assets` repository, that way the
+build script can copy the correct assets so they can be bundled with the plugin.
+
+```shell
+git clone https://github.com/doki-theme/doki-theme-assets.git
+```
+
 
 Your directory structure should have at least these directories, (there will probably be more, but these are the
 important ones to know).
 
 ```
 your-workspace/
+├─ doki-theme-assets/
 ├─ doki-theme-web/
 │  ├─ masterThemes/
 │  ├─ buildSrc/
@@ -93,6 +103,50 @@ This will install all the required dependencies to run the theme build process.
 
 You should be good to edit and add themes after that!
 
+# Dev Notes
+
+Running the `pluginSource` application is a two step process.
+
+Make sure to have installed `web-ext` globally
+
+```shell
+npm i -g web-ext
+```
+
+Then to run the extension in a browser just run this in `pluginSource` directory:
+
+```shell
+web-ext -s .\dist run --target chromium
+```
+
+To have changes live reload, in the `pluginSource` run dis:
+
+```shell
+npm run watch
+```
+
+Note: Before running
+
+```shell
+yarn buildThemes
+```
+
+You'll need to build the extension in `pluginSource` first.
+
+Make sure that the dependencies are installed
+
+```shell
+npm install
+```
+
+Then you can run
+
+```shell
+npm run build
+```
+
+After that, `yarn buildThemes` should work as expected :) 
+
 ## Theme Editing Process
 
 I have too many themes to maintain manually, so theme creation/maintenance is automated and shared common parts to
@@ -112,25 +166,25 @@ Inside the `buildSrc` directory, there will be 2 directories:
     things.
 
 The `buildSrc` directory houses a `buildDefinitions` script that generates the application specific files necessary for apply
-the Doki Theme Suite. (**NOTE** you can't run `buildThemes` only I can, sorry!)
+the Doki Theme Suite.
 
 ### Web specifics
 
 There are two files of importance. They can be found in `buildSrc/assets/templates`. The files, `*.template`, are
-the templates for common CSS that used for all themes.
+the templates for common information that used for all themes.
 
 These templates are evaluated as part of the theme building process. When you run this command in the `buildSrc`
 directory:
 
 ```shell
-yarn buildDefinitions
+yarn buildThemes
 ```
 
 This will:
 
-- build out the `firefox` and `chrome` manifest templates
-- Create the tab images for the chrome themes
-- Build the `DokiThemeDefinitions.ts` for both the `masterExtension` and Firefox extension.
+- build out the `chrome` manifest templates
+- Create the tab images for the chrome themes, themed plugin icons, and probably more stuff since I've written this.
+- Build the `DokiThemeDefinitions.ts` for both the `pluginSource` extension.
 
 Sometimes a particular theme has something that is just a bit off. Thankfully, there is a way to fix small one-off
 issues.
@@ -140,7 +194,6 @@ defaults provided by the `masterThemes`
 
 Here is an example that overrides the following:
 
-- The background placement
 - Search bar text color
 
 ```json
@@ -150,9 +203,6 @@ Here is an example that overrides the following:
     "theme": {
       "colors": {
         "omnibox_text": "&accentColorDarker&"
-      },
-      "properties": {
-        "ntp_background_alignment": "right"
       }
     }
   },
@@ -215,7 +265,7 @@ yarn generateTemplates
 
 The code defined in the `buildSrc/src` directory is part of the common Doki Theme construction suite. All other plugins
 work the same way, just some details change for each plugin (especially for this plugin). This group of code exposes
-a `buildDefinitions` node script (**NOTE** you can't run `buildThemes` only I can, sorry!).
+a `buildThemes` node script.
 
 This script does all the annoying tedious stuff such as:
 

README.md

@@ -1,113 +1,44 @@
 # Doki Theme Web
-| Google Chrome                                            | Microsoft Edge                                      | Mozilla Firefox                                                   |
-|----------------------------------------------------------|-----------------------------------------------------|-------------------------------------------------------------------|
-| ![Megumin Chrome](./screenshots/backgrounds/megumin.png) | ![Rem Edge](./screenshots/backgrounds/rem_edge.png) | ![Aqua FireFox](./screenshots/backgrounds/firefox_background.png) |
+| Google Chrome                                                   | Microsoft Edge                                          | 
+|-----------------------------------------------------------------|---------------------------------------------------------|
+| ![Yotsuba Chrome](./screenshots/backgrounds/yotsuba_chrome.png) | ![Azuki Edge](./screenshots/backgrounds/azuki_edge.png) |
 
 # Table of Contents
+
+**Note**: Doki Theme for Firefox [has been moved to another repository](https://github.com/doki-theme/doki-theme-firefox).
+
 - [Feature Set](#feature-set)
-  - [Master Extension](#master-extension)
-  - [Firefox Features](#firefox-features)
-    - [General Settings](#firefox-general-settings)
-    - [Theme Settings](#firefox-theme-settings)
-      - [Match Device Option](#match-device-option)
-      - [Druthers Option](#druthers-option)
-      - [Light Only Option](#light-only-option)
-      - [Dark Only Option](#dark-only-option)
-      - [All Option](#all-option)
 - [Installation](#installation)
-  - [Demonstration Overview](#demonstration-overview)
   - [Google Chrome](#google-chrome)
   - [Microsoft Edge](#microsoft-edge)
-  - [Mozilla Firefox](#mozilla-firefox)
-- [Possible Issues](#possible-issues)
-  - [Light Theme Tab Text](#light-theme-tab-text)
 - [Contributions and Issues](#contributions-and-issues)
 
 
 # Feature Set
-## Master Extension
-
-Want to enhance your browsing experience? Then this plugin is for you! This extension will modify 
-the CSS of every webpage you visit to match your current theme choices.
-
-Things that are currently changed:
-- Selection foreground/background
-- Scrollbars
-
-# FireFox Features
-## Firefox: General Settings
-
-***Load Doki Theme page on startup*** allows the plugin to automatically start up the browser with 
-the empty Doki Theme tab, which shows your current theme's character!
-
-_Note:_ Enabling this will overwrite the **Open previous windows and tabs** feature in your 
-Firefox Settings. [See GitHub issue for more info](https://github.com/doki-theme/doki-theme-web/issues/51).
-
-![Firefox settings](./screenshots/firefox_config.png)
-
-***Text Selection*** overrides the default text selection colors to match the current Doki Theme.
 
-**Scrollbar** themes the current tab's scrollbars to match the Doki Theme standard scrollbar color.
+Because Chrome & Edge are jerks, I need to provide 2 extensions: 
+  - One to theme your browser
+  - One to modify the contents of your active tab & Theme your New tab.
 
-## FireFox: Theme Settings
-The Doki Theme for FireFox can synchronize with your device theme settings.
+**Theme Extension**
 
-Never want to see light mode ever again? No problem! The *Options page* now allows you to choose
-between `light`, `dark`, `device`, `druthers`, or `all` *(all themes)*. So take your time and
-browse.
+This makes your browser look and feel like it is part of the Doki Theme.
 
-### Match Device Option
-`device` will load only themes based on your current device theme settings *(either light or dark)*.
-In other words, your device settings determines what characters are present in the popup menu.
+**New Tab Extension**
 
-#### With Random Select *(Dark System Setting)*
-https://user-images.githubusercontent.com/23222943/146148772-c7e236ed-6be6-46b6-ac2d-aa3f1b1326ca.mp4
+This extension overrides your New Tab, and replaces it with a tab whose background has the official Doki Theme asset.
+It also can inject styles into ever tab to theme the: Scroll Bar & Selection text, to match your selected theme.
 
-#### With Mixed Mode *(Light System Setting)*
-https://user-images.githubusercontent.com/23222943/146149663-22ad428e-0cc7-45f8-9700-1fc4c6f616d2.mp4
-
-### Druthers Option
-`druthers` is similar to `device` except the character chosen for the light theme and the
-character chosen for the dark theme will alternate depending on your current device settings.
-
-For clarity, if I choose *Maple* for the **light theme** & *Jahy-sama* for the **dark theme**.
-If the device setting is **currently dark**, then *Jahy-sama's* theme will show. If the device
-setting is *light*, then *Maple's* theme will show.
-
-#### Example
-https://user-images.githubusercontent.com/23222943/146766085-ecb1b416-a678-4cbc-a75c-44c7fb5b32de.mp4
-
-### Dark Only Option
-`dark` will load only dark themes. The popup menu will only load dark themes. This is for all you
-dark theme lovers out there!
-
-### Light Only Option
-`light` will load only light themes. The popup menu will only load light themes. This is for all
-you light theme lovers out there!
+### Configuration
 
-### All Option
-`all` is the default settings of Doki Theme. All themes will be present.
+You can configure the extension by opening the popup menu & clicking:
+- The Doki Theme logo located at the top.
 
 # Installation
-## Demonstration Overview
-![Theme Usage](./screenshots/chrome_usage.gif)
-
-> This process demonstrates local installation. 
-> You should be able to install these themes from the Chrome store soon!
-
-## Demo Steps
-1. Install Emilia Dark's theme.
-1. Use the Master Extension popup to change how CSS is altered github.
-1. See that scroll bar and selection colors are now themed.
-1. Install Rem's theme.
-1. Use the Master Extension options to change how CSS is altered.
-1. Demonstrate that old css alteration is still present.
-1. Refresh
-1. Observe that updated css alterations are now present.
 
 ## Google Chrome
-Ideally, this plugin should be distributed by the **Chrome web store**.
-Until then, you'll have to do a local installation.
+
+https://user-images.githubusercontent.com/15972415/157995434-30b5bdfc-b005-416f-a3fa-4bfdf72bc1be.mp4
 
 ### Steps
 1. Clone this repository
@@ -116,77 +47,28 @@ Until then, you'll have to do a local installation.
     - The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
 1. Enable Developer Mode by clicking the toggle switch next to Developer mode.
 1. Click the LOAD UNPACKED button and select the extension directory.
-    ![Load unpacked](https://developer.chrome.com/static/images/get_started/load_extension.png)
 1. Navigate to the cloned repository
-    1. To install a theme, go to `chromeThemes` and just select the theme directory you want and `open` or confirm.
-    1. To install the master extension, go to `masterExtension` and just select the `installable_extension` directory and `open` or confirm.
+    1. To install a theme, go to `chromeThemes` and just select the theme directory you want.
+    1. Then choose the `newTab` directory and `open` or confirm. Repeat this process for the `theme` extension.
 1. Enjoy!
 
 ## Microsoft Edge
-Ideally, this plugin should be distributed by the **Microsoft Edge Add-on store**.
-Until then, you'll have to do a local installation.
 
-### Prerequisites
-- Edge v83.0.471.0 or above [consider downloading the canary/dev version](https://www.microsoftedgeinsider.com/en-us/download)
+https://user-images.githubusercontent.com/15972415/157995436-98b957e0-1274-4f65-934d-27b857792ec7.mp4
 
 ### Steps
 1. Clone this repository
-1. Open Edge
-1. Open the Extension Management page by navigating to edge://extensions.
+2. Open Edge
+3. Open the Extension Management page by navigating to edge://extensions.
     - The Extension Management page can also be opened by clicking on the Edge menu, hovering over More Tools then selecting Extensions.
-1. Enable Developer Mode by clicking the toggle switch next to Developer mode (1).
-1. Click the LOAD UNPACKED button and select the extension directory (2).
-![Load unpacked](./screenshots/edge_install.png)
-1. Navigate to the cloned repository
-    1. To install a theme, go to `edgeThemes` and just select the theme directory you want and `open` or confirm.
-    1. To install the master extension, go to `masterExtension` and just select the `installable_extension` directory and `open` or confirm.
-1. Navigate to a new empty tab in the browser.
-1. Select the settings in the upper right-hand corner.
-1. Choose `Custom` layout.
-1. Choose `Your own image` and upload your chosen background.
-    - You can find background images in the `chromeThemes` directory [here is Rem's 1920x1080.](https://github.com/doki-theme/doki-theme-web/blob/master/chromeThemes/Rem's%20Theme/images/rem.png)
-![Setting Background](./screenshots/edge_background.gif)
-1. Enjoy!
-
-## Mozilla Firefox
-There are *2* ways to install this extension.
-
-### Prerequisites
-- Mozilla Firefox 95 or above
-
-### Mozilla's Add-on Store 
-You can install the extension from the [FireFox addon marketplace.](https://addons.mozilla.org/en-US/firefox/addon/doki-theme-for-firefox/)
-
-### Manual Installation
-If you don't feel like installing the addon from the store, then follow the below steps.
-
-#### Steps
-1. Clone this repository
-2. Open Firefox
-3. Type in the search bar `about:debugging`
-4. Select *This Firefox* and click *Load Temporary Add-on...*
-5. Choose the *manifest.json* file in the Firefox directory
-6. Now, select the doki-theme icon on the toolbar & Choose a theme to load
-7. And that's it!
-
-***Warning:*** This is a temporary way of installing *Doki Theme*. Everytime the browser is closed, the extension 
-must be reinstalled again using these steps.
-
-### Configuration
-
-You can configure the extension by opening the popup menu & clicking:
-- The Doki Theme logo located at the top.
-
-**OR**
-- The`Show Settings` link located at the bottom.
+4. Enable Developer Mode by clicking the toggle switch next to Developer mode (1).
+5. Click the LOAD UNPACKED button and select the extension directory (2).
+6. Navigate to the cloned repository
+  1. To install a theme, go to `edgeThemes` and just select the theme directory you want.
+  1. Then choose the `newTab` directory and `open` or confirm. Repeat this process for the `theme` extension.
+7. Enjoy!
 
-# Possible Issues
-## Light Theme Tab Text
-- [How to fix](https://github.com/doki-theme/doki-theme-web/wiki/Firefox-light-themes) issue
 
-| before                                                | after                                               |
-|-------------------------------------------------------|-----------------------------------------------------|
-| ![before fix](./screenshots/firefoxIssues/before.png) | ![after fix](./screenshots/firefoxIssues/after.png) |
 
 
 # Contributions and Issues