Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: catalog #109

Merged
merged 5 commits into from
Apr 24, 2024
Merged

feat: catalog #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4f7769d
feat: catalog
nexmoe Apr 24, 2024
04a69c1
chore: active
nexmoe Apr 24, 2024
1c16ddc
chore: lint
nexmoe Apr 24, 2024
c31a134
chore: shadcn-nuxt
nexmoe Apr 24, 2024
c7a7550
Revert "chore: shadcn-nuxt"
nexmoe Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions components/flow/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,15 @@ provide('flow', props.flow)
<div class="flow">
<FlowHeader v-if="props.header" :id="props.flow!.id" :title="props.flow!.title" :url="props.flow!.homepage" />

<div class="flow-body" :class="[
props.flow!.configCard === 'gallery' ? 'n-gallery' : 'n-grid',
]">
<NuxtLink v-for="(module) in props.flow!.module" :key="module.url" :title="module.title" :to="module.url"
target="_blank">
<div
class="flow-body" :class="[
props.flow!.configCard === 'gallery' ? 'n-gallery' : 'n-grid',
]"
>
<NuxtLink
v-for="(module) in props.flow!.module" :key="module.url" :title="module.title" :to="module.url"
target="_blank"
>
<ModuleList v-if="props.flow!.configCard === 'list'" v-bind="{ module }" />
<ModuleProject v-else-if="props.flow!.configCard === 'project'" v-bind="{ module }" />
<ModuleGallery v-else-if="props.flow!.configCard === 'gallery'" v-bind="{ module }" />
Expand Down
20 changes: 13 additions & 7 deletions components/module/Image.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type { AppRouter } from '@/server/trpc/routers'
type RouterOutput = inferRouterOutputs<AppRouter>
type ModuleOutput = RouterOutput['module']['get']
type FlowOutput = RouterOutput['flow']['get']
type Module = Exclude<ModuleOutput, null>;
type Module = Exclude<ModuleOutput, null>

interface Props {
module: Module
Expand All @@ -28,8 +28,10 @@ const text = computed(() => extractTextFromHTML(props.module.content))
</div>
</div>
<div v-if="props.module.image" class="shadow-sm max-h-96 rounded-xl relative overflow-hidden">
<NuxtImg class="w-full" format="webp" :src="props.module!.image" :alt="module.title"
referrerpolicy="no-referrer" loading="lazy" width="420px" />
<NuxtImg
class="w-full" format="webp" :src="props.module!.image" :alt="module.title"
referrerpolicy="no-referrer" loading="lazy" width="420px"
/>
</div>
</div>
<div class="space-y-4 px-3 pb-3">
Expand All @@ -39,11 +41,15 @@ const text = computed(() => extractTextFromHTML(props.module.content))
<div v-if="!flow?.configNoContent && text !== ' '" class="line-clamp-3">
<div v-html="text" />
</div>
<div v-if="!props.module.image || (props.module.platform?.length || 0) > 1"
class="flex flex-row items-center gap-1">
<div
v-if="!props.module.image || (props.module.platform?.length || 0) > 1"
class="flex flex-row items-center gap-1"
>
<template v-if="(props.module.platform?.length || 0) > 1">
<div v-for="platform in props.module.platform" :key="platform" class="w-7 h-7 block"
@click="navigateTo(platform, { open: { target: '_blank' }, external: true })">
<div
v-for="platform in props.module.platform" :key="platform" class="w-7 h-7 block"
@click="navigateTo(platform, { open: { target: '_blank' }, external: true })"
>
<LinkIcon :url="platform" />
</div>
</template>
Expand Down
33 changes: 14 additions & 19 deletions components/public/Catalog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,15 @@ function scrollToTitle(anchor: string) {
}

function updateActiveSection() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop
const screenHeight = window.innerHeight

let minDistanceToCenter = Number.POSITIVE_INFINITY

props.list.forEach((section, index) => {
const element = document.getElementById(section.title)
if (element) {
const rect = element.getBoundingClientRect()
const distanceToCenter = Math.abs(rect.top + rect.height / 2 - (scrollTop + screenHeight / 2))

if (distanceToCenter < minDistanceToCenter) {
if (rect.top < screenHeight / 2) {
activeSectionIndex = index
minDistanceToCenter = distanceToCenter
}
}
})
Expand All @@ -54,25 +49,25 @@ onUnmounted(() => {
</script>

<template>
<div class="hidden md:flex py-6 px-4 items-center h-full shu-card !rounded-none">
<div class="space-y-1 w-full">
<div v-for="item in list" :key="item.title" class="item" :class="{
active: item.active,
}" @click="scrollToTitle(`#${item.anchor}`)">
<div class="text-base truncate">
{{ item.title }}
</div>
</div>
</div>
</div>
<div class="hidden md:flex py-6 px-4 items-center h-full shu-card !rounded-none">
<div class="space-y-1 w-full">
<div v-for="item in list" :key="item.title" class="item" :class="{
active: item.active,
}" @click="scrollToTitle(`#${item.anchor}`)">
<div class="text-base truncate">
{{ item.title }}
</div>
</div>
</div>
</div>
</template>

<style scoped>
.item {
@apply flex flex-row justify-between text-base cursor-pointer transition-all hover:bg-gray-100 w-full space-x-3 items-center py-3 px-5 overflow-hidden rounded-xl;
@apply flex flex-row justify-between text-base cursor-pointer transition-all hover:bg-gray-100 w-full space-x-3 items-center py-3 px-5 overflow-hidden rounded-xl;
}

.active {
@apply bg-black text-white hover:bg-black;
@apply bg-black text-white hover:bg-black;
}
</style>
2 changes: 2 additions & 0 deletions components/public/Tool.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { onMounted, onUnmounted, ref } from 'vue'

const showButton = ref(false)
const globalStore = useGlobalStore()

function handleScroll() {
showButton.value = window.scrollY > window.innerHeight
Expand All @@ -27,6 +28,7 @@ onUnmounted(() => {
<div
class="fixed z-50 flex flex-col text-2xl space-y-4 bottom-8 right-8 md:bottom-16 md:right-16"
>
<!-- <PublicCatalog :list="globalStore.catalog" v-if="globalStore.catalog.length > 0" /> -->
<transition name="fade">
<button
v-if="showButton"
Expand Down
9 changes: 9 additions & 0 deletions nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,15 @@ export default defineNuxtConfig({
'nuxt-icon',
'@nuxtjs/seo',
'@nuxtjs/tailwindcss',
[
'@pinia/nuxt',
{
autoImports: [
// 自动引入 `defineStore()`
'defineStore',
],
},
],
],
ogImage: {
googleFontMirror: true,
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@
},
"dependencies": {
"@nuxt/image": "^1.5.0",
"@pinia/nuxt": "^0.5.1",
"@prisma/client": "^5.12.1",
"@sidebase/core": "^0.1.4",
"@trpc/client": "^10.45.2",
"@trpc/server": "^10.45.2",
"@vitest/coverage-v8": "^1.4.0",
"consola": "^3.2.3",
"pinia": "^2.1.7",
"sharp": "^0.33.3",
"trpc-nuxt": "^0.10.21",
"zod": "^3.22.4"
Expand Down Expand Up @@ -66,4 +68,4 @@
]
}
}
}
}
3 changes: 3 additions & 0 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ const { $client } = useNuxtApp()
const flows = await $client.flow.list.query()

const config = await useGetConfig()
const globalStore = useGlobalStore()

globalStore.setCatalog(flows.map(x => ({ title: x.title, anchor: x.title, active: false })))

provide('flows', flows)

Expand Down
Loading
Loading