diff --git a/app/components/blog/card.vue b/app/components/blog/card.vue index f65e67a..2b6e1ba 100644 --- a/app/components/blog/card.vue +++ b/app/components/blog/card.vue @@ -16,9 +16,9 @@ withDefaults(defineProps(), { title: "no-title", date: "no-date", description: "no-description", - image: "/blogs-img/blog.jpg", + image: getRandomFallbackImage(), alt: "no-alt", - ogImage: "/blogs-img/blog.jpg", + ogImage: getRandomFallbackImage(), tags: () => [], categories: () => [], published: false, @@ -35,10 +35,10 @@ withDefaults(defineProps(), { :src="image" :alt="alt" /> -
+
+ class="flex items-center text-sm font-medium text-zinc-500 dark:text-zinc-400 whitespace-nowrap shrink-0"> {{ date }}
diff --git a/app/components/main/header.vue b/app/components/main/header.vue index 567deb0..d725fd2 100644 --- a/app/components/main/header.vue +++ b/app/components/main/header.vue @@ -17,6 +17,12 @@ function toggleMenu() { isMenuOpen.value = !isMenuOpen.value; } +// 移动端子菜单展开状态 +const mobileOpen = ref>({}); +function toggleMobileSubmenu(path: string) { + mobileOpen.value[path] = !mobileOpen.value[path]; +} + const isLinesOpen = ref(false); function toggleLines() { isLinesOpen.value = !isLinesOpen.value; @@ -66,6 +72,8 @@ watch( () => { isMenuOpen.value = false; isLinesOpen.value = false; + // 关闭所有移动端子菜单 + mobileOpen.value = {}; }, ); @@ -170,22 +178,56 @@ watch(
    -
  • - - - {{ link.name }} - -
    • +
@@ -280,26 +322,80 @@ watch(
  • - -
    -
    - + + +
@@ -437,4 +533,33 @@ header .absolute.right-0 { margin-right: 0.25rem !important; } } + +/* 解决 navbar 子菜单 hover 闪烁问题，提升可用性 */ +.navbar-dropdown-group { + position: relative; +} +.navbar-dropdown-toggle { + cursor: pointer; +} +.navbar-dropdown-list { + display: none; + position: absolute; + left: 0; + top: 100%; + margin-top: 0.5rem; + min-width: 8rem; + background: #fff; + border-radius: 0.75rem; + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18); + z-index: 50; + border: 1px solid rgba(200, 200, 200, 0.15); +} +.dark .navbar-dropdown-list { + background: #18181b; + border-color: rgba(255, 255, 255, 0.08); +} +.navbar-dropdown-group:hover .navbar-dropdown-list, +.navbar-dropdown-list:hover { + display: block; +} diff --git a/app/config/index.ts b/app/config/index.ts index 4a616b5..9e84c12 100644 --- a/app/config/index.ts +++ b/app/config/index.ts @@ -40,7 +40,15 @@ const siteConfig = { links: [ // { name: "Home", path: "/", icon: "fa6-solid:house" }, { name: "归档", path: "/archive", icon: "fa-solid:newspaper" }, - { name: "分类", path: "/categories", icon: "fa-solid:folder" }, + { + name: "分类", + path: "/categories", + icon: "fa-solid:folder", + // children: [ + // { name: "前端", path: "/categories/frontend", icon: "fa-solid:code" }, + // { name: "后端", path: "/categories/backend", icon: "fa-solid:server" }, + // ], + }, { name: "标签", path: "/tags", icon: "fa-solid:tags" }, { name: "关于", path: "/about", icon: "fa-solid:user" }, ], diff --git a/app/data/index.ts b/app/data/index.ts deleted file mode 100644 index 0912006..0000000 --- a/app/data/index.ts +++ /dev/null @@ -1,108 +0,0 @@ -// export const navbarData = { -// homeTitle: "Riyad's Blog", -// }; - -// export const navItems = [ -// { label: "Home", path: "/" }, -// { label: "Archive", path: "/archive" }, -// { label: "Categories", path: "/categories" }, -// { label: "About", path: "/about" }, -// ]; - -export const footerData = { - author: "Al Asad Nur Riyad", - aboutAuthor: - "Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently working at FieldNation LLC.", - authorInterest: - "I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you have an interesting idea, either open source or paid let's connect.", - aboutTheSite: - "This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it's deployed in Vercel.", -}; - -// export const homePage = { -// title: "Welcome To My Blog Site", -// description: -// "Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.", -// }; - -export const archivePage = { - title: "All Archives", - description: "Here you will find all the blog posts I have written & published on this site.", -}; - -export const categoryPage = { - title: "Categories", - description: - "Blow this category is generated from all the tags are mentioned in the different blog post", -}; - -export const aboutPage = { - title: "Al Asad Nur Riyad", - description: "Software Engineer, Problem Solver, Web Enthusiast.", - aboutMe: - "Hello, fellow human! I'm a software wizard who spends most of his day crafting code spells at @FieldNation in the Workplace Operation team. When I'm not crafting code, you can find me summoning solutions to problems on online judges. Just don't ask me to cast any love spells, my magic only works on machines!", -}; - -export const seoData = { - title: `Riyad's Blog | Riyads Blog`, - ogTitle: `Let's learn Javascript, Typescript, Vue, Nuxt, & Problem Solving - Riyads Blog | Riyad's Blog`, - description: `Hi I am Riyad. A Software Engineer at FieldNation, with over 3.5+ years experience in software development. - Riyads Blog | Riyad's Blog`, - twitterDescription: `Riyad's Blog, where I play around with Nuxt, Vue, and more and showcase my blog, resources, etc - Riyads Blog | Riyad's Blog`, - image: - "https://res.cloudinary.com/dmecmyphj/image/upload/v1673548905/nuxt-blog/cover_ntgs6u.webp", - mySite: "https://blog-nurriyad.vercel.app", - twitterHandle: "@qdnvubp", - mailAddress: "asadnurriyad@gmail.com", -}; - -// export const socialLinks = { -// githubLink: "https://github.com/nurRiyad", -// linkedinLink: "https://www.linkedin.com/in/nur-riyad/", -// twitterLink: "https://twitter.com/qdnvubp", -// stackoverflowLink: "https://stackoverflow.com/users/16781395/nur-riyad", -// }; - -export const siteMetaData = [ - { - name: "description", - content: seoData.description, - }, - // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/ - { property: "og:site_name", content: seoData.mySite }, - { property: "og:type", content: "website" }, - { - property: "og:url", - content: seoData.mySite, - }, - { - property: "og:title", - content: seoData.ogTitle, - }, - { - property: "og:description", - content: seoData.description, - }, - { - property: "og:image", - content: seoData.image, - }, - // Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/ - { name: "twitter:site", content: seoData.twitterHandle }, - { name: "twitter:card", content: "summary_large_image" }, - { - name: "twitter:url", - content: seoData.mySite, - }, - { - name: "twitter:title", - content: seoData.ogTitle, - }, - { - name: "twitter:description", - content: seoData.twitterDescription, - }, - { - name: "twitter:image", - content: seoData.image, - }, -];