diff --git a/.gitignore b/.gitignore index 7ca34eb..f9768f0 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,6 @@ nod node_modules package-lock.json .vscode -src/pages/options/index.html -src/pages/popup/popup.html pnpm-lock.yaml -src/pages/options/build \ No newline at end of file +src/pages/options/build +src/pages/popup/build \ No newline at end of file diff --git a/package.json b/package.json index cff5227..d0669a6 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "type": "module", "description": "Redirects YouTube, Twitter, TikTok and more to privacy friendly frontends.", "engines": { - "node": ">=16.13.1", - "npm": ">=8.1.2" + "node": ">=18.20.4", + "npm": ">=10.7.0" }, "scripts": { "start": "web-ext run", @@ -12,7 +12,7 @@ "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix", "build": "web-ext build", "test": "web-ext lint", - "html": "rollup -c" + "html": "rollup -c --config-popup && rollup -c --config-options" }, "repository": { "type": "git", @@ -25,16 +25,7 @@ }, "homepage": "https://libredirect.github.io", "devDependencies": { - "@rollup/plugin-commonjs": "^24.0.0", - "@rollup/plugin-node-resolve": "^15.0.0", - "@rollup/plugin-terser": "^0.4.0", - "prettier": "3.3.3", - "pug-cli": "^1.0.0-alpha6", - "rollup": "^3.15.0", - "rollup-plugin-css-only": "^4.3.0", - "rollup-plugin-svelte": "^7.1.2", - "svelte": "^3.55.0", - "web-ext": "^7.2.0" + "prettier": "3.3.3" }, "webExt": { "sourceDir": "./src/", @@ -46,6 +37,15 @@ } }, "dependencies": { - "svelte-select": "^5.8.3" + "svelte-select": "^5.8.3", + "pug-cli": "^1.0.0-alpha6", + "rollup": "^3.15.0", + "rollup-plugin-css-only": "^4.3.0", + "rollup-plugin-svelte": "^7.1.2", + "svelte": "^3.55.0", + "web-ext": "^7.2.0", + "@rollup/plugin-commonjs": "^24.0.0", + "@rollup/plugin-node-resolve": "^15.0.0", + "@rollup/plugin-terser": "^0.4.0" } } diff --git a/rollup.config.js b/rollup.config.js index 71222de..5a2ce36 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -5,14 +5,23 @@ import resolve from "@rollup/plugin-node-resolve" import css from "rollup-plugin-css-only" const production = !process.env.ROLLUP_WATCH +let input +let output +if (process.argv.includes("--config-options")) { + input = "src/pages/options_src/main.js" + output = "src/pages/options/build/bundle.js" +} else if (process.argv.includes("--config-popup")) { + input = "src/pages/popup_src/main.js" + output = "src/pages/popup/build/bundle.js" +} export default { - input: "src/pages/src/main.js", + input, output: { sourcemap: true, format: "iife", name: "app", - file: "src/pages/options/build/bundle.js", + file: output, }, plugins: [ svelte({ @@ -27,7 +36,7 @@ export default { exportConditions: ["svelte"], }), commonjs(), - // production && terser(), + production && terser(), ], watch: { clearScreen: false, diff --git a/src/manifest.json b/src/manifest.json index cf76324..4f3ad43 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -27,7 +27,7 @@ "browser_action": { "default_title": "__MSG_extensionName__", "browser_style": false, - "default_popup": "pages/popup/popup.html", + "default_popup": "pages/popup/index.html", "default_icon": { "16": "assets/images/libredirect-16.png", "32": "assets/images/libredirect-32.png", diff --git a/src/pages/src/components/Button.svelte b/src/pages/components/Button.svelte similarity index 100% rename from src/pages/src/components/Button.svelte rename to src/pages/components/Button.svelte diff --git a/src/pages/src/components/Checkbox.svelte b/src/pages/components/Checkbox.svelte similarity index 92% rename from src/pages/src/components/Checkbox.svelte rename to src/pages/components/Checkbox.svelte index f524504..dbefd7e 100644 --- a/src/pages/src/components/Checkbox.svelte +++ b/src/pages/components/Checkbox.svelte @@ -3,7 +3,7 @@ export let onChange - + diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte new file mode 100644 index 0000000..39208c3 --- /dev/null +++ b/src/pages/popup_src/Buttons.svelte @@ -0,0 +1,158 @@ + + +{#if redirect} + browser.runtime.sendMessage("redirectTab")}> + + + +{/if} + +{#if switchInstance} + browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}> + + + +{/if} + +{#if redirectToOriginal} + servicesHelper.copyRaw(url)}> + + + + browser.runtime.sendMessage("reverseTab")}> + + + +{/if} + +
+ +{#if currentService} + +
window.open(browser.runtime.getURL(_config.services[currentService].url), "_blank")} + > + + +
+
+ { + _options[currentService].enabled = e.target.checked + options.set(_options) + }} + /> + browser.tabs.update({ url: await servicesHelper.switchInstance(url, currentService) })} + /> +
+ +{/if} + +
+ +{#each _options.popupServices as serviceKey} + {#if currentService !== serviceKey} + +
window.open(browser.runtime.getURL(_config.services[serviceKey].url), "_blank")} + > + + +
+
+ { + console.log(e.target.checked) + _options[serviceKey].enabled = e.target.checked + options.set(_options) + }} + /> + browser.tabs.update({ url: await servicesHelper.switchInstance(url, serviceKey) })} + /> +
+ + {/if} +{/each} + +
+ + window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}> + + + + + diff --git a/src/pages/popup_src/components/PopupButton.svelte b/src/pages/popup_src/components/PopupButton.svelte new file mode 100644 index 0000000..9c4953c --- /dev/null +++ b/src/pages/popup_src/components/PopupButton.svelte @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/pages/popup_src/components/Row.svelte b/src/pages/popup_src/components/Row.svelte new file mode 100644 index 0000000..a4d78f0 --- /dev/null +++ b/src/pages/popup_src/components/Row.svelte @@ -0,0 +1,13 @@ +
+ +
+ + + \ No newline at end of file diff --git a/src/pages/popup_src/components/ServiceIcon.svelte b/src/pages/popup_src/components/ServiceIcon.svelte new file mode 100644 index 0000000..89393cf --- /dev/null +++ b/src/pages/popup_src/components/ServiceIcon.svelte @@ -0,0 +1,40 @@ + + +{#if imageType} + {#if imageType == "svgMono"} + {#if theme == "dark"} + {details.label} + {:else} + {details.label} + {/if} + {:else} + {details.label} + {/if} +{/if} diff --git a/src/pages/popup_src/main.js b/src/pages/popup_src/main.js new file mode 100644 index 0000000..c4012f4 --- /dev/null +++ b/src/pages/popup_src/main.js @@ -0,0 +1,7 @@ +import App from "./App.svelte" + +const app = new App({ + target: document.body, +}) + +export default app diff --git a/src/pages/popup_src/stores.js b/src/pages/popup_src/stores.js new file mode 100644 index 0000000..782f606 --- /dev/null +++ b/src/pages/popup_src/stores.js @@ -0,0 +1,5 @@ +import { writable } from "svelte/store" + +export const options = writable(null) +export const config = writable(null) +export const page = writable("general") diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index ca6f0dc..9e8fedb 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -1,12 +1,3 @@ -body { - --text: #fff; - --bg-main: #121212; - --bg-secondary: #202020; - --active: #fbc117; - --danger: #f04141; - --light-grey: #c3c3c3; -} - @font-face { font-family: "Inter"; src: url("Inter-VariableFont_slnt,wght.ttf"); @@ -21,359 +12,7 @@ body { font-style: normal; } -body { - margin: auto; - padding: 0; - font-family: "Inter"; - font-size: 16px; - background-color: var(--bg-main); - color: var(--text); -} - -body * { - font-family: "Inter"; -} - -body.rtl { - font-family: "Vazirmatn"; -} - -body.rtl * { - font-family: "Vazirmatn"; -} - -div.block input[type="checkbox"] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; -} - -.title { - display: flex; - align-items: center; - text-decoration: none; - width: min-content; - color: var(--text); - transition: 0.1s; -} - -.title:hover { - opacity: 1 !important; -} - -.title:hover a { - color: var(--active); -} - -img, -svg { - margin-right: 10px; - height: 26px; - width: 26px; - color: var(--text); -} - -body.rtl img, -body.rtl svg { - margin-right: 0px; - margin-left: 10px; -} - -input[type="url"], -input[type="text"], -select { - font-weight: bold; - box-sizing: border-box; - border-style: solid; - border-color: #767676; - color: var(--text); - font-size: 16px; - padding: 8px; - background-color: var(--bg-secondary); - border: none; - margin: 0; - max-width: 500px; - border-radius: 3px; -} - -input[type="url"], -input[type="text"] { - width: 400px; - cursor: text; -} - -input:invalid { - color: var(--danger); -} - -.button svg { - height: 18px; - width: 18px; -} - -section.block-option { - width: 750px; - margin: 0 50px; -} - -section.block-option h2 { - margin: 0; -} - -body.option { - display: flex; - padding: 40px; - width: 1160px; -} - -section.links { - display: flex; - flex-wrap: wrap; - flex-direction: column; - width: 350px; - max-height: 1030px; -} - -section.links div { - margin: 10px; - width: max-content; -} - -a { - text-decoration: none; - color: var(--text); - transition: 0.1s; -} - -a:hover { - color: var(--active); -} - -section.links a { - display: flex; - align-items: center; - font-size: 18px; - text-decoration: none; - color: white; - transition: 0.1s; -} - -section.links a:hover, -section.links .selected { - opacity: 1 !important; -} - -section.links .selected a { - color: var(--active); -} - -::placeholder { - color: var(--text); - opacity: 0.7; -} - -hr { - height: 2px; - margin: 0 15px; - background-color: rgb(77, 77, 77); - border: none; -} - -div.block { - padding: 0 15px; - justify-content: space-between; - display: flex; - align-items: center; - margin-top: 10px; - margin-bottom: 10px; -} - -div.block-option { - margin: 30px 0; -} - -div.block-option label { - margin-right: 5px; - width: 80%; - min-width: 150px; - font-size: 18px; -} - -div.block-option h1 { - margin: 0; - font-size: 28px; - color: var(--text); -} - -div.block-option div { - text-align: center; -} - -div.block input[type="checkbox"] { - width: 46px; - height: 24px; - background-color: var(--light-grey); - border-radius: 50px; - transition: 0.4s; - cursor: pointer; -} - -div.block input[type="checkbox"]:checked { - background-color: var(--active); -} - -div.block input[type="checkbox"]::before { - content: ""; - display: inline-block; - width: 18px; - height: 18px; - box-sizing: border-box; - position: relative; - top: 2.5px; - left: 3.5px; - background-color: white; - border-radius: 50%; - transition: 0.3s; -} - -body.rtl div.block input[type="checkbox"]::before { - left: auto; - right: 4px; -} - -div.block input[type="checkbox"]:checked::before { - left: 24px; -} - -body.rtl div.block input[type="checkbox"]:checked::before { - left: auto; - right: 24px; -} - -div.buttons { - display: flex; - margin: 0 15px; - margin-bottom: 15px; - margin-top: 15px; - flex-wrap: wrap; - align-items: center; - justify-content: start; -} - -.button { - color: var(--text); - font-size: 16px; - font-weight: bold; - text-decoration: none; - cursor: pointer; - transition-duration: 0.1s; -} - -.button:hover { - color: var(--active); -} - -.button svg { - width: auto; - height: auto; - padding: 0; - margin-right: 5px; -} - -.button:hover svg { - color: var(--active); -} - -.button-inline { - display: inline-flex; - align-items: center; - margin: 7.5px 0; - background-color: var(--bg-secondary); - border-radius: 5px; - padding: 10px; -} - -.button:active { - transform: translateY(1px); -} - -button svg { - color: var(--text); -} - -div.checklist div { - justify-content: space-between; - margin: 5px 15px; - padding: 10px 0; - word-wrap: break-word; - display: flex; -} - -div.checklist a { - text-decoration: none; - color: var(--text); -} - -div.checklist a:hover { - text-decoration: underline; -} - -div.custom-checklist x a { - color: var(--active); -} - -button.add { - background-color: transparent; - border: none; - padding: 0; - margin: 0; - text-decoration: none; - display: inline-block; - cursor: pointer; -} - -body.light-theme { - --text: black; - --bg-main: white; - --bg-secondary: #e4e4e4; - --active: #fb9817; -} - -body.light-theme select { - border: 1px solid black; -} - -body.light-theme a { - color: black; -} - -body.light-theme a:hover { - color: var(--active); -} - -button { - background-color: transparent; - color: var(--text); - border: none; - text-decoration: none; - display: inline-block; - cursor: pointer; - border-radius: 5px; -} - -body div section { - display: none; -} - -select:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -input:disabled { - opacity: 0.6; - cursor: not-allowed; -} +/* @media (max-width: 1250px) { body.option { @@ -446,4 +85,4 @@ html.mobile section.links { html.mobile section.block-option { width: 100%; -} +} */ \ No newline at end of file