Skip to content

Commit

Permalink
style change
Browse files Browse the repository at this point in the history
  • Loading branch information
violet committed Nov 21, 2024
1 parent 4c0da39 commit f7f8ffe
Show file tree
Hide file tree
Showing 21 changed files with 129 additions and 297 deletions.
2 changes: 1 addition & 1 deletion components/BlogCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const preloadArticle = useThrottleFn(() => {
<div class="text-xl">
{{ props.article.title }}
</div>
<div class="mt-2 text-sm text-gray-800 dark:text-gray-400">
<div class="mt-2 text-sm text-gray-500">
{{ props.article.description }}
</div>
</div>
Expand Down
137 changes: 8 additions & 129 deletions components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,157 +1,36 @@
<script setup lang="ts">
const link = [
{
index: 0,
name: '',
url: 'https://github.com/lnbiuc',
icon: 'i-ri:github-line',
},
{
index: 1,
name: '',
url: 'https://x.com/ZZSLL_53387',
icon: 'i-ri:twitter-x-line',
},
{
index: 2,
name: '',
url: 'https://space.bilibili.com/1258497845',
icon: 'i-ri:bilibili-line',
},
{
index: 3,
name: '',
url: 'mailto:[email protected]',
icon: 'i-ri:mail-line',
},
]
const colorMode = useColorMode()
const umami = ref({
active: 1,
pv: 0,
uv: 0,
recent: {
name: '',
icon: '',
},
})
onMounted(async () => {
await useFetch('/api/umami/active').then((res) => {
if (res.data.value)
umami.value.active = res.data.value
else
umami.value.active = 1
})
await useFetch('/api/umami/stats').then((res) => {
umami.value.pv = res.data.value.pageviews.value
umami.value.uv = res.data.value.visitors.value
})
await useFetch('/api/umami/metrics').then((res) => {
umami.value.recent.name = res.data.value.name
umami.value.recent.icon = res.data.value.emoji
})
})
</script>

<template>
<div
text="xs gray4"
class="backdrop-blur-md p-4 mt-20 border-t border-t-gray-300 flex flex-col w-full justify-center items-center dark:border-t-gray-700"
class="backdrop-blur-md p-4 mt-20 border-t border-t-[#eee] flex flex-col w-full justify-center items-center dark:border-t-[#222]"
>
<div
class="mt-6 flex flex-col w-full justify-between items-center lg:flex-row md:flex-row sm:flex-row xl:flex-row lg:w-[80%] md:w-full sm:w-full xl:max-w-[1000px] xl:w-[80%]"
class="flex flex-col w-full justify-between items-center lg:flex-row md:flex-row sm:flex-row xl:flex-row lg:w-[80%] md:w-full sm:w-full xl:max-w-[1000px] xl:w-[80%]"
>
<div>
<div v-if="umami.pv && umami.uv">
<span>Total PV : </span>
<span text="violet">{{ umami.pv }}</span>
<span class="mx-1">|</span>
<span class="mx-1">&nbsp;</span>
<span>UV : </span>
<span text="violet">{{ umami.uv }}</span>
</div>

<div class="flex flex-col justify-center items-center lg:flex-row md:flex-row sm:flex-row xl:flex-row">
<div class="m-2 flex flex-row">
<div class="i-ri:checkbox-blank-circle-fill mr-1 scale-80" text="green" />
<span>Current Online</span>
<span class="mx-1">:</span>
<span text="violet mx-1">{{ umami.active }}</span>
</div>
<div>
<span>From : </span>
<span class="mx-1">{{ umami.recent.icon }}</span>
<span text="violet">{{ umami.recent.name }}</span>
</div>
</div>
</div>
<div
class="py-5 flex flex-col min-h-[120px] w-full overflow-hidden justify-center items-center xl:m-2 lg:flex-row sm:flex-row xl:flex-row lg:w-[80%] md:w-full sm:w-full xl:max-w-[1000px] xl:w-[80%] lg:justify-between sm:justify-between xl:justify-between lg:items-start sm:items-start xl:items-start"
>
<div class="flex flex-col items-start">
<div>
<span>Copyright © 2024</span>
<span class="mx-1">|</span>
<a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2021015553号-2</a>
</div>
<div class="mt-10">
<ul class="flex flex-row">
<li>
<router-link to="/" class="mr-2 hover:text-violet">
Home
</router-link>
</li>
<li>
<router-link to="/blog" class="mr-2 hover:text-violet">
Blog
</router-link>
</li>
<li>
<router-link to="/shorts" class="mr-2 hover:text-violet">
Short
</router-link>
</li>
<!-- <li>
<router-link to="/project" class="mr-2 hover:text-violet">
Project
</router-link>
</li> -->
<li>
<router-link to="/friend" class="mr-2 hover:text-violet">
Friend
</router-link>
</li>
<li>
<router-link to="/about" class="hover:text-violet">
About
</router-link>
</li>
</ul>
</div>
</div>
<div class="mt-10 flex flex-col items-end lg:mt-unset md:mt-unset sm:mt-unset xl:mt-unset">
<div class="flex flex-row">
<a
v-for="l in link" :key="l.index" class="my-open-tab mr-3 flex flex-row justify-center items-center"
:href="l.url" target="_blank" aria-label="icon"
>
<UIcon :name="l.icon" class="text-xl" />
<span class="ml-1">
{{ l.name }}
</span>
</a>
</div>
<div class="mt-6">
<a v-if="colorMode.value === 'dark'" href="https://zeabur.com?referralCode=lnbiuc&utm_source=lnbiuc"><img
src="https://zeabur.com/deployed-on-zeabur-dark.svg" alt="Deployed on Zeabur"
></a>
<a v-else class="shadow" href="https://zeabur.com?referralCode=lnbiuc&utm_source=lnbiuc"><img
src="https://zeabur.com/deployed-on-zeabur-light.svg" alt="Deployed on Zeabur"
></a>
</div>
<div>
<span>Copyright © 2024</span>
<span class="mx-1">&nbsp;</span>
<a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2021015553号-2</a>
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions components/NewHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,9 @@ if (data.value) {

<template>
<div
class="font-sans flex flex-row fixed h-60px w-full justify-around items-center z-999 transition-all"
class="border-b-[#eee] font-sans flex flex-row fixed h-60px w-full justify-around items-center z-999 transition-all dark:border-b-[#222]"
:class="{
'shadow dark:bg-opacity-50 bg-opacity-50 backdrop-blur-xl':
'dark:bg-opacity-50 bg-opacity-50 backdrop-blur-xl border-b ':
showShadow && !isOpen,
'bg-light dark:bg-dark dark:bg-opacity-100 bg-opacity-100': isOpen,
}"
Expand All @@ -145,7 +145,7 @@ if (data.value) {
>
<img
src="/site-favicon.ico"
class="object-cover rounded-3 shadow-md"
class="object-cover rounded-3 shadow h-10 w-10"
@click="handleClickFavicon"
>
</div>
Expand Down Expand Up @@ -185,9 +185,9 @@ if (data.value) {
<ul
class="border rounded-full flex flex-row h-40px items-center transition-all"
:class="{
'mt-52px dark:border-[#222] border-[#eee] bg-light dark:bg-dark shadow backdrop-blur-2xl':
'mt-52px dark:border-[#222] border-[#eee] shadow backdrop-blur-2xl':
!isFixed,
'dark:border-[#222] border-[#eee] bg-light dark:bg-dark shadow backdrop-blur-2xl dark:bg-opacity-50 bg-opacity-50':
'dark:border-[#222] border-[#eee] shadow backdrop-blur-2xl dark:bg-opacity-50 bg-opacity-50':
!showShadow,
'border-transparent': isTransparent,
}"
Expand Down
7 changes: 3 additions & 4 deletions components/ShortCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { ref } from 'vue'
import { useThrottleFn } from '@vueuse/core'
import type { IArticle } from '~/server/types'
import { useArticleStore } from '~/store/ArticleStore'
import { formatTime } from '~/composables/formatTime'
const props = defineProps({
article: {
Expand Down Expand Up @@ -38,9 +37,9 @@ const preloadArticle = useThrottleFn(() => {
{{ t }}
</UBadge>
</div>
<div class="mt-3 text-sm text-gray-800 dark:text-gray-400">
{{ formatTime(props.article.createdAt) }}
</div>
<!-- <div class="mt-3 text-sm text-gray-800 dark:text-gray-400"> -->
<!-- {{ formatTime(props.article.createdAt) }} -->
<!-- </div> -->
</div>
</div>
</NuxtLink>
Expand Down
2 changes: 1 addition & 1 deletion components/WelcomeCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const link = [
<template>
<NuxtLayout name="home">
<div
class="sm:backdrop-blur-sm md:backdrop-blur-sm xl:backdrop-blur-sm lg:backdrop-blur-sm p-2 my-0 card-border rounded rounded-lg flex flex-col-reverse justify-center items-center lg:p-8 md:p-8 sm:p-2 xl:p-8 lg:my-10 md:my-10 sm:my-0 xl:my-10 lg:flex-row md:flex-row md:flex-row xl:flex-row sm:flex-col-reverse md:justify-between lg:card md:card sm:card xl:card"
class="sm:backdrop-blur-sm md:backdrop-blur-sm xl:backdrop-blur-sm lg:backdrop-blur-sm p-2 my-0 card-border rounded flex flex-col-reverse justify-center items-center lg:p-8 md:p-8 sm:p-2 xl:p-8 lg:my-10 md:my-10 sm:my-0 xl:my-10 lg:flex-row md:flex-row xl:flex-row sm:flex-col-reverse md:justify-between lg:card md:card sm:card xl:card"
>
<div
class="flex flex-col w-full justify-start items-start lg:w-1/2 md:w-1/2 sm:w-full xl:w-1/2 md:justify-start md:items-start"
Expand Down
6 changes: 2 additions & 4 deletions components/admin/EditorArticle.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { IArticle } from '~/server/types'
import { useUserStore } from '~/store/UserStore'
import MarkdownEditor from '~/components/MarkdownEditor.vue'
import '~/styles/md-alert.css'
import { useMarkdownParser } from '~/composables/useMarkdownParser'
import { parseMarkdown } from '@nuxtjs/mdc/runtime'
const props = defineProps({
shortLink: {
Expand Down Expand Up @@ -81,7 +81,6 @@ const rules = {
// @ts-expect-error no error
const { pass, errorFields } = useAsyncValidator(article, rules)
const publishSetting = ref(false)
const fileCover = ref<File | null>(null)
Expand Down Expand Up @@ -218,13 +217,12 @@ function handleEmitContent(value: string) {
}
const ast = ref<MDCParserResult | null>(null)
const parse = useMarkdownParser()
watchEffect(async () => {
if (preview.value) {
// const data = await render(article.value.content)
// renderRes.value = await render(article.value.content)
ast.value = await parse(article.value.content)
ast.value = await parseMarkdown(article.value.content)
}
})
Expand Down
6 changes: 1 addition & 5 deletions components/global/ImageRender.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
<script setup lang="ts">
import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo'
import { computed, useRuntimeConfig } from '#imports'
const props = defineProps({
src: {
type: String,
Expand All @@ -20,12 +17,11 @@ const props = defineProps({
default: undefined,
},
})
</script>

<template>
<NuxtImg
:src="props.src" :alt="props.alt" width="100%" :placeholder="[50, 25, 75, 5]" format="webp" loading="lazy"
class="my-2 op75 rounded shadow transition-all animated animated-fade-in-up-big hover:op100 hover:shadow-md"
class="my-2 op75 rounded transition-all animated animated-fade-in-up-big hover:op100 hover:shadow card"
/>
</template>
51 changes: 26 additions & 25 deletions components/global/LinkRender.vue
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,69 @@
<script setup lang="ts">
import type { PropType } from "vue";
import LinkCard from "~/components/markdown/LinkCard.vue";
import type { PropType } from 'vue'
import LinkCard from '~/components/markdown/LinkCard.vue'
const props = defineProps({
href: {
type: String,
default: "",
default: '',
},
target: {
type: String as PropType<
"_blank" | "_parent" | "_self" | "_top" | string | null | undefined
'_blank' | '_parent' | '_self' | '_top' | string | null | undefined
>,
default: undefined,
required: false,
},
});
})
function isGithubRepoLink(link: string): boolean {
// GitHub 仓库链接的格式为 https://github.com/username/repo
const regex = /^https:\/\/github\.com\/[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+$/;
return regex.test(link);
const regex = /^https:\/\/github\.com\/[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+$/
return regex.test(link)
}
function openLink() {
window.open(props.href, props.target as string);
window.open(props.href, props.target as string)
}
const computedHref = computed(() => {
const link = props.href;
if (link.includes("@")) {
return link;
}
const urlReg =
/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
const url = urlReg.exec(link);
if (!url) return null;
const link = props.href
if (link.includes('@'))
return link
return url[0];
});
const urlReg
= /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/
const url = urlReg.exec(link)
if (!url)
return null
return url[0]
})
const source = ref(props.href)
const { copy } = useClipboard({ source })
const toast = useToast();
const toast = useToast()
function copyAddress() {
copy(source.value)
toast.add({
title: "Copied",
title: 'Copied',
description: source.value,
timeout: 3000,
icon: "i-heroicons-check-circle text-violet",
});
icon: 'i-heroicons-check-circle text-violet',
})
}
</script>

<template>
<LinkCard v-if="isGithubRepoLink(props.href)" :link="href" />
<div v-else class="mx-1 inline-block align-middle">
<div v-else class="mx-1 inline-block align-top">
<UPopover
mode="hover"
:popper="{ placement: 'top-start' }"
:ui="{ wrapper: 'inline-flex items-center' }"
:ui="{ wrapper: 'inline-flex items-center h-full' }"
>
<UButton
:to="props.href"
Expand All @@ -74,7 +75,7 @@ function copyAddress() {
{{ computedHref }}
</UButton>
<template #panel>
<div class="h-full w-full mx-2">
<div class="mx-2 h-full w-full">
<UButton
icon="i-ri:external-link-line"
:to="props.href"
Expand Down
Loading

0 comments on commit f7f8ffe

Please sign in to comment.