Feat/migrate to daisy (#10)

* feat: init daisyui! * feat: change theme and colors * change dark theme and add colors
2024-12-21 20:05:37 +01:00
parent c8e066e6f6
commit 9571752f26
23 changed files with 801 additions and 194 deletions
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="autumn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@rushstack/eslint-patch": "^1.10.4",
+    "@tailwindcss/typography": "^0.5.15",
    "@types/fontfaceobserver": "^2.1.3",
    "@types/markdown-it": "^13.0.9",
    "@types/node": "^20.17.8",
@@ -58,6 +59,8 @@
    "@vue/compiler-sfc": "^3.5.13",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
+    "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.22",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier-vue": "^5.0.0",
@@ -66,6 +69,7 @@
    "eslint-plugin-vue": "^9.31.0",
    "prettier": "^3.4.1",
    "sass": "^1.81.0",
+    "tailwindcss": "^3.4.17",
    "typescript": "~5.7.2",
    "vite": "^6.0.0",
    "vite-plugin-pwa": "^0.21.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')]
+}
--- a/public/assets/saved.svg
+++ b/public/assets/saved.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy fill-current" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
  <circle cx="12" cy="14" r="2" />
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,15 +6,14 @@ const { isReady } = useGitHubLogin()
 </script>

 <template>
-  <div id="main-app">
+  <div id="main-app" class="prose">
    <router-view v-if="isReady" />
+
    <new-version />
  </div>
 </template>

 <style lang="scss">
-@import 'styles/app';
-
 #main-app {
  height: 100vh;
  display: flex;
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -100,16 +100,14 @@ const focusREADME = () => scrollToTop()
      </div>
      <div class="repo-title">
        <div class="repo-header">
-          <h1 class="title is-1">
+          <h1 class="heading-1">
            <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
              {{ repo }}
            </router-link>
+            | <em class="user">{{ user }}</em>
          </h1>
          <cache-all-notes />
        </div>
-        <h2 class="subtitle is-5">
-          <em>{{ user }}</em>
-        </h2>
      </div>
      <slot />
      <lite-loading v-if="isLoading" />
@@ -149,22 +147,23 @@ $header-height: 40px;
    h5,
    h6,
    strong {
-      color: var(--font-color);
+      color: var(--fallback-bc, oklch(var(--bc) / 1));
    }

    table {
-      color: var(--font-color);
-      background-color: var(--background-color);
+      color: var(--fallback-bc, oklch(var(--bc) / 1));
+      background-color: var(--fallback-b1, oklch(var(--b1) / 1));

      thead {
        th {
-          color: var(--font-color);
+          color: var(--fallback-bc, oklch(var(--bc) / 1));
        }
      }
    }

    blockquote {
-      background-color: var(--background-color);
+      background-color: var(--fallback-b1, oklch(var(--b1) / 1));
+      color: var(--fallback-bc, oklch(var(--bc) / 1));
    }
  }

@@ -176,7 +175,7 @@ $header-height: 40px;
    position: sticky;
    left: 0;
    top: 0;
-    padding: 0 2rem 1rem;
+    padding: 0 2rem;

    .repo-title {
      margin-top: 1rem;
@@ -186,6 +185,10 @@ $header-height: 40px;
        justify-content: center;
        align-items: center;
        gap: 1rem;
+
+        .user {
+          font-size: 1.5rem;
+        }
      }

      .title {
@@ -231,7 +234,7 @@ $header-height: 40px;
      font-size: 0.8em;

      a {
-        color: var(--font-color);
+        color: var(--fallback-bc, oklch(var(--bc) / 1));
        display: block;
        text-align: center;
      }
--- a/src/components/HeaderNote.vue
+++ b/src/components/HeaderNote.vue
@@ -1,5 +1,6 @@
 <template>
  <header class="header-note">
+    <ThemeSwap />
    <router-link
      :to="{ name: 'Home' }"
      class="button is-small is-white back-button"
@@ -27,16 +28,10 @@
  </header>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import ThemeSwap from '@/components/ThemeSwap.vue'

-export default defineComponent({
-  name: 'HeaderNote',
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true }
-  }
-})
+defineProps<{ user: string; repo: string }>()
 </script>

 <style scoped lang="scss">
--- a/src/components/LinkedNotes.vue
+++ b/src/components/LinkedNotes.vue
@@ -35,7 +35,8 @@ const emitNote = (sha: string) => {
 <style scoped lang="scss">
 .linked-notes {
  padding: 1rem;
-  background-color: var(--light-link);
+  background-color: var(--fallback-b1, oklch(var(--b1) / 1));
+  color: var(--fallback-bc, oklch(var(--bc) / 1));

  .subtitle {
    font-style: italic;
--- a/src/components/LiteLoading.vue
+++ b/src/components/LiteLoading.vue
@@ -1,25 +1,6 @@
-<script setup lang="ts">
-import { withDefaults } from 'vue'
-
-withDefaults(
-  defineProps<{
-    light?: boolean
-  }>(),
-  {
-    light: false
-  }
-)
-</script>
-
 <template>
  <div class="lite-loading">
-    <img
-      v-if="light"
-      class="is-loading"
-      src="/assets/loading-white.svg"
-      alt="loading..."
-    />
-    <img v-else class="is-loading" src="/assets/loading.svg" alt="loading..." />
+    <span class="loading loading-spinner"></span>
  </div>
 </template>

@@ -29,9 +10,5 @@ withDefaults(
  flex: 1;
  justify-content: center;
  align-items: center;
-
-  .is-loading {
-    animation: spinAround 0.8s infinite linear;
-  }
 }
 </style>
--- a/src/components/LoginGithub.vue
+++ b/src/components/LoginGithub.vue
@@ -1,7 +1,12 @@
 <template>
  <div class="login-github">
    <br />
-    <a :href="url.toString()" target="_blank" rel="noopener noreferrer">
+    <a
+      class="btn btn-primary"
+      :href="url.toString()"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
      login to
      <img src="/assets/github.svg" alt="GitHub icon" />
    </a>
--- a/src/components/NewVersion.vue
+++ b/src/components/NewVersion.vue
@@ -34,7 +34,7 @@ const reload = () => {
    </div>
    <div class="buttons">
      <button v-if="needRefresh" class="button is-primary" @click="reload">
-        <LiteLoading v-if="isLoading" light />
+        <LiteLoading v-if="isLoading" />
        <span v-else>Reload</span>
      </button>
      <button class="button" @click="close">Close</button>
@@ -53,7 +53,8 @@ const reload = () => {
  color: var(--primary-color);
  border: var(--primary-color) 2px solid;
  border-radius: 4px;
-  background-color: var(--background-color);
+  background-color: var(--fallback-b1, oklch(var(--b1) / 1));
+  color: var(--fallback-bc, oklch(var(--bc) / 1));
 }

 button {
--- a/src/components/RepoList.vue
+++ b/src/components/RepoList.vue
@@ -26,7 +26,7 @@ const getStyle = (repo: string) => {
          repo: favoriteRepo.name
        }
      }"
-      class="button"
+      class="btn"
      :style="getStyle(`${favoriteRepo.name}-${username}`)"
    >
      {{ favoriteRepo.name }}
--- a/src/components/SignInGithub.vue
+++ b/src/components/SignInGithub.vue
@@ -14,20 +14,8 @@ const href = url.toString()
 </script>

 <template>
-  <a :href="href" class="sign-in-github button is-primary">
-    <span>
-      Sign in with
-      <img src="/assets/github.svg" alt="GitHub" />
-    </span>
+  <a :href="href" class="sign-in-github btn btn-primary">
+    Sign in with
+    <img src="/assets/github.svg" alt="GitHub" />
  </a>
 </template>
-
-<style scoped lang="scss">
-.sign-in-github {
-  span {
-    display: flex;
-    align-items: flex-end;
-    gap: 0.5rem;
-  }
-}
-</style>
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -174,7 +174,8 @@ $border-color: rgba(18, 19, 58, 0.2);

 .stacked-note {
  padding: 0 1.5rem 1rem;
-  background-color: var(--background-color);
+  background-color: var(--fallback-b1, oklch(var(--b1) / 1));
+  color: var(--fallback-bc, oklch(var(--bc) / 1));

  transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;

@@ -194,14 +195,15 @@ $border-color: rgba(18, 19, 58, 0.2);
 }

 .title-stacked-note {
-  background-color: var(--background-color);
+  background-color: var(--fallback-b1, oklch(var(--b1) / 1));
+  color: var(--fallback-bc, oklch(var(--bc) / 1));
  position: sticky;

  top: 0;
  font-size: 0.8em;

  a {
-    color: var(--font-color);
+    color: var(--fallback-bc, oklch(var(--bc) / 1));
    display: block;
  }
 }
--- a/src/components/ThemeSwap.vue
+++ b/src/components/ThemeSwap.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isDark = ref(JSON.parse(localStorage.getItem('is-dark') ?? 'false'))
+const toggle = (isChecked: boolean) => {
+  localStorage.setItem('is-dark', isChecked ? 'true' : 'false')
+}
+</script>
+
+<template>
+  <div class="theme-swap">
+    <label class="grid cursor-pointer place-items-center">
+      <input
+        type="checkbox"
+        value="forest"
+        class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
+        :checked="isDark"
+        @click="
+          (e) => {
+            toggle((e.target as any)?.checked ?? false)
+          }
+        "
+      />
+      <svg
+        class="stroke-base-100 fill-base-100 col-start-1 row-start-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="5" />
+        <path
+          d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
+        />
+      </svg>
+      <svg
+        class="stroke-base-100 fill-base-100 col-start-2 row-start-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+    </label>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.theme-swap {
+}
+</style>
--- a/src/components/WelcomeWorld.vue
+++ b/src/components/WelcomeWorld.vue
@@ -7,58 +7,36 @@
    <last-visited />

    <div class="get-started">
-      <div class="buttons is-centered">
-        <sign-in-github />
-        <router-link
-          :to="{
-            name: 'FluxNoteView',
-            params: { user: 'lite-note', repo: 'getting-started' }
-          }"
-          class="button"
-          >Get started</router-link
-        >
-        <router-link v-if="isLogged" :to="{ name: 'RepoList' }" class="button"
-          >Manage your repos</router-link
-        >
-      </div>
+      <sign-in-github />
+      <router-link
+        :to="{
+          name: 'FluxNoteView',
+          params: { user: 'lite-note', repo: 'getting-started' }
+        }"
+        class="btn"
+        >Get started</router-link
+      >
+      <router-link v-if="isLogged" :to="{ name: 'RepoList' }" class="btn"
+        >Manage your repos</router-link
+      >
    </div>

-    <form @submit.prevent>
-      <div class="columns is-centered is-vcentered to-user-repo">
-        <div class="column">https://github.com/</div>
-        <div class="columns column is-mobile is-centered is-vcentered">
-          <div class="column">
-            <div class="field">
-              <div class="control">
-                <input
-                  v-model="userInput"
-                  class="input"
-                  type="text"
-                  placeholder="user"
-                />
-              </div>
-            </div>
-          </div>
-          /
-          <div class="column">
-            <div class="field">
-              <div class="control">
-                <input
-                  v-model="repoInput"
-                  class="input"
-                  type="text"
-                  placeholder="repo"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="column is-2">
-            <button type="submit" class="button is-primary" @click="submit">
-              go
-            </button>
-          </div>
-        </div>
-      </div>
+    <form class="github-form" @submit.prevent>
+      <div>github.com/</div>
+      <input
+        v-model="userInput"
+        class="input input-ghost"
+        type="text"
+        placeholder="user"
+      />
+      /
+      <input
+        v-model="repoInput"
+        class="input input-ghost"
+        type="text"
+        placeholder="repo"
+      />
+      <button type="submit" class="btn btn-primary" @click="submit">go</button>
    </form>

    <footer>
@@ -69,28 +47,21 @@
        rel="noopener noreferrer"
        >Julien</a
      >
+      <theme-swap />
    </footer>
  </div>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue'
-
+<script lang="ts" setup>
 import RepoList from '@/components/RepoList.vue'
 import SignInGithub from '@/components/SignInGithub.vue'
+import ThemeSwap from '@/components/ThemeSwap.vue'
 import { useForm } from '@/hooks/useForm.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import LastVisited from '@/modules/history/components/LastVisited.vue'

-export default defineComponent({
-  name: 'WelcomeWorld',
-  components: { SignInGithub, LastVisited, RepoList },
-  setup() {
-    const { isLogged, username } = useGitHubLogin()
-
-    return { ...useForm(), isLogged, username }
-  }
-})
+const { isLogged } = useGitHubLogin()
+const { userInput, repoInput, submit } = useForm()
 </script>

 <style lang="scss" scoped>
@@ -105,16 +76,31 @@ export default defineComponent({
  .get-started {
    margin: center;
    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
  }

  .title {
    text-align: center;
  }
 }
-
+.github-form {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  input {
+    max-width: 140px;
+  }
+}
 footer {
+  display: flex;
+  gap: 1rem;
+
  img {
    vertical-align: middle;
+    margin-top: 0;
  }
 }

--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,4 @@
+import './styles/app.css'
 import 'markdown-it-latex/dist/index.css'
 import 'notyf/notyf.min.css'

--- a/src/modules/card/components/FlipCard.vue
+++ b/src/modules/card/components/FlipCard.vue
@@ -61,7 +61,7 @@ $border-radius: 0.5rem;
  .flip-card-inner {
    flex: 1;
    position: relative;
-    transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s;
+    transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
    transform-style: preserve-3d;
    border-radius: $border-radius;
  }
@@ -79,7 +79,7 @@ $border-radius: 0.5rem;
  .flip-card-content {
    width: 100%;
    background-color: #ede4e0;
-    color: var(--font-color);
+    color: var(--fallback-bc, oklch(var(--bc) / 1));
    padding: 1rem;
    border-radius: $border-radius;
  }
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,23 +1,20 @@
@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime");

-$primary: #2c3a47;
-$link: #445fb9;
-$light-link: lighten($link, 45%);
-$family-primary: "Courier Prime", monospace;
-$background: #ffffff;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

 :root {
-  --primary-color: #{$primary};
-  --font-family: #{$family-primary};
+  --primary-color: #2c3a47;
+  --font-family: "Courier Prime", monospace;
  --font-color: #4a4a4a;
-  --light-link: #{$light-link};
-  --background-color: #{$background};
+  --link: #445fb9;
+  --light-link: lighten(#445fb9, 45%);
+  --background-color: #ffffff;
  --note-width: 620px;
 }

-@import "../../node_modules/bulma/bulma.sass";
-
 html {
  overflow-y: auto;
  overflow-x: auto;
@@ -27,7 +24,6 @@ body {
  height: 100vh;
  scroll-behavior: smooth;
  overflow-y: auto;
-  font-size: 1.2em;
 }

@media screen and (min-width: 769px) {
@@ -54,37 +50,34 @@ body {
 }

 a {
-  &:hover {
-    color: darken($link, 20);
-  }
-
  &.external-link {
    text-decoration: underline;

    &::after {
-      margin-left: 0.2rem;
-      vertical-align: text-top;
+      margin-left: 0.4rem;
      content: url("/assets/external-link.svg");
    }
  }
 }

 .notif-success {
-  background-color: $link;
+  background-color: var(--link);
 }

 .repo-note {
  font-family: var(--font-family);
-  color: var(--font-color);
-  background-color: var(--background-color);
  transition-property: color, background-color;
-  transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
+  transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
 }

 .table-wrapper {
  overflow-x: auto;
 }

+.btn {
+  font-size: 1rem;
+}
+
@media print {

  html,
@@ -104,10 +97,6 @@ pre {
  }
 }

-code {
-  font-family: var(--font-family);
-}
-
 .markdown-alert {
  padding: 1rem;
  background-color: #ecf0f1;
--- a/src/views/FleetingNotes.vue
+++ b/src/views/FleetingNotes.vue
@@ -69,18 +69,18 @@ watch(mode, async (newMode) => {
      :content="content"
    >
      <h3 class="subtitle is-3">Inbox</h3>
-      <div v-if="!hasTodayNote" class="columns is-centered">
-        <div class="column is-half is-centered">
-          <button class="button is-primary is-light" @click="toggleMode">
+      <div v-if="!hasTodayNote" class="columns">
+        <div class="column">
+          <button class="btn btn-primary" @click="toggleMode">
            new fleeting note
          </button>
        </div>
      </div>
      <div v-if="mode === 'edit'">
        <edit-note v-model="newContent" />
-        <div class="columns is-centered">
-          <div class="column is-half is-centered">
-            <button class="button is-light" @click="toggleMode">
+        <div class="columns">
+          <div class="column is-half">
+            <button class="btn btn-outline" @click="toggleMode">
              <img src="/assets/saved.svg" alt="save" />
            </button>
          </div>
--- a/src/views/ShareNotes.vue
+++ b/src/views/ShareNotes.vue
@@ -32,7 +32,6 @@ const { content } = useFile(note)

 <style scoped lang="scss">
 .share-notes {
-  background-color: var(--background-color);
  min-width: 100vw;
  margin: auto;
  display: flex;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,50 @@
+/** @type {import('tailwindcss').Config} */
+
+import typography from '@tailwindcss/typography'
+import daisyui from 'daisyui'
+
+const defaultTitleStyles = Array.from(
+  { length: 6 },
+  (_, k) => `h${k + 1}`
+).reduce(
+  (acc, heading) => ({
+    ...acc,
+    [heading]: {
+      'margin-top': '0',
+      'margin-bottom': '0.5em'
+    }
+  }),
+  {}
+)
+
+module.exports = {
+  content: ['./src/**/*.{vue,js,ts}'],
+  theme: {
+    extend: {
+      typography: () => ({
+        DEFAULT: {
+          css: {
+            'font-size': '1.2em',
+            'font-family': '"Courier Prime", monospace',
+            ...defaultTitleStyles,
+            p: {
+              'margin-top': '0.8em',
+              'margin-bottom': '0.8em'
+            },
+            img: {
+              'margin-top': 0,
+              'margin-bottom': 0
+            }
+          }
+        }
+      })
+    }
+  },
+  plugins: [typography, daisyui],
+  daisyui: {
+    themes: ['autumn', 'forest'],
+    base: true,
+    styled: true,
+    utils: true
+  }
+}