RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #26 from nurRiyad/dark-mode

Browse Source 
Add dark mode
This commit is contained in:
Al Asad Nur Riyad
2023-09-09 15:44:22 +06:00
committed by GitHub
parent 7d7d737294 83a5dbe156
commit 8bdc7b7744
25 changed files with 1244 additions and 1139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app.vue
View File

@@ -60,7 +60,7 @@ useHead({
</script> </script>
<template> <template>
<div class="bg-[#F1F2F4]"> <div class="bg-[#F1F2F4] dark:text-zinc-300 dark:bg-[#151818]">
<NuxtLayout> <NuxtLayout>
<NuxtLoadingIndicator /> <NuxtLoadingIndicator />
<NuxtPage /> <NuxtPage />
@@ -88,4 +88,8 @@ useHead({
opacity: 0; opacity: 0;
filter: blur(1rem); filter: blur(1rem);
} }
html.dark{
color-scheme: dark;
}
</style> </style>

6
components/archive/card.vue
View File

@@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<article class="group border m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700"> <article class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300 ">
<NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1"> <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
<div class="sm:col-span-3"> <div class="sm:col-span-3">
<NuxtImg <NuxtImg
@@ -35,13 +35,13 @@ withDefaults(defineProps<Props>(), {
/> />
</div> </div>
<div class="sm:col-span-7 p-5"> <div class="sm:col-span-7 p-5">
<h2 class="text-xl font-semibold text-black pb-1 group-hover:text-sky-700"> <h2 class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700">
{{ title }} {{ title }}
</h2> </h2>
<p class="text-ellipsis line-clamp-2"> <p class="text-ellipsis line-clamp-2">
{{ description }} {{ description }}
</p> </p>
<div class="text-black text-sm mt-2 mb-1 md:flex md:space-x-6"> <div class="text-black dark:text-zinc-300 text-sm mt-2 mb-1 md:flex md:space-x-6">
<div class="flex items-center"> <div class="flex items-center">
<LogoDate /> <LogoDate />
<p> {{ date }}</p> <p> {{ date }}</p>

6
components/archive/hero.vue
View File

@@ -2,10 +2,12 @@
<div class="container mx-auto mb-5"> <div class="container mx-auto mb-5">
<div class="grid grid-cols-1 sm:grid-cols-2 items-center"> <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
<div class="px-6"> <div class="px-6">
<h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5"> <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
All Blogs All Blogs
</h1> </h1>
<p>Here you will find all the blog posts I have written & published on this site.</p> <p class="dark:text-zinc-300">
Here you will find all the blog posts I have written & published on this site.
</p>
</div> </div>
<div class="px-6 justify-self-center"> <div class="px-6 justify-self-center">
<LogoDogpow /> <LogoDogpow />

8
components/blog/Header.vue
View File

@@ -20,7 +20,7 @@ withDefaults(defineProps<Props>(), {
<template> <template>
<header> <header>
<h1 class="text-xl md:text-3xl lg:text-4xl m-7 font-bold text-center"> <h1 class="text-xl dark:text-zinc-300 md:text-3xl lg:text-4xl m-7 font-bold text-center">
{{ title || '' }} {{ title || '' }}
</h1> </h1>
<NuxtImg <NuxtImg
@@ -28,11 +28,11 @@ withDefaults(defineProps<Props>(), {
:alt="alt || ''" :alt="alt || ''"
class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover" class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover"
/> />
<p class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600"> <p class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600 dark:text-zinc-400">
{{ description }} {{ description }}
</p> </p>
<div class="flex w-full justify-center text-xs md:text-base my-8"> <div class="flex w-full justify-center text-xs md:text-base my-8">
<div class="md:flex text-black content-center gap-8 text-xs sm:text-sm"> <div class="md:flex text-black dark:text-zinc-300 content-center gap-8 text-xs sm:text-sm">
<div class="flex items-center font-semibold"> <div class="flex items-center font-semibold">
<LogoDate /> <LogoDate />
<p>{{ date || '' }}</p> <p>{{ date || '' }}</p>
@@ -40,7 +40,7 @@ withDefaults(defineProps<Props>(), {
<div class="flex items-center gap-2 flex-wrap my-5"> <div class="flex items-center gap-2 flex-wrap my-5">
<LogoTag /> <LogoTag />
<template v-for="tag in tags" :key="tag"> <template v-for="tag in tags" :key="tag">
<span class="bg-gray-200 rounded-md px-2 py-1 font-semibold">{{ tag }}</span> <span class="bg-gray-200 dark:bg-zinc-700 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
</template> </template>
</div> </div>
</div> </div>

6
components/blog/card.vue
View File

@@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<article class="group border m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700"> <article class="group border dark:border-gray-800 m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700 dark:text-zinc-300 ">
<NuxtLink :to="path"> <NuxtLink :to="path">
<NuxtImg <NuxtImg
class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.02] transition-all duration-500" class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.02] transition-all duration-500"
@@ -33,7 +33,7 @@ withDefaults(defineProps<Props>(), {
:alt="alt" :alt="alt"
/> />
<div class="px-3 pb-4"> <div class="px-3 pb-4">
<div class="text-black pt-3 pb-2"> <div class="text-black dark:text-zinc-300 pt-3 pb-2">
<div class="flex items-center"> <div class="flex items-center">
<LogoDate /> <LogoDate />
{{ date }} {{ date }}
@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
</template> </template>
</div> </div>
</div> </div>
<h2 class="text-xl font-semibold text-black pb-1 group-hover:text-sky-700"> <h2 class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700">
{{ title }} {{ title }}
</h2> </h2>
<p class="text-ellipsis line-clamp-2 text-base"> <p class="text-ellipsis line-clamp-2 text-base">

4
components/blog/empty.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<article class="group border m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700"> <article class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700">
<NuxtLink to="/"> <NuxtLink to="/">
<div <div
class="lg:h-48 md:h-36 w-full object-cover object-center group-hover:scale-[1.05] transition-all duration-500" class="lg:h-48 md:h-36 w-full object-cover object-center group-hover:scale-[1.05] transition-all duration-500"
@@ -7,7 +7,7 @@
<LogoConfused /> <LogoConfused />
</div> </div>
<div class="p-5"> <div class="p-5">
<h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-700"> <h2 class="text-3xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700">
No Post Available No Post Available
</h2> </h2>

2
components/category/card.vue
View File

@@ -33,7 +33,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
<template> <template>
<div <div
class="text-[#F1F2F4] px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500" class="text-[#F1F2F4] px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
> >
<NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-xl font-extrabold"> <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-xl font-extrabold">
<h1>#{{ title }}</h1> <h1>#{{ title }}</h1>

4
components/category/hero.vue
View File

@@ -2,10 +2,10 @@
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 items-center"> <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
<div class="px-6"> <div class="px-6">
<h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5"> <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
Categories Categories
</h1> </h1>
<p> <p class="dark:text-zinc-300">
Blow All the topics are listed on which either I have written a blog or will write a blog Blow All the topics are listed on which either I have written a blog or will write a blog
in near future. in near future.
</p> </p>

6
components/footer/connect.vue
View File

@@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<p class="text-black text-base font-semibold"> <p class="text-black dark:text-zinc-300 text-base font-semibold">
Connect With Me Connect With Me
</p> </p>
<p> <p class="dark:text-zinc-300 ">
I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you 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. have an interesting idea, either open source or paid let's connect.
</p> </p>
<a <a
href="mailto: alasadnurriyad4@gmail.com" href="mailto: alasadnurriyad4@gmail.com"
class="block text-center w-full bg-sky-700 p-2 rounded-lg text-[#F1F2F4] mt-3 text-sm" class="block text-center w-full bg-sky-700 p-2 rounded-lg text-[#F1F2F4] mt-3 text-sm"
> >
Sent Mail Sent Mail
</a> </a>

12
components/footer/devloper.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<p class="text-black text-2xl py-1 font-semibold"> <p class="text-black dark:text-zinc-300 text-2xl py-1 font-semibold">
Al Asad Nur Riyad Al Asad Nur Riyad
</p> </p>
<p class="py-2"> <p class="py-2 dark:text-zinc-300 ">
Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently
working at Appscode Inc. working at Appscode Inc.
</p> </p>
@@ -11,7 +11,7 @@
<NuxtLink <NuxtLink
to="https://github.com/nurRiyad" to="https://github.com/nurRiyad"
target="_blank" target="_blank"
class="p-2 bg-gray-300 rounded-md" class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="Github" aria-label="Github"
> >
<Icon name="fa:github" size="1em" /> <Icon name="fa:github" size="1em" />
@@ -19,7 +19,7 @@
<NuxtLink <NuxtLink
to="https://www.linkedin.com/in/nur-riyad/" to="https://www.linkedin.com/in/nur-riyad/"
target="_blank" target="_blank"
class="p-2 bg-gray-300 rounded-md" class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="LinkedIn" aria-label="LinkedIn"
> >
<Icon name="fa:linkedin-square" size="1em" /> <Icon name="fa:linkedin-square" size="1em" />
@@ -27,7 +27,7 @@
<NuxtLink <NuxtLink
to="https://twitter.com/qdnvubp" to="https://twitter.com/qdnvubp"
target="_blank" target="_blank"
class="p-2 bg-gray-300 rounded-md" class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="Twitter" aria-label="Twitter"
> >
<Icon name="fa:twitter-square" size="1em" /> <Icon name="fa:twitter-square" size="1em" />
@@ -35,7 +35,7 @@
<NuxtLink <NuxtLink
to="https://stackoverflow.com/users/16781395/nur-riyad" to="https://stackoverflow.com/users/16781395/nur-riyad"
target="_blank" target="_blank"
class="p-2 bg-gray-300 rounded-md" class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="StackOverflow" aria-label="StackOverflow"
> >
<Icon name="fa:stack-overflow" size="1em" /> <Icon name="fa:stack-overflow" size="1em" />

4
components/footer/link.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col my-5 md:my-0 md:justify-self-center"> <div class="flex flex-col dark:text-zinc-300 my-5 md:my-0 md:justify-self-center">
<p class="text-black text-base font-semibold"> <p class="text-black dark:text-zinc-300 text-base font-semibold">
Quick Link Quick Link
</p> </p>
<NuxtLink to="/" class="hover:underline"> <NuxtLink to="/" class="hover:underline">

4
components/footer/site.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<p class="text-black text-base py-1 font-semibold"> <p class="text-black dark:text-zinc-300 text-base py-1 font-semibold">
About This Site About This Site
</p> </p>
<p class="py-2"> <p class="py-2 dark:text-zinc-300 ">
This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it's deployed in Vercel. This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it's deployed in Vercel.
</p> </p>
</div> </div>

4
components/main/footer.vue
View File

@@ -5,7 +5,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
</script> </script>
<template> <template>
<div class="py-5 border-t mt-5 text-zinc-700"> <div class="py-5 border-t dark:border-gray-800 mt-5 text-zinc-700 dark:text-zinc-300 ">
<div class="px-6 container max-w-5xl mx-auto"> <div class="px-6 container max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3"> <div class="grid grid-cols-1 md:grid-cols-3">
<FooterSite v-if="path === 'about'" /> <FooterSite v-if="path === 'about'" />
@@ -15,7 +15,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
<FooterConnect /> <FooterConnect />
</div> </div>
<div class="border-t mt-5 text-center p-2"> <div class="border-t dark:border-gray-800 mt-5 text-center p-2">
© 2020-2023 No Right is reserved. Who cares 🤷‍♂️? It's © 2020-2023 No Right is reserved. Who cares 🤷‍♂️? It's
<a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline">open source</a> <a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline">open source</a>
anyway. anyway.

34
components/main/header.vue
View File

@@ -2,13 +2,18 @@
const route = useRoute() const route = useRoute()
const path = computed(() => route.fullPath.replace('/', '')) const path = computed(() => route.fullPath.replace('/', ''))
const colorMode = useColorMode()
function onClick(val: string) {
colorMode.preference = val
}
</script> </script>
<template> <template>
<div class="py-5 border-b font-semibold"> <div class="py-5 border-b dark:border-gray-800 font-semibold">
<div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline "> <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline ">
<ul class="flex items-baseline space-x-5"> <ul class="flex items-baseline space-x-5">
<li class="text-lg sm:text-2xl font-bold"> <li class="text-base sm:text-2xl font-bold">
<NuxtLink to="/" :class="{ underline: path === '' }"> <NuxtLink to="/" :class="{ underline: path === '' }">
Riyad's Blog Riyad's Blog
</NuxtLink> </NuxtLink>
@@ -30,6 +35,31 @@ const path = computed(() => route.fullPath.replace('/', ''))
About About
</NuxtLink> </NuxtLink>
</li> </li>
<li>
<ClientOnly>
<button
v-if="colorMode.value === 'dark'"
name="dark-mode" title="Dark"
class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
@click="onClick('light')"
>
<Icon name="icon-park:moon" size="20" />
</button>
<button
v-if="colorMode.value === 'light'"
name="light-mode"
title="Light"
class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
@click="onClick('dark')"
>
<Icon name="noto:sun" size="20" />
</button>
<template #fallback>
<!-- this will be rendered on server side -->
<Icon name="svg-spinners:180-ring" size="20" />
</template>
</ClientOnly>
</li>
</ul> </ul>
</div> </div>
</div> </div>

4
components/main/hero.vue
View File

@@ -2,10 +2,10 @@
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 items-center"> <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
<div class="px-6"> <div class="px-6">
<h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5"> <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
Welcome To My Blog Site Welcome To My Blog Site
</h1> </h1>
<p> <p class="dark:text-zinc-300 ">
Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles,
Tips, Learning resources and more. Tips, Learning resources and more.
</p> </p>

4
components/main/recent.vue
View File

@@ -37,8 +37,8 @@ useHead({
<div class="pb-10"> <div class="pb-10">
<div class="px-6"> <div class="px-6">
<div class="flex flex-row items-center space-x-3 pt-5 pb-3"> <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
<Icon name="mdi:star-three-points-outline" size="2em" class="text-black" /> <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300 " />
<h2 class="text-4xl font-semibold text-black "> <h2 class="text-4xl font-semibold text-black dark:text-zinc-300 ">
Recent Post Recent Post
</h2> </h2>
</div> </div>

4
components/main/trending.vue
View File

@@ -37,8 +37,8 @@ useHead({
<div> <div>
<div class="px-6"> <div class="px-6">
<div class="flex flex-row items-center space-x-3 pt-5 pb-3"> <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
<Icon name="mdi:star-three-points-outline" size="2em" class="text-black" /> <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300 " />
<h2 class="text-4xl font-semibold text-black "> <h2 class="text-4xl font-semibold text-black dark:text-zinc-300 ">
Trending Post Trending Post
</h2> </h2>
</div> </div>

2
layouts/default.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="gd-container font-spacegrotesk"> <div class="gd-container font-spacegrotesk">
<header class="fixed w-full bg-[#F1F2F4] z-10"> <header class="fixed w-full bg-[#F1F2F4] dark:bg-[#151818] z-10">
<MainHeader /> <MainHeader />
</header> </header>
<main> <main>

8
nuxt.config.ts
View File

@@ -32,6 +32,12 @@ export default defineNuxtConfig({
}, },
}, },
colorMode: {
classSuffix: '',
dataValue: 'light',
fallback: 'light',
},
modules: [ modules: [
'@nuxt/content', '@nuxt/content',
'@nuxtjs/tailwindcss', '@nuxtjs/tailwindcss',
@@ -39,7 +45,9 @@ export default defineNuxtConfig({
'@nuxt/image-edge', '@nuxt/image-edge',
'@nuxtjs/robots', '@nuxtjs/robots',
'@nuxtjs/fontaine', '@nuxtjs/fontaine',
'@nuxtjs/color-mode',
'nuxt-simple-sitemap', 'nuxt-simple-sitemap',
'@vueuse/nuxt',
], ],
content: { content: {

3
package.json
View File

@@ -14,11 +14,14 @@
"@formkit/auto-animate": "^0.7.0", "@formkit/auto-animate": "^0.7.0",
"@nuxt/content": "^2.7.2", "@nuxt/content": "^2.7.2",
"@nuxt/image-edge": "^1.0.0-27840416.dc1ed65", "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65",
"@nuxtjs/color-mode": "^3.3.0",
"@nuxtjs/fontaine": "^0.2.5", "@nuxtjs/fontaine": "^0.2.5",
"@nuxtjs/robots": "^3.0.0", "@nuxtjs/robots": "^3.0.0",
"@nuxtjs/tailwindcss": "^6.6.7", "@nuxtjs/tailwindcss": "^6.6.7",
"@tailwindcss/forms": "^0.5.4", "@tailwindcss/forms": "^0.5.4",
"@tailwindcss/typography": "^0.5.9", "@tailwindcss/typography": "^0.5.9",
"@vueuse/core": "^10.4.1",
"@vueuse/nuxt": "^10.4.1",
"eslint": "^8.39.0", "eslint": "^8.39.0",
"nuxt": "^3.6.5", "nuxt": "^3.6.5",
"nuxt-icon": "^0.4.0", "nuxt-icon": "^0.4.0",

8
pages/about.vue
View File

@@ -16,7 +16,7 @@
<NuxtLink <NuxtLink
to="https://github.com/nurRiyad" to="https://github.com/nurRiyad"
target="_blank" target="_blank"
class="p-2 bg-gray-300 rounded-md" class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="Github" aria-label="Github"
> >
<Icon name="fa:github" size="1em" /> <Icon name="fa:github" size="1em" />
@@ -24,7 +24,7 @@
<NuxtLink <NuxtLink
to="https://www.linkedin.com/in/nur-riyad/" to="https://www.linkedin.com/in/nur-riyad/"
target="_blank" target="_blank"
class="p-2 bg-gray-300 rounded-md" class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="LinkedIn" aria-label="LinkedIn"
> >
<Icon name="fa:linkedin-square" size="1em" /> <Icon name="fa:linkedin-square" size="1em" />
@@ -32,7 +32,7 @@
<NuxtLink <NuxtLink
to="https://twitter.com/qdnvubp" to="https://twitter.com/qdnvubp"
target="_blank" target="_blank"
class="p-2 bg-gray-300 rounded-md" class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="Twitter" aria-label="Twitter"
> >
<Icon name="fa:twitter-square" size="1em" /> <Icon name="fa:twitter-square" size="1em" />
@@ -40,7 +40,7 @@
<NuxtLink <NuxtLink
to="https://stackoverflow.com/users/16781395/nur-riyad" to="https://stackoverflow.com/users/16781395/nur-riyad"
target="_blank" target="_blank"
class="p-2 bg-gray-300 rounded-md" class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="StackOverflow" aria-label="StackOverflow"
> >
<Icon name="fa:stack-overflow" size="1em" /> <Icon name="fa:stack-overflow" size="1em" />

3
pages/blogs/[blog].vue
View File

@@ -89,7 +89,8 @@ useHead({
:tags="data.tags" :tags="data.tags"
/> />
<div <div
class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc prose-img:rounded-lg" class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg
prose-h1:no-underline max-w-5xl mx-auto prose-zinc dark:prose-invert prose-img:rounded-lg"
> >
<ContentRenderer v-if="articles" :value="articles"> <ContentRenderer v-if="articles" :value="articles">
<template #empty> <template #empty>

4
pages/blogs/index.vue
View File

@@ -78,7 +78,7 @@ useHead({
v-model="searchTest" v-model="searchTest"
placeholder="Search" placeholder="Search"
type="text" type="text"
class="block w-full bg-[#F1F2F4] rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" class="block w-full bg-[#F1F2F4] dark:bg-zinc-800 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
> >
</div> </div>
@@ -112,7 +112,7 @@ useHead({
</template> </template>
</ClientOnly> </ClientOnly>
<div class="flex justify-center items-center space-x-6"> <div class="flex justify-center items-center space-x-6 ">
<button :disabled="pageNumber <= 1" @click="onPreviousPageClick"> <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
<Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700': pageNumber > 1 }" /> <Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700': pageNumber > 1 }" />
</button> </button>

6
tailwind.config.js
View File

@@ -2,6 +2,7 @@
// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128 // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128
module.exports = { module.exports = {
darkMode: 'class',
content: [], content: [],
theme: { theme: {
extend: { extend: {
@@ -10,5 +11,8 @@ module.exports = {
}, },
}, },
}, },
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')], plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
],
} }

2231
yarn.lock
View File

File diff suppressed because it is too large Load Diff