chore(app): reinvent the project

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
               uses: actions/checkout@v4
 
             - name: Setup bun 🔧
-              uses: oven-sh/setup-bun@v1
+              uses: oven-sh/setup-bun@v2
               with:
                   bun-version: latest
 

README.md

@@ -17,19 +17,7 @@ This is an rewrite & major changes from previous version. Everything has changed
 -   🎴 Card-as-container system
 -   👀 you tell me
 
-## 🚧 Project Paused!
-
-Sorry. You may ask why, but it's happened because something unwanted happens.
-
-If you want to know, this thing is created especially for [**Choco Latte**](https://youtube.com/@ChocoLatteCh), a Virtual YouTuber based in Indonesia. She is suddenly decides to stopping her process as Virtual YouTuber & Virtual Streamer. So, I decided to pause this project too. **project's commit may be slowed**.
-
-> a short message:
->
-> Farewell and thank you, Choco. I will always waiting for your comeback. :sob:
-
-[**Read the official post!**](https://www.facebook.com/catchocolattech/posts/772195144406766)
-
-## 🗓️ Roadmap \[Paused\]
+## 🗓️ Roadmap
 
 I will put this here because I know well I won't do them. Things that can be added or improved, priority, and the reason why I didn't do it:
 
@@ -44,28 +32,28 @@ To get this running on your machine, you could try these steps below:
 
 ### 🛠️ Requirements
 
-A [node.js](https://nodejs.org) >= 12.16.2 setup with [pnpm](https://pnpm.io) is highly recommended.
+A [node.js](https://nodejs.org) >= 12.16.2 setup with [bun](https://bun.sh) is highly recommended.
 
 ### 📥️ Clone the repository
 
 ```bash
-$ git clone https://github.com/gifaldyazkaa/chocolattech.git
+$ git clone https://github.com/vrtpro/chocolattech.git
 $ cd chocolattech
 ```
 
 ### 📦️ Install dependencies
 
 ```bash
-$ pnpm install
+$ bun install
 ```
 
 ### 🏃️ Run it on development server
 
 ```bash
-$ pnpm run dev
+$ bun dev
 # Running on http://localhost:3000
 # or
-$ pnpm run dev --host=0.0.0.0
+$ bun dev --host=0.0.0.0
 # Running on http://localhost:3000
 # Running on http://192.x.x.x:3000
 ```
@@ -74,12 +62,14 @@ $ pnpm run dev --host=0.0.0.0
 
 ```bash
 # Server deployment (SSR)
-$ pnpm run build
+$ bun build
 
 # Static deployment (Pre-rendered)
-$ pnpm run generate
+$ bun generate
 ```
 
 ## 📃️ License
 
-Source code distributed under MIT License. See [LICENSE](./LICENSE) for more information.
+This source code is licensed under [Mozilla Public License 2.0](./LICENSE).
+
+I do not own any art or content assets on this site. All copyrights belong to their respective owners.

components/Navigation.vue

@@ -36,11 +36,6 @@
                                 ><Icon name="bxs:donate-heart"
                             /></NuxtLink>
                         </li>
-                        <li class="navbar__list">
-                            <NuxtLink to="/merch" class="navbar__link" aria-label="Merchandise page"
-                                ><Icon name="material-symbols:shopping-cart"
-                            /></NuxtLink>
-                        </li>
                         <li class="navbar__list hidden md:block">
                             <NuxtLink to="/schedule" class="navbar__link" aria-label="Schedule page"
                                 ><Icon name="material-symbols:auto-schedule-rounded"

composables/useGreetings.ts

@@ -0,0 +1,28 @@
+export const useGreetings = () => {
+    if (import.meta.client) {
+        console.log(
+            "%c👋 WELCOMEEE!%c Welcome to Choco Latte's website! 🍫",
+            'color: black; font-size: 16px; border-radius: 3px 0 0 3px; padding: 2px 2px 1px 10px; background: #9ca3af',
+            'border-radius: 0 3px 3px 0; font-size: 16px; padding: 2px 10px 1px 2px; background: #0f172a',
+            '',
+        );
+        console.log(
+            "❗️ %cWarn %c Close this devtools if you don't understand what you gonna do.",
+            'color: black; border-radius: 3px 0 0 3px; padding: 2px 2px 1px 10px; background: #f59e0b',
+            'border-radius: 0 3px 3px 0; padding: 2px 10px 1px 2px; background: #78350f',
+            '',
+        );
+        console.log(
+            '🤎 %cInfo %c Proudly present by Azukashiic.',
+            'color: black; border-radius: 3px 0 0 3px; padding: 2px 2px 1px 10px; background: #22d3ee',
+            'border-radius: 0 3px 3px 0; padding: 2px 10px 1px 2px; background: #164e63',
+            '',
+        );
+        console.log(
+            '🤎 %cInfo %c Enjoy your visit!',
+            'color: black; border-radius: 3px 0 0 3px; padding: 2px 2px 1px 10px; background: #22d3ee',
+            'border-radius: 0 3px 3px 0; padding: 2px 10px 1px 2px; background: #164e63',
+            '',
+        );
+    }
+};

scripts/metadata.ts → composables/useMetadata.ts

@@ -1,4 +1,4 @@
-export const _initHead = () => {
+export const useWebMeta = () => {
     useHead({
         titleTemplate: titleChunk => {
             return titleChunk ? `${titleChunk} | Choco Latte VTuber` : `Choco Latte VTuber`;
@@ -20,7 +20,7 @@ export const _initHead = () => {
             },
             { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
             { name: 'author', content: 'Choco Latte チョコラテ' },
-            { name: 'publisher', content: 'Falcxxdev' },
+            { name: 'publisher', content: 'Azukashiic' },
             { name: 'theme-color', content: '#ff93b5' },
             { name: 'robots', content: 'index,follow' },
             // Opengraph (Facebook, Discord & average SNS)
@@ -32,8 +32,8 @@ export const _initHead = () => {
             },
             { name: 'og:type', content: 'website' },
             { name: 'og:site_name', content: 'Choco Latte チョコラテ' },
-            { name: 'og:url', content: 'https://chocolatte.falcxxdev.cyou' },
-            { name: 'og:image', content: 'https://cdn.upload.systems/uploads/ydDigOD1.png' },
+            { name: 'og:url', content: 'https://choco.hoshiro.space' },
+            { name: 'og:image', content: 'http://cdn.hoshiro.space/choco/graph.png' },
             { name: 'og:image:type', content: 'image/png' },
             { name: 'og:image:width', content: '1200' },
             { name: 'og:image:height', content: '600' },
@@ -44,22 +44,22 @@ export const _initHead = () => {
                 content:
                     'Choco Latte (チョコラテ) is a independent female Indonesian VTuber, formerly associated with Tsukimi Project',
             },
-            { name: 'twitter:image', content: 'https://cdn.upload.systems/uploads/ydDigOD1.png' },
+            { name: 'twitter:image', content: 'http://cdn.hoshiro.space/choco/graph.png' },
             { name: 'twitter:card', content: 'summary_large_image' },
             { name: 'twitter:site', content: '@ChocoLatteCh_' },
-            { name: 'twitter:creator', content: '@falcxxdev' },
+            { name: 'twitter:creator', content: '@azukashiic' },
         ],
         link: [
             { rel: 'icon', href: '/svgs/icon.svg', type: 'image/svg+xml' },
-            { rel: 'canonical', href: 'https://chocolatte.falcxxdev.cyou' },
+            { rel: 'canonical', href: 'https://choco.hoshiro.space' },
             { rel: 'preload', href: '/img/signature.webp', as: 'image' },
             { rel: 'preload', href: '/img/neko_half.webp', as: 'image' },
         ],
         script: [
             {
                 async: true,
-                'data-website-id': '26760278-a6e3-4f8a-b5fd-fb8e01427806',
-                src: 'https://umami.falcxxdev.cyou/script.js',
+                'data-website-id': 'ff027c74-3390-419b-becd-344bed766c7e',
+                src: 'https://umami.falcxxdev.fun/script.js',
             },
         ],
     });

layouts/default.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-_initHead();
-_greet();
+useWebMeta();
+useGreetings();
 
 useJsonld((): any => ({
     '@context': 'https://schema.org/',
@@ -25,36 +25,9 @@ useJsonld((): any => ({
 </script>
 
 <template>
-    <Modal>
-        <iframe
-            src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcatchocolattech%2Fposts%2Fpfbid0TCwCMZEUqDUjXcf4yTDE8EG3CMUQ9SmYwEoj4zCmZTqVN2vtfgyrfCxvTEHeG5FGl&show_text=true&width=380"
-            width="380"
-            height="430"
-            style="border: none; overflow: hidden; border-radius: 0.5rem"
-            scrolling="no"
-            frameborder="0"
-            allowfullscreen="true"
-            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
-        ></iframe>
-    </Modal>
     <Navigation />
     <NuxtLoadingIndicator color="var(--gradient)" :throttle="0" :height="5" />
     <div class="container mx-auto p-4 font-lexend">
-        <Toast>
-            <h3 class="text-md font-bold"><Icon name="tabler:bell-exclamation" size="1.2em" /> ATTENTION!</h3>
-            <p class="text-sm px-6">
-                Choco is stopping her activity as <span class="font-black">Virtual YouTuber</span>.
-                <br />
-                See
-                <NuxtLink
-                    to="https://www.facebook.com/catchocolattech/posts/772195144406766"
-                    target="_blank"
-                    class="underline text-teal-200"
-                    >this post</NuxtLink
-                >
-                for more information.
-            </p>
-        </Toast>
         <slot />
     </div>
 </template>

nuxt.config.ts

@@ -1,6 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+    devtools: { enabled: false },
     modules: ['@nuxtjs/tailwindcss', 'nuxt-jsonld', 'nuxt-icon'],
+    compatibilityDate: '2024-09-06',
     builder: 'vite',
     app: {
         pageTransition: {
@@ -11,7 +13,4 @@ export default defineNuxtConfig({
     tailwindcss: {
         cssPath: '~/assets/css/tailwind.css',
     },
-    imports: {
-        dirs: ['./composables', './components', './scripts', './utils'],
-    },
 });

package.json

@@ -3,7 +3,7 @@
     "version": "1.1.0",
     "type": "module",
     "scripts": {
-        "build": "sitemap-generator -f ./public/page-sitemap.xml -g hourly -p 1.0 -v https://chocolatte.falcxxdev.fun/ && nuxt build",
+        "build": "sitemap-generator -f ./public/page-sitemap.xml -g hourly -p 1.0 -v https://choco.hoshiro.space/ && nuxt build",
         "dev": "nuxt dev",
         "generate": "nuxt generate",
         "lint": "prettier -c .",
@@ -16,12 +16,12 @@
         "email": "falcxxdev@icloud.com"
     },
     "devDependencies": {
-        "@nuxtjs/tailwindcss": "6.8.0",
-        "nuxt": "3.6.5",
-        "nuxt-icon": "0.4.2",
-        "nuxt-jsonld": "2.0.8",
-        "prettier": "3.0.1",
-        "sitemap-generator-cli": "7.5.0",
-        "typescript": "5.1.6"
+        "@nuxtjs/tailwindcss": "^6.12.2",
+        "nuxt": "^3.12.4",
+        "nuxt-icon": "^0.6.10",
+        "nuxt-jsonld": "^2.0.8",
+        "prettier": "^3.3.3",
+        "sitemap-generator-cli": "^7.5.0",
+        "typescript": "^5.7.2"
     }
 }

pages/index.vue

@@ -10,13 +10,14 @@ useHead({
             <img src="/img/neko_half.webp" alt="Model" class="h-[30rem] w-auto m-auto" height="0" width="0" />
         </div>
         <div class="p-2 lg:py-16 lg:flex lg:w-1/2">
-            <div class="my-4 lg:mt-28">
+            <div class="my-4 flex flex-col items-center lg:mt-28">
                 <h1 class="text-3xl text-chocolate-800 text-center font-bold">🍫 Choco Latte チョコラテ</h1>
                 <h2 class="text-md text-slate-400 text-center font-bold italic">/ chocolatte / or our oujo-sama</h2>
                 <p class="text-base text-chocolate-700 my-3 text-center">
                     Hello everyone, my name is Choco Latte. I will be your virtual friend from now on and in the future.
                     Nice to meet you, my virtual best friend!
                 </p>
+                <Button name="Explore more" icon="material-symbols:arrow-forward" dest="/about" class="!w-[15rem]" />
             </div>
         </div>
         <div class="lg:hidden p-2 block lg:py-16 lg:flex-1">

pages/models.vue

@@ -25,7 +25,7 @@ useHead({
                 <div class="my-4 lg:mt-28 mx-auto">
                     <h1 class="text-2xl text-chocolate-800 text-center font-bold">Princess model</h1>
                     <p class="text-base text-chocolate-700 my-3 text-center">
-                        Choco's already considered as an mature girl and ready for debutante. It's time for Choco to
+                        Choco is already considered as an mature girl and ready for debutante. It's time for Choco to
                         think about her kingdom safety. Would she get her power back and save the kingdom?
                     </p>
                 </div>
@@ -47,9 +47,6 @@ useHead({
                 <img src="/img/loli_model.webp" alt="Loli model" class="h-[25rem] m-auto" />
             </div>
         </FlexCard>
-        <h1 class="text-xl my-7 text-chocolate-800 text-center font-bold">
-            [Plan & Spoilers] Mocha & Vanilla debut (Unpredictable)
-        </h1>
     </FullScreenCard>
 </template>
 

pages/schedule.vue

@@ -11,14 +11,14 @@ useHead({
             <FullScreenCard class="lg:w-[50rem] h-auto m-auto schedule">
                 <div>
                     <img
-                        src="https://cdn.discordapp.com/attachments/898543182189559880/1080883498266661015/nostream.webp"
+                        src="http://cdn.hoshiro.space/choco/nostream.png"
                         alt="Weekly schedule"
                         class="rounded-xl shadow-md hover:ring-2 ring-chocolate-700 transition-all"
                     />
                     <p class="text-chocolate-700 text-sm mt-3">
-                        Schedule for unknown (little chance to stream)
+                        Schedule for unknown
                         <br />
-                        Last updated on <code class="text-[#ff93b5] font-bold">Mon Jun 12 2023 19:21:00 GMT+7</code>
+                        Last updated on <code class="text-[#ff93b5] font-bold">Mon Nov 25 2024 17:05:00 GMT+7</code>
                     </p>
                     <a
                         href="https://www.youtube.com/@ChocoLatteCh"