mirror of
https://iceshrimp.dev/Crimekillz/jointrashposs.git
synced 2024-11-24 09:49:06 +01:00
56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
<template>
|
|
<div :class="['grid grid-cols-1 md:grid-cols-2 gap-4', wide && 'lg:grid-cols-3']">
|
|
<ContentNavigation v-slot="{ navigation }" :query="query">
|
|
<GNuxtLink
|
|
class="block p-4 rounded-lg border border-slate-200 dark:border-accent-900 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 hover:!no-underline"
|
|
v-for="item in findDeepObject((navigation[0] as Record<string, any>), (v) => realBasePath.replace(/\/$/, '') === v?._path.replace(/\/$/, ''))?.children ?? []"
|
|
:key="item._path"
|
|
:to="localePath(item._path)"
|
|
>
|
|
<h3 class="font-bold !text-lg !mt-0 !mb-2">
|
|
{{ item.navTitle || item.title }}<ArrowRightIco class="ml-1.5" />
|
|
</h3>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400 !mb-0 truncate-box">
|
|
{{ item.description ?? "" }}
|
|
</p>
|
|
</GNuxtLink>
|
|
</ContentNavigation>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ArrowRightIco from "bi/arrow-right.svg";
|
|
import { findDeepObject } from "assets/js/misc";
|
|
|
|
const route = useRoute();
|
|
const { locale } = useI18n();
|
|
|
|
const props = withDefaults(defineProps<{
|
|
basePath?: string;
|
|
wide?: boolean;
|
|
}>(), {
|
|
wide: false,
|
|
});
|
|
|
|
const realBasePath = computed<string>(() => {
|
|
if (props.basePath) {
|
|
return props.basePath;
|
|
}
|
|
return route.path.replace(/^.*\/docs/, `/${locale.value}/docs`);
|
|
});
|
|
|
|
const localePath = useLocalePath();
|
|
|
|
const query = queryContent(realBasePath.value);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.truncate-box {
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
}
|
|
</style> |