Add SEO | Add apply to server button

spartacus04 · Mar 24, 2024 · a496dfb · a496dfb
1 parent 4462501
commit a496dfb
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -1,38 +1,36 @@
-# create-svelte
+# Jukebox Extended Reborn | Web UI
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+>The webui allows the user to configure the plugin in the browser with ease
 
-## Creating a project
+### Features
 
-If you're seeing this, you've probably already done this step. Congrats!
+- Disc management
+- Resource pack merging
+- Apply discs and resourcepack directly on the server
+- Remote configuration
+- Documentation for both users and developers
+- Desktop app for faster disc management
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+### How to run
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
+You can either open the https://spartacus04.github.io/jext-reborn/ webpage or build it yourself locally.
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+##### Building locally
 
-```bash
-npm run dev
+First git clone the repo:
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```
+git clone https://github.com/spartacus04/jext-reborn
+git checkout gh-pages
 ```
 
-## Building
-
-To create a production version of your app:
+Then install the dependencies (here i'm using bun, you can use any node package manager):
 
-```bash
-npm run build
 ```
+bun install
+```
+
+You can run a live preview by running `bun run dev` or you can build the website by running `bun run build`
 
-You can preview the production build with `npm run preview`.
+You can run a live preview of the desktop app by running `bun run tauri dev` (note: this requires rust), or you can build it by running `bun run tauri build`
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
+    "postbuild": "svelte-sitemap --domain https://spartacus04.github.io/jext-reborn/",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -35,6 +36,7 @@
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
+    "svelte-sitemap": "^2.6.0",
     "tailwindcss": "3.4.1",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",

diff --git a/src/app.html b/src/app.html
@@ -10,6 +10,9 @@
 		<meta name="msapplication-TileColor" content="#da532c">
 		<meta name="theme-color" content="#ffffff">
 		<meta name="viewport" content="width=device-width" />
+		<meta name="robots" content="index, follow">
+    	<meta name="hreflang" content="en-us">
+		<link rel="canonical" href="https://spartacus04.github.io/jext-reborn/" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" data-theme="minecraft">

diff --git a/src/lib/components/OutputModal.svelte b/src/lib/components/OutputModal.svelte
@@ -14,6 +14,7 @@
     import { fade } from 'svelte/transition';
     import default_icon from '$lib/assets/default_icon.png';
 	import ForgeProgressBar from "./ForgeProgressBar.svelte";
+	import { fetchAuthed, isLoggedIn } from "$lib/login";
 
     const modalStore = getModalStore();
 
@@ -91,6 +92,27 @@
         bedrockRp = rp;
     });
 
+    const applyToServer = async () => {
+        try {
+            const javaResponse = await fetchAuthed('discs/apply', {
+                method: 'POST',
+                body: await javaRp?.arrayBuffer()
+            });
+
+            if(javaResponse.status != 200) {
+                throw new Error('Could not apply resourcepack');
+            }
+
+            const bedrockResponse = await fetchAuthed('discs/applygeyser', {
+                method: 'POST',
+                body: await bedrockRp?.arrayBuffer()
+            })
+
+        } catch(e) {
+            alert(e);
+        }
+    }
+
     window.onresize = () => {
         camera.aspect = window.innerWidth / window.innerHeight;
         camera.updateProjectionMatrix();
@@ -108,6 +130,9 @@
             -3px -3px 0 #000,
             3px -3px 0 #000;">Your resourcepack is ready</h1>
             <div class="flex gap-4 flex-col w-[75%] sm:w-[50%]">
+                {#if isLoggedIn()}
+                    <MinecraftButton on:click={applyToServer}>Apply to your JEXT server!</MinecraftButton>
+                {/if}
                 <MinecraftButton on:click={() => saveAs(javaRp, 'resourcepack.zip')}>Download Resource Pack for Minecraft: Java Edition</MinecraftButton>
                 <MinecraftButton enabled={bedrockRp != undefined} on:click={() => saveAs(bedrockRp, 'resourcepack-geysermc.mcpack')}>
                     {#if bedrockRp == undefined}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LoginStore, healthCheck, isLoggedIn, login, logout } from '$lib/login';
+	import { LoginStore, fetchAuthed, healthCheck, isLoggedIn, login, logout } from '$lib/login';
 	import type { PageData } from './$types';
 	import { onMount } from 'svelte';
 	import {
@@ -14,7 +14,7 @@
 	import type { Disc } from '$lib/types';
 	import MinecraftButton from '$lib/components/MinecraftButton.svelte';
 	import ImportResourcePackModal from '$lib/components/ImportResourcePackModal.svelte';
-	import { JextReader } from '$lib/resourcepack/utils';
+	import { JextReader, RPChecker } from '$lib/resourcepack/utils';
 	import { importRP } from '$lib/resourcepack/importer';
 	import CreateDiscModal from '$lib/components/CreateDiscModal.svelte';
 	import { press } from 'svelte-gestures';
@@ -28,7 +28,6 @@
 	export let data: PageData;
 	const modalStore = getModalStore();
 
-
 	onMount(async () => {
 		if (isLoggedIn()) {
 			if (data.server.connect) {
@@ -102,11 +101,36 @@
 			const discsObj = discs ? JSON.parse(discs) : await JextReader(resourcePack);
 
 			await importRP(discsStore, resourcePack, discsObj);
-
-			console.log($discsStore);
 		})();
 	};
 
+	const importFromPlugin = async () => {
+		if(!isLoggedIn()) {
+
+			const connected = await login(modalStore, {
+				ip: data.server.ip,
+				port: data.server.port,
+			})
+
+			if(!connected) return;
+		}
+
+		reload = (async () => {
+			const response = await fetchAuthed('discs/read');
+			
+			const rp = await response.blob();
+			
+			if(await RPChecker(rp) != 'JextRP') {
+				alert('The resourcepack is not a JEXT Resourcepack, please import it manually');
+				return;
+			}
+
+			const discs = await JextReader(rp);
+		
+			await importRP(discsStore, rp, discs);
+		})();
+	}
+
 	const addDisc = async () => {
 		const modalComponent: ModalComponent = { ref: CreateDiscModal };
 
@@ -224,14 +248,22 @@
 		});
 	}
 
-	beforeNavigate(({from, to, cancel}) => {
+	beforeNavigate(({ cancel }) => {
+		if($discsStore.length == 0) return;
+
     	if(!confirm('Leave without saving?')) {
     	  	return cancel();
     	}
+
 		$discsStore = [];
 	});
 </script>
 
+<svelte:head>
+	<title>JEXT Resourcepack Manager</title>
+	<meta name="description" content="Web GUI for the Jext Reborn Minecraft plugin. Here you can manage the resourcepack and music discs with ease!">
+</svelte:head>
+
 <AppShell>
 	<svelte:fragment slot="header">
 		<AppBar
@@ -275,6 +307,8 @@
 				<div class="flex flex-col sm:flex-row items-center gap-2">
 					<MinecraftButton on:click={importPack}>Import a JEXT resource pack</MinecraftButton>
 					<p class="p font-minecraft">or</p>
+					<MinecraftButton on:click={importFromPlugin}>Import from plugin API</MinecraftButton>
+					<p class="p font-minecraft">or</p>
 					<MinecraftButton on:click={addDisc}>Create a new disc</MinecraftButton>
 				</div>
 			</div>

diff --git a/src/routes/config/+page.svelte b/src/routes/config/+page.svelte
@@ -127,6 +127,10 @@
     })
 </script>
 
+<svelte:head>
+	<title>JEXT Config Manager</title>
+	<meta name="description" content="Web GUI for the Jext Reborn Minecraft plugin. Here you can manage the plugin configuration remotely with ease!">
+</svelte:head>
 
 {#await fetchPageSettings()}
     <div class="h-full w-full flex items-center justify-center">

diff --git a/src/routes/documentation/+layout.svelte b/src/routes/documentation/+layout.svelte
@@ -119,7 +119,12 @@
         {/if}
     </button>
 </div> 
-
+
+<svelte:head>
+	<title>JEXT Documentation</title>
+	<meta name="description" content="Web GUI for the Jext Reborn Minecraft plugin. Here you can check the documentation with ease">
+</svelte:head>
+
 <main class="p-5" bind:this={main}>
     <slot />
 </main>
diff --git a/src/routes/documentation/+page.svelte b/src/routes/documentation/+page.svelte
@@ -4,5 +4,4 @@
     export let data: PageData;
 </script>
 
-
 {@html data.props?.html}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,5 +4,4 @@
		export let data: PageData;
		</script>


		{@html data.props?.html}