Dynamically generate themes, and search engines
This commit is contained in:
MotorTruck1221
@@ -2,6 +2,7 @@
|
|||||||
import { Settings } from "@utils/settings.ts";
|
import { Settings } from "@utils/settings.ts";
|
||||||
import { SW } from "@utils/proxy.ts";
|
import { SW } from "@utils/proxy.ts";
|
||||||
const settings = new Settings();
|
const settings = new Settings();
|
||||||
|
window.settings = settings;
|
||||||
const sw = new SW();
|
const sw = new SW();
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
import type { DropdownOptions } from "@utils/types";
|
||||||
|
interface Props {
|
||||||
|
title?: string;
|
||||||
|
id: string;
|
||||||
|
options: DropdownOptions[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, id, options } = Astro.props;
|
||||||
|
---
|
||||||
|
<select id=`dropdownBox-${id}` class="flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
|
||||||
|
{options.map((el) =>
|
||||||
|
<option class="w-full bg-(--accent) rounded-sm p-1" value={el.value}>{el.name}</option>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
@@ -1,8 +1,18 @@
|
|||||||
---
|
---
|
||||||
import "@styles/global.css";
|
import { readdir } from "node:fs";
|
||||||
|
import { join as pathJoin } from "node:path";
|
||||||
|
//import "@styles/global.css";
|
||||||
import { ClientRouter } from "astro:transitions";
|
import { ClientRouter } from "astro:transitions";
|
||||||
import Loader from "@components/Loader.astro";
|
import Loader from "@components/Loader.astro";
|
||||||
import Header from "@components/Header.astro";
|
import Header from "@components/Header.astro";
|
||||||
|
|
||||||
|
import "@styles/global.css";
|
||||||
|
import "@styles/default.css";
|
||||||
|
readdir(pathJoin(import.meta.dirname, '..', 'styles', 'themes'), { encoding: 'utf-8' }, (err, files) => {
|
||||||
|
files.forEach(async (name) => {
|
||||||
|
await import(`../styles/themes/${name.replace('.css', '')}.css`)
|
||||||
|
});
|
||||||
|
});
|
||||||
---
|
---
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|||||||
@@ -1,7 +1,41 @@
|
|||||||
---
|
---
|
||||||
import SettingsLayout from "@layouts/SettingsLayout.astro";
|
import SettingsLayout from "@layouts/SettingsLayout.astro";
|
||||||
|
import Dropdown from "@components/ui/Dropdown.astro";
|
||||||
|
import { SearchEngines, type DropdownOptions } from "@utils/types";
|
||||||
|
const SearchEngineOptions: DropdownOptions[] = [];
|
||||||
|
Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
|
||||||
|
{ name: k, value: SearchEngines[k] }
|
||||||
|
));
|
||||||
---
|
---
|
||||||
<SettingsLayout active="proxy">
|
<SettingsLayout active="proxy">
|
||||||
<div class="h-full mt-14 flex-grow">
|
<div class="h-full mt-14 flex-grow px-12 py-8 flex flex-col">
|
||||||
|
<h1 class="text-4xl font-semibold"> Proxy </h1>
|
||||||
|
<div class="border-b border-(--border) w-full mb-4"></div>
|
||||||
|
<div class="w-full flex-grow">
|
||||||
|
<div>
|
||||||
|
<p> Proxy Switcher </p>
|
||||||
|
<Dropdown id="pSwitcher" options={
|
||||||
|
[
|
||||||
|
{ name: 'gyatt', value: 'skibidi', default: true },
|
||||||
|
{ name: 'ohio', value: 'shit' }
|
||||||
|
]
|
||||||
|
} />
|
||||||
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
<p> Proxy Switcher </p>
|
||||||
|
<Dropdown id="pSwitcher" options={
|
||||||
|
[
|
||||||
|
{ name: 'gyatt', value: 'skibidi', default: true },
|
||||||
|
{ name: 'ohio', value: 'shit' }
|
||||||
|
]
|
||||||
|
} />
|
||||||
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
<p> Search Engine </p>
|
||||||
|
<Dropdown id="sSwitcher" options={SearchEngineOptions} />
|
||||||
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SettingsLayout>
|
</SettingsLayout>
|
||||||
|
|||||||
@@ -1,12 +1,5 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||||
|
|
||||||
/* Themes belong here */
|
|
||||||
@import "./themes/default.css"; /* DO NOT MOVE THIS FROM HERE OTHERWISE, THEMES WILL FAIL TO WORK */
|
|
||||||
@import "./themes/bluelight.css";
|
|
||||||
@import "./themes/cyberpunk.css";
|
|
||||||
@import "./themes/midnight.css";
|
|
||||||
/* End theme imports */
|
|
||||||
|
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
|
|||||||
+13
-1
@@ -4,4 +4,16 @@ interface SettingsProps extends Props {
|
|||||||
active: 'appearance' | 'credits' | 'links' | 'proxy';
|
active: 'appearance' | 'credits' | 'links' | 'proxy';
|
||||||
}
|
}
|
||||||
|
|
||||||
export type { SettingsProps };
|
type DropdownOptions = {
|
||||||
|
name: string;
|
||||||
|
value: string;
|
||||||
|
default?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SearchEngines: Record<string, string> = {
|
||||||
|
DuckDuckGo: "https://duckduckgo.com/?q=%s",
|
||||||
|
Google: "https://google.com/search?q=%s",
|
||||||
|
Bing: "https://bing.com/search?q=%s",
|
||||||
|
};
|
||||||
|
|
||||||
|
export { type SettingsProps, type DropdownOptions, SearchEngines };
|
||||||
|
|||||||
Reference in New Issue
Block a user