remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat/upgrade daisy UI (#12)

Browse Source 
* prune: remove daisyui config

* upgrade daisyui and implement new themes

* Update .env checksum
This commit is contained in:
Julien Calixte
2025-03-01 21:27:35 +01:00
committed by GitHub
parent 8a637bf4c1
commit 6c62f6afa0
17 changed files with 478 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@@ -1,2 +1,2 @@
VITE_LIGHT_MODE=nord VITE_LIGHT_MODE=garden
VITE_DARK_MODE=sunset VITE_DARK_MODE=sunset

2
.env.checksum
View File

@@ -1 +1 @@
f9b344787f9c20d36a27837d32612d87447737831e824760223ebee16db7ad5c 84d588441b7e30aa991c53d842cd08cdeb5d97510f6026a0d44a7d3f5df133de

3
.prettierrc Normal file
View File

@@ -0,0 +1,3 @@
{
"semi": false
}

14
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en" data-theme="garden">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -13,8 +13,14 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="mask-icon" href="/masked-icon.svg" color="#FFFFFF" /> <link rel="mask-icon" href="/masked-icon.svg" color="#FFFFFF" />
<meta name="theme-color" content="#2C3A47" /> <meta name="theme-color" content="#2C3A47" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css"> <link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"/> rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"
/>
</head> </head>
<body> <body>
<noscript> <noscript>

6
package.json
View File

@@ -16,6 +16,7 @@
"@intlify/unplugin-vue-i18n": "^1.6.0", "@intlify/unplugin-vue-i18n": "^1.6.0",
"@octokit/core": "^5.2.0", "@octokit/core": "^5.2.0",
"@octokit/rest": "^20.1.1", "@octokit/rest": "^20.1.1",
"@tailwindcss/postcss": "^4.0.9",
"@toycode/markdown-it-class": "^1.2.4", "@toycode/markdown-it-class": "^1.2.4",
"@vscode/markdown-it-katex": "^1.1.1", "@vscode/markdown-it-katex": "^1.1.1",
"@vueuse/core": "^10.11.1", "@vueuse/core": "^10.11.1",
@@ -35,6 +36,7 @@
"notyf": "^3.10.0", "notyf": "^3.10.0",
"pastel-color": "^1.0.3", "pastel-color": "^1.0.3",
"pinia": "^2.2.6", "pinia": "^2.2.6",
"postcss": "^8.5.3",
"pouchdb-adapter-indexeddb": "^9.0.0", "pouchdb-adapter-indexeddb": "^9.0.0",
"pouchdb-browser": "^9.0.0", "pouchdb-browser": "^9.0.0",
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
@@ -60,7 +62,7 @@
"@vue/eslint-config-prettier": "^8.0.0", "@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0", "@vue/eslint-config-typescript": "^12.0.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"daisyui": "^4.12.22", "daisyui": "^5.0.0",
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"eslint": "^8.57.1", "eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
@@ -71,7 +73,7 @@
"husky": "^9.1.7", "husky": "^9.1.7",
"prettier": "^3.4.1", "prettier": "^3.4.1",
"sass": "^1.81.0", "sass": "^1.81.0",
"tailwindcss": "^3.4.17", "tailwindcss": "^4.0.9",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"vite": "^6.0.0", "vite": "^6.0.0",
"vite-plugin-pwa": "^0.21.0", "vite-plugin-pwa": "^0.21.0",

793
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
postcss.config.js
View File

@@ -1,3 +1,3 @@
module.exports = { module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')] plugins: { "@tailwindcss/postcss": {}, autoprefixer: {} },
} }

54
src/components/FluxNote.vue
View File

@@ -6,22 +6,22 @@ import {
onMounted, onMounted,
onUnmounted, onUnmounted,
toRefs, toRefs,
watch watch,
} from 'vue' } from "vue"
import LiteLoading from '@/components/LiteLoading.vue' import LiteLoading from "@/components/LiteLoading.vue"
import StackedNote from '@/components/StackedNote.vue' import StackedNote from "@/components/StackedNote.vue"
import { useLinks } from '@/hooks/useLinks.hook' import { useLinks } from "@/hooks/useLinks.hook"
import { useMarkdown } from '@/hooks/useMarkdown.hook' import { useMarkdown } from "@/hooks/useMarkdown.hook"
import { useNoteView } from '@/hooks/useNoteView.hook' import { useNoteView } from "@/hooks/useNoteView.hook"
import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook' import { useVisitRepo } from "@/modules/history/hooks/useVisitRepo.hook"
import CacheAllNotes from '@/modules/note/components/CacheAllNote.vue' import CacheAllNotes from "@/modules/note/components/CacheAllNote.vue"
import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook' import { useUserSettings } from "@/modules/user/hooks/useUserSettings.hook"
const HeaderNote = defineAsyncComponent( const HeaderNote = defineAsyncComponent(
() => import('@/components/HeaderNote.vue') () => import("@/components/HeaderNote.vue"),
) )
const props = withDefaults( const props = withDefaults(
@@ -37,8 +37,8 @@ const props = withDefaults(
content: null, content: null,
parseContent: true, parseContent: true,
withContent: true, withContent: true,
withHeader: true withHeader: true,
} },
) )
const user = computed(() => props.user) const user = computed(() => props.user)
@@ -49,17 +49,17 @@ const store = useUserRepoStore()
useUserSettings() useUserSettings()
const { visitRepo } = useVisitRepo({ user: user, repo: repo }) const { visitRepo } = useVisitRepo({ user: user, repo: repo })
const { toHTML } = useMarkdown(repo) const { toHTML } = useMarkdown(repo)
const { listenToClick } = useLinks('note-display') const { listenToClick } = useLinks("note-display")
const { stackedNotes, scrollToTop } = useRouteQueryStackedNotes() const { stackedNotes, scrollToTop } = useRouteQueryStackedNotes()
const { titles } = useNoteView('note-container') const { titles } = useNoteView("note-container")
const renderedContent = computed(() => const renderedContent = computed(() =>
props.content !== null props.content !== null
? props.parseContent ? props.parseContent
? toHTML(props.content) ? toHTML(props.content)
: props.content : props.content
: store.readme : store.readme,
) )
const hasContent = computed(() => !!renderedContent.value) const hasContent = computed(() => !!renderedContent.value)
@@ -71,7 +71,7 @@ watch(
await nextTick() await nextTick()
listenToClick() listenToClick()
}, },
{ immediate: true } { immediate: true },
) )
watch( watch(
@@ -79,7 +79,7 @@ watch(
() => { () => {
store.setUserRepo(props.user, props.repo) store.setUserRepo(props.user, props.repo)
}, },
{ immediate: true } { immediate: true },
) )
onMounted(() => visitRepo()) onMounted(() => visitRepo())
@@ -147,23 +147,23 @@ $header-height: 40px;
h5, h5,
h6, h6,
strong { strong {
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
} }
table { table {
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
background-color: var(--fallback-b1, oklch(var(--b1) / 1)); background-color: var(--color-base-100);
thead { thead {
th { th {
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
} }
} }
} }
blockquote { blockquote {
background-color: var(--fallback-b1, oklch(var(--b1) / 1)); background-color: var(--color-base-100);
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
} }
} }
@@ -233,7 +233,7 @@ $header-height: 40px;
font-size: 0.8em; font-size: 0.8em;
a { a {
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
display: block; display: block;
text-align: center; text-align: center;
} }

2
src/components/HeaderNote.vue
View File

@@ -98,7 +98,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ThemeSwap from '@/components/ThemeSwap.vue' import ThemeSwap from "@/components/ThemeSwap.vue"
defineProps<{ user: string; repo: string }>() defineProps<{ user: string; repo: string }>()
</script> </script>

10
src/components/LinkedNotes.vue
View File

@@ -1,8 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue' import { computed } from "vue"
import { useBacklinks } from '@/hooks/useBacklinks.hook' import { useBacklinks } from "@/hooks/useBacklinks.hook"
import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
const props = defineProps<{ const props = defineProps<{
sha: string sha: string
@@ -35,8 +35,8 @@ const emitNote = (sha: string) => {
<style scoped lang="scss"> <style scoped lang="scss">
.linked-notes { .linked-notes {
padding: 1rem; padding: 1rem;
background-color: var(--fallback-b1, oklch(var(--b1) / 1)); background-color: var(--color-base-100);
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
.subtitle { .subtitle {
font-style: italic; font-style: italic;

10
src/components/NewVersion.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRegisterSW } from 'virtual:pwa-register/vue' import { useRegisterSW } from "virtual:pwa-register/vue"
import { ref } from 'vue' import { ref } from "vue"
import LiteLoading from '@/components/LiteLoading.vue' import LiteLoading from "@/components/LiteLoading.vue"
const devMode = ref(false) // import.meta.env.DEV const devMode = ref(false) // import.meta.env.DEV
const isLoading = ref(false) const isLoading = ref(false)
@@ -57,8 +57,8 @@ const reload = () => {
color: var(--primary-color); color: var(--primary-color);
border: var(--primary-color) 2px solid; border: var(--primary-color) 2px solid;
border-radius: 4px; border-radius: 4px;
background-color: var(--fallback-b1, oklch(var(--b1) / 1)); background-color: var(--color-base-100);
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
} }
.buttons { .buttons {

64
src/components/StackedNote.vue
View File

@@ -5,28 +5,28 @@ import {
nextTick, nextTick,
onMounted, onMounted,
ref, ref,
watch watch,
} from 'vue' } from "vue"
import { useEditionMode } from '@/hooks/useEditionMode' import { useEditionMode } from "@/hooks/useEditionMode"
import { useFile } from '@/hooks/useFile.hook' import { useFile } from "@/hooks/useFile.hook"
import { useGitHubContent } from '@/hooks/useGitHubContent.hook' import { useGitHubContent } from "@/hooks/useGitHubContent.hook"
import { useImages } from '@/hooks/useImages.hook' import { useImages } from "@/hooks/useImages.hook"
import { useLinks } from '@/hooks/useLinks.hook' import { useLinks } from "@/hooks/useLinks.hook"
import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook' import { useNoteOverlay } from "@/hooks/useNoteOverlay.hook"
import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook' import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
import { useTitleNotes } from '@/hooks/useTitleNotes.hook' import { useTitleNotes } from "@/hooks/useTitleNotes.hook"
import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
import { encodeUTF8ToBase64 } from '@/utils/decodeBase64ToUTF8' import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8"
import { filenameToNoteTitle } from '@/utils/noteTitle' import { filenameToNoteTitle } from "@/utils/noteTitle"
import { generateTweets } from '@/utils/twitter' import { generateTweets } from "@/utils/twitter"
const LinkedNotes = defineAsyncComponent( const LinkedNotes = defineAsyncComponent(
() => import('@/components/LinkedNotes.vue') () => import("@/components/LinkedNotes.vue"),
) )
const EditNote = defineAsyncComponent( const EditNote = defineAsyncComponent(
() => import('@/modules/note/components/EditNote.vue') () => import("@/modules/note/components/EditNote.vue"),
) )
const props = defineProps<{ const props = defineProps<{
@@ -50,7 +50,7 @@ const {
rawContent, rawContent,
getRawContent, getRawContent,
saveCacheNote, saveCacheNote,
getEditedSha getEditedSha,
} = useFile(sha) } = useFile(sha)
const initialRawContent = ref<string | null>(null) const initialRawContent = ref<string | null>(null)
const className = computed(() => `stacked-note-${props.index}`) const className = computed(() => `stacked-note-${props.index}`)
@@ -62,12 +62,12 @@ const store = useUserRepoStore()
const hasBacklinks = computed(() => store.userSettings?.backlink) const hasBacklinks = computed(() => store.userSettings?.backlink)
const { displayNoteOverlay } = useNoteOverlay(className.value, index) const { displayNoteOverlay } = useNoteOverlay(className.value, index)
const displayedTitle = computed(() => filenameToNoteTitle(props.title ?? '')) const displayedTitle = computed(() => filenameToNoteTitle(props.title ?? ""))
const breadcrumbs = computed(() => displayedTitle.value.split(' / ')) const breadcrumbs = computed(() => displayedTitle.value.split(" / "))
const { updateFile } = useGitHubContent({ const { updateFile } = useGitHubContent({
user: user.value, user: user.value,
repo: repo.value repo: repo.value,
}) })
onMounted(async () => { onMounted(async () => {
@@ -90,13 +90,13 @@ watch([content, mode], () => {
watch(mode, async (newMode) => { watch(mode, async (newMode) => {
const hasUserFinishedToEdit = const hasUserFinishedToEdit =
newMode === 'read' && rawContent.value !== initialRawContent.value newMode === "read" && rawContent.value !== initialRawContent.value
if (!hasUserFinishedToEdit) { if (!hasUserFinishedToEdit) {
return return
} }
if (!path.value) { if (!path.value) {
console.warn('no path found for this file') console.warn("no path found for this file")
return return
} }
@@ -105,17 +105,17 @@ watch(mode, async (newMode) => {
const newSha = await updateFile({ const newSha = await updateFile({
content: rawContent.value, content: rawContent.value,
path: path.value, path: path.value,
sha: editedSha sha: editedSha,
}) })
if (!newSha) { if (!newSha) {
console.warn('no new SHA found for this file') console.warn("no new SHA found for this file")
return return
} }
await saveCacheNote(encodeUTF8ToBase64(rawContent.value), { await saveCacheNote(encodeUTF8ToBase64(rawContent.value), {
editedSha: newSha editedSha: newSha,
}) })
initialRawContent.value = rawContent.value initialRawContent.value = rawContent.value
}) })
@@ -127,7 +127,7 @@ watch(mode, async (newMode) => {
:class="{ :class="{
[className]: true, [className]: true,
overlay: displayNoteOverlay, overlay: displayNoteOverlay,
[`note-${sha}`]: true [`note-${sha}`]: true,
}" }"
> >
<a <a
@@ -177,7 +177,7 @@ watch(mode, async (newMode) => {
v-if="false" v-if="false"
:to="{ :to="{
name: 'ShareNotes', name: 'ShareNotes',
params: { user: user, repo: repo, note: sha } params: { user: user, repo: repo, note: sha },
}" }"
class="action" class="action"
> >
@@ -243,8 +243,8 @@ $border-color: rgba(18, 19, 58, 0.2);
.stacked-note { .stacked-note {
padding: 0 1.5rem 1rem; padding: 0 1.5rem 1rem;
background-color: var(--fallback-b1, oklch(var(--b1) / 1)); background-color: var(--color-base-100);
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
&.overlay { &.overlay {
box-shadow: -3px 0 0.4em $border-color; box-shadow: -3px 0 0.4em $border-color;
@@ -262,7 +262,7 @@ $border-color: rgba(18, 19, 58, 0.2);
} }
a.title-stacked-note-link { a.title-stacked-note-link {
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
display: block; display: block;
text-decoration: none; text-decoration: none;
position: sticky; position: sticky;
@@ -274,8 +274,8 @@ a.title-stacked-note-link {
} }
.title-stacked-note { .title-stacked-note {
background-color: var(--fallback-b1, oklch(var(--b1) / 1)); background-color: var(--color-base-100);
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
font-size: 0.8em; font-size: 0.8em;
overflow: visible; overflow: visible;

8
src/components/ThemeSwap.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from "vue"
const isDark = ref(JSON.parse(localStorage.getItem('is-dark') ?? 'false')) const isDark = ref(JSON.parse(localStorage.getItem("is-dark") ?? "false"))
const toggle = (isChecked: boolean) => { const toggle = (isChecked: boolean) => {
localStorage.setItem('is-dark', isChecked ? 'true' : 'false') localStorage.setItem("is-dark", isChecked ? "true" : "false")
} }
const darkMode = import.meta.env.VITE_DARK_MODE const darkMode = import.meta.env.VITE_DARK_MODE
</script> </script>
@@ -14,7 +14,7 @@ const darkMode = import.meta.env.VITE_DARK_MODE
<input <input
type="checkbox" type="checkbox"
:value="darkMode" :value="darkMode"
class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1" class="toggle theme-controller col-span-2 col-start-1 row-start-1"
:checked="isDark" :checked="isDark"
@click=" @click="
(e) => { (e) => {

22
src/main.ts
View File

@@ -1,18 +1,18 @@
import 'notyf/notyf.min.css' import "notyf/notyf.min.css"
import './styles/app.css' import "./styles/app.css"
import { createPinia } from 'pinia' import { createPinia } from "pinia"
import { createApp } from 'vue' import { createApp } from "vue"
import { createI18n } from 'vue-i18n' import { createI18n } from "vue-i18n"
import { messages } from '@/locales/message' import { messages } from "@/locales/message"
import { router } from '@/router/router' import { router } from "@/router/router"
import App from './App.vue' import App from "./App.vue"
const i18n = createI18n({ const i18n = createI18n({
locale: 'en', locale: "en",
messages messages,
}) })
createApp(App).use(router).use(i18n).use(createPinia()).mount('#app') createApp(App).use(router).use(i18n).use(createPinia()).mount("#app")

12
src/modules/card/components/FlipCard.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from "vue"
import { Card } from '../models/Card' import { Card } from "../models/Card"
defineProps<{ card: Card }>() defineProps<{ card: Card }>()
const emit = defineEmits<{ success: []; fail: []; needsReview: [] }>() const emit = defineEmits<{ success: []; fail: []; needsReview: [] }>()
@@ -11,9 +11,9 @@ const flip = () => {
flipped.value = !flipped.value flipped.value = !flipped.value
} }
const success = () => emit('success') const success = () => emit("success")
const fail = () => emit('fail') const fail = () => emit("fail")
const needsReview = () => emit('needsReview') const needsReview = () => emit("needsReview")
</script> </script>
<template> <template>
@@ -79,7 +79,7 @@ $border-radius: 0.5rem;
.flip-card-content { .flip-card-content {
width: 100%; width: 100%;
background-color: #ede4e0; background-color: #ede4e0;
color: var(--fallback-bc, oklch(var(--bc) / 1)); color: var(--color-base-content);
padding: 1rem; padding: 1rem;
border-radius: $border-radius; border-radius: $border-radius;
} }

42
src/styles/app.css
View File

@@ -1,9 +1,7 @@
@charset "utf-8"; @charset "utf-8";
@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime"); @import "tailwindcss";
@tailwind base; @import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime");
@tailwind components;
@tailwind utilities;
:root { :root {
--primary-color: #2c3a47; --primary-color: #2c3a47;
@@ -14,8 +12,36 @@
--light-link: lighten(#445fb9, 45%); --light-link: lighten(#445fb9, 45%);
--background-color: #ffffff; --background-color: #ffffff;
--note-width: 620px; --note-width: 620px;
--light-mode: garden;
--dark-mode: sunset;
} }
@plugin "@tailwindcss/typography";
@plugin 'daisyui' {
themes:
garden --default,
sunset --prefersdark;
}
@config '../../tailwind.config.js';
/**
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
html { html {
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
@@ -28,7 +54,6 @@ body {
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
html, html,
body { body {
overflow-y: hidden; overflow-y: hidden;
@@ -75,10 +100,6 @@ a {
font-size: var(--font-size); font-size: var(--font-size);
} }
.btn {
font-size: 1rem;
}
.table, .table,
.table :where(thead, tfoot) { .table :where(thead, tfoot) {
font-size: 1em; font-size: 1em;
@@ -89,7 +110,6 @@ a {
} }
@media print { @media print {
html, html,
body { body {
overflow-y: auto; overflow-y: auto;
@@ -117,4 +137,4 @@ pre {
iframe { iframe {
border-radius: 1rem; border-radius: 1rem;
height: 400px; height: 400px;
} }

68
tailwind.config.js
View File

@@ -1,69 +1,59 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const dotenv = require('dotenv') const dotenv = require("dotenv")
import typography from '@tailwindcss/typography'
import daisyui from 'daisyui'
dotenv.config() dotenv.config()
const LIGHT_MODE = process.env.VITE_LIGHT_MODE
const DARK_MODE = process.env.VITE_DARK_MODE
const defaultTitleStyles = Array.from( const defaultTitleStyles = Array.from(
{ length: 6 }, { length: 6 },
(_, k) => `h${k + 1}` (_, k) => `h${k + 1}`,
).reduce( ).reduce(
(acc, heading) => ({ (acc, heading) => ({
...acc, ...acc,
[heading]: { [heading]: {
'margin-top': '0', "margin-top": "0",
'margin-bottom': '0.5em' "margin-bottom": "0.5em",
} },
}), }),
{} {},
) )
module.exports = { module.exports = {
content: ['./src/**/*.{vue,js,ts}'], content: ["./src/**/*.{vue,js,ts}"],
theme: { theme: {
extend: { extend: {
typography: () => ({ typography: () => ({
DEFAULT: { DEFAULT: {
css: { css: {
'font-size': '13pt', "font-size": "13pt",
'font-family': '"Courier Prime", monospace', "font-family": '"Courier Prime", monospace',
...defaultTitleStyles, ...defaultTitleStyles,
p: { p: {
'margin-top': '0.8em', "margin-top": "0.8em",
'margin-bottom': '0.8em', "margin-bottom": "0.8em",
'text-align': 'justify' "text-align": "justify",
}, },
img: { img: {
'margin-top': 0, "margin-top": 0,
'margin-bottom': 0, "margin-bottom": 0,
'border-radius': '1rem' "border-radius": "1rem",
}, },
a: { a: {
'text-decoration': 'none', "text-decoration": "none",
color: 'oklch(var(--s))' color: "var(--color-primary)",
}, },
'a:hover': { "a.btn-primary": {
'text-decoration': 'underline' color: "var(--color-secondary-content)",
},
"a:hover": {
"text-decoration": "underline",
}, },
li: { li: {
'margin-top': 0, "margin-top": 0,
'margin-bottom': 0 "margin-bottom": 0,
} },
} },
} },
}) }),
} },
}, },
plugins: [typography, daisyui],
daisyui: {
themes: [LIGHT_MODE, DARK_MODE],
base: true,
styled: true,
utils: true
}
} }