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

Merge branch 'main' of github.com:lite-note/lite-note

Browse Source
This commit is contained in:
Julien Calixte
2025-03-02 10:56:45 +01:00
parent cc838fef17 361b9af8f3
commit 784fe51675
10 changed files with 84 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

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

1
.env.checksum
View File

@@ -1 +0,0 @@
84d588441b7e30aa991c53d842cd08cdeb5d97510f6026a0d44a7d3f5df133de

0
.husky/pre-push → .husky/_pre-push
View File

3
.prettierrc
View File

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

2
index.html
View File

@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" data-theme="garden"> <html lang="en" data-theme="caramellatte">
<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" />

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

9
src/components/ThemeSwap.vue
View File

@@ -1,11 +1,12 @@
<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 = 'forest'
</script> </script>
<template> <template>

8
src/hooks/useNoteOverlay.hook.ts
View File

@@ -13,11 +13,15 @@ export const useNoteOverlay = (
const { x, y, isMobile } = useOverlay() const { x, y, isMobile } = useOverlay()
const noteHeight = ref(0) const noteHeight = ref(0)
// TODO: it seems to have a wrong offset,
// visible when there are a lot of notes.
const displayNoteOverlay = computed(() => { const displayNoteOverlay = computed(() => {
const valueIndex = toValue(index)
if (isMobile.value) { if (isMobile.value) {
return y.value > toValue(index) * noteHeight.value return y.value > valueIndex * noteHeight.value
} else { } else {
return x.value > toValue(index) * NOTE_WIDTH return x.value > valueIndex * NOTE_WIDTH
} }
}) })

19
src/styles/app.css
View File

@@ -12,15 +12,14 @@
--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 "@tailwindcss/typography";
@plugin 'daisyui' { @plugin 'daisyui' {
themes: themes:
garden --default, caramellatte --default,
sunset --prefersdark; forest --prefersdark;
} }
@config '../../tailwind.config.js'; @config '../../tailwind.config.js';
@@ -34,6 +33,7 @@
color utility to any element that depends on these defaults. color utility to any element that depends on these defaults.
*/ */
@layer base { @layer base {
*, *,
::after, ::after,
::before, ::before,
@@ -42,6 +42,7 @@
border-color: var(--color-gray-200, currentColor); border-color: var(--color-gray-200, currentColor);
} }
} }
html { html {
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
@@ -54,6 +55,7 @@ body {
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
html, html,
body { body {
overflow-y: hidden; overflow-y: hidden;
@@ -110,6 +112,7 @@ a {
} }
@media print { @media print {
html, html,
body { body {
overflow-y: auto; overflow-y: auto;
@@ -132,6 +135,14 @@ pre {
background-color: #ecf0f1; background-color: #ecf0f1;
border-radius: 1rem; border-radius: 1rem;
margin: 1rem 0; margin: 1rem 0;
color: var(--color-info-content);
background-color: var(--color-info);
}
.markdown-alert-title {
display: flex;
align-items: center;
gap: 0.5rem;
} }
iframe { iframe {

58
tailwind.config.js
View File

@@ -1,59 +1,59 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
const dotenv = require("dotenv") const dotenv = require('dotenv')
dotenv.config() dotenv.config()
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: "var(--color-primary)", color: 'var(--color-primary)'
}, },
"a.btn-primary": { 'a.btn-primary': {
color: "var(--color-secondary-content)", color: 'var(--color-secondary-content)'
}, },
"a:hover": { 'a:hover': {
"text-decoration": "underline", 'text-decoration': 'underline'
}, },
li: { li: {
"margin-top": 0, 'margin-top': 0,
"margin-bottom": 0, 'margin-bottom': 0
}, }
}, }
}, }
}), })
}, }
}, }
} }