Skip to content

Commit 1efa280

Browse files
KumzyKumzy
committed
wip: work on plugin detail with loading readme (not working) + add local files for stats
1 parent de0cfd8 commit 1efa280

15 files changed

Lines changed: 2082 additions & 173 deletions

File tree

‎app/components/OgImage/Plugin.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script lang="ts" setup>
2+
import type { Plugin } from '~/types'
3+
4+
function pluginImage(icon: string = '') {
5+
if (!icon) return
6+
7+
if (/^https?:\/\//.test(icon)) return icon
8+
9+
return `https://raw.githubusercontent.com/litestar-org/plugins/main/icons/${icon}`
10+
}
11+
12+
defineProps<{
13+
plugin: Plugin
14+
headline?: string
15+
title: string
16+
description?: string
17+
}>()
18+
</script>
19+
20+
<template>
21+
<div class="size-full flex flex-col justify-center items-center bg-[#020420] py-8">
22+
<img
23+
src="data:image/jpeg;base64,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ALCVKAVBbCVBQlQWwVCWwVKlQWwVKlQW5qVBpm2VBpmlQlsFQVCaZGkFQVBUFQVBUVUhUFQtSGpBUBC1AQWCkFQpAItgEKAQCLYAihAgCgEAKIAACFQoAZBQAAAFCAAVKALCUCwVKgFQUFQlBUJUpUFS2VBbBUJUpUFualQVBpCVBUFQW5GkFQVlWpBUFQVBUBC1BUBBULZBUBC2AQWCiFgpBYAi2AIWChABFBKQAAAogAAGQlVKAAALBQgAFSgAFQlS0sFQUIsFSlQlSiwVCUFQVBbCVBbmlQVCW5GkFQVBUFRVQlQVBULUFQWQVBUFgpBUFkFQtgCFQohUAhULYAhYKAAQAoCAAAItQABAEELFVBQAAALBQAgCwVBQAiwUAFQVKiwVBUoCVBUFsFQlQaQVBUFuRpmpUVUFQVBUFQVBUFQVAQtQVBUABBULYhUFQAohUABBUKAIVACiFQAAAogAAAABBmrFVCUAAAAFQVKAAAgFQUACwVCVKALBUFSosFQVBRVRJUVUFQVKVBUFQVCVBUFQVBULUFQWAQVBUFQWCkFQVAIVC1BYAAhYAKAQAAAAoBAAAAIWAAGaFALBUJUFAAAAsFQVKAAgACwVBUoBUJUFAFLBUFQVKgCwVBUFQVBUFAAAAAAQVBUFQWAAIVC1BYABBUFQWACkFQVAAAACiFgAAAAAEKAsAZBoAAABUFQlSgAAAAFQUAAAIABUFQUACwVCVBUFQUAAFQVBUFQVBUFQVBUFQVBYAAABBUFQVCgACFQVAAACgCFQVAAAAAAAQWCgAABkGgAAAAACwVKAgAAAAAFQVBUoAACAALBUFQVKAAAAAALBUFQVBUFQVAAFBAAUAAQVBYAAAAKAIVAAAAAAAAIVKAsURYAAAABgGgAAAAAAAAFQVCUAAAAAAAACwVBUFQUAUEAgUAAAsFQVAsFQVBYAAAAAAAAKQVBUFQVBUAAAAAAAAAAi1AAAAAAAAAAGQUAFBAUAAEAAAAAVFVBUoAACAAAAAAAALBUFQVBUFQVBUFQVBUFQVBUFQVBUFQWAAAAAAAAAAAACggKQVAAAAAAAAAAAAAGQaAAAAAAAAAAAAAAAAALBYFQUAAAAAAIAAAAAAAAAAAAAAAAAAAItSgIAQtQUABBUAAAAAAAAAAAAAAAAAAZBoAAAAAAAAAAAAAAAAAAAAAAABUFQVABUFQUhUoAQVBUFSgBBUFQVBUFgAAAAAAAAAABQAAAAQAAAFAAAAAAAAABgGgAAAAAAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGQaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkGgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZBoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBAUAAAAAAAAAAAAGAaAAAAAAABQQAAAAAAAAFBAUAEBQAAQFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkGgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZBqgAAAAAAAAAAAAAAAgAAKAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAoIAAAAAACgAAgAAAKAAAAAAGYGgKAAAAAAAAAAAAAAAFAAgAAKAAAAAAEABQICgAAAAAAAAAAAAAAAAAgAAAAKAAAAACAAAAAAoAAICgBmBoAAAAAAAAAAAAAACggAAAAAAAAAAAAKAAACAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICgAABmBqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmBqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAAAAYBsAAAAAAAAEAAAABQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZBoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGQaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmBqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQQAAAFABAUAEAAAAAAAAAAABQQAAAFABAAAUGAbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf/EAB4QAQACAwADAQEAAAAAAAAAABEAEAEgYDBwgFDA/9oACAEBAAECAPx8aK4yrjKqqqqqqqqqqqqqqqq5yrnK5yszpnisaKqqqqqqqqqqqqqqqqqqqucqrMxzxToqqqqqqqqqqqqqqqqqqqqqqx49pVVVVVVVVVVVVVVVVVVVVVV5VVVVVVVVVVVVVVVVVVVVVY8wqqqqqqqqqqqqqqqqqqqvNsVVVVVVVVVVVVVVVVVVjo8wsVVVVVVVVVVVVViqq6vQKqqqqqxVVWLFVVVVVaecfCqrTFWK0qtKqqqtq+B5dWLGKqxViqrGKqq2q09WtLFpaYrGmKsbdnrl0Y2vhaaVaXtW3wMdFtp9CPqJj8Svp97Z3dn4bfjJ8L9dPoR9IP8AbYf/xAAUEAEAAAAAAAAAAAAAAAAAAADQ/9oACAEBAAM/ADkr/8QAGREAAwEBAQAAAAAAAAAAAAAAAQJgMjFw/9oACAECAQE/APFhFjkWORY5FjkWORY5FjgixwRY5FrwRa8EWOCLXgi14IteCLXgi1yItciLXIi1yItciLXIi1yItciLTIi0yItMiLTIi0yItMiLTIi0yItMiLTAi0wsWmFi0wIv/8QAHhEBAQEAAgMAAwAAAAAAAAAAABEBEFACIGAwQLD/2gAIAQMBAT8A/R1rWtxuNxuNxviiIiIiIiIiIiIiIiM8WeLMZjMZjGM4xnQ7xEbjcbiNxERERERERERERERmM8WYzGYzGYzOM6eIiIiIiIiIiIiIiIiIiIiIidTERERERERERERERERERERERE6uIiIiIiIiIiIiIiIiIiInE66IiIiIiIiIiIiIiIiIidlOIiIiIiIiIiIiIiInaRERE4iIiIiIifBROInw84iJ6TvZzPwT2neTmIiInxERE9Z/AH//2Q=="
24+
class="absolute opacity-70"
25+
alt="og background"
26+
>
27+
<div class="size-full mx-auto max-w-[1000px] flex flex-row items-center justify-between">
28+
<div class="flex flex-col">
29+
<p v-if="headline" class="text-[26px] text-[#00DC82] mb-4 font-semibold">
30+
{{ headline }}
31+
</p>
32+
<h1 class="m-0 text-[65px] font-semibold mb-2 text-white flex items-center max-w-[850px]">
33+
<span>{{ title }}</span>
34+
</h1>
35+
<p v-if="description" class="text-[34px] text-[#E4E4E7] leading-tight max-w-[700px]">
36+
{{ description.slice(0, 200) }}
37+
</p>
38+
</div>
39+
<div class="flex justify-center">
40+
<img v-if="plugin.icon" :src="pluginImage(plugin.icon)" :alt="plugin.npm" class="size-40">
41+
</div>
42+
</div>
43+
<div class="absolute mx-auto bottom-8">
44+
<svg viewBox="0 0 256 168" xmlns="http://www.w3.org/2000/svg" width="50" preserveAspectRatio="xMidYMid">
45+
<path fill="#00DC82" d="M143.618 167.029h95.166c3.023 0 5.992-.771 8.61-2.237a16.963 16.963 0 0 0 6.302-6.115 16.324 16.324 0 0 0 2.304-8.352c0-2.932-.799-5.811-2.312-8.35L189.778 34.6a16.966 16.966 0 0 0-6.301-6.113 17.626 17.626 0 0 0-8.608-2.238c-3.023 0-5.991.772-8.609 2.238a16.964 16.964 0 0 0-6.3 6.113l-16.342 27.473-31.95-53.724a16.973 16.973 0 0 0-6.304-6.112A17.638 17.638 0 0 0 96.754 0c-3.022 0-5.992.772-8.61 2.237a16.973 16.973 0 0 0-6.303 6.112L2.31 141.975A16.302 16.302 0 0 0 0 150.325c0 2.932.793 5.813 2.304 8.352a16.964 16.964 0 0 0 6.302 6.115 17.628 17.628 0 0 0 8.61 2.237h59.737c23.669 0 41.123-10.084 53.134-29.758l29.159-48.983 15.618-26.215 46.874 78.742h-62.492l-15.628 26.214Zm-67.64-26.24-41.688-.01L96.782 35.796l31.181 52.492-20.877 35.084c-7.976 12.765-17.037 17.416-31.107 17.416Z" />
46+
</svg>
47+
</div>
48+
</div>
49+
</template>

‎app/components/SocialLinks.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="flex items-center">
3+
<UButton
4+
icon="i-simple-icons-discord"
5+
to="https://discord.gg/litestar"
6+
target="_blank"
7+
variant="ghost"
8+
color="neutral"
9+
size="xs"
10+
>
11+
<span class="sr-only">Litestar on Discord</span>
12+
</UButton>
13+
<UButton
14+
icon="i-simple-icons-github"
15+
to="https://github.com/litestar-org/litestar"
16+
target="_blank"
17+
variant="ghost"
18+
color="neutral"
19+
size="xs"
20+
>
21+
<span class="sr-only">Litestar on GitHub</span>
22+
</UButton>
23+
</div>
24+
</template>

‎app/components/about/AboutContributors.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@ function onIntersectionObserver([{ isIntersecting }]) {
2020
stopTimer()
2121
}
2222
}
23-
// Fetch on client-side
23+
// Fetch from local JSON file
2424
onMounted(async () => {
2525
if (contributors.value.length) return
26-
_contributors = await $fetch('/api/contributors').then(data => data.slice(0, total * 10).map(c => c.login))
26+
const contributorsData = await import('~/data/contributors.json')
27+
_contributors = contributorsData.default.slice(0, total * 10).map(c => c.login)
2728
console.log(_contributors)
2829
await loadImages(_contributors.slice(0, total))
2930
if (!contributors.value.length && intersecting.value) {

‎app/components/plugin/PluginItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const items = computed(() => [
8888
<template>
8989
<UContextMenu :items="items">
9090
<UPageCard
91-
:to="`/plugins/${plugin?.name}`"
91+
:to="`/plugins/${plugin?.key}`"
9292
:title="plugin?.name"
9393
:description="plugin?.description"
9494
class="group"

‎app/components/plugin/PluginProseA.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<NuxtLink
3+
:href="href"
4+
:target="target"
5+
class="inline-block mr-1 text-primary hover:text-primary/80"
6+
>
7+
<slot />
8+
</NuxtLink>
9+
</template>
10+
11+
<script setup lang="ts">
12+
import { hasProtocol, joinURL } from 'ufo'
13+
14+
const route = useRoute()
15+
const { data: module } = useNuxtData(`module-${route.params?.slug}`)
16+
17+
const props = defineProps({
18+
href: {
19+
type: String,
20+
default: ''
21+
},
22+
target: {
23+
type: String,
24+
default: undefined,
25+
required: false
26+
}
27+
})
28+
29+
const href = computed(() => {
30+
if (hasProtocol(props.href) || !module.value?.github) return props.href
31+
return joinURL(module.value.github, 'blob', module.value.stats?.defaultBranch || 'main', props.href)
32+
})
33+
</script>

‎app/components/plugin/PluginProseImg.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script setup lang="ts">
2+
import { hasProtocol, joinURL } from 'ufo'
3+
4+
const route = useRoute()
5+
const { data: module } = useNuxtData(`module-${route.params?.slug}`)
6+
7+
const props = defineProps({
8+
src: {
9+
type: String,
10+
default: ''
11+
},
12+
alt: {
13+
type: String,
14+
default: ''
15+
},
16+
width: {
17+
type: [String, Number],
18+
default: undefined
19+
},
20+
height: {
21+
type: [String, Number],
22+
default: undefined
23+
}
24+
})
25+
const src = computed(() => {
26+
if (hasProtocol(props.src) || !module.value?.repo) return props.src
27+
const repo = module.value.repo.split('#')[0]
28+
return joinURL('https://raw.githubusercontent.com/', repo, module.value.stats.defaultBranch, props.src)
29+
})
30+
</script>
31+
32+
<template>
33+
<img
34+
:src="src"
35+
:alt="alt"
36+
:width="width"
37+
:height="height"
38+
>
39+
</template>

‎app/components/plugin/PluginProseKbd.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<UKbd>
3+
<slot />
4+
</UKbd>
5+
</template>

‎app/composables/usePlugins.ts‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,10 @@ export const usePlugins = () => {
4747
if (plugins.value.length) {
4848
return
4949
}
50-
// _contributors = await $fetch('http://localhost:8000/contributors').then(data => data.slice(0, total * 10).map(c => c.login))
51-
// console.log(_contributors)
52-
plugins.value = await $fetch('http://localhost:8000/plugins')
50+
// Import plugins from local JSON file
51+
const { default: pluginsData } = await import('~/data/plugins.json')
52+
plugins.value = pluginsData
5353
console.log(plugins.value)
54-
// plugins.value = res
55-
// const res = await $fetch<{ plugins: Plugin[], stats: Stats }>('/plugins')
56-
// if (res?.plugins) {
57-
// plugins.value = res.plugins
58-
// stats.value = res.stats
59-
// }
6054
}
6155

6256
// Data

0 commit comments

Comments
 (0)