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

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>

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>

4
components/footer/connect.vue
View File

@@ -1,9 +1,9 @@
<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>

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>

2
layouts/default.vue
View File

@@ -1,6 +1,6 @@
<template>
<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 />
</header>
<main>

8
nuxt.config.ts
View File

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

3
package.json
View File

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

8
pages/about.vue
View File

@@ -16,7 +16,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" />
@@ -24,7 +24,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" />
@@ -32,7 +32,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" />
@@ -40,7 +40,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" />

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

@@ -89,7 +89,8 @@ useHead({
:tags="data.tags"
/>
<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">
<template #empty>

4
pages/blogs/index.vue
View File

@@ -78,7 +78,7 @@ useHead({
v-model="searchTest"
placeholder="Search"
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>
@@ -112,7 +112,7 @@ useHead({
</template>
</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">
<Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700': pageNumber > 1 }" />
</button>

6
tailwind.config.js
View File

@@ -2,6 +2,7 @@
// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128
module.exports = {
darkMode: 'class',
content: [],
theme: {
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