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

Add dark mode

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-09-09 15:42:25 +06:00
parent 7d7d737294
commit 83a5dbe156
25 changed files with 1244 additions and 1139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/archive/card.vue
View File

@@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
</script>
<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">
<div class="sm:col-span-3">
<NuxtImg
@@ -35,13 +35,13 @@ withDefaults(defineProps<Props>(), {
/>
</div>
<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 }}
</h2>
<p class="text-ellipsis line-clamp-2">
{{ description }}
</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">
<LogoDate />
<p> {{ date }}</p>

6
components/archive/hero.vue
View File

@@ -2,10 +2,12 @@
<div class="container mx-auto mb-5">
<div class="grid grid-cols-1 sm:grid-cols-2 items-center">
<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
</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 class="px-6 justify-self-center">
<LogoDogpow />

8
components/blog/Header.vue
View File

@@ -20,7 +20,7 @@ withDefaults(defineProps<Props>(), {
<template>
<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 || '' }}
</h1>
<NuxtImg
@@ -28,11 +28,11 @@ withDefaults(defineProps<Props>(), {
: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"
/>
<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 }}
</p>
<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">
<LogoDate />
<p>{{ date || '' }}</p>
@@ -40,7 +40,7 @@ withDefaults(defineProps<Props>(), {
<div class="flex items-center gap-2 flex-wrap my-5">
<LogoTag />
<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>
</div>
</div>

6
components/blog/card.vue
View File

@@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
</script>
<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">
<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"
@@ -33,7 +33,7 @@ withDefaults(defineProps<Props>(), {
:alt="alt"
/>
<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">
<LogoDate />
{{ date }}
@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
</template>
</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 }}
</h2>
<p class="text-ellipsis line-clamp-2 text-base">

4
components/blog/empty.vue
View File

@@ -1,5 +1,5 @@
<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="/">
<div
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 />
</div>
<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
</h2>

2
components/category/card.vue
View File

@@ -33,7 +33,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
<template>
<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">
<h1>#{{ title }}</h1>

4
components/category/hero.vue
View File

@@ -2,10 +2,10 @@
<div class="container mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 items-center">
<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
</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
in near future.
</p>

6
components/footer/connect.vue
View File

@@ -1,16 +1,16 @@
<template>
<div>
<p class="text-black text-base font-semibold">
<p class="text-black dark:text-zinc-300 text-base font-semibold">
Connect With Me
</p>
<p>
<p class="dark:text-zinc-300 ">
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.
</p>
<a
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
</a>

12
components/footer/devloper.vue
View File

@@ -1,9 +1,9 @@
<template>
<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
</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
working at Appscode Inc.
</p>
@@ -11,7 +11,7 @@
<NuxtLink
to="https://github.com/nurRiyad"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="Github"
>
<Icon name="fa:github" size="1em" />
@@ -19,7 +19,7 @@
<NuxtLink
to="https://www.linkedin.com/in/nur-riyad/"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="LinkedIn"
>
<Icon name="fa:linkedin-square" size="1em" />
@@ -27,7 +27,7 @@
<NuxtLink
to="https://twitter.com/qdnvubp"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="Twitter"
>
<Icon name="fa:twitter-square" size="1em" />
@@ -35,7 +35,7 @@
<NuxtLink
to="https://stackoverflow.com/users/16781395/nur-riyad"
target="_blank"
class="p-2 bg-gray-300 rounded-md"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
aria-label="StackOverflow"
>
<Icon name="fa:stack-overflow" size="1em" />

4
components/footer/link.vue
View File

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

4
components/footer/site.vue
View File

@@ -1,9 +1,9 @@
<template>
<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
</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.
</p>
</div>

4
components/main/footer.vue
View File

@@ -5,7 +5,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
</script>
<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="grid grid-cols-1 md:grid-cols-3">
<FooterSite v-if="path === 'about'" />
@@ -15,7 +15,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
<FooterConnect />
</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
<a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline">open source</a>
anyway.

34
components/main/header.vue
View File

@@ -2,13 +2,18 @@
const route = useRoute()
const path = computed(() => route.fullPath.replace('/', ''))
const colorMode = useColorMode()
function onClick(val: string) {
colorMode.preference = val
}
</script>
<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 ">
<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 === '' }">
Riyad's Blog
</NuxtLink>
@@ -30,6 +35,31 @@ const path = computed(() => route.fullPath.replace('/', ''))
About
</NuxtLink>
</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>
</div>
</div>

4
components/main/hero.vue
View File

@@ -2,10 +2,10 @@
<div class="container mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 items-center">
<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
</h1>
<p>
<p class="dark:text-zinc-300 ">
Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles,
Tips, Learning resources and more.
</p>

4
components/main/recent.vue
View File

@@ -37,8 +37,8 @@ useHead({
<div class="pb-10">
<div class="px-6">
<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" />
<h2 class="text-4xl font-semibold 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 dark:text-zinc-300 ">
Recent Post
</h2>
</div>

4
components/main/trending.vue
View File

@@ -37,8 +37,8 @@ useHead({
<div>
<div class="px-6">
<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" />
<h2 class="text-4xl font-semibold 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 dark:text-zinc-300 ">
Trending Post
</h2>
</div>