Update deps and apply Poppins font

backend/build.gradle

@@ -1,6 +1,6 @@
 plugins {
-    id "org.jetbrains.kotlin.jvm" version "1.6.21"
-    id "org.jetbrains.kotlin.plugin.serialization" version "1.6.21"
+    id "org.jetbrains.kotlin.jvm" version "1.7.10"
+    id "org.jetbrains.kotlin.plugin.serialization" version "1.7.10"
     id "com.github.johnrengelman.shadow" version "7.0.0"
 }
 
@@ -28,17 +28,18 @@ configurations {
 }
 
 dependencies {
-    implementation("me.shedaniel:linkie-core:1.0.103")
-    implementation("io.ktor:ktor-server-cors:2.0.1")
-    implementation("io.ktor:ktor-server-content-negotiation:2.0.1")
-    implementation("io.ktor:ktor-server-status-pages:2.0.1")
-    implementation("io.ktor:ktor-client-content-negotiation:2.0.1")
-    implementation("io.ktor:ktor-serialization-kotlinx-json:2.0.1")
+    implementation("me.shedaniel:linkie-core:1.0.105")
+    implementation('io.ktor:ktor-server-cors:2.1.0')
+    implementation('io.ktor:ktor-server-content-negotiation:2.1.0')
+    implementation('io.ktor:ktor-server-status-pages:2.1.0')
+    implementation('io.ktor:ktor-client-content-negotiation:2.1.0')
+    implementation('io.ktor:ktor-serialization-kotlinx-json:2.1.0')
     implementation("io.github.pdvrieze.xmlutil:serialization-jvm:0.84.2")
-    implementation 'io.ktor:ktor-server-core-jvm:2.0.2'
-    implementation 'io.ktor:ktor-server-netty-jvm:2.0.2'
-    implementation 'io.ktor:ktor-client-java-jvm:2.0.2'
-    implementation 'io.ktor:ktor-client-core-jvm:2.0.2'
+    implementation 'io.ktor:ktor-server-core-jvm:2.1.0'
+    implementation 'io.ktor:ktor-server-netty-jvm:2.1.0'
+    implementation 'io.ktor:ktor-client-java-jvm:2.1.0'
+    implementation 'io.ktor:ktor-client-core-jvm:2.1.0'
+    implementation 'com.github.Baw-Appie:ktor-rate-limit:1cf36fe'
 }
 
 jar {

frontend/package.json

@@ -8,26 +8,28 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.0",
     "copy-to-clipboard": "^3.3.2",
-    "daisyui": "^2.15.0",
+    "daisyui": "^2.24.0",
+    "highlight.js": "^11.6.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.0-rc.10",
-    "pinia-plugin-persistedstate": "^1.6.1",
+    "pinia": "^2.0.20",
+    "pinia-plugin-persistedstate": "^1.6.3",
     "tailwind-gradient-mask-image": "^1.0.0",
     "vue": "^3.2.25",
     "vue-axios": "^3.4.1"
   },
   "devDependencies": {
-    "@types/node": "^17.0.35",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.14",
-    "tailwindcss": "^3.0.24",
-    "typescript": "^4.5.4",
+    "@types/node": "^17.0.45",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
+    "typescript": "^4.7.4",
     "typescript-tslint-plugin": "^1.0.2",
-    "vite": "^2.9.9",
-    "vite-plugin-mkcert": "^1.6.4",
-    "vite-plugin-pwa": "^0.12.0",
-    "vue-tsc": "^0.34.7"
+    "vite": "^3.0.9",
+    "vite-plugin-mkcert": "^1.9.0",
+    "vite-plugin-pwa": "^0.12.3",
+    "vue-tsc": "^0.34.17"
   }
 }

frontend/src/App.vue

@@ -11,7 +11,7 @@ import {mapActions, mapState} from "pinia"
 
 import Footer from "./components/Footer.vue"
 import Navbar from "./components/Navbar.vue"
-import {useNotificationStore} from "./app/notification-store";
+import {useNotificationStore} from "./app/notification-store"
 
 const routes: { [route: string]: any; } = {
     "/": Home,
@@ -109,6 +109,8 @@ export default defineComponent({
 </template>
 
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 body {
     @apply bg-base-200
 }

frontend/src/app/backend.ts

@@ -30,6 +30,16 @@ export function reqSearch<T = any>(namespace: string, version: string, query: st
     })
 }
 
+export function reqSource<T = any>(namespace: string, version: string, className: string): Promise<AxiosResponse<T>> {
+    return HTTP.get(`/api/source`, {
+        params: {
+            namespace,
+            'class': className,
+            version,
+        },
+    })
+}
+
 export function reqOss<T = any>(): Promise<AxiosResponse<T>> {
     return HTTP.get(`/api/oss`)
 }

frontend/src/components/mappings/MappingsEntryBlock.vue

@@ -1,15 +1,27 @@
 <template>
     <Block>
         <SubHeader :addPadding="false">
-            <span class="hover:underline cursor-pointer" @click="copyAs(getDisplayName(entry))">{{ getDisplayName(entry) }}</span>
-            <span v-if="hasTranslation" class="hover:underline cursor-pointer" @click="copyAs(getDisplayName(entry.translatedTo))"> > {{
-                    getDisplayName(entry.translatedTo)
-                }}</span>
-            <div class="badge badge-sm ml-2" :class="{
+            <div class="flex">
+                <div class="flex-1">
+                    <span class="hover:underline cursor-pointer" @click="copyAs(getDisplayName(entry))">{{ getDisplayName(entry) }}</span>
+                    <span v-if="hasTranslation" class="hover:underline cursor-pointer" @click="copyAs(getDisplayName(entry.translatedTo))">
+                    > {{ getDisplayName(entry.translatedTo) }}</span>
+                    <div class="badge badge-sm ml-2" :class="{
                     'badge-primary': entry.type === 'class',
                     'badge-secondary': entry.type === 'field',
                     'badge-accent': entry.type === 'method',
-                }">{{ entry.type }}
+                    }">{{ entry.type }}
+                    </div>
+                </div>
+                <div class="cursor-pointer" v-if="namespace?.supportsSource" @click="requestSource()">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code" 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>
+                        <polyline points="7 8 3 12 7 16"></polyline>
+                        <polyline points="17 8 21 12 17 16"></polyline>
+                        <line x1="14" y1="4" x2="10" y2="20"></line>
+                    </svg>
+                </div>
             </div>
         </SubHeader>
         <div class="text-sm breadcrumbs" v-if="breadcrumbs.length > 1">
@@ -46,6 +58,14 @@
                 <span class="hover:underline cursor-pointer" @click="copyAs(awText(entry.translatedTo))">{{ awText(entry.translatedTo) }}</span>
             </EntryDetails>
         </div>
+
+        <div :class="['rounded-lg bg-base-300 p-3 text-sm mt-2 mb-1 h-[20rem]', source === '' ? 'animate-pulse' : '']" v-if="expandSource">
+            <pre class="pl-2 pb-1 overflow-x-auto h-[20rem]"><code
+                    v-for="[index, line] of Object.entries(source.split('\n'))"
+                    :class="['block break-all whitespace-pre', (line + '').includes((entry.type === 'class' ? 'class ' : ' ') + onlyClass(getOptimumName(entry)) + (entry.type === 'method' ? '(' : '')) ? 'font-bold' : '']"
+                    id="code-block"
+                    :ref="'source-line-' + index">{{ line === "" ? " " : line }}</code></pre>
+        </div>
     </Block>
 </template>
 
@@ -57,6 +77,9 @@ import Header from "../dependencies/Header.vue"
 import SubHeader from "../dependencies/SubHeader.vue"
 import EntryDetails from "./EntryDetails.vue"
 import {copyAs} from "../../app/copy";
+import CodeBlock from "../dependencies/CodeBlock.vue";
+import {reqSource} from "../../app/backend";
+import {addAlert} from "../../app/alerts";
 
 function getOptimumName(entry: MappingEntry): string {
     return entry.named || entry.intermediary || ""
@@ -231,11 +254,15 @@ function beautifyFieldType(type: string) {
 
 export default defineComponent({
     name: "MappingsEntryBlock",
-    components: {EntryDetails, SubHeader, Header, Block},
+    components: {CodeBlock, EntryDetails, SubHeader, Header, Block},
     data() {
         return {
             getDisplayName,
             copyAs,
+            expandSource: false,
+            source: "",
+            getOptimumName,
+            onlyClass,
         }
     },
     computed: {
@@ -246,6 +273,18 @@ export default defineComponent({
             return this.entry.translatedTo !== undefined && this.translatedToNamespace !== undefined
         },
     },
+    watch: {
+        source() {
+            this.$nextTick(() => {
+                for (let entry of Object.entries(this.source.split('\n'))) {
+                    if ((entry[1] + "").includes((this.entry.type === "class" ? "class " : " ") + onlyClass(getOptimumName(this.entry)) + (this.entry.type === "method" ? "(" : ""))) {
+                        this.$refs['source-line-' + entry[0]][0].scrollIntoView({behavior: 'smooth', block: 'center'})
+                        break
+                    }
+                }
+            });
+        },
+    },
     methods: {
         mixinTarget(entry: MappingEntry) {
             return `L${getOptimumOwnerName(entry)};${getOptimumName(entry)}${entry.type === "field" ? ":" : ""}${getOptimumDesc(entry)}`
@@ -269,6 +308,21 @@ export default defineComponent({
             let desc = getOptimumDesc(entry)
             return beautifyFieldType(desc)
         },
+        requestSource() {
+            this.expandSource = !this.expandSource
+            this.source = ''
+
+            if (this.expandSource) {
+                reqSource(this.namespace.id, this.version, this.entry.ownerNamed ?? this.entry.ownerIntermediary ?? this.entry.named ?? this.entry.intermediary).then(value => {
+                    this.source = value.data
+                }).catch(reason => {
+                    addAlert({
+                        type: "error",
+                        message: `Failed to fetch source: ${reason.message}`,
+                    })
+                })
+            }
+        },
     },
     props: {
         namespace: {
@@ -277,6 +331,9 @@ export default defineComponent({
         translatedToNamespace: {
             type: Object as PropType<Namespace>,
         },
+        version: {
+            type: String,
+        },
         entry: {
             type: Object as PropType<MappingEntry>,
             required: true,

frontend/src/main.ts

@@ -4,6 +4,12 @@ import VueAxios from "vue-axios"
 import App from "./App.vue"
 import "./index.css"
 import "nprogress/nprogress.css"
+import hljs from 'highlight.js/lib/core';
+import groovy from 'highlight.js/lib/languages/groovy';
+import gradle from 'highlight.js/lib/languages/gradle';
+import java from 'highlight.js/lib/languages/java';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import hljsVuePlugin from "@highlightjs/vue-plugin";
 // @ts-ignore
 import NProgress from "nprogress"
 import {HTTP} from "./app/backend"
@@ -34,6 +40,11 @@ HTTP.interceptors.response.use(response => {
     return Promise.reject(error)
 })
 
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('groovy', groovy);
+hljs.registerLanguage('kotlin', kotlin);
+hljs.registerLanguage('gradle', gradle);
+
 let pinia = createPinia()
 
 pinia.use(persistedState)
@@ -42,4 +53,6 @@ app.use(pinia)
 app.use(VueAxios, axios)
 app.provide("axios", app.config.globalProperties.axios)
 
+app.use(hljsVuePlugin)
+
 app.mount("#app")

frontend/src/routes/Dependencies.vue

@@ -36,7 +36,7 @@
                         <div v-for="dependency in block.dependencies">
                             <p class="mt-1">
                                 {{ dependency.name }}
-                                <span class="hover:underline cursor-pointer" @click="copyAs(dependency.version)">{{ dependency.version }}</span>
+                                <span class="hover:underline cursor-pointer font-bold" @click="copyAs(dependency.version)">{{ dependency.version }}</span>
                             </p>
                             <CodeBlock :title="undefined">dependencies {<br>
                                 <span>{{ "    " }}</span>

frontend/src/routes/Mappings.vue

@@ -10,9 +10,21 @@
             </div>
             <div class="col-[2/span_2] min-w-0">
                 <MappingsSearchBlock/>
-                <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"/>
+                <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"/>
+                </div>
+                <div v-else class="m-10 flex flex-col items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ban m-4" 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="12" cy="12" r="9"></circle>
+                        <line x1="5.7" y1="5.7" x2="18.3" y2="18.3"></line>
+                    </svg>
+                    <p class="font-bold">No Results</p>
+                    <p v-if="!infoData.query">Try searching something?</p>
+                    <p v-else>Did you make a mistake in your search?</p>
+                </div>
             </div>
         </div>
     </div>
@@ -37,6 +49,7 @@ export interface Namespace {
     supportsAW: boolean,
     supportsMixin: boolean,
     supportsFieldDescription: boolean,
+    supportsSource?: boolean,
 }
 
 export interface MappingsData {

frontend/tailwind.config.js

@@ -5,6 +5,9 @@ module.exports = {
     ],
     theme: {
         extend: {},
+        fontFamily: {
+            "sans": ["Poppins"],
+        },
     },
     plugins: [
         require("daisyui"),