download pages, dark mode

wrapper-offline · Sep 21, 2024 · 773461d · 773461d
1 parent 40bd8de
commit 773461d
Show file tree

Hide file tree

Showing 9 changed files with 740 additions and 43 deletions.
diff --git a/app.vue b/app.vue
@@ -16,6 +16,15 @@ main {
 	padding: 20px 24px;
 }
 
+.page_heading {
+	border-bottom: 1px solid #2e2d39;
+	text-align: center;
+    padding: 30px 24px;
+}
+.page_heading h1 {
+	margin: 0;
+}
+
 /**
 font importing
 **/
@@ -48,14 +57,39 @@ font importing
 </style>
 
 <script setup lang="ts">
-const route = useRoute()
+
+const route = useRoute();
 useHead({
 	titleTemplate: (title) => {
 		return title ? `${title} - Wrapper: Offline` : "Wrapper: Offline";
 	},
 	meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
 });
 
+function initTheme() {
+	if (
+		window.matchMedia &&
+		window.matchMedia("(prefers-color-scheme: dark)").matches
+	) {
+		setTheme("dark");
+		return;
+	}
+	setTheme("light");
+}
+function setTheme(mode:"light"|"dark") {
+	let isDark = true;
+	if (mode == "light") {
+		isDark = false;
+	}
+	document.documentElement.classList.remove("dark", "light");
+	document.documentElement.classList.add(isDark ?
+		"dark" : "light");
+}
+
+onMounted(() => {
+	initTheme();
+})
+
 </script>
 
 <template>

diff --git a/components/dropdown.vue b/components/dropdown.vue
@@ -0,0 +1,12 @@
+<style lang="scss">
+
+</style>
+
+<script lang="ts">
+
+</script>
+
+<template>
+	<slot name="toggle" ref="toggle"></slot>
+	<slot name="dropdown" ref="dropdown" class="dropdown"></slot>
+</template>
diff --git a/components/error.vue b/components/error.vue
@@ -0,0 +1,5 @@
+<template>
+	<div class="error">
+		<slot></slot>
+	</div>
+</template>
diff --git a/components/header.vue b/components/header.vue
@@ -20,39 +20,90 @@ header {
 	& li {
 		display: inline-block;
 	}
+
+	html.dark & {
+		background: #16161d;
+		border-color: #2e2d39;
+	}
+
+	
+
+
+
+.btn {
+    background: #282637;
+    border-radius: 4px;
+    padding: 6px 10px;
+	display: inline-block;
 }
-html.dark header {
-	background: #16161d;
-	border-color: #2e2d39;
+.btn.primary {
+	background: #7e78a7;
+}
+
+.dropdown_container {
+	position: relative;
+}
+.dropdown {
+	background: #fff;
+    border-radius: 4px;
+	list-style: none;
+    position: absolute;
+    margin-top: 2px;
+	right: 0;
+	padding: 4px;
+    width: 150px;
+	/* display: none; */
+}
+.dropdown li {
+	padding: 4px 10px;
+	width: 100%;
+	line-height: 1.5;
 }
+}
+
 </style>
 
 <template>
 	<header>
 		<NuxtLink to="/">
 			<img id="logo" src="../public/img/logo.svg" alt="Wrapper: Offline"/>
 		</NuxtLink>
-		<ul class="header-buttons">
+		<ul class="header_middle">
 			<li>
 				<a href="https://github.com/Wrapper-Offline/Wrapper-Offline/wiki" class="btn">
 					FAQ
 				</a>
 			</li>
+			<Dropdown>
+				<template #toggle>
+					<a href="https://github.com/Wrapper-Offline/Wrapper-Offline/wiki" class="btn">
+						Subprojects
+					</a>
+				</template>
+				<template #dropdown>
+					<ul>
+						<li>
+							<a href="https://github.com/wrapper-offline/anifire">Anifire</a>
+						</li>
+						<li>
+							<a href="https://github.com/wrapper-offline/mxmizer">MXMizer</a>
+						</li>
+					</ul>
+				</template>
+			</Dropdown>
+			<li>
+				<a href="https://discord.gg/yhGAetN" class="btn">
+					Discord
+				</a>
+			</li>
+			<li>
+				<a href="https://github.com/Wrapper-Offline/Wrapper-Offline/wiki" class="btn">
+					GitHub
+				</a>
+			</li>
+		</ul>
+		<ul class="header_right">
 			<NuxtLink class="btn" to="/downloads/latest">Downloads</NuxtLink>
-			<!-- <li class="dropdown_container">
-				<a class="btn primary dropdown_btn">Downloads</a>
-				<ul class="dropdown">
-					<li>
-						<a href="https://github.com/Wrapper-Offline/Wrapper-Offline/releases/download/v2.0.0/wrapper-offline-win32-x64.zip">Windows</a>
-					</li>
-					<li>
-						<a href="https://github.com/Wrapper-Offline/Wrapper-Offline/releases/download/v2.0.0/Wrapper.Offline-macos-x64.zip">macOS</a>
-					</li>
-					<li>
-						<a href="https://github.com/Wrapper-Offline/Wrapper-Offline/releases/download/v2.0.0/wrapper-offline-linux-x64.zip">Linux</a>
-					</li>
-				</ul>
-			</li> -->
 		</ul>
 	</header>
 </template>
diff --git a/composables/useRelease.ts b/composables/useRelease.ts
@@ -0,0 +1,20 @@
+const AUTHOR = "wrapper-offline";
+const MAIN_REPO = "wrapper-offline";
+
+async function get(tag:string) {
+	const url = `https://api.github.com/repos/${AUTHOR}/${MAIN_REPO}/releases/${
+		tag == "latest" ? "latest" : "tags/" + tag
+	}`;
+	const response = await fetch(url);
+
+	if (!response.ok) {
+		throw new Error(`status:${response.status}`);
+	} else {
+		const release = await response.json();
+		return release;
+	}
+}
+
+export default function useRelease() {
+	return { get };
+};