chore: content blog

2023-05-05 17:23:07 +08:00 · 2023-05-05 17:23:07 +08:00 · 420abc4ea5
parent 94ec1aaee0
commit 420abc4ea5
10 changed files with 178 additions and 41 deletions
--- a/components/Banner.vue
+++ b/components/Banner.vue
@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = $defineProps<{
+  img: string
+  title?: string
+  topic?: string
+  description?: string
+  link?: {
+    href: string
+    name: string
+  }
+  mask?: 'top' | 'bottom' | 'both'
+}>()
+
+function getMask() {
+  switch (props.mask) {
+    case 'top':
+      return 'linear-gradient(0deg,#000, transparent);'
+    case 'bottom':
+      return 'linear-gradient(0deg, transparent, #000);'
+    case 'both':
+    default:
+      return 'linear-gradient(0deg, transparent, #000, transparent);'
+  }
+}
+</script>
+
+<template>
+  <Section
+    relative h-380px md:h-400px xl:h-450px
+  >
+    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${img}');-webkit-mask-image:${getMask()}`" />
+    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
+      <p v-if="title" class="text-title" drop-shadow>
+        {{ title }}
+      </p>
+      <h2 v-if="topic" class="text-h2" text-white drop-shadow>
+        {{ topic }}
+      </h2>
+      <p v-if="description" text-h6 pb-5 drop-shadow>
+        {{
+          description
+        }}
+      </p>
+      <NuxtLink v-if="link" :href="link?.href">
+        <ABtn>
+          {{ link?.name }}
+        </ABtn>
+      </NuxtLink>
+    </Section>
+  </Section>
+</template>
--- a/components/Carousel.vue
+++ b/components/Carousel.vue
@ -18,7 +18,7 @@ useIntervalFn(() => {
  >
    <AView v-for="(item, i) in carousels" :key="i" :value="i">
      <div class="relative h-full max-h-700px min-h-500px w-full flex items-center justify-center bg-transparent">
-        <div class="absolute absolute z-10 hidden text-shadow">
+        <!-- <div class="absolute absolute z-10 text-shadow">
          <h2 class="text-h2 text-start text-amber-700 dark:text-white">
            {{ $t(item.title) }}
          </h2>
@ -30,8 +30,8 @@ useIntervalFn(() => {
              {{ $t(item.link.name) }}
            </ABtn>
          </NuxtLink>
-        </div>
-        <div class="absolute left-0 top-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c)));" />
+        </div> -->
+        <div class="absolute left-0 top-0 z-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c))); pointer-events: none;" />
        <img :src="item.img">
      </div>
      <!-- <ACard
--- a/components/Footer.vue
+++ b/components/Footer.vue
@ -6,11 +6,11 @@ const footer = useFoot()

 <template>
  <Divider />
-  <div class="grid-row p-20 py-10 lg:(grid-cols-3) md:(grid-cols-2 px-30) xl:px-60">
+  <div class="grid-row p-20 pt-30 lg:(grid-cols-3) md:(grid-cols-2 px-30) xl:px-60">
    <div
      v-for="(col, i) in footer"
      :key="i"
-      class="w-full flex flex-col items-center gap-4"
+      class="w-full flex flex-col items-center gap-8"
    >
      <h5 text-title opacity-60>
        {{ $t(col.title) }}
@ -21,7 +21,7 @@ const footer = useFoot()
      </NuxtLink>
    </div>
  </div>
-  <div my-10 mt-20 flex items-center justify-center gap-4>
+  <div my-10 flex items-center justify-center gap-4>
    <BrandLogo />
    © Copyright 2022 - 2023 LandVault · Wam Group · All rights reserved
    <DarkToggle />
--- a/components/brand/logo.vue
+++ b/components/brand/logo.vue
@ -1,9 +1,11 @@
 <script setup>
 const color = useColorMode()
+
+const textColor = computed(() => color.value === 'dark' ? 'white' : 'black')
 </script>

 <template>
-  <div inline-flex :class="color.value === 'dark' ? 'text-white' : 'text-black'">
+  <div :text="textColor" class="py-10">
    <svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 749.65 91.19">
      <path fill="currentColor" d="M80.84,7.07V22.23H48V72.75H32.84V22.23H0V7.07Z" />
      <path
--- a/components/header/header.vue
+++ b/components/header/header.vue
@ -1,5 +1,5 @@
 <template>
-  <header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute">
+  <header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute z-100 top-0">
    <NuxtLink to="/" class="w-35 flex items-center gap-5">
      <BrandLogo />
    </NuxtLink>
--- a/content/en/test.md
+++ b/content/en/test.md
@ -0,0 +1,30 @@
+---
+img: "/imgs/1 (8).jpg"
+topic: "Grave of the Fireflies"
+title: " "
+description: "In the latter part of World War II, a boy and his sister, orphaned when their mother is killed in the firebombing of Tokyo, are left to survive on their own in what remains of civilian life in Japan. The plot follows this boy and his sister as they do their best to survive in the Japanese countryside, battling hunger, prejudice, and pride in their own quiet, personal battle."
+---
+
+
+<p align="center">
+<img src="./public/topverse.svg" width="600"/>
+</p>
+
+<h2 align="center">
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
+<br><br>
+ 
+
+```bash
+git clone https://github.com/TOPVERSE/TOPVERSE_Official.git
+cd TOPVERSE_Official 
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```
--- a/content/test.md
+++ b/content/test.md
@ -0,0 +1,33 @@
+---
+img: "/imgs/1 (1).jpg"
+topic: "Grave of the Fireflies"
+title: " "
+description: "In the latter part of World War II, a boy and his sister, orphaned when their mother is killed in the firebombing of Tokyo, are left to survive on their own in what remains of civilian life in Japan. The plot follows this boy and his sister as they do their best to survive in the Japanese countryside, battling hunger, prejudice, and pride in their own quiet, personal battle."
+director: "Isao Takahata"
+release_date: 1988
+running_time: 89
+---
+
+
+<p align="center">
+<img src="./public/topverse.svg" width="600"/>
+</p>
+
+<h2 align="center">
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
+<br><br>
+ 
+
+```bash
+git clone https://github.com/TOPVERSE/TOPVERSE_Official.git
+cd TOPVERSE_Official 
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```
--- a/content/zh/test.md
+++ b/content/zh/test.md
@ -0,0 +1,30 @@
+---
+img: "/imgs/1 (8).jpg"
+topic: "中文中文"
+title: " "
+description: "I什么没什么吗吗吗吗吗没什么奥斯卡大奖发拉开京东方技术的叫阿里；垃圾袋 in their own quiet, personal battle."
+---
+
+
+<p align="center">
+<img src="./public/topverse.svg" width="600"/>
+</p>
+
+<h2 align="center">
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
+<br><br>
+ 
+
+```bash
+git clone https://github.com/TOPVERSE/TOPVERSE_Official.git
+cd TOPVERSE_Official 
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```
--- a/pages/blog/[id].vue
+++ b/pages/blog/[id].vue
@ -0,0 +1,17 @@
+<script setup>
+const route = useRoute()
+const { locale } = useI18n()
+
+const path = `/${locale.value}${route.path.split('blog')[1]}`
+
+const { data } = await useAsyncData(`content-${path}`, () => {
+  return queryContent().where({ _path: path }).findOne()
+})
+</script>
+
+<template>
+  <Banner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" />
+  <main class="m-auto prose">
+    <ContentRenderer v-if="data" :value="data" />
+  </main>
+</template>
--- a/pages/index.vue
+++ b/pages/index.vue
@ -140,26 +140,12 @@ const sectionNine = useSectionNine()
  </Section>

  <!-- Section Four -->
-  <Section
-    relative h-380px md:h-400px xl:h-450px
-  >
-    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${sectionFour.img}');-webkit-mask-image:linear-gradient(0deg, transparent, #000);`" />
-    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-shadow>
-      <h2 class="text-h2">
-        {{ $t(sectionFour.topic) }}
-      </h2>
-      <p text-h6 pb-5>
-        {{
-          $t(sectionFour.description)
-        }}
-      </p>
-      <NuxtLink :href="sectionFour.link.href">
-        <ABtn>
-          {{ $t(sectionFour.link.name) }}
-        </ABtn>
-      </NuxtLink>
-    </Section>
-  </Section>
+  <Banner
+    :img="$t(sectionFour.img)" :topic="$t(sectionFour.topic)" :description="$t(sectionFour.description)" :link="{
+      href: sectionFour.link.href,
+      name: $t(sectionFour.link.name),
+    }" mask="bottom"
+  />

  <!-- Section Five -->
  <Section class="from-violet-500 to-fuchsia-500 text-white dark:(from-violet-600 to-fuchsia-600)" bg-gradient-to-r>
@ -229,19 +215,7 @@ const sectionNine = useSectionNine()
  </Section>

  <!-- Section Seven -->
-  <Section
-    relative h-380px md:h-400px xl:h-450px
-  >
-    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${sectionSeven.img}');-webkit-mask-image:linear-gradient(0deg, transparent, #000);`" />
-    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
-      <p class="text-title">
-        {{ $t(sectionSeven.title) }}
-      </p>
-      <h2 class="text-h2">
-        {{ $t(sectionSeven.topic) }}
-      </h2>
-    </Section>
-  </Section>
+  <Banner :img="$t(sectionSeven.img)" :title="$t(sectionSeven.title)" :topic="$t(sectionSeven.topic)" mask="bottom" />

  <!-- Section Eight -->
  <Section>