Skip to content

Commit

Permalink
✨ feat: 2024总结
Browse files Browse the repository at this point in the history
  • Loading branch information
Ocyss committed Feb 3, 2025
1 parent c707cd3 commit e33407b
Show file tree
Hide file tree
Showing 14 changed files with 405 additions and 31 deletions.
7 changes: 6 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,9 @@ NUXT_SITE_DESCRIPTION="Ocyss's Blog"
# NUXT_UMAMI_ID=1234567890


NUXT_GITHUB_TOKEN=github_pat_123123123
NUXT_GITHUB_TOKEN=github_pat_123123123

NUXT_OSS_REGION=oss-cn-hangzhou
NUXT_OSS_ACCESS_KEY_ID=LTAI5t48888888888888
NUXT_OSS_ACCESS_KEY_SECRET=88888888888888888888888888888888
NUXT_OSS_BUCKET=blog
57 changes: 55 additions & 2 deletions app/assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
/* Inverted background color */
--ui-bg-inverted: #1A1C25;

--ui-bg-code: #F3F6FF;
--ui-bg-code: #F2F2F2;

--ui-border-muted: #C5CAD9;
.u-dark-only {
Expand All @@ -45,7 +45,7 @@
/* Inverted background color */
--ui-bg-inverted: #abb2bf;

--ui-bg-code: #262A31;
--ui-bg-code: #454545;

--ui-border-muted: #3e4451;

Expand All @@ -57,6 +57,59 @@
}
}

/*
Typography plugin configuration
*/
@utility prose {
code {
/* @apply bg-[var(--ui-bg-code)] mx-1 p-1 rounded text-sm; */

@apply px-1.5 py-0.5 text-sm font-mono font-medium rounded-[calc(var(--ui-radius)*1.5)] inline-block border border-[var(--ui-border-muted)] text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-muted)];
&::before {
display: none;
}
&::after {
display: none;
}
}

blockquote {
/* Remove extra quotes */
p {
&:first-of-type::before,
&:last-of-type::after {
display: none;
}
}
}
table{
@apply w-auto border-separate border-spacing-0 rounded-[calc(var(--ui-radius)*1.5)];
thead{
@apply bg-[var(--ui-bg-muted)];
}
th{
@apply py-3 px-4 font-semibold text-sm text-left border-e border-b first:border-s border-t border-[var(--ui-border-muted)];
}
tr{
@apply [&:first-child>th:first-child]:rounded-tl-[calc(var(--ui-radius)*1.5)] [&:first-child>th:last-child]:rounded-tr-[calc(var(--ui-radius)*1.5)] [&:last-child>td:first-child]:rounded-bl-[calc(var(--ui-radius)*1.5)] [&:last-child>td:last-child]:rounded-br-[calc(var(--ui-radius)*1.5)];
}
td{
@apply py-3 px-4 text-sm text-left align-top border-e border-b first:border-s border-[var(--ui-border-muted)] [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5;
}
}
h2{
&::after{
content: "§";
@apply text-[var(--ui-text-highlighted)] ms-2;
}
}
h3{
&::before{
content: "#";
@apply text-[var(--ui-text-highlighted)] me-2;
}
}
}

.u-float-btn {
@apply bg-white text-[var(--ui-bg-inverted)] hover:bg-gray-300
Expand Down
2 changes: 1 addition & 1 deletion app/components/article/ArticlePage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const { data: surroundData } = await useAsyncData('article-surround', () => {
</script>

<template>
<main class="min-h-screen bg-[var(--ui-bg)]">
<main class="min-h-screen bg-[var(--ui-bg)]" data-lenis-prevent>
<UProgress
class="fixed top-0 left-0 right-0 z-50"
:model-value="readingProgress"
Expand Down
25 changes: 25 additions & 0 deletions app/components/content/Collapse.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script setup lang="ts">
const props = withDefaults(defineProps<{
title: string
unmount?: boolean
class?: string
}>(), {
unmount: true,
})
provide('content-link', false)
</script>

<template>
<UCollapsible :unmount-on-hide="unmount" class="flex flex-col gap-2 group/collapse my-2">
<div class="flex items-center gap-2 cursor-pointer user-select-none">
<UIcon name="i-lucide-chevron-down" class="group-data-[state=open]/collapse:rotate-180 transition-transform duration-300" />
{{ title }}
</div>
<template #content>
<div class="ml-4" :class="props.class">
<slot />
</div>
</template>
</UCollapsible>
</template>
138 changes: 138 additions & 0 deletions app/components/content/FollowCard.server.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
<script setup lang="tsx">
interface Data {
feed: {
type: string
id: string
url: string
title: string
description: string
siteUrl: string
image: any
errorMessage: any
errorAt: any
ownerUserId: any
}
entries: {
title: string
url: string
content: string
description: string
guid: string
author: any
authorUrl: any
authorAvatar: any
publishedAt: string
media: {
url: string
type: string
width: number
height: number
blurhash?: string
}[]
categories: any
attachments: any
extra: any
language: any
}[]
readCount: number
subscriptionCount: number
}
const props = defineProps<{
url: string
desc?: string
override?: Partial<Data>
}>()
const data = ref<Data>()
if (props.url) {
data.value = undefined
const id = props.url.split('/').at(-1)
const { data: res } = await useAsyncData(`follow-${id}`, () => {
if (import.meta.client) {
return new Promise<undefined>((r) => {
r(undefined)
})
}
return $fetch<{
code: number
data: Data
}>(`https://api.follow.is/feeds?id=${id}`)
})
// console.log(res.value, error.value)
if (res.value?.code === 0) {
data.value = res.value.data
}
}
const icon = computed(() => {
if (!data.value) {
return ''
}
return `https://toolb.cn/favicon/${new URL(data.value.feed.siteUrl ?? data.value.feed.url).hostname}`
})
</script>

<template>
<div
v-if="data"
:key="data.feed.title"
class="not-prose rounded-lg text-left bg-[var(--ui-bg)] flex flex-col p-6 shadow-sm hover:scale-105 transition-transform duration-300 dark:bg-[var(--ui-bg)]"
>
<div
class="mb-2 text-lg font-semibold
text-gray-900 dark:text-whiteflex items-center gap-2 flex"
>
<img :src="icon" alt="avatar" class="size-5 rounded-full">
<a
:href="url" target="_blank" class="text-gray-900 dark:text-white
hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300"
>{{ data.feed.title }}
</a>
<span class="text-sm text-gray-700 dark:text-gray-400 flex items-center">
<UIcon name="mdi-account-multiple" />
{{ data.subscriptionCount }}
</span>
</div>
<p class="mb-4 text-gray-600 dark:text-gray-400 text-sm line-clamp-3 flex-1">
{{ desc ?? data.feed.description }}
</p>
<div class="space-y-3">
<a
v-for="(item) in data.entries.slice(0, 3)"
:key="url + item.url"
:href="item.url"
target="_blank"
class="flex gap-3 group/follow-card rounded-lg
hover:bg-gray-100 dark:hover:bg-gray-800
transition-all duration-300 cursor-pointer"
>

<img
v-if="item.media?.[0]?.url"
:src="item.media[0].url"
class="rounded w-12 h-8 object-cover transition-transform duration-300 group-hover/follow-card:scale-130"
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
>

<div class="flex-1 min-w-0 text-xs">
<h4
class="text-gray-600 dark:text-gray-400
group-hover/follow-card:text-gray-900
dark:group-hover/follow-card:text-white
line-clamp-1 font-medium"
>
{{ item.title }}
</h4>
<p
class="text-gray-500 dark:text-gray-500 line-clamp-1 mt-0.5
group-hover/follow-card:text-gray-700 dark:group-hover/follow-card:text-gray-300"
>
{{ item.description ?? "无描述" }}
</p>
</div>
</a>
</div>
</div>
</template>
File renamed without changes.
27 changes: 16 additions & 11 deletions app/components/content/ProseA.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
<script setup lang="ts">
import type { PropType } from 'vue'
const props = withDefaults(defineProps<{
href: string
target?: '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined
icon?: boolean
}>(), {
href: '',
icon: true,
target: '_blank',
})
const props = defineProps({
href: {
type: String,
default: '',
},
target: {
type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
default: undefined,
required: false,
},
const iconSrc = computed(() => {
if (!props.icon) {
return ''
}
return `https://toolb.cn/favicon/${new URL(props.href).hostname}`
})
</script>

<template>
<NuxtLink
:href="props.href"
:target="props.target"
class="inline gap-1"
>
<img v-if="iconSrc" :src="iconSrc" class="inline size-[1.3em] not-prose user-select-none pointer-events-none">
<slot />
</NuxtLink>
</template>
13 changes: 10 additions & 3 deletions app/components/content/ProseImg.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,17 @@ const props = defineProps({
type: [String, Number],
default: undefined,
},
preview: {
type: Boolean,
default: true,
},
})
const { addImage } = useImagePreview()
const preview = addImage({ image: { url: props.src, alt: props.alt } })
let preview: (() => void) | undefined
if (props.preview) {
const { addImage } = useImagePreview()
preview = addImage({ image: { url: props.src, alt: props.alt } })
}
const refinedSrc = computed(() => {
if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
Expand All @@ -42,7 +49,7 @@ const refinedSrc = computed(() => {
:alt="props.alt"
:width="props.width"
:height="props.height"
class="cursor-zoom-in"
:class="{ 'cursor-zoom-in': props.preview }"
@click="preview"
>
</template>
5 changes: 5 additions & 0 deletions app/composables/useLenis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ export function useLenis(opt: Omit<LenisOptions, 'wrapper'> & {
targetScroll: newScrollState.targetScroll,
})
})
// const { height } = useElementSize(opt.wrapper as Ref<HTMLElement>)
// watch(height, () => {
// console.log(height.value)
// lenis.value.instance?.resize()
// })
})

onBeforeUnmount(() => {
Expand Down
23 changes: 13 additions & 10 deletions app/composables/useNavigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,27 +45,30 @@ async function initNavigationData() {
// 处理导航项目并更新缓存
function processItems(items: ContentNavigationItem[]): ContentNavigationItem[] {
return items.map((item) => {
pathTitleMapStore.value[item.path] = item
if (!item.children) {
return undefined
}

const filtered = { ...item }
if (item.children) {
if (item.children.some(child => child.children)) {
filtered.children = processItems(item.children)
}
else {
filtered._children = item.children
delete filtered.children
}
item.children = item.children.filter(v => !v.page)
if (item.children.some(child => child.children)) {
filtered.children = processItems(item.children)
}
else {
// filtered._children = item.children
delete filtered.children
}
const children = filtered.children?.map(getChildren)
if (children && children.length > 0) {
filtered.nav = children
}
pathTitleMapStore.value[item.path] = item
return filtered
})
}).filter(v => v !== undefined)
}

navigationStore.value = processItems(articleNavigation)
// console.log(JSON.stringify({ articleNavigation, navigationStore: navigationStore.value }, null, 2))
return navigationStore.value
},
},
Expand Down
3 changes: 3 additions & 0 deletions app/env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
interface Window {
lenis?: Array< Ref<import('./composables/useLenis').LenisRef>>
}
Loading

0 comments on commit e33407b

Please sign in to comment.