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

Feat/migrate to daisy (#10)

Browse Source 
* feat: init daisyui!

* feat: change theme and colors

* change dark theme and add colors
This commit is contained in:
Julien Calixte
2024-12-21 20:05:37 +01:00
committed by GitHub
parent c8e066e6f6
commit 9571752f26
23 changed files with 801 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/FluxNote.vue
View File

@@ -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;
}

13
src/components/HeaderNote.vue
View File

@@ -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">

3
src/components/LinkedNotes.vue
View File

@@ -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;

25
src/components/LiteLoading.vue
View File

@@ -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>

7
src/components/LoginGithub.vue
View File

@@ -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>

5
src/components/NewVersion.vue
View File

@@ -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 {

2
src/components/RepoList.vue
View File

@@ -26,7 +26,7 @@ const getStyle = (repo: string) => {
repo: favoriteRepo.name
}
}"
class="button"
class="btn"
:style="getStyle(`${favoriteRepo.name}-${username}`)"
>
{{ favoriteRepo.name }}

18
src/components/SignInGithub.vue
View File

@@ -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>

8
src/components/StackedNote.vue
View File

@@ -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;
}
}

62
src/components/ThemeSwap.vue Normal file
View File

@@ -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>

112
src/components/WelcomeWorld.vue
View File

@@ -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;
}
}