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

use useState composable

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2022-12-22 23:57:11 +06:00
parent 25b94a6859
commit 4508c10b33
10 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
useHead({
htmlAttrs: {
lang: "en",
@@ -12,6 +14,10 @@ useHead({
{ name: "twitter:creator", content: "@nuxt_js" },
],
});
const { data } = await useAsyncData("index", () => queryContent("/").find());
useState("blogData", () => (data.value as Array<ParsedContent>) || []);
</script>
<template>
@@ -37,7 +43,7 @@ useHead({
/* Layout Transition */
.layout-enter-active,
.layout-leave-active {
transition: all 0.4s;
transition: all 0.3s;
}
.layout-enter-from,
.layout-leave-to {

21
components/ArchiveCardLoader.vue
View File

@@ -1,21 +0,0 @@
<script setup lang="ts">
import { ContentLoader } from "vue-content-loader";
</script>
<template>
<div
class="font-ibmmono px-10 mb-4 text-slate-800 group shadow-sm bg-white rounded-lg py-4"
>
<content-loader
viewBox="0 0 476 45"
:speed="2"
primaryColor="#f3f3f3"
secondaryColor="#ecebeb"
>
<rect x="9" y="6" rx="0" ry="0" width="38" height="34" />
<rect x="58" y="6" rx="0" ry="0" width="369" height="9" />
<rect x="71" y="29" rx="0" ry="0" width="113" height="9" />
<rect x="191" y="28" rx="0" ry="0" width="113" height="9" />
</content-loader>
</div>
</template>

10
components/ListHero.vue
View File

@@ -1,15 +1,17 @@
<script setup lang="ts">
import { ParsedContent } from "@nuxt/content/dist/runtime/types";
const route = useRoute();
const routeType = computed(() => {
return route.params.topic || "";
});
const { data } = await useLazyAsyncData("listhero", () =>
queryContent(`/${routeType.value}`).find()
);
const data = useState("blogData");
const typeName = computed(() => {
return data.value?.at(0)?.type || "";
const allpost = (data.value as Array<ParsedContent>) || [];
const filteredType = allpost.filter((post) => post._dir === routeType.value);
return filteredType.at(0)?.type || "";
});
const title = computed(() => {

3
components/TopicCard.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
const props = defineProps({
title: String,
dir: String,
});
const router = useRouter();
const onClick = () => {
router.push(`/tags/${props.title?.toLocaleLowerCase()}`);
router.push(`/tags/${props.dir}`);
};
</script>

4
pages/[...slug].vue
View File

@@ -5,7 +5,9 @@ definePageMeta({
</script>
<template>
<main class="container mx-auto bg-white max-w-6xl p-6 prose prose-slate">
<main
class="container mx-auto bg-white max-w-5xl p-6 min-h-screen prose prose-slate"
>
<ContentDoc />
</main>
</template>

2
pages/about.vue
View File

@@ -6,7 +6,7 @@ definePageMeta({
<template>
<div
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-screen"
>
<div class="flex gap-14">
<div class="m-2 rounded-lg object-cover">

9
pages/blogs.vue
View File

@@ -1,12 +1,15 @@
<script setup lang="ts">
import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
definePageMeta({
layout: "list",
});
const { data } = useLazyAsyncData("blogs", () => queryContent("/").find());
const data = useState("blogData");
// get all blog post
const getAllPost = computed(() => {
const allpost = data.value || [];
const allpost = (data.value as Array<ParsedContent>) || [];
const alltypes = allpost.map((post) => {
return {
title: post.title,
@@ -26,7 +29,7 @@ const getAllPost = computed(() => {
<template>
<div
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-screen"
>
<div>
<template v-for="pp in getAllPost" :key="pp">

21
pages/index.vue
View File

@@ -1,17 +1,24 @@
<script setup lang="ts">
const { data } = useLazyAsyncData("index", () => queryContent("/").find());
import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
const data = useState("blogData");
// get all the unique types from content
const getTopCategory = computed(() => {
const allpost = data.value || [];
const alltypes = allpost.map((post) => post.type);
const allpost = (data.value as Array<ParsedContent>) || [];
const alltypes = allpost.map((post) => {
return {
type: post.type,
dir: post._dir,
};
});
const uniqType = new Set(alltypes);
return uniqType;
});
// get all post in recent time order
const getRecentContent = computed(() => {
const allpost = data.value || [];
const allpost = (data.value as Array<ParsedContent>) || [];
const customizePost = allpost.map((post) => {
return {
title: post.title,
@@ -27,13 +34,13 @@ const getRecentContent = computed(() => {
const d = new Date(b.date);
return c < d ? 1 : -1;
});
return customizePost;
return customizePost.filter((post, idx) => idx < 6);
});
</script>
<template>
<div
class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased min-h-[72vh]"
class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased min-h-screen"
>
<div class="flex-1">
<h1 class="text-xl pb-8 text-[#e60067]">RECENTLY PUBLISHED</h1>
@@ -54,7 +61,7 @@ const getRecentContent = computed(() => {
<div>
<h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
<template v-for="cat in getTopCategory" :key="cat">
<topic-card :title="cat" />
<topic-card :title="cat.type" :dir="cat.dir" />
</template>
</div>
</div>

25
pages/tags/[topic].vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import { ParsedContent } from "@nuxt/content/dist/runtime/types";
definePageMeta({
layout: "list",
});
@@ -8,33 +10,34 @@ const route = useRoute();
const routeType = computed(() => {
return route.params.topic || "";
});
const { data } = useLazyAsyncData("topic", () =>
queryContent(`/${routeType.value}`).find()
);
const typeName = computed(() => {
const t = data.value?.at(0)?.type || "";
return t.toUpperCase();
});
const data = useState("blogData");
const getRecentContent = computed(() => {
const allpost = data.value || [];
const alltypes = allpost.map((post) => {
const allpost = (data.value as Array<ParsedContent>) || [];
const modifedPost = allpost.map((post) => {
return {
title: post.title,
description: post.description,
path: post._path,
date: post.date as string,
author: post.author,
dir: post._dir,
};
});
alltypes.sort(function (a, b) {
console.log(modifedPost);
const filteredPost = modifedPost.filter(
(post) => post.dir === routeType.value
);
filteredPost.sort(function (a, b) {
const c = new Date(a.date);
const d = new Date(b.date);
return c < d ? 1 : -1;
});
return alltypes;
return filteredPost;
});
</script>

6
pages/tags/index.vue
View File

@@ -1,11 +1,13 @@
<script setup lang="ts">
import { ParsedContent } from "@nuxt/content/dist/runtime/types";
definePageMeta({
layout: "list",
});
const { data } = useLazyAsyncData("tags", () => queryContent("/").find());
const data = useState("blogData");
const getTopCategory = computed(() => {
const allpost = data.value || [];
const allpost = (data.value as Array<ParsedContent>) || [];
const alltypes = allpost.map((post) => post.type);
const uniqType = new Set(alltypes);
const cobj = <Array<{ type: string; count: number; path: string }>>[];