Merge pull request #83 from BetterSEQTA/vite-dev

Change build tool to parcel
This commit is contained in:
Seth Burkart
2024-01-26 14:24:21 +11:00
committed by GitHub
87 changed files with 1587 additions and 8507 deletions
+18 -1
View File
@@ -10,5 +10,22 @@
"ecmaVersion": "latest",
"sourceType": "module" // add this line to allow 'import' and 'export' statements
},
"rules": {}
"rules": {
// allow importing ts extensions
"sort-imports": ["error", {
"ignoreCase": true,
"ignoreDeclarationSort": true,
"ignoreMemberSort": false,
"memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
}],
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"ts": "never",
"tsx": "never"
}
]
}
}
@@ -1,4 +1,4 @@
name: NodeJS with Webpack
name: NodeJS Testing
on:
push:
@@ -12,7 +12,7 @@ jobs:
strategy:
matrix:
node-version: [14.x, 16.x, 18.x]
node-version: [20.x]
steps:
- uses: actions/checkout@v3
@@ -24,9 +24,5 @@ jobs:
- name: Build
run: |
cd interface
npm install
npm run build
cd ..
npm install
npm run build
+4
View File
@@ -2,6 +2,10 @@
node_modules/
package-lock.json
bun.lockb
pnpm-lock.yaml
yarn.lock
.parcel-cache
# Build
package.zip
+5
View File
@@ -0,0 +1,5 @@
{
"plugins": {
"tailwindcss": {}
}
}
+2 -1
View File
@@ -1,4 +1,5 @@
{
"tabWidth": 2,
"useTabs": false
"useTabs": false,
"semi": false
}
+37
View File
@@ -0,0 +1,37 @@
{
"manifest_version": 2,
"name": "BetterSEQTA+",
"version": "3.2.2",
"description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
"icons": {
"32": "../src/resources/icons/icon-32.png",
"48": "../src/resources/icons/icon-48.png",
"64": "../src/resources/icons/icon-64.png"
},
"browser_action": {
"browser_style": true,
"default_popup": "../src/interface/index.html#settings",
"default_icon": {
"32": "../src/resources/icons/icon-32.png",
"48": "../src/resources/icons/icon-48.png",
"64": "../src/resources/icons/icon-64.png"
}
},
"permissions": ["tabs", "notifications", "storage", "https://newsapi.org/"],
"background": {
"scripts": [
"../src/background.ts"
]
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["../src/SEQTA.ts"],
"run_at": "document_start"
}
],
"web_accessible_resources": [
"../src/*",
"../public/*"
]
}
-26
View File
@@ -1,26 +0,0 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'@typescript-eslint/no-explicit-any': 'off',
},
},
],
}
-9
View File
@@ -1,9 +0,0 @@
# Sentry Config File
.env.sentry-build-plugin
# Sentry Config File
.env.sentry-build-plugin
# Sentry Config File
.env.sentry-build-plugin
-40
View File
@@ -1,40 +0,0 @@
{
"name": "popup",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite build --watch",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@sentry/react": "^7.85.0",
"@sentry/vite-plugin": "^2.10.2",
"@types/chrome": "^0.0.246",
"@types/webextension-polyfill": "^0.10.7",
"framer-motion": "^10.16.4",
"react": "^18.2.0",
"react-best-gradient-color-picker": "2.2.24",
"react-dom": "^18.2.0",
"react-router-dom": "latest",
"tinycolor2": "^1.6.0",
"webextension-polyfill": "^0.10.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.29",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
}
-2611
View File
File diff suppressed because it is too large Load Diff
-9
View File
@@ -1,9 +0,0 @@
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
export default {
plugins: [
tailwindcss,
autoprefixer,
],
};
-37
View File
@@ -1,37 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
fontSize: {
"xs": ".65rem",
"sm": ".775rem",
"base": "0.65rem",
"md": "0.65rem",
"lg": "1rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "4rem",
"7xl": "5rem",
"8xl": "6rem",
"9xl": "8rem",
"10xl": "10rem",
"11xl": "12rem",
"12xl": "14rem",
"13xl": "16rem",
"14xl": "18rem",
},
extend: {
fontFamily: {
"IconFamily": "IconFamily"
}
}
},
plugins: [],
};
-24
View File
@@ -1,24 +0,0 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
-2
View File
@@ -1,2 +0,0 @@
declare const _default: import("vite").UserConfig;
export default _default;
-23
View File
@@ -1,23 +0,0 @@
import { sentryVitePlugin } from "@sentry/vite-plugin";
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), sentryVitePlugin({
org: "betterseqta-plus",
project: "betterseqtaplus-popup"
})],
build: {
//outDir: '../../public/popup-dist',
rollupOptions: {
output: {
assetFileNames: 'client/rsc/[ext]/[name][extname]',
chunkFileNames: 'client/rsc/[chunks]/[name].[hash].js',
entryFileNames: 'client/public/client.js'
}
},
sourcemap: true
}
})
+42
View File
@@ -0,0 +1,42 @@
{
"manifest_version": 3,
"name": "BetterSEQTA+",
"version": "3.2.2",
"description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
"icons": {
"32": "src/resources/icons/icon-32.png",
"48": "src/resources/icons/icon-48.png",
"64": "src/resources/icons/icon-64.png"
},
"action": {
"browser_style": true,
"default_popup": "src/interface/index.html#settings",
"default_icon": {
"32": "src/resources/icons/icon-32.png",
"48": "src/resources/icons/icon-48.png",
"64": "src/resources/icons/icon-64.png"
}
},
"permissions": ["tabs", "notifications", "storage"],
"host_permissions": ["https://newsapi.org/", "*://*/*"],
"background": {
"service_worker": "src/background.ts",
"type": "module"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["src/SEQTA.ts"],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": [
"public/*",
"src/*"
],
"matches": ["*://*/*"]
}
]
}
+35 -14
View File
@@ -3,51 +3,72 @@
"version": "3.2.2",
"type": "module",
"description": "BetterSEQTA+ is a browser extension that adds features to SEQTA.",
"main": "webpack.config.js",
"scripts": {
"build": "webpack --config webpack.config.js --mode production && sh ./package.sh",
"dev": "webpack --config webpack.config.js --watch --mode development",
"eslint": "eslint --fix ."
"dev": "parcel watch manifest.json --host localhost --config @parcel/config-webextension --no-hmr --no-content-hash",
"build": "parcel build manifest.json --config @parcel/config-webextension --no-content-hash --no-cache",
"dev-firefox": "parcel watch firefox/manifest.json --host localhost --config @parcel/config-webextension --no-hmr --no-content-hash",
"build-firefox": "parcel build firefox/manifest.json --config @parcel/config-webextension --no-content-hash --no-cache",
"eslint": "eslint --fix .",
"package": "7z a -tzip extension.zip ./build/*"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.8.1",
"dompurify": "^3.0.5",
"@parcel/config-webextension": "^2.11.0",
"@parcel/optimizer-data-url": "^2.11.0",
"@parcel/transformer-inline-string": "^2.11.0",
"@parcel/transformer-sass": "2.11.0",
"assert": "^2.0.0",
"browserify-zlib": "^0.2.0",
"crypto-browserify": "^3.12.0",
"eslint": "^8.48.0",
"eslint-config-prettier": "^9.0.0",
"eslint-webpack-plugin": "^4.0.1",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.7.6",
"prettier": "3.0.2",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"parcel": "^2.10.3",
"path-browserify": "^1.0.0",
"prettier": "^3.2.2",
"process": "^0.11.10",
"querystring-es3": "^0.2.1",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"stream-browserify": "^3.0.0",
"stream-http": "^3.1.0",
"style-loader": "^3.3.3",
"webextension-polyfill": "^0.10.0",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"
"tty-browserify": "^0.0.1",
"url": "^0.11.0",
"util": "^0.12.3",
"yarn": "^1.22.21"
},
"dependencies": {
"@sentry/browser": "^7.85.0",
"@sentry/react": "^7.88.0",
"@sentry/webpack-plugin": "^2.10.2",
"@types/color": "^3.0.4",
"@types/dompurify": "^3.0.5",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.18",
"@types/sortablejs": "^1.15.7",
"@types/webextension-polyfill": "^0.10.7",
"autoprefixer": "^10.4.15",
"color": "^4.2.3",
"dompurify": "^3.0.8",
"framer-motion": "^10.16.16",
"install": "^0.13.0",
"localforage": "^1.10.0",
"motion": "^10.16.4",
"npm": "^10.1.0",
"postcss": "^8.4.29",
"react": "^18.2.0",
"react-best-gradient-color-picker": "^2.3.5",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.0",
"sortablejs": "^1.15.0",
"tailwindcss": "^3.3.3",
"ts-loader": "^9.5.1",
"typescript": "^5.2.2"
"typescript": "^5.2.2",
"webextension-polyfill": "^0.10.0"
}
}
-2715
View File
File diff suppressed because it is too large Load Diff
-6
View File
@@ -1,6 +0,0 @@
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
],
};
-14
View File
@@ -1,14 +0,0 @@
.hide {
opacity: 0;
pointer-events: none;
}
.outside-container {
margin: 0;
overflow: hidden;
position: absolute;
right: 10px;
top: 80px;
height: 590px;
z-index: 20;
}
-78
View File
@@ -1,78 +0,0 @@
{
"manifest_version": 3,
"name": "BetterSEQTA+",
"version": "3.2.2",
"description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
"icons": {
"32": "icons/icon-32.png",
"48": "icons/icon-48.png",
"64": "icons/icon-64.png"
},
"action": {
"browser_style": true,
"default_popup": "interface/index.html#settings",
"default_icon": {
"32": "icons/icon-32.png",
"48": "icons/icon-48.png",
"64": "icons/icon-64.png"
}
},
"permissions": ["tabs", "notifications", "storage"],
"host_permissions": ["https://newsapi.org/", "*://*/*"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["browser-polyfill.js", "purify.min.js", "SEQTA.js"],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": ["icons/*"],
"matches": ["*://*/*"]
},
{
"resources": ["fonts/*"],
"matches": ["*://*/*"]
},
{
"resources": ["images/*"],
"matches": ["*://*/*"]
},
{
"resources": ["css/*"],
"matches": ["*://*/*"]
},
{
"resources": ["popup/*"],
"matches": ["*://*/*"]
},
{
"resources": ["client.js"],
"matches": ["*://*/*"]
},
{
"resources": ["index.css"],
"matches": ["*://*/*"]
},
{
"resources": ["interface/*"],
"matches": ["*://*/*"]
},
{
"resources": ["client/*"],
"matches": ["*://*/*"]
},
{
"resources": ["resources/*"],
"matches": ["*://*/*"]
},
{
"resources": ["backgrounds/*"],
"matches": ["*://*/*"]
}
]
}
-1389
View File
File diff suppressed because it is too large Load Diff
+1270 -1279
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -1,4 +1,5 @@
import * as Sentry from "@sentry/browser";
import browser from 'webextension-polyfill'
browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
if (telemetry.telemetry === true) {
@@ -20,7 +21,6 @@ browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
}
})
import browser from 'webextension-polyfill'
import { onError } from './seqta/utils/onError';
export const openDB = () => {
return new Promise((resolve, reject) => {
-1
View File
@@ -1 +0,0 @@
import './iframe.scss';
+79 -65
View File
@@ -15,85 +15,99 @@
* along with EvenBetterSEQTA. If not, see <https://www.gnu.org/licenses/>.
*/
html, p, div, span {
color: white !important;
text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
body {
background: transparent;
}
body {
background-color: transparent !important;
}
.dark {
p,
div,
span {
color: white !important;
text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
}
blockquote.forward > .preamble {
color: rgba(255, 255, 255, 0.7) !important;
}
body {
background-color: transparent !important;
}
blockquote.forward > .preamble > .date > .value, blockquote.forward > .preamble > .sender > .value {
color: rgba(255, 255, 255, 0.7) !important;
}
blockquote.forward > .preamble {
color: rgba(255, 255, 255, 0.7) !important;
blockquote.forward > .preamble > .date > .label, blockquote.forward > .preamble > .sender > .label {
color: rgba(255, 255, 255, 0.7) !important;
}
> p,
div,
span {
background: transparent !important;
}
table th {
background-color: #161616;
}
> .date > .value,
blockquote.forward > .preamble > .sender > .value {
color: rgba(255, 255, 255, 0.7) !important;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
transition: 1s;
}
> .date > .label,
blockquote.forward > .preamble > .sender > .label {
color: rgba(255, 255, 255, 0.7) !important;
}
}
::-webkit-scrollbar-track {
background-color: transparent;
}
[bgcolor="#ffffff"] > * {
color: black !important;
text-shadow: none !important;
}
::-webkit-scrollbar-thumb {
border-radius: 10rem !important;
}
table th {
background-color: #161616;
}
::-webkit-scrollbar-corner {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
transition: 1s;
}
.forward {
border-radius: 1rem;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
.preamble {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
::-webkit-scrollbar-thumb {
border-radius: 10rem !important;
}
html, p, div, span {
color: white !important;
background-color: #232323;
}
body {
background-color: #232323;
}
blockquote.forward > .preamble {
color: rgba(255, 255, 255, 0.7) !important;
}
::-webkit-scrollbar-corner {
background: none;
}
blockquote.forward > .preamble > .date > .value,
blockquote.forward > .preamble > .sender > .value {
color: rgba(255, 255, 255, 0.7) !important;
}
blockquote.forward > .preamble > .date > .label,
blockquote.forward > .preamble > .sender > .label {
color: rgba(255, 255, 255, 0.7) !important;
}
.forward {
border-radius: 1rem;
}
#backgroundTable > * {
background-color: #161616;
border: none;
}
.preamble {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.userHTML>div>a:not(.resource) {
color: #06b4fc;
text-decoration: underline;
transition: text-shadow 0.5s;
blockquote.forward > .preamble {
color: rgba(255, 255, 255, 0.7) !important;
}
blockquote.forward > .preamble > .date > .value,
blockquote.forward > .preamble > .sender > .value {
color: rgba(255, 255, 255, 0.7) !important;
}
blockquote.forward > .preamble > .date > .label,
blockquote.forward > .preamble > .sender > .label {
color: rgba(255, 255, 255, 0.7) !important;
}
#backgroundTable > * {
background-color: #161616;
border: none;
}
.userHTML > div > a:not(.resource) {
color: #06b4fc;
text-decoration: underline;
transition: text-shadow 0.5s;
}
}
+15 -10
View File
@@ -1,16 +1,19 @@
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,600');
@import "./injected/popup.scss";
@import "./injected/sidebar-animation.scss";
@import "./injected/theme.scss";
@import "./injected/transparency.scss";
@import './injected/popup.scss';
@import './injected/sidebar-animation.scss';
@import './injected/theme.scss';
@import './injected/transparency.scss';
:root {
background: var(--better-main) !important;
--navy: #1a1a1a !important;
--auto-background: var(--better-pale, var(--background-secondary)) !important;
}
.hidden {
display: none;
}
body,
html {
font-family: Rubik, sans-serif !important;
@@ -167,9 +170,6 @@ ul.magicDelete > li.deleting {
background: transparent !important;
color: var(--text-color) !important;
}
.tooltip {
z-index: 5 !important;
}
#menu li,
#menu section {
@@ -200,6 +200,7 @@ ul.magicDelete > li.deleting {
}
#menu {
width: 270px;
z-index: 19;
background: var(--better-main) !important;
color: var(--text-color);
border-right: none;
@@ -321,7 +322,7 @@ ol:has(.MessageList__avatar___2wxyb svg) {
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
}
[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --betterseqta-logo: url(chrome-extension://boikofabjaholheekefimfojfncpjfib/icons/betterseqta-light-full.png); --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
{
top: 18% !important;
}
@@ -534,6 +535,7 @@ div > ol:has(.uiFileHandlerWrapper) {
height: 69.5px;
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.assessmentsWrapper .message {
display: none;
}
@@ -681,6 +683,7 @@ div > ol:has(.uiFileHandlerWrapper) {
left: 0;
width: 100%;
}
#title::before {
background-image: var(--betterseqta-logo);
background-position: left;
@@ -1674,7 +1677,7 @@ li.MessageList__unread___3imtO {
content: "";
width: 14px;
height: 12px;
background-image: url("../../public/icons/betterseqta-light-outline.png");
background-image: url("../resources/icons/betterseqta-light-outline.png");
display: inline-block;
background-size: 18px 18px;
color: #fff;
@@ -2528,6 +2531,8 @@ li.MessageList__unread___3imtO {
}
.tooltip {
display: inline-block;
background: transparent;
z-index: 5 !important;
width: 28px;
background: none;
box-shadow: none;
+5
View File
@@ -0,0 +1,5 @@
declare module '*.mp4';
declare module '*.woff';
declare module '*.scss';
declare module '*.png';
declare module '*.html';

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Before

Width:  |  Height:  |  Size: 591 KiB

After

Width:  |  Height:  |  Size: 591 KiB

@@ -11,7 +11,7 @@ export default function Switch(props: SwitchProps) {
return (
<div
className="flex w-14 p-1 cursor-pointer rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
data-isOn={props.state}
data-ison={props.state}
onClick={toggleSwitch}
>
<motion.div
@@ -6,7 +6,7 @@ interface ThemeList {
export const downloadTheme = async (themeName: string, themeURL: string) => {
// send message to the background script
const response = await browser.runtime.sendMessage({
await browser.runtime.sendMessage({
type: 'currentTab',
info: 'DownloadTheme',
body: {
@@ -14,13 +14,11 @@ export const downloadTheme = async (themeName: string, themeURL: string) => {
themeURL: themeURL
}
});
console.log("Response: ", response);
}
export const setTheme = async (themeName: string, themeURL: string) => {
// send message to the background script
const response = await browser.runtime.sendMessage({
await browser.runtime.sendMessage({
type: 'currentTab',
info: 'SetTheme',
body: {
@@ -28,8 +26,6 @@ export const setTheme = async (themeName: string, themeURL: string) => {
themeURL: themeURL
}
});
console.log("Response: ", response);
}
export const listThemes = async () => {
@@ -39,9 +35,6 @@ export const listThemes = async () => {
info: 'ListThemes'
});
// response.themes is an array of strings that are identical to the theme names that we loop over. Use this list to see which ones are downloaded and which ones need to see the download icon.
console.log("Response: ", response);
return response;
}
@@ -2,13 +2,12 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body class="">
<div id="ExtensionPopup"></div>
<script type="module" src="/src/main.tsx"></script>
<script type="module" src="./main.tsx"></script>
</body>
</html>
@@ -5,7 +5,10 @@ import './index.css';
import { SettingsContextProvider } from './SettingsContext.js';
import SettingsPage from './SettingsPage.js';
import browser from 'webextension-polyfill';
import font from 'url:../resources/fonts/IconFamily.woff'
import * as Sentry from "@sentry/react";
browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
if (telemetry.telemetry === true)
Sentry.init({
@@ -24,14 +27,13 @@ browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});
})
const fontURL = browser.runtime.getURL("fonts/IconFamily.woff");
const style = document.createElement("style");
style.setAttribute("type", "text/css");
style.innerHTML = `
@font-face {
font-family: 'IconFamily';
src: url('${fontURL}') format('woff');
src: url('${font}') format('woff');
font-weight: normal;
font-style: normal;
}`;

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before

Width:  |  Height:  |  Size: 518 B

After

Width:  |  Height:  |  Size: 518 B

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

Before

Width:  |  Height:  |  Size: 877 B

After

Width:  |  Height:  |  Size: 877 B

+2 -2
View File
@@ -1,4 +1,4 @@
import browser from 'webextension-polyfill'
import backgroundPage from 'url:./background/background.html'
export async function appendBackgroundToUI() {
console.log('Starting appendBackgroundToUI...');
@@ -10,6 +10,6 @@ export async function appendBackgroundToUI() {
background.id = 'background';
background.classList.add('imageBackground');
background.setAttribute('excludeDarkCheck', 'true');
background.src = browser.runtime.getURL('backgrounds/background.html');
background.src = backgroundPage;
parent!.appendChild(background);
}
+3
View File
@@ -54,18 +54,21 @@ export default function loading() {
}
.big-circle {
margin: -88px;
will-change: transform;
animation-timing-function: ease;
animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
}
.small-circle {
margin: -66px;
will-change: transform;
animation-timing-function: ease;
animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
}
.outer-circle {
margin: -108px;
will-change: transform;
animation-direction: alternate-reverse;
animation: spinback 1s linear infinite;
-moz-animation: spinback 1s linear infinite;
@@ -19,14 +19,11 @@
object-fit: cover;
}
</style>
<script type="application/javascript" src="/browser-polyfill.js"></script>
</head>
<body>
<!-- Container for the media -->
<div id="media-container">
<!-- Will be populated dynamically -->
</div>
<div id="media-container"></div>
<script src="background.js"></script>
<script src="background.ts"></script>
</body>
</html>
@@ -1,23 +1,33 @@
// Open the database
const openDB = () => {
interface Data {
blob: Blob;
type: 'image' | 'video';
}
interface DatabaseEventTarget extends EventTarget {
result: IDBDatabase;
}
interface DatabaseEvent extends Event {
target: DatabaseEventTarget;
}
const openDB = (): Promise<IDBDatabase> => {
return new Promise((resolve, reject) => {
const request = indexedDB.open('MyDatabase', 1);
request.onerror = () => reject(request.error);
request.onsuccess = () => resolve(request.result);
request.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore('backgrounds', { keyPath: 'id' });
request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
// @ts-expect-error
event?.target?.result.createObjectStore('backgrounds', { keyPath: 'id' });
};
});
};
// Modified Read Data from IndexedDB
const readData = async () => {
const readData = async (): Promise<Data | null> => {
const selectedBackground = localStorage.getItem('selectedBackground');
if (!selectedBackground) {
console.log('No selected background in local storage.');
return null;
}
@@ -26,20 +36,20 @@ const readData = async () => {
const store = tx.objectStore('backgrounds');
const request = store.get(selectedBackground);
return await new Promise((resolve, reject) => {
request.onsuccess = () => resolve(request.result);
return new Promise((resolve, reject) => {
request.onsuccess = () => resolve(request.result as Data);
request.onerror = () => reject(request.error);
});
};
const updateBackground = async () => {
const updateBackground = async (): Promise<void> => {
try {
const data = await readData();
if (!data) {
console.log('No data found in IndexedDB.');
const container = document.getElementById('media-container');
const currentMedia = container.querySelector('.current-media');
const currentMedia = container?.querySelector('.current-media');
if (currentMedia) {
currentMedia.remove();
}
@@ -64,19 +74,19 @@ const updateBackground = async () => {
}
// Mark the old element for removal
const oldElement = container.querySelector('.current-media');
const oldElement = container?.querySelector('.current-media');
if (oldElement) {
oldElement.classList.remove('current-media');
oldElement.classList.add('old-media');
}
// Add the new element and mark it as current
newElement.classList.add('current-media');
container.appendChild(newElement);
newElement?.classList.add('current-media');
container?.appendChild(newElement as Node);
// Delay removal of old element
setTimeout(() => {
const oldMedia = container.querySelector('.old-media');
const oldMedia = container?.querySelector('.old-media');
if (oldMedia) {
oldMedia.remove();
}
@@ -87,13 +97,12 @@ const updateBackground = async () => {
};
// Main function to run on page load
const main = async () => {
await updateBackground(); // Initial background update
const main = async (): Promise<void> => {
await updateBackground();
// Listen for changes to local storage
window.addEventListener('storage', async (event) => {
if (event.key === 'selectedBackground') {
await updateBackground(); // Update background if 'selectedBackground' changes
}
});
};
+11 -9
View File
@@ -1,9 +1,12 @@
import browser from 'webextension-polyfill'
import { GetThresholdOfColor, GetCSSElement } from '../../../SEQTA';
import { GetThresholdOfColor } from '../../../SEQTA';
import { lightenAndPaleColor } from './lightenAndPaleColor';
import ColorLuminance from './ColorLuminance';
import { SettingsState } from '../../../types/storage';
import darkLogo from 'url:../../../resources/icons/betterseqta-light-full.png';
import lightLogo from 'url:../../../resources/icons/betterseqta-dark-full.png';
// Helper functions
const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value);
const getChromeURL = (path: any) => browser.runtime.getURL(path);
@@ -36,10 +39,10 @@ export function updateAllColors(storedSetting: any, newColor = null) {
let modeProps = {};
if (DarkMode !== null) {
modeProps = DarkMode ? {
'--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-light-full.png')})`
'--betterseqta-logo': `url(${darkLogo})`
} : {
'--better-pale': lightenAndPaleColor(selectedColor),
'--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-dark-full.png')})`
'--betterseqta-logo': `url(${lightLogo})`
};
if (DarkMode) {
@@ -67,7 +70,6 @@ export function updateAllColors(storedSetting: any, newColor = null) {
}
let alliframes = document.getElementsByTagName('iframe');
let fileref = GetCSSElement('css/iframe.css');
for (let i = 0; i < alliframes.length; i++) {
const element = alliframes[i];
@@ -76,11 +78,11 @@ export function updateAllColors(storedSetting: any, newColor = null) {
continue;
}
(element.contentDocument!.documentElement.childNodes[1] as HTMLIFrameElement).style.color =
DarkMode ? 'white' : 'black';
element.contentDocument!.documentElement.firstChild!.appendChild(
fileref,
);
if (DarkMode) {
element.contentDocument?.body.classList.add('dark');
} else {
element.contentDocument?.body.classList.remove('dark');
}
}
}
-6
View File
@@ -1,6 +0,0 @@
const GetPrefs = await fetch(`${location.origin}/seqta/student/load/prefs?`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ asArray: true, request: 'userPrefs' })
})
export const response = await GetPrefs.json()
-1
View File
@@ -45,7 +45,6 @@ export default class StorageListener {
case 'DarkMode':
this.darkMode = changes.DarkMode.newValue;
console.log(this.darkMode);
break;
case 'customshortcuts':
+26 -11
View File
@@ -1,20 +1,35 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
"./src/**/*.{js,ts,jsx,tsx,html}",
],
darkMode: 'class',
darkMode: "class",
theme: {
fontSize: {
'xs': '.65rem',
'sm': '.775rem',
'base': '0.65rem',
'md': '0.65rem',
'lg': '1rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
"xs": ".65rem",
"sm": ".775rem",
"base": "0.65rem",
"md": "0.65rem",
"lg": "1rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "4rem",
"7xl": "5rem",
"8xl": "6rem",
"9xl": "8rem",
"10xl": "10rem",
"11xl": "12rem",
"12xl": "14rem",
"13xl": "16rem",
"14xl": "18rem",
},
extend: {
fontFamily: {
"IconFamily": "IconFamily"
}
}
},
plugins: [],
-87
View File
@@ -1,87 +0,0 @@
import path from 'path';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
export default {
target: 'web',
node: {
__dirname: true
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
devtool: 'source-map',
entry: {
SEQTA: './src/SEQTA.ts',
background: './src/background.ts',
'css/documentload': './src/css/documentload.scss',
'css/iframe': './src/css/iframe.scss',
'css/injected': './src/css/injected.scss',
},
output: {
filename: (pathData) => {
const name = pathData.chunk.name.replace('css-', '');
return name.includes('css') ? `css/${name}.js` : `${name}.js`;
},
// eslint-disable-next-line no-undef
path: path.resolve('build'),
publicPath: '',
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader'
]
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'src/[path][name][ext]',
},
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins: [
new ESLintPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'public', to: '.' },
{ from: 'src/css/preview', to: 'css/preview' },
{ from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js' },
{ from: 'interface/dist/client', to: 'client' },
{ from: 'interface/dist/index.html', to: 'interface/index.html' }
],
}),
sentryWebpackPlugin({
authToken: process.env.SENTRY_AUTH_TOKEN,
org: "betterseqta-plus",
project: "betterseqtaplus-main",
}),
],
};