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

change design

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2022-12-20 23:09:38 +06:00
parent 2edd734e94
commit 479603ab2f
15 changed files with 123 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/tile_background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

4
components/ArchievCard.vue
View File

@@ -8,7 +8,9 @@ const props = defineProps({
</script>
<template>
<div class="font-ibmmono px-10 mb-4 text-slate-800 group">
<div
class="font-ibmmono px-10 mb-4 text-slate-800 group shadow-sm bg-white rounded-lg py-4"
>
<div class="flex items-center space-x-3 space-y-2">
<icon name="ant-design:arrow-right-outlined" />
<div>

26
components/FooterCom.vue
View File

@@ -4,7 +4,7 @@ const theme = ref("light");
<template>
<footer class="p-3 mt-10 bg-[#a2d9ff] font-ibmmono">
<div class="container px-4 mx-auto max-w-6xl flex justify-center">
<div class="container px-4 mx-auto max-w-6xl flex justify-between">
<ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
<li>Copyright &#169; 2022 - Present</li>
<li>|</li>
@@ -15,18 +15,24 @@ const theme = ref("light");
target="_blank"
to="https://nurriyad.xyz"
>
Al Asad Nur Riyad
Riyad
</nuxt-link>
</li>
<li>|</li>
</ul>
<ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
<li>
Site source on
<nuxt-link
class="underline"
target="_blank"
to="https://github.com/nurRiyad/blogs"
>
GitHub.
<nuxt-link to="/">
<icon size="22px" name="uil:github" />
</nuxt-link>
</li>
<li>
<nuxt-link to="/">
<icon size="22px" name="uil:linkedin" />
</nuxt-link>
</li>
<li>
<nuxt-link to="/">
<icon size="22px" name="mdi:stackoverflow" />
</nuxt-link>
</li>
</ul>

9
components/IndexHero.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div class="text-center text-stone-800 font-ibmmono bg-[#a2d9ff]">
<h1 class="text-4xl pt-16 pb-2 font-bold">Al Asad Nur Riyad</h1>
<p class="mt-3 max-w-md mx-auto text-base">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eum
nam magni rem. Nihil reprehenderit dolorum quas, facere soluta commodi.
</p>
</div>
</template>

19
components/ListHero.vue Normal file
View File

@@ -0,0 +1,19 @@
<script setup lang="ts">
const route = useRoute();
const title = computed(() => {
const path = route.fullPath;
const splitPath = path.split("/");
const name = splitPath.at(1);
if (name === "blogs") return "All Blogs Post";
else if (name === "tags") return "All Tags";
else return "About Me";
});
</script>
<template>
<div class="text-center text-stone-800 bg-[#a2d9ff] mb-5 font-ibmmono">
<h1 class="text-4xl p-16 font-bold">{{ title }}</h1>
</div>
</template>

38
components/NavbarCom.vue
View File

@@ -16,20 +16,20 @@ const activeNavbar = computed(() => {
class="container px-4 mx-auto max-w-6xl flex justify-between text-slate-800"
>
<ul class="flex space-x-8 items-end justify-start">
<li class="align">
<li>
<nuxt-link
class="font-semibold text-xl"
class="font-semibold text-base"
:class="{ underline: activeNavbar === '' }"
to="/"
>
RafKhata
NurRiyad
</nuxt-link>
</li>
<li>
<nuxt-link
:class="{ underline: activeNavbar === 'latest' }"
to="/latest"
>Latest</nuxt-link
:class="{ underline: activeNavbar === 'blogs' }"
to="/blogs"
>Blogs</nuxt-link
>
</li>
<li>
@@ -37,30 +37,16 @@ const activeNavbar = computed(() => {
>Tags</nuxt-link
>
</li>
</ul>
<ul class="flex space-x-8 items-end">
<li>
<nuxt-link
:class="{ underline: activeNavbar === 'archive' }"
to="/archive"
>Archive</nuxt-link
:class="{ underline: activeNavbar === 'about' }"
to="/about"
>About</nuxt-link
>
</li>
</ul>
<ul class="flex space-x-3 items-end">
<li>
<nuxt-link to="/">
<icon size="25px" name="uil:github" />
</nuxt-link>
</li>
<li>
<nuxt-link to="/">
<icon size="25px" name="uil:linkedin" />
</nuxt-link>
</li>
<li>
<nuxt-link to="/">
<icon size="25px" name="mdi:stackoverflow" />
</nuxt-link>
</li>
<li v-show="theme === 'light'" @click="theme = 'dark'">
<nuxt-link to="/">
<icon size="25px" name="ph:sun-dim" />

19
components/OneLineCard.vue
View File

@@ -1,19 +0,0 @@
<script setup lang="ts">
const props = defineProps({
title: String,
path: String,
});
</script>
<template>
<div class="group font-semibold antialiased text-slate-800 font-ibmmono">
<nuxt-link class="flex items-baseline space-x-3" :to="path">
<div class="group-hover:scale-125 transition">
<icon name="ant-design:arrow-right-outlined" />
</div>
<h4 class="group-hover:underline">
{{ title }}
</h4>
</nuxt-link>
</div>
</template>

2
components/TopicCard.vue
View File

@@ -6,7 +6,7 @@ const props = defineProps({
const router = useRouter();
const onClick = () => {
router.push(`/tags/${props.title}`);
router.push(`/tags/${props.title?.toLocaleLowerCase()}`);
};
</script>

47
content/git/hellogit.md Normal file
View File

@@ -0,0 +1,47 @@
---
title: "Thi is hello git"
description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley"
draft: false
head: true
author: riyad
date: 29 Jan 2022
type: Git
---
::info-component
#time
22 January 2022
#author
by Md. [Al Asad Nur Riyad](https://www.nurriyad.xyz)
::
# How to install nuxt 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
## Step 01
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<img src="/img/sdf.jpg" class="mx-auto" alt="drawing" width="200"/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
## This is a sub header
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[google](google.com)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

3
layouts/default.vue
View File

@@ -1,8 +1,7 @@
<template>
<div>
<div class="h-10 bg-[#a2d9ff]"></div>
<navbar-com />
<div class="h-10 bg-[#a2d9ff]"></div>
<index-hero />
<img src="@/assets/img/wave.png" class="w-full" alt="this is wave image" />
<div>
<slot />

1
layouts/list.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="bg-slate-200">
<navbar-com />
<list-hero />
<div>
<slot />
</div>

5
pages/archive.vue → pages/about.vue
View File

@@ -26,11 +26,8 @@ const getAllPost = computed(() => {
<template>
<div
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
>
<h1 class="font-semibold text-3xl mt-10 mb-5 py-3 mx-5 text-slate-800">
ALL BLOG POST
</h1>
<div>
<template v-for="pp in getAllPost" :key="pp">
<archiev-card

20
pages/latest.vue → pages/blogs.vue
View File

@@ -5,18 +5,16 @@ definePageMeta({
const { data } = await useAsyncData("home", () => queryContent("/").find());
const getRecentContent = computed(() => {
const getAllPost = computed(() => {
const allpost = data.value || [];
const alltypes = allpost.map((post) => {
return {
title: post.title,
description: post.description,
path: post._path,
date: post.date as string,
author: post.author,
type: post.type,
};
});
alltypes.sort(function (a, b) {
const c = new Date(a.date);
const d = new Date(b.date);
@@ -28,19 +26,15 @@ const getRecentContent = computed(() => {
<template>
<div
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
>
<h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
LATEST CONTENT
</h1>
<div class="flex justify-between flex-wrap">
<template v-for="pp in getRecentContent" :key="pp">
<latest-blog-card
<div>
<template v-for="pp in getAllPost" :key="pp">
<archiev-card
:title="pp.title"
:description="pp.description"
:date="pp.date"
:author="pp.author"
:path="pp.path"
:type="pp.type"
/>
</template>
</div>

29
pages/index.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
const { data } = await useAsyncData("home", () => queryContent("/").find());
// get all the unique types from content
const getTopCategory = computed(() => {
const allpost = data.value || [];
const alltypes = allpost.map((post) => post.type);
@@ -8,9 +9,10 @@ const getTopCategory = computed(() => {
return uniqType;
});
// get all post in recent time order
const getRecentContent = computed(() => {
const allpost = data.value || [];
const alltypes = allpost.map((post) => {
const customizePost = allpost.map((post) => {
return {
title: post.title,
description: post.description,
@@ -19,23 +21,12 @@ const getRecentContent = computed(() => {
};
});
alltypes.sort(function (a, b) {
customizePost.sort(function (a, b) {
const c = new Date(a.date);
const d = new Date(b.date);
return c < d ? 1 : -1;
});
return alltypes;
});
const getPopularContent = computed(() => {
const allpost = data.value || [];
const alltypes = allpost.map((post) => {
return {
title: post.title,
path: post._path,
};
});
return alltypes;
return customizePost;
});
</script>
@@ -55,20 +46,12 @@ const getPopularContent = computed(() => {
</template>
</div>
</div>
<div class="max-w-[400px]">
<div class="basis-1/4">
<div>
<h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
<template v-for="cat in getTopCategory" :key="cat">
<topic-card :title="cat" />
</template>
<h2 class="text-xl py-8 text-[#e60067]">POPULAR CONTENT</h2>
<div class="space-y-5">
<template v-for="pp in getPopularContent" :key="pp">
<one-line-card :title="pp.title" :path="pp.path" />
</template>
</div>
</div>
</div>
</div>

3
pages/tags/index.vue
View File

@@ -28,9 +28,6 @@ const getTopCategory = computed(() => {
<div
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
>
<h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
ALL TAGS
</h1>
<div class="flex justify-start flex-wrap">
<template v-for="ct in getTopCategory" :key="ct">
<category-card :type="ct.type" :count="ct.count" :path="ct.path" />