From 0ce248c3aae48fc9805fafbe204ff7671d1c8910 Mon Sep 17 00:00:00 2001
From: shedaniel <daniel@shedaniel.me>
Date: Mon, 27 Feb 2023 01:11:12 +0800
Subject: [PATCH] Use params for pages, simplify sidebar css

---
 frontend/src/app/dependencies-data.ts         |  44 +++++-
 frontend/src/app/dependency-store.ts          |  13 ++
 frontend/src/app/mappings-data.ts             |  71 +++++++++-
 frontend/src/app/mappings-store.ts            |  46 +++++--
 frontend/src/components/Block.vue             |   6 +-
 frontend/src/components/LoadingSection.vue    |  33 +++++
 frontend/src/components/PageContent.vue       |  17 +++
 frontend/src/components/PageSidebar.vue       |  19 +++
 frontend/src/components/PageWidthLimiter.vue  |  17 +++
 .../dependencies/DependencyBlock.vue          |  23 ----
 .../dependencies/DependencyFilterBlock.vue    |  20 +--
 .../src/components/dependencies/SubHeader.vue |   8 +-
 .../mappings/MappingsEntryBlock.vue           |   2 +-
 .../mappings/MappingsFilterBlock.vue          |  52 +-------
 .../mappings/MappingsSearchBlock.vue          |  42 +++---
 frontend/src/routes/Dependencies.vue          | 125 +++++++-----------
 frontend/src/routes/Home.vue                  |  30 ++---
 frontend/src/routes/Mappings.vue              |  75 ++++-------
 frontend/src/routes/OpenSourceLicenses.vue    |  65 ++++-----
 19 files changed, 386 insertions(+), 322 deletions(-)
 create mode 100644 frontend/src/components/LoadingSection.vue
 create mode 100644 frontend/src/components/PageContent.vue
 create mode 100644 frontend/src/components/PageSidebar.vue
 create mode 100644 frontend/src/components/PageWidthLimiter.vue
 delete mode 100644 frontend/src/components/dependencies/DependencyBlock.vue

diff --git a/frontend/src/app/dependencies-data.ts b/frontend/src/app/dependencies-data.ts
index 93d5884..1f2c375 100644
--- a/frontend/src/app/dependencies-data.ts
+++ b/frontend/src/app/dependencies-data.ts
@@ -1,6 +1,6 @@
 import {reqVersions} from "./backend"
 import {addAlert} from "./alerts"
-import {useDependencySearchStore} from "./dependency-store"
+import {applicableDependencyVersions, useDependencySearchStore} from "./dependency-store"
 import {DependencyType} from "./dep-format"
 import {defineStore} from "pinia"
 
@@ -36,6 +36,7 @@ export interface DependencySearchData {
 export interface State {
     reqVersionsPromise: Promise<any> | undefined,
     searchData: DependencySearchData,
+    hasFirstLoaded: boolean,
 }
 
 function newState(): State {
@@ -44,20 +45,21 @@ function newState(): State {
         searchData: {
             versions: {},
         },
+        hasFirstLoaded: false,
     }
 }
 
 export const useDependenciesDataStore = defineStore({
     id: "dependencies-data",
-    state: newState
+    state: newState,
 })
 
-export function updateDependencyData() {
+export function updateDependencyData(applyURL: boolean = false) {
     let store = useDependenciesDataStore()
-    if (Object.keys(store.searchData.versions).length == 0 && !store.reqVersionsPromise) {
+    if (applyURL || (Object.keys(store.searchData.versions).length == 0 && !store.reqVersionsPromise)) {
         store.reqVersionsPromise = reqVersions().then(value => {
             store.searchData.versions = value.data
-            ensureDependencyData()
+            ensureDependencyData(applyURL)
         }).catch(reason => {
             addAlert({
                 type: "error",
@@ -69,8 +71,26 @@ export function updateDependencyData() {
     }
 }
 
-export function ensureDependencyData() {
+export function ensureDependencyData(applyURL: boolean = false) {
     let store = useDependenciesDataStore()
+
+    if (applyURL) {
+        const urlParams = new URLSearchParams(window.location.search)
+        let {searchData} = useDependenciesDataStore()
+        let loaders = Object.keys(searchData.versions)
+
+        if (loaders.includes(urlParams.get("loader") ?? "")) {
+            useDependencySearchStore().loader = (urlParams.get("loader") ?? "") as string
+            useDependencySearchStore().version = undefined
+        }
+
+        if (applicableDependencyVersions().includes(urlParams.get("version") ?? "")) {
+            useDependencySearchStore().version = (urlParams.get("version") ?? "") as string
+        }
+
+        useDependenciesDataStore().hasFirstLoaded = true
+    }
+
     let {loader, version, allowSnapshots} = useDependencySearchStore()
     if (!loader) {
         loader = Object.keys(store.searchData.versions)[0]
@@ -86,4 +106,16 @@ export function ensureDependencyData() {
             useDependencySearchStore().version = version
         }
     }
+
+    if (useDependenciesDataStore().hasFirstLoaded) {
+        updateDependenciesWindowUrl()
+    }
+}
+
+export function updateDependenciesWindowUrl() {
+    let {loader, version} = useDependencySearchStore()
+    let url = new URL(window.location.href)
+    url.searchParams.set("loader", loader ?? "")
+    url.searchParams.set("version", version ?? "")
+    window.history.replaceState({}, "", url.toString())
 }
diff --git a/frontend/src/app/dependency-store.ts b/frontend/src/app/dependency-store.ts
index 8c23dee..36255c2 100644
--- a/frontend/src/app/dependency-store.ts
+++ b/frontend/src/app/dependency-store.ts
@@ -1,4 +1,5 @@
 import {defineStore} from "pinia"
+import {useDependenciesDataStore} from "./dependencies-data"
 
 interface State {
     loader?: string,
@@ -19,3 +20,15 @@ export const useDependencySearchStore = defineStore({
     state: newState,
     persist: true,
 })
+
+export function applicableDependencyVersions(): string[] {
+    let {loader, allowSnapshots} = useDependencySearchStore()
+    let {searchData} = useDependenciesDataStore()
+
+    if (!loader) return []
+    let versions = searchData.versions[loader] ?? []
+    if (versions && !allowSnapshots) {
+        versions = versions.filter(entry => entry.stable)
+    }
+    return versions.map(entry => entry.version)
+}
diff --git a/frontend/src/app/mappings-data.ts b/frontend/src/app/mappings-data.ts
index 10da886..41c1893 100644
--- a/frontend/src/app/mappings-data.ts
+++ b/frontend/src/app/mappings-data.ts
@@ -1,7 +1,7 @@
 import {defineStore} from "pinia"
 import {reqNamespaces, reqSearch} from "./backend"
 import {addAlert} from "./alerts"
-import {useMappingsStore} from "./mappings-store"
+import {applicableMappingsVersions, useMappingsStore} from "./mappings-store"
 import axios from "axios"
 import {VersionEntry} from "./dependencies-data"
 
@@ -60,6 +60,7 @@ export interface State {
     infoData: InfoData,
     reqNamespacesPromise: Promise<any> | undefined,
     searchController: AbortController | undefined,
+    hasFirstLoaded: boolean,
 }
 
 function newState(): State {
@@ -74,20 +75,21 @@ function newState(): State {
         },
         reqNamespacesPromise: undefined,
         searchController: undefined,
+        hasFirstLoaded: false,
     }
 }
 
 export const useMappingsDataStore = defineStore({
     id: "mappings-data",
-    state: newState
+    state: newState,
 })
 
-export function updateMappingsData() {
+export function updateMappingsData(applyURL: boolean = false) {
     let store = useMappingsDataStore()
-    if (Object.keys(store.mappingsData.namespaces).length == 0 && !store.reqNamespacesPromise) {
+    if (applyURL || (Object.keys(store.mappingsData.namespaces).length == 0 && !store.reqNamespacesPromise)) {
         store.reqNamespacesPromise = reqNamespaces().then(value => {
             store.mappingsData.namespaces = value.data
-            ensureMappingsData()
+            ensureMappingsData(applyURL)
         }).catch(reason => {
             addAlert({
                 type: "error",
@@ -99,8 +101,34 @@ export function updateMappingsData() {
     }
 }
 
-export function ensureMappingsData() {
+export function ensureMappingsData(applyURL: boolean = false) {
     let store = useMappingsDataStore()
+    if (applyURL) {
+        const urlParams = new URLSearchParams(window.location.search)
+
+        if (store.mappingsData.namespaces.map(namespace => namespace.id).includes(urlParams.get("namespace") ?? "")) {
+            useMappingsStore().namespace = (urlParams.get("namespace") ?? "") as string
+            useMappingsStore().translateAs = undefined
+            useMappingsStore().version = undefined
+        }
+
+        if (store.mappingsData.namespaces.map(namespace => namespace.id).includes(urlParams.get("translateAs") ?? "")
+            && useMappingsStore().namespace && useMappingsStore().namespace !== urlParams.get("translateAs")) {
+            useMappingsStore().translateAs = (urlParams.get("translateAs") ?? "") as string
+        }
+
+        if (applicableMappingsVersions().map(version => version.version).includes(urlParams.get("version") ?? "")) {
+            useMappingsStore().version = (urlParams.get("version") ?? "") as string
+        }
+
+        if (urlParams.has("search")) useMappingsStore().searchText = urlParams.get("search") ?? ""
+        if (urlParams.has("allowClasses")) useMappingsStore().allowClasses = urlParams.get("allowClasses") === "true"
+        if (urlParams.has("allowMethods")) useMappingsStore().allowMethods = urlParams.get("allowMethods") === "true"
+        if (urlParams.has("allowFields")) useMappingsStore().allowFields = urlParams.get("allowFields") === "true"
+        
+        useMappingsDataStore().hasFirstLoaded = true
+    }
+   
     let {namespace, version, allowSnapshots, translateAs} = useMappingsStore()
     if (!namespace) {
         namespace = store.mappingsData.namespaces[0]?.id
@@ -122,6 +150,10 @@ export function ensureMappingsData() {
             useMappingsStore().version = version
         }
     }
+
+    if (useMappingsDataStore().hasFirstLoaded) {
+        updateMappingsWindowUrl()
+    }
 }
 
 export function updateMappingsInfo() {
@@ -149,6 +181,9 @@ export function updateMappingsInfo() {
                 }
                 store.infoData.fuzzy = value.data.fuzzy
                 store.infoData.entries = (value.data.entries as any[]).map(mapEntryToMappingEntry)
+                if (useMappingsDataStore().hasFirstLoaded) {
+                    updateMappingsWindowUrl()
+                }
             }).catch(reason => {
                 if (!axios.isCancel(reason)) {
                     addAlert({
@@ -209,4 +244,26 @@ export function mapEntryToMappingEntry(obj: any): MappingEntry {
         type,
         translatedTo,
     } as MappingEntry
-}
\ No newline at end of file
+}
+
+export function updateMappingsWindowUrl() {
+    let {namespace, version, searchText, allowClasses, allowFields, allowMethods, translateAs} = useMappingsStore()
+    let url = new URL(window.location.href)
+    url.searchParams.set("namespace", namespace ?? "")
+    url.searchParams.set("version", version ?? "")
+    url.searchParams.set("search", searchText ?? "")
+
+    if (!allowClasses) url.searchParams.set("allowClasses", "false")
+    else url.searchParams.delete("allowClasses")
+
+    if (!allowFields) url.searchParams.set("allowFields", "false")
+    else url.searchParams.delete("allowFields")
+
+    if (!allowMethods) url.searchParams.set("allowMethods", "false")
+    else url.searchParams.delete("allowMethods")
+
+    if (translateAs) url.searchParams.set("translateAs", translateAs)
+    else url.searchParams.delete("translateAs")
+
+    window.history.replaceState({}, "", url.toString())
+}
diff --git a/frontend/src/app/mappings-store.ts b/frontend/src/app/mappings-store.ts
index 29c3eb8..cd8a153 100644
--- a/frontend/src/app/mappings-store.ts
+++ b/frontend/src/app/mappings-store.ts
@@ -1,4 +1,5 @@
 import {defineStore} from "pinia"
+import {useMappingsDataStore} from "./mappings-data"
 
 interface State {
     namespace?: string,
@@ -11,6 +12,11 @@ interface State {
     translateAs?: string,
 }
 
+export interface VersionPossible {
+    version: string
+    hasTranslation: boolean
+}
+
 function newState(): State {
     return {
         namespace: undefined,
@@ -27,16 +33,34 @@ function newState(): State {
 export const useMappingsStore = defineStore({
     id: "mappings",
     state: newState,
-    actions: {
-        setNamespace(namespace: string | undefined) {
-            this.namespace = namespace
-        },
-        setVersion(version: string | undefined) {
-            this.version = version
-        },
-        setAllowSnapshots(allowSnapshots: boolean) {
-            this.allowSnapshots = allowSnapshots
-        },
-    },
     persist: true,
 })
+
+export function applicableMappingsVersions(): VersionPossible[] {
+    let {namespace, allowSnapshots, translateAs} = useMappingsStore()
+    let {mappingsData} = useMappingsDataStore()
+    if (!namespace) return []
+    let namespaceObj = mappingsData.namespaces.find(value => value.id === namespace)
+    if (!namespaceObj) return []
+    let versions = namespaceObj.versions
+    if (versions && !allowSnapshots) {
+        versions = versions.filter(entry => entry.stable)
+    }
+    if (versions && translateAs) {
+        let translateAsObj = mappingsData.namespaces.find(value => value.id === translateAs)
+        let retain = translateAsObj?.versions?.map(entry => entry.version) ?? []
+        return versions.map(entry => {
+            return {
+                version: entry.version,
+                hasTranslation: retain.includes(entry.version),
+            }
+        })
+    } else {
+        return versions.map(entry => {
+            return {
+                version: entry.version,
+                hasTranslation: true,
+            }
+        })
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Block.vue b/frontend/src/components/Block.vue
index 33a874f..6f92f3a 100644
--- a/frontend/src/components/Block.vue
+++ b/frontend/src/components/Block.vue
@@ -1,8 +1,6 @@
 <template>
-    <div class="pb-6">
-        <div class="p-5 card bg-base-100 dark:bg-base-dark-200 shadow-lg rounded-lg">
-            <slot></slot>
-        </div>
+    <div class="p-5 bg-base-100 dark:bg-base-dark-200 shadow-lg rounded-lg">
+        <slot></slot>
     </div>
 </template>
 
diff --git a/frontend/src/components/LoadingSection.vue b/frontend/src/components/LoadingSection.vue
new file mode 100644
index 0000000..ccc6e60
--- /dev/null
+++ b/frontend/src/components/LoadingSection.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="text-center  items-center justify-center grid">
+        <div class="flex gap-4 items-center justify-center animate-pulse animate-bounce">
+            <svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                 fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M10 17a3 3 0 1 1 -1.543 -2.623l2.087 -3.754a3 3 0 0 1 1.456 -5.623a3 3 0 0 1 1.457 5.623l2.087 3.754a3 3 0 1 1 -1.538 2.8l-.006 -.177h-4z"></path>
+                <path d="M17 17v.01"></path>
+                <path d="M7 17v.01"></path>
+                <path d="M12 8v.01"></path>
+            </svg>
+            <p class="font-medium text-xl">{{ text }}</p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue"
+
+export default defineComponent({
+    name: "LoadingSection",
+    props: {
+        text: {
+            type: String,
+            default: "Loading...",
+        },
+    }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/PageContent.vue b/frontend/src/components/PageContent.vue
new file mode 100644
index 0000000..e204634
--- /dev/null
+++ b/frontend/src/components/PageContent.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="flex-1 min-w-0">
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue"
+
+export default defineComponent({
+    name: "PageContent",
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/PageSidebar.vue b/frontend/src/components/PageSidebar.vue
new file mode 100644
index 0000000..a20ff2f
--- /dev/null
+++ b/frontend/src/components/PageSidebar.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="sm:w-[var(--sidebar-width)] sm:min-w-[var(--sidebar-width)]">
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue"
+
+export default defineComponent({
+    name: "PageSidebar",
+})
+</script>
+
+<style scoped>
+div {
+    --sidebar-width: 18rem;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/PageWidthLimiter.vue b/frontend/src/components/PageWidthLimiter.vue
new file mode 100644
index 0000000..c64d191
--- /dev/null
+++ b/frontend/src/components/PageWidthLimiter.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="max-w-[80rem] mx-auto w-full px-5 sm:flex sm:gap-6">
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue"
+
+export default defineComponent({
+    name: "PageWidthLimiter",
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/dependencies/DependencyBlock.vue b/frontend/src/components/dependencies/DependencyBlock.vue
deleted file mode 100644
index e1f9796..0000000
--- a/frontend/src/components/dependencies/DependencyBlock.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <Block class="px-5">
-        <Header>{{ title }}</Header>
-        <slot/>
-    </Block>
-</template>
-
-<script lang="ts">
-import Header from "./Header.vue"
-import Block from "../Block.vue"
-import {defineComponent} from "vue"
-
-export default defineComponent({
-    name: "DependencyBlock",
-    components: {Block, Header},
-    props: {
-        title: String,
-    },
-})
-</script>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/dependencies/DependencyFilterBlock.vue b/frontend/src/components/dependencies/DependencyFilterBlock.vue
index 43c4439..5e5efb0 100644
--- a/frontend/src/components/dependencies/DependencyFilterBlock.vue
+++ b/frontend/src/components/dependencies/DependencyFilterBlock.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col">
-        <SubHeader :add-padding="false" class="pb-1"> {{ $t("dependencies.loader") }} </SubHeader>
+        <SubHeader class="pb-1"> {{ $t("dependencies.loader") }} </SubHeader>
 
         <div v-for="l in loaders" :class="[
             loader === l ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
@@ -10,7 +10,7 @@
 
         <div v-if="loader === 'forge'">
             <div class="divider mt-0 mb-0"/>
-            <SubHeader :add-padding="false" class="pb-1"> {{ $t("dependencies.build.system") }} </SubHeader>
+            <SubHeader class="pb-1"> {{ $t("dependencies.build.system") }} </SubHeader>
 
             <div :class="[
             !forgeGradle ? 'opacity-100 font-bold' : 'opacity-50 font-normal',
@@ -26,7 +26,7 @@
         </div>
 
         <div class="divider mt-0 mb-0"/>
-        <SubHeader :add-padding="false" class="pb-1"> {{ $t("dependencies.version") }} </SubHeader>
+        <SubHeader class="pb-1"> {{ $t("dependencies.version") }} </SubHeader>
         <div class="flex flex-col flex-nowrap justify-center h-full whitespace-nowrap pb-2" v-if="loader === 'fabric'">
             <div>
                 <span class="pr-2"> {{ $t("dependencies.version.snapshots") }} </span>
@@ -78,19 +78,7 @@ export default defineComponent({
             type: Object as PropType<DependencySearchData>,
             required: true,
         },
-    },
-    mounted() {
-        const urlParams = new URLSearchParams(window.location.search)
-        if (this.loaders.includes(urlParams.get("loader") ?? "")) {
-            useDependencySearchStore().loader = (urlParams.get("loader") ?? "") as string
-
-            if (this.applicableVersions.includes(urlParams.get("version") ?? "")) {
-                useDependencySearchStore().version = (urlParams.get("version") ?? "") as string
-            }
-
-            history.pushState({}, "", "/dependencies")
-        }
-    },
+    }
 })
 </script>
 
diff --git a/frontend/src/components/dependencies/SubHeader.vue b/frontend/src/components/dependencies/SubHeader.vue
index 952da70..d0d3c27 100644
--- a/frontend/src/components/dependencies/SubHeader.vue
+++ b/frontend/src/components/dependencies/SubHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="font-extrabold text-xl" :class="addPadding ? 'py-2' : ''">
+    <div class="font-extrabold text-xl">
         <slot/>
     </div>
 </template>
@@ -9,12 +9,6 @@ import {defineComponent} from "vue"
 
 export default defineComponent({
     name: "SubHeader",
-    props: {
-        addPadding: {
-            type: Boolean,
-            default: () => true,
-        },
-    },
 })
 </script>
 
diff --git a/frontend/src/components/mappings/MappingsEntryBlock.vue b/frontend/src/components/mappings/MappingsEntryBlock.vue
index 8796962..afdb83f 100644
--- a/frontend/src/components/mappings/MappingsEntryBlock.vue
+++ b/frontend/src/components/mappings/MappingsEntryBlock.vue
@@ -1,6 +1,6 @@
 <template>
     <Block>
-        <SubHeader :addPadding="false">
+        <SubHeader>
             <div class="flex">
                 <div class="flex-1 overflow-x-auto flex flex-nowrap items-center">
                     <Copyable :copy="getDisplayName(entry)">{{ getDisplayName(entry) }}</Copyable>
diff --git a/frontend/src/components/mappings/MappingsFilterBlock.vue b/frontend/src/components/mappings/MappingsFilterBlock.vue
index 934a0a2..362f000 100644
--- a/frontend/src/components/mappings/MappingsFilterBlock.vue
+++ b/frontend/src/components/mappings/MappingsFilterBlock.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col">
-        <SubHeader :add-padding="false" class="pb-1"> {{ $t("mappings.namespace") }} </SubHeader>
+        <SubHeader class="pb-1"> {{ $t("mappings.namespace") }} </SubHeader>
 
         <div v-for="[group, nses] in Object.entries(namespacesGrouped)" class="pb-1">
             <div v-if="group !== 'Others' || expandNamespaces">
@@ -30,7 +30,7 @@
         </div>
 
         <div class="divider mt-0 mb-0"/>
-        <SubHeader :add-padding="false" class="pb-1"> {{ $t("mappings.version") }} </SubHeader>
+        <SubHeader class="pb-1"> {{ $t("mappings.version") }} </SubHeader>
         <div class="flex flex-col flex-nowrap justify-center h-full whitespace-nowrap pb-2">
             <div>
                 <span class="pr-2"> {{ $t("mappings.version.snapshots") }} </span>
@@ -53,7 +53,7 @@
 
         <div class="divider mt-0 mb-0"/>
         <div class="mt-2">
-            <SubHeader :add-padding="false" class="pb-2"> {{ $t("mappings.translation") }} </SubHeader>
+            <SubHeader class="pb-2"> {{ $t("mappings.translation") }} </SubHeader>
             <p class="text-sm font-bold"> {{ $t("mappings.translation.none") }} </p>
             <div :class="[
                 translateAs === undefined ? 'opacity-100 font-bold' : 'opacity-60 hover:font-normal',
@@ -79,16 +79,11 @@
 <script lang="ts">
 import {defineComponent, PropType} from "vue"
 import {mapWritableState} from "pinia"
-import {useMappingsStore} from "../../app/mappings-store"
+import {applicableMappingsVersions, useMappingsStore, VersionPossible} from "../../app/mappings-store"
 import SubHeader from "../dependencies/SubHeader.vue"
 import {namespaceGroups, namespaceLocalizations} from "../../app/backend"
 import {MappingsData, Namespace} from "../../app/mappings-data"
 
-interface VersionPossible {
-    version: string
-    hasTranslation: boolean
-}
-
 export default defineComponent({
     name: "MappingsFilterBlock",
     components: {SubHeader},
@@ -144,31 +139,7 @@ export default defineComponent({
             return this.namespaces[0]
         },
         applicableVersions(): VersionPossible[] {
-            let {namespace, allowSnapshots, translateAs} = useMappingsStore()
-            if (!namespace) return []
-            let namespaceObj = this.data.namespaces.find(value => value.id === namespace)
-            if (!namespaceObj) return []
-            let versions = namespaceObj.versions
-            if (versions && !allowSnapshots) {
-                versions = versions.filter(entry => entry.stable)
-            }
-            if (versions && translateAs) {
-                let translateAsObj = this.data.namespaces.find(value => value.id === translateAs)
-                let retain = translateAsObj?.versions?.map(entry => entry.version) ?? []
-                return versions.map(entry => {
-                    return {
-                        version: entry.version,
-                        hasTranslation: retain.includes(entry.version),
-                    }
-                })
-            } else {
-                return versions.map(entry => {
-                    return {
-                        version: entry.version,
-                        hasTranslation: true,
-                    }
-                })
-            }
+            return applicableMappingsVersions()
         },
     },
     props: {
@@ -177,19 +148,6 @@ export default defineComponent({
             required: true,
         },
     },
-    mounted() {
-        const urlParams = new URLSearchParams(window.location.search)
-        if (this.namespaces.map(namespace => namespace.id).includes(urlParams.get("namespace") ?? "")) {
-            useMappingsStore().namespace = (urlParams.get("namespace") ?? "") as string
-            useMappingsStore().translateAs = undefined
-
-            if (this.applicableVersions.map(version => version.version).includes(urlParams.get("version") ?? "")) {
-                useMappingsStore().version = (urlParams.get("version") ?? "") as string
-            }
-
-            history.pushState({}, "", "/mappings")
-        }
-    },
 })
 </script>
 
diff --git a/frontend/src/components/mappings/MappingsSearchBlock.vue b/frontend/src/components/mappings/MappingsSearchBlock.vue
index c7badd9..696e118 100644
--- a/frontend/src/components/mappings/MappingsSearchBlock.vue
+++ b/frontend/src/components/mappings/MappingsSearchBlock.vue
@@ -1,28 +1,26 @@
 <template>
-    <div class="pb-6">
-        <div class="bg-base-100 dark:bg-base-dark-200 shadow-xl rounded-lg overflow-x-auto">
-            <div class="flex px-2 pt-2">
-                <span class="flex-1 items-center justify-start grid ml-2 mr-3 font-bold whitespace-nowrap"> {{ $t("mappings.search.type") }} </span>
-                <div class="flex">
-                    <MappingsFilterPill :enabled="allowClasses" :text="$t('mappings.search.type.classes')" @click="allowClasses = !allowClasses"/>
-                    <MappingsFilterPill :enabled="allowMethods" :text="$t('mappings.search.type.methods')" @click="allowMethods = !allowMethods"/>
-                    <MappingsFilterPill :enabled="allowFields" :text="$t('mappings.search.type.fields')" @click="allowFields = !allowFields"/>
-                    <div class="border-base-100 dark:border-base-dark-200 border-[0.25rem] border-solid"/>
-                </div>
+    <div class="bg-base-100 dark:bg-base-dark-200 shadow-xl rounded-lg overflow-x-auto">
+        <div class="flex px-2 pt-2">
+            <span class="flex-1 items-center justify-start grid ml-2 mr-3 font-bold whitespace-nowrap"> {{ $t("mappings.search.type") }} </span>
+            <div class="flex">
+                <MappingsFilterPill :enabled="allowClasses" :text="$t('mappings.search.type.classes')" @click="allowClasses = !allowClasses"/>
+                <MappingsFilterPill :enabled="allowMethods" :text="$t('mappings.search.type.methods')" @click="allowMethods = !allowMethods"/>
+                <MappingsFilterPill :enabled="allowFields" :text="$t('mappings.search.type.fields')" @click="allowFields = !allowFields"/>
+                <div class="border-base-100 dark:border-base-dark-200 border-[0.25rem] border-solid"/>
             </div>
-            <div class="flex flex-nowrap items-center">
-                <div class="px-4">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                         stroke-width="2"
-                         stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                        <circle cx="10" cy="10" r="7"></circle>
-                        <line x1="21" y1="21" x2="15" y2="15"></line>
-                    </svg>
-                </div>
-                <input type="text" placeholder="Search..." class="input h-12 bg-transparent rounded-lg flex-1 px-0 text-lg" :value="searchText"
-                       @keyup="searchTimeOut($event)" @keydown.space.prevent autofocus/>
+        </div>
+        <div class="flex flex-nowrap items-center">
+            <div class="px-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                     stroke-width="2"
+                     stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                    <circle cx="10" cy="10" r="7"></circle>
+                    <line x1="21" y1="21" x2="15" y2="15"></line>
+                </svg>
             </div>
+            <input type="text" placeholder="Search..." class="input h-12 bg-transparent rounded-lg flex-1 px-0 text-lg" :value="searchText"
+                   @keyup="searchTimeOut($event)" @keydown.space.prevent autofocus/>
         </div>
     </div>
 </template>
diff --git a/frontend/src/routes/Dependencies.vue b/frontend/src/routes/Dependencies.vue
index fa261ab..729f0da 100644
--- a/frontend/src/routes/Dependencies.vue
+++ b/frontend/src/routes/Dependencies.vue
@@ -1,92 +1,80 @@
 <template>
     <div class="pt-20"/>
-    <div v-if="Object.keys(searchData.versions).length !== 0">
-        <div class="max-w-[calc(62rem+var(--sidebar-width))] mx-auto">
-            <div class="grid-setup">
-                <div class="col-[1] px-5 sm:pr-0 sm:w-[var(--sidebar-width)] sm:min-w-[var(--sidebar-width)] sm:absolute">
-                    <div class="p-5 card bg-base-100 dark:bg-base-dark-200 shadow-xl rounded-lg">
-                        <DependencyFilterBlock :searchData="searchData"/>
-                    </div>
+    <PageWidthLimiter v-if="Object.keys(searchData.versions).length !== 0">
+        <PageSidebar class="flex flex-col gap-y-6">
+            <Block>
+                <DependencyFilterBlock :searchData="searchData"/>
+            </Block>
 
-                    <div class="p-5 mt-6 card bg-base-100 dark:bg-base-dark-200 shadow-xl rounded-lg">
-                        <SubHeader :add-padding="false"> {{ $t("dependencies.toc") }}</SubHeader>
-                        <ol class="list-decimal pl-6 mt-2">
-                            <li v-for="entry in dependencyBlocks">
-                                <a :href="'#dep-' + dependencyBlocks.indexOf(entry)">{{ entry[0] }}</a>
-                            </li>
-                        </ol>
-                    </div>
-                </div>
+            <Block>
+                <SubHeader> {{ $t("dependencies.toc") }}</SubHeader>
+                <ol class="list-decimal pl-6 mt-2">
+                    <li v-for="entry in dependencyBlocks">
+                        <a :href="'#dep-' + dependencyBlocks.indexOf(entry)">{{ entry[0] }}</a>
+                    </li>
+                </ol>
+            </Block>
+        </PageSidebar>
 
-                <div class="col-[2/span_2] min-w-0 pt-6 sm:pt-0">
-                    <DependencyBlock v-for="[blockName, block] in dependencyBlocks" :title="blockName"
-                                     :id="'dep-' + dependencyBlocks.findIndex(entry => entry[0] === blockName)">
-                        <div v-if="block.mavens.length > 0">
-                            <div v-for="maven in block.mavens">
-                                <SubHeader v-if="block.mavens.indexOf(maven) === 0 && !maven.subtitle"> {{ $t("dependencies.maven.repo") }} </SubHeader>
+        <PageContent class="flex flex-col gap-y-6">
+            <Block v-for="[blockName, block] in dependencyBlocks"
+                   :id="'dep-' + dependencyBlocks.findIndex(entry => entry[0] === blockName)">
+                <Header>{{ blockName }}</Header>
+                <div v-if="block.mavens.length > 0">
+                    <div v-for="maven in block.mavens">
+                        <SubHeader v-if="block.mavens.indexOf(maven) === 0 && !maven.subtitle"> {{ $t("dependencies.maven.repo") }}</SubHeader>
 
-                                <CodeBlock :title="maven.subtitle ?? ''">
-                                    <Copyable :copy="formatMaven(maven.url)" stroke-width="1">
-                                        {{ formatMaven(maven.url) }}
-                                    </Copyable>
-                                </CodeBlock>
-                            </div>
-                        </div>
+                        <CodeBlock :title="maven.subtitle ?? ''">
+                            <Copyable :copy="formatMaven(maven.url)" stroke-width="1">
+                                {{ formatMaven(maven.url) }}
+                            </Copyable>
+                        </CodeBlock>
+                    </div>
+                </div>
 
-                        <div v-for="dependency in block.dependencies">
-                            <p class="mt-1 flex gap-x-1">
-                                {{ dependency.name }}
-                                <Copyable class="font-bold" :copy="dependency.version">{{ dependency.version }}</Copyable>
-                            </p>
-                            <CodeBlock :title="undefined">dependencies {<br>
-                                <Copyable :copy="formatDependency(dependency.type, dependency.notation, false)" stroke-width="1" class="pl-8">
-                                        {{ formatDependency(dependency.type, dependency.notation, false) }}
-                                </Copyable>}
-                            </CodeBlock>
-                        </div>
-                    </DependencyBlock>
+                <div v-for="dependency in block.dependencies">
+                    <p class="mt-1 flex gap-x-1">
+                        {{ dependency.name }}
+                        <Copyable class="font-bold" :copy="dependency.version">{{ dependency.version }}</Copyable>
+                    </p>
+                    <CodeBlock :title="undefined">dependencies {<br>
+                        <Copyable :copy="formatDependency(dependency.type, dependency.notation, false)" stroke-width="1" class="pl-8">
+                            {{ formatDependency(dependency.type, dependency.notation, false) }}
+                        </Copyable>
+                        }
+                    </CodeBlock>
                 </div>
-            </div>
-        </div>
-    </div>
+            </Block>
+        </PageContent>
+    </PageWidthLimiter>
 
-    <div v-else class="text-center h-[calc(100vh-56px-24px-5rem)] items-center justify-center grid">
-        <div class="flex gap-4 items-center justify-center animate-pulse animate-bounce">
-            <svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
-                 fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path d="M10 17a3 3 0 1 1 -1.543 -2.623l2.087 -3.754a3 3 0 0 1 1.456 -5.623a3 3 0 0 1 1.457 5.623l2.087 3.754a3 3 0 1 1 -1.538 2.8l-.006 -.177h-4z"></path>
-                <path d="M17 17v.01"></path>
-                <path d="M7 17v.01"></path>
-                <path d="M12 8v.01"></path>
-            </svg>
-            <p class="font-medium text-xl">Loading...</p>
-        </div>
-    </div>
+    <LoadingSection v-else class="h-[calc(100vh-56px-24px-5rem)]"/>
 </template>
 
 <script lang="ts">
-import DependencyBlock from "../components/dependencies/DependencyBlock.vue"
 import DependencyFilterBlock from "../components/dependencies/DependencyFilterBlock.vue"
 import CodeBlock from "../components/dependencies/CodeBlock.vue"
 import SubHeader from "../components/dependencies/SubHeader.vue"
-import {formatBlock, formatDependency, formatMaven, tab} from "../app/dep-format"
+import {formatDependency, formatMaven} from "../app/dep-format"
 import Block from "../components/Block.vue"
 import {defineComponent} from "vue"
 import {useDependencySearchStore} from "../app/dependency-store"
 import {mapState} from "pinia"
 import {DependencyBlockData, ensureDependencyData, updateDependencyData, useDependenciesDataStore} from "../app/dependencies-data"
 import Copyable from "../components/Copyable.vue"
+import Header from "../components/dependencies/Header.vue"
+import PageWidthLimiter from "../components/PageWidthLimiter.vue"
+import PageSidebar from "../components/PageSidebar.vue"
+import PageContent from "../components/PageContent.vue"
+import LoadingSection from "../components/LoadingSection.vue"
 
 export default defineComponent({
     name: "Dependencies",
-    components: {Copyable, Block, CodeBlock, DependencyBlock, DependencyFilterBlock, SubHeader},
+    components: {LoadingSection, PageContent, PageSidebar, PageWidthLimiter, Header, Copyable, Block, CodeBlock, DependencyFilterBlock, SubHeader},
     data() {
         return {
             formatMaven,
             formatDependency,
-            formatBlock,
-            tab,
         }
     },
     computed: {
@@ -122,21 +110,10 @@ export default defineComponent({
         },
     },
     mounted() {
-        updateDependencyData()
-        ensureDependencyData()
+        updateDependencyData(true)
     },
 })
 </script>
 
 <style scoped>
-div {
-    --sidebar-width: 18rem;
-}
-
-@media (min-width: 640px) {
-    .grid-setup {
-        grid-template-columns: auto 0 minmax(0, calc(100% - var(--sidebar-width)));
-        @apply grid grid-flow-col;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/frontend/src/routes/Home.vue b/frontend/src/routes/Home.vue
index 2d7c58e..7938462 100644
--- a/frontend/src/routes/Home.vue
+++ b/frontend/src/routes/Home.vue
@@ -2,11 +2,11 @@
     <div class="flex flex-col">
         <h1 class="pt-40 pb-28 text-center text-6xl font-bold title-home text-white"> {{ $t("home.welcome") }} </h1>
 
-        <div class="max-w-[78rem] mx-auto pl-4 pr-10 flex-1 pt-8">
-            <Header> {{ $t("home.quick.access") }} </Header>
-            <SubHeader class="text-2xl">
-                <a class="flex flex-nowrap gap-2" href="/dependencies">
-                    {{ $t("home.dependencies") }}
+        <PageWidthLimiter class="pt-8">
+            <PageContent>
+                <Header> {{ $t("home.quick.access") }}</Header>
+                <a class="flex flex-nowrap gap-2 pb-2" href="/dependencies">
+                    <SubHeader class="text-2xl">{{ $t("home.dependencies") }}</SubHeader>
                     <div class="flex flex-col">
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler flex-1" width="20" height="20" viewBox="0 0 24 24"
                              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -17,14 +17,10 @@
                         </svg>
                     </div>
                 </a>
-            </SubHeader>
-            <HomeDependencies/>
+                <HomeDependencies/>
 
-            <div class="mt-4"/>
-
-            <SubHeader class="text-2xl">
-                <a class="flex flex-nowrap gap-2" href="/mappings">
-                    {{ $t("home.mappings") }}
+                <a class="flex flex-nowrap gap-2 pt-6 pb-2" href="/mappings">
+                    <SubHeader class="text-2xl">{{ $t("home.mappings") }}</SubHeader>
                     <div class="flex flex-col">
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler flex-1" width="20" height="20" viewBox="0 0 24 24"
                              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -35,9 +31,9 @@
                         </svg>
                     </div>
                 </a>
-            </SubHeader>
-            <HomeMappings/>
-        </div>
+                <HomeMappings/>
+            </PageContent>
+        </PageWidthLimiter>
     </div>
 </template>
 
@@ -49,10 +45,12 @@ import HomeMappings from "../components/home/HomeMappings.vue"
 import Header from "../components/dependencies/Header.vue"
 import SubHeader from "../components/dependencies/SubHeader.vue"
 import Navbar from "../components/Navbar.vue"
+import PageContent from "../components/PageContent.vue"
+import PageWidthLimiter from "../components/PageWidthLimiter.vue"
 
 export default defineComponent({
     name: "NotFound",
-    components: {Navbar, SubHeader, Header, Block, HomeDependencies, HomeMappings},
+    components: {PageWidthLimiter, PageContent, Navbar, SubHeader, Header, Block, HomeDependencies, HomeMappings},
 })
 </script>
 
diff --git a/frontend/src/routes/Mappings.vue b/frontend/src/routes/Mappings.vue
index 4850b53..172574f 100644
--- a/frontend/src/routes/Mappings.vue
+++ b/frontend/src/routes/Mappings.vue
@@ -1,38 +1,24 @@
 <template>
     <div class="pt-20"/>
-    <div v-if="mappingsData.namespaces.length !== 0" class="max-w-[80rem] mx-auto w-full px-5 sm:flex sm:gap-5">
-        <div class="sm:w-[var(--sidebar-width)] sm:min-w-[var(--sidebar-width)]">
-            <div class="p-5 card bg-base-100 dark:bg-base-dark-200 shadow-xl rounded-lg mb-10">
+    <PageWidthLimiter v-if="mappingsData.namespaces.length !== 0">
+        <PageSidebar>
+            <Block>
                 <MappingsFilterBlock :data="mappingsData"/>
-            </div>
-        </div>
-        <div class="flex-1 min-w-0">
+            </Block>
+        </PageSidebar>
+        <PageContent class="flex flex-col gap-y-6">
             <MappingsSearchBlock/>
-            <div v-if="infoData.entries.length > 0">
-                <MappingsEntryBlock v-for="entry in infoData.entries"
-                                    :namespace="mappingsData.namespaces.find(value => value.id === infoData.namespace)"
-                                    :translated-to-namespace="infoData.translateAs ? mappingsData.namespaces.find(value => value.id === infoData.translateAs) : undefined"
-                                    :entry="entry" :version="version" :query="searchText"/>
-            </div>
+            <MappingsEntryBlock v-if="infoData.entries.length > 0" v-for="entry in infoData.entries"
+                                :namespace="mappingsData.namespaces.find(value => value.id === infoData.namespace)"
+                                :translated-to-namespace="infoData.translateAs ? mappingsData.namespaces.find(value => value.id === infoData.translateAs) : undefined"
+                                :entry="entry" :version="version" :query="searchText"/>
             <MappingsSearchPlaceholder v-else
                                        :searching="!!searchController"
                                        :has-query="!!infoData.query"/>
-        </div>
-    </div>
+        </PageContent>
+    </PageWidthLimiter>
 
-    <div v-else class="text-center h-[calc(100vh-56px-24px-5rem)] items-center justify-center grid">
-        <div class="flex gap-4 items-center justify-center animate-pulse animate-bounce">
-            <svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
-                 fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path d="M10 17a3 3 0 1 1 -1.543 -2.623l2.087 -3.754a3 3 0 0 1 1.456 -5.623a3 3 0 0 1 1.457 5.623l2.087 3.754a3 3 0 1 1 -1.538 2.8l-.006 -.177h-4z"></path>
-                <path d="M17 17v.01"></path>
-                <path d="M7 17v.01"></path>
-                <path d="M12 8v.01"></path>
-            </svg>
-            <p class="font-medium text-xl">Loading...</p>
-        </div>
-    </div>
+    <LoadingSection v-else class="h-[calc(100vh-56px-24px-5rem)]"/>
 </template>
 
 <script lang="ts">
@@ -44,10 +30,19 @@ import MappingsEntryBlock from "../components/mappings/MappingsEntryBlock.vue"
 import MappingsFilterBlock from "../components/mappings/MappingsFilterBlock.vue"
 import {ensureMappingsData, updateMappingsData, updateMappingsInfo, useMappingsDataStore} from "../app/mappings-data"
 import MappingsSearchPlaceholder from "../components/mappings/MappingsSearchPlaceholder.vue"
+import PageWidthLimiter from "../components/PageWidthLimiter.vue"
+import PageSidebar from "../components/PageSidebar.vue"
+import PageContent from "../components/PageContent.vue"
+import LoadingSection from "../components/LoadingSection.vue"
+import Block from "../components/Block.vue"
 
 export default defineComponent({
     name: "Mappings",
-    components: {MappingsSearchPlaceholder, MappingsFilterBlock, MappingsSearchBlock, MappingsEntryBlock},
+    components: {
+        Block,
+        LoadingSection,
+        PageContent, PageSidebar, PageWidthLimiter, MappingsSearchPlaceholder, MappingsFilterBlock, MappingsSearchBlock, MappingsEntryBlock,
+    },
     computed: {
         ...mapState(useMappingsDataStore, ["mappingsData", "infoData", "searchController"]),
         ...mapState(useMappingsStore, ["namespace", "version", "allowSnapshots", "searchText", "allowClasses", "allowMethods", "allowFields", "translateAs"]),
@@ -108,32 +103,10 @@ export default defineComponent({
         },
     },
     mounted() {
-        updateMappingsData()
-        ensureMappingsData()
+        updateMappingsData(true)
     },
 })
 </script>
 
 <style scoped>
-div {
-    --sidebar-width: 18rem;
-}
-
-@media (min-width: 640px) {
-    .grid-setup {
-        grid-template-columns: auto 0 minmax(0, calc(100% - var(--sidebar-width)));
-        @apply grid grid-flow-col;
-    }
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.no-scrollbar::-webkit-scrollbar {
-    display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-}
 </style>
\ No newline at end of file
diff --git a/frontend/src/routes/OpenSourceLicenses.vue b/frontend/src/routes/OpenSourceLicenses.vue
index 77220f7..027ad7a 100644
--- a/frontend/src/routes/OpenSourceLicenses.vue
+++ b/frontend/src/routes/OpenSourceLicenses.vue
@@ -1,31 +1,29 @@
 <template>
     <div class="pt-20"/>
-    <div v-if="entries.length !== 0">
-        <div class="max-w-[calc(62rem+var(--sidebar-width))] mx-auto">
-            <div class="grid-setup">
-                <div class="col-[1] px-5 pb-6 sm:pb-0 sm:pr-0 sm:w-[var(--sidebar-width)] sm:min-w-[var(--sidebar-width)] sm:absolute">
-                    <div class="p-5 card bg-base-100 dark:bg-base-dark-200 shadow-xl rounded-lg">
-                        <SubHeader :add-padding="false">Table of Contents</SubHeader>
-                        <ol class="list-decimal pl-6 mt-2">
-                            <li v-for="entry in entries">
-                                <a :href="'#oss-' + entries.indexOf(entry)">{{ entry.name }}</a>
-                            </li>
-                        </ol>
-                    </div>
-                </div>
+    <PageWidthLimiter v-if="entries.length !== 0">
+        <PageSidebar>
+            <Block>
+                <SubHeader>Table of Contents</SubHeader>
+                <ol class="list-decimal pl-6 mt-2">
+                    <li v-for="entry in entries">
+                        <a :href="'#oss-' + entries.indexOf(entry)">{{ entry.name }}</a>
+                    </li>
+                </ol>
+            </Block>
+        </PageSidebar>
 
-                <div class="col-[2/span_2] min-w-0">
-                    <DependencyBlock v-for="entry in entries" :title="entry.name" :id="'oss-' + entries.indexOf(entry)">
-                            <span class="whitespace-pre-line">
-                                {{ entry.license }}
-                            </span>
-                        <div class="divider mt-0 mb-0"/>
-                        <a class="btn btn-ghost btn-sm normal-case" :href="entry.link">More about {{ entry.name }}</a>
-                    </DependencyBlock>
-                </div>
-            </div>
-        </div>
-    </div>
+        <PageContent class="flex flex-col gap-y-6">
+            <Block v-for="entry in entries" :title="entry.name" :id="'oss-' + entries.indexOf(entry)">
+                <Header>{{ entry.name }}</Header>
+                <span class="whitespace-pre-line">
+                    {{ entry.license }}
+                </span>
+                <br/>
+                <br/>
+                <a class="underline" :href="entry.link">More about {{ entry.name }}</a>
+            </Block>
+        </PageContent>
+    </PageWidthLimiter>
 
     <div v-else class="text-center h-[calc(100vh-56px-24px-5rem)] items-center justify-center grid">
         <div class="flex gap-4 items-center justify-center animate-pulse animate-bounce">
@@ -43,12 +41,15 @@
 </template>
 
 <script lang="ts">
-import DependencyBlock from "../components/dependencies/DependencyBlock.vue"
 import {reqOss} from "../app/backend"
 import Block from "../components/Block.vue"
 import SubHeader from "../components/dependencies/SubHeader.vue"
 import {defineComponent} from "vue"
 import {addAlert} from "../app/alerts"
+import PageWidthLimiter from "../components/PageWidthLimiter.vue"
+import PageSidebar from "../components/PageSidebar.vue"
+import PageContent from "../components/PageContent.vue"
+import Header from "../components/dependencies/Header.vue"
 
 interface OssEntry {
     name: string,
@@ -58,7 +59,7 @@ interface OssEntry {
 
 export default defineComponent({
     name: "Dependencies",
-    components: {SubHeader, Block, DependencyBlock},
+    components: {Header, PageContent, PageSidebar, PageWidthLimiter, SubHeader, Block},
     data() {
         return {
             entries: [] as OssEntry[],
@@ -78,14 +79,4 @@ export default defineComponent({
 </script>
 
 <style scoped>
-div {
-    --sidebar-width: 18rem;
-}
-
-@media (min-width: 640px) {
-    .grid-setup {
-        grid-template-columns: auto 0 minmax(0, calc(100% - var(--sidebar-width)));
-        @apply grid grid-flow-col;
-    }
-}
 </style>
\ No newline at end of file