deploy 39c8389

.github/workflows/deploy.yml

@@ -0,0 +1,42 @@
+# https://github.com/actions/deploy-pages#usage
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches:
+      - deploy
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      # Pick your own package manager and build script
+      - run: npm install
+      - run: npx nuxt build --preset github_pages
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.output/public
+  # Deployment job
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+    # Deploy to the github_pages environment
+    environment:
+      name: github_pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,28 @@
+# Keys
+deploy
+deploy.pub
+
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,50 @@
+# Cyan Home
+[![Sync](https://github.com/CyanChanges/home/actions/workflows/sync.yml/badge.svg)](https://github.com/CyanChanges/home/actions/workflows/sync.yml)  
+Built with Bun + Nuxt + PrimeVue
+
+
+## Browse now
+
+Try access any of the following:
+
+| Defaults | Cloudflare(Netlify) | Netlify | GitHubPages |  
+| -------- | ------------------- | ------- | ----------- |
+| [cyans.me](https://cyans.me) | [www](https://www.cyans.me/) | [netlify.home](https://netlify.home.cyans.me/) | [ghpages.home](https://ghpages.home.cyans.me/) |
+
+## Build
+### Clone the repository
+```shell
+git clone https://github.com/CyanChanges/home.git cyans-home
+cd cyans-home
+```
+
+### Locally browse
+Bun for both JavaScript Runtime and Package Manager.
+
+```shell
+bun install
+```
+
+### Run preview
+
+```shell
+bun run preview -o
+```
+
+### Cloudflare pages preview
+A build is required before doing this.
+```shell
+bunx wrangler pages dev dist/
+```
+
+## Project license
+Copyright (c) 2024 Cyan Changes. 
+
+Follow [CC BY-NC-ND 4.0 License](https://creativecommons.org/licenses/by-nc-nd/4.0/) 
+for any non-code content.
+For any code content, 
+unless otherwise stated, all rights are reserved.
+
+
+
+

app.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <AppHeader/>
+  <main>
+    <NuxtPage/>
+  </main>
+  <AppFooter/>
+  <Toast />
+</template>
+
+<style scoped>
+.menubar {
+  margin-bottom: 0.5rem;
+}
+</style>

assets/styles.scss

@@ -0,0 +1,5 @@
+@import 'primeicons/primeicons.css';
+
+:root {
+  font-family: "Noto Sans SC", "Noto Sans", sans-serif;
+}

components/AnalyticsConfirm.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+
+const store = useAnalytics()
+
+let cfWAnalytics = ref(store.cfExist)
+let msClarity = ref(store.clarity)
+let gAnalytic = ref(store.googleAnalytics)
+
+let tooltip = computed(() => store.cfExist ? "Enforced by Cloudflare" : undefined)
+
+function configure() {
+  store.$patch(() => ({
+    clarity: msClarity.value,
+    googleAnalytics: msClarity.value,
+    cloudflareWAnalytics: Boolean(cfWAnalytics.value),
+  }))
+  store.confirm()
+}
+
+</script>
+
+<template>
+  <Panel severity="warn" header="Data Collect">
+    <div class="m-0">
+      <p>We use 3rd-party analytics services to improvement our website & services.</p>
+      <p>
+        By visiting our website,
+        we collected some basic information such as your <b>country and region</b>, <b>browser name</b>, etc.
+      </p>
+      <p>Read our <a href="/privacy">Privacy Policy</a> for more details.</p>
+      <b>Analytics Options</b>
+      <div border="solid rounded dark" p-2 m-2 flex="~ 1 col md:row" justify-between
+           class="items-center md:items-center"
+           v-tooltip="tooltip">
+        <p>Cloudflare Web Analytics</p>
+        <ToggleButton v-model="cfWAnalytics"
+                      :disabled="store.cfExist"
+                      onIcon="pi pi-check"
+                      offIcon="pi pi-times"
+                      :onLabel="$t('yes')"
+                      :offLabel="$t('no')"/>
+      </div>
+      <div border="solid rounded dark" p-2 m-2 flex="~ 1 col md:row" justify-between
+           class="items-center md:items-center">
+        <p>Google Analytics</p>
+        <ToggleButton v-model="gAnalytic"
+                      onIcon="pi pi-check"
+                      offIcon="pi pi-times"
+                      :onLabel="$t('yes')"
+                      :offLabel="$t('no')"/>
+      </div>
+      <div border="solid rounded dark" p-2 m-2 flex="~ 1 col md:row" justify-between
+           class="items-center md:items-center">
+        <p>Microsoft Clarity</p>
+        <ToggleButton v-model="msClarity"
+                      onIcon="pi pi-check"
+                      offIcon="pi pi-times"
+                      :onLabel="$t('yes')"
+                      :offLabel="$t('no')"/>
+      </div>
+      <p>Click the <b>Done</b> button below indicates that you have read the Privacy Policy.</p>
+    </div>
+    <template #footer>
+      <div class="flex justify-end">
+        <Button label="Done" severity="Success" @click="configure" raised outlined/>
+      </div>
+    </template>
+  </Panel>
+
+</template>
+
+<style scoped>
+</style>

components/AppFooter.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const currentYear = new Date().getFullYear()
+</script>
+
+<template>
+  <div class="flex m-2rem mt-5rem">
+    <div class="footer m-auto text-center w-a h-a font-700">
+      <span class="t-cyan">CyanChanges</span> &copy; {{ currentYear }}. {{ $t("allRightsReserved") }}.
+      <br><br>
+      <span class="">
+        <a v-tooltip="'CyanChanges'" href="https://github.com/CyanChanges">GitHub</a> |
+        <a v-tooltip="'@cyanc:matrix.org'" href="https://matrix.to/@cyanc:matrix.org#/@cyanc:matrix.org">Matrix</a> |
+        <a v-tooltip="'cyanchanges'" type="text" href="https://discord.gg/hp86wkWf">Discord</a> |
+        <a v-tooltip="'[email protected]'" href="https://mastodon.social/@CyanChanges">Mastodon</a> |
+        <a v-tooltip="'ID: 298526251'" href="https://www.hoyolab.com/accountCenter/postList?id=298526251"
+           class="color-dark-3"><del>HoYoLab</del></a>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.t-cyan {
+  background: linear-gradient(25deg, #2dceff, #2dffd8);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 1000;
+}
+</style>

components/AppHeader.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const { t } = useI18n()
+import type { MenuItem } from "primevue/menuitem";
+import { PrimeIcons } from '@primevue/core/api';
+import trimEnd from 'lodash.trimend'
+
+let router = useRouter()
+
+let items: MenuItem[] = [
+  {
+    label: t("cyanHome"),
+    icon: PrimeIcons.HOME,
+    route: "/",
+    disabled: () => {
+      return trimEnd(router.currentRoute.value.path, "/") == ""
+    },
+  },
+  {
+    label: t("blogPage"),
+    icon: PrimeIcons.LIST,
+    route: "/blog",
+    disabled: () => {
+      return trimEnd(router.currentRoute.value.path, "/") == "/blog"
+    },
+  }
+]
+
+let [analytic] = useAutoAnimate()
+let store = useAnalytics()
+</script>
+
+<template>
+  <header>
+    <NuxtRouteAnnouncer/>
+    <Menubar :model="items" class="menubar">
+      <template #item="{ item, props, hasSubmenu, root }">
+        <NuxtLink v-ripple v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+          <div class="flex items-center">
+            <a :href="href" v-bind="props.action" @click="navigate">
+              <span :class="item.icon"/>
+              <span class="ml-2">{{ item.label }}</span>
+              <Badge v-if="item.badge" class="ml-auto" :value="item.badge"/>
+              <span v-if="item.shortcut"
+                    class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{
+                  item.shortcut
+                }}</span>
+              <i v-if="hasSubmenu"
+                 :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+            </a>
+          </div>
+        </NuxtLink>
+        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+          <span :class="item.icon"/>
+          <span class="ml-2">{{ item.label }}</span>
+          <Badge v-if="item.badge" class="ml-auto" :value="item.badge"/>
+          <span v-if="item.shortcut"
+                class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{
+              item.shortcut
+            }}</span>
+          <i v-if="hasSubmenu"
+             :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+        </a>
+      </template>
+    </Menubar>
+    <ClientOnly>
+      <AnalyticsConfirm ref="analytic" v-if="!store.isConfirmed"/>
+    </ClientOnly>
+  </header>
+</template>
+
+<style scoped>
+.menubar {
+  margin-bottom: 0.5rem;
+}
+</style>

content/blog/hello.md

@@ -0,0 +1,6 @@
+---
+title: 'Hello World'
+description: 'Hello World Blog Page'
+---
+
+Hello World