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

This commit is contained in:
Julien Calixte
2024-12-26 21:22:50 +01:00
36 changed files with 316 additions and 148 deletions

View File

@@ -1,6 +1,22 @@
<template>
<button class="button is-white go-back" @click="back">
<img src="/assets/dark-left-arrow.svg" alt="back" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-arrow-narrow-left"
width="28"
height="28"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="5" y1="12" x2="19" y2="12" />
<line x1="5" y1="12" x2="9" y2="16" />
<line x1="5" y1="12" x2="9" y2="8" />
</svg>
</button>
</template>

View File

@@ -4,26 +4,95 @@
:to="{ name: 'Home' }"
class="button is-small is-white back-button"
>
<img src="/assets/dark-left-arrow.svg" alt="go back left arrow" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-arrow-narrow-left"
width="28"
height="28"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="5" y1="12" x2="19" y2="12" />
<line x1="5" y1="12" x2="9" y2="16" />
<line x1="5" y1="12" x2="9" y2="8" />
</svg>
</router-link>
<theme-swap />
<router-link
class="special-folder"
:to="{ name: 'SpacedRepetitionCard', params: { user, repo } }"
>
<img src="/assets/card.svg" alt="card" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-id"
width="36"
height="36"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="3" y="4" width="18" height="16" rx="3" />
<circle cx="9" cy="10" r="2" />
<line x1="15" y1="8" x2="17" y2="8" />
<line x1="15" y1="12" x2="17" y2="12" />
<line x1="7" y1="16" x2="17" y2="16" />
</svg>
</router-link>
<router-link
class="special-folder"
:to="{ name: 'DraftNotes', params: { user, repo } }"
>
<img src="/assets/draft.svg" alt="card" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-notes"
width="36"
height="36"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="5" y="3" width="14" height="18" rx="2" />
<line x1="9" y1="7" x2="15" y2="7" />
<line x1="9" y1="11" x2="15" y2="11" />
<line x1="9" y1="15" x2="13" y2="15" />
</svg>
</router-link>
<router-link
class="special-folder"
:to="{ name: 'FleetingNotes', params: { user, repo } }"
>
<img src="/assets/mailbox.svg" alt="card" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-mailbox"
width="36"
height="36"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M10 21v-6.5a3.5 3.5 0 0 0 -7 0v6.5h18v-6a4 4 0 0 0 -4 -4h-10.5"
/>
<path d="M12 11v-8h4l2 2l-2 2h-4" />
<path d="M6 15h1" />
</svg>
</router-link>
</header>
</template>

View File

@@ -8,7 +8,23 @@
rel="noopener noreferrer"
>
login to
<img src="/assets/github.svg" alt="GitHub icon" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-github"
width="28"
height="28"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
/>
</svg>
</a>
</div>
</template>

View File

@@ -16,6 +16,22 @@ const href = url.toString()
<template>
<a :href="href" class="sign-in-github btn btn-primary">
Sign in with
<img src="/assets/github.svg" alt="GitHub" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-github"
width="28"
height="28"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
/>
</svg>
</a>
</template>

View File

@@ -151,7 +151,27 @@ watch(mode, async (newMode) => {
:class="{ 'is-link': mode === 'edit' }"
@click="toggleMode"
>
<img src="/assets/edit.svg" alt="edit" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-edit"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
/>
<path
d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
/>
<path d="M16 5l3 3" />
</svg>
</button>
<router-link
v-if="false"
@@ -161,7 +181,25 @@ watch(mode, async (newMode) => {
}"
class="action"
>
<img src="/assets/share.svg" alt="share" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-share"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="6" cy="12" r="3" />
<circle cx="18" cy="6" r="3" />
<circle cx="18" cy="18" r="3" />
<line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
<line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
</svg>
</router-link>
<div v-if="mode === 'edit'" class="edit">
<edit-note v-model="rawContent" />
@@ -171,7 +209,27 @@ watch(mode, async (newMode) => {
:class="{ 'is-link': mode === 'edit' }"
@click="toggleMode"
>
<img src="/assets/edit.svg" alt="edit" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-edit"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
/>
<path
d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
/>
<path d="M16 5l3 3" />
</svg>
</button>
</div>
<div v-if="mode === 'read'" class="note-content" v-html="content"></div>
@@ -260,10 +318,6 @@ a.title-stacked-note-link {
.note-content {
padding: 0 1.5rem;
.table {
overflow-x: auto;
}
}
}
}

View File

@@ -40,7 +40,25 @@
</form>
<footer>
Made with <img src="/assets/love.svg" alt="love" /> by
Made with
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-heart"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#eb2f06"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
/>
</svg>
by
<a
href="http://github.com/jcalixte"
target="_blank"

View File

@@ -1,4 +1,5 @@
import markdownItClass from '@toycode/markdown-it-class'
import markdownItLatex from '@vscode/markdown-it-katex'
import MarkdownIt from 'markdown-it'
import Renderer from 'markdown-it/lib/renderer'
import blockEmbedPlugin from 'markdown-it-block-embed'
@@ -6,7 +7,6 @@ import markdownItCheckbox from 'markdown-it-checkbox'
import markdownItFootnote from 'markdown-it-footnote'
import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
import markdownItIframe from 'markdown-it-iframe'
import markdownItLatex from 'markdown-it-latex'
import Shikiji from 'markdown-it-shikiji'
import { Ref, toValue } from 'vue'
@@ -57,9 +57,9 @@ const useShikiji = async () => {
useShikiji()
const rules: Renderer.RenderRuleRecord = {
table_close: () => '</table>\n</div>',
table_open: () =>
'<div class="table-wrapper table is-fullwidth is striped">\n<table>\n'
'<div class="overflow-x-auto"><table class="table table-zebra">',
table_close: () => '</table></div>'
}
md.renderer.rules = { ...md.renderer.rules, ...rules }
@@ -69,7 +69,7 @@ export const useMarkdown = (defaultPrefix?: Ref<string> | string) => {
const renderFromUTF8 = (content: string, prefix?: string) =>
content
? md.render(content, {
docId: defaultPrefix ? toValue(defaultPrefix) : prefix ?? ''
docId: defaultPrefix ? toValue(defaultPrefix) : (prefix ?? '')
})
: ''

View File

@@ -1,5 +1,4 @@
import './styles/app.css'
import 'markdown-it-latex/dist/index.css'
import 'notyf/notyf.min.css'
import { createPinia } from 'pinia'

View File

@@ -20,7 +20,24 @@ const confirmBeforeCachingAllNotes = () => {
></progress>
</div>
<button v-else class="button" @click="() => confirmBeforeCachingAllNotes()">
<img src="/assets/offline.svg" alt="offline cloud" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-cloud-off"
width="30"
height="30"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M9.58 5.548c.24 -.11 .492 -.207 .752 -.286c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 .957 -.383 1.824 -1.003 2.454m-2.997 1.033h-11.343c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.13 -.582 .37 -1.128 .7 -1.62"
/>
<path d="M3 3l18 18" />
</svg>
</button>
</template>

1
src/shims-vue.d.ts vendored
View File

@@ -9,7 +9,6 @@ declare module 'markdown-it-block-embed'
declare module 'markdown-it-checkbox'
declare module 'markdown-it-footnote'
declare module 'markdown-it-regexp'
declare module 'markdown-it-latex'
declare module 'markdown-it-iframe'
declare module 'markdown-it-shikiji'
declare module '@rushstack/eslint-patch/modern-module-resolution'

View File

@@ -71,14 +71,15 @@ a {
transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
}
.table-wrapper {
overflow-x: auto;
}
.btn {
font-size: 1rem;
}
.table,
.table :where(thead, tfoot) {
font-size: 1em;
}
@media print {
html,

View File

@@ -81,7 +81,25 @@ watch(mode, async (newMode) => {
<div class="columns">
<div class="column is-half">
<button class="btn btn-outline" @click="toggleMode">
<img src="/assets/saved.svg" alt="save" />
<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="currentColor"
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" />
<polyline points="14 4 14 8 8 8 8 4" />
</svg>
</button>
</div>
</div>

View File

@@ -1,9 +1,41 @@
<template>
<main class="space-cowboy content">
<p>
<img src="/assets/alert.svg" alt="alert" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-alert-circle"
width="52"
height="52"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
Oops, you've been lost!
<img src="/assets/alert.svg" alt="alert" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-alert-circle"
width="52"
height="52"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</p>
<p>A note link can't be used as URL.</p>
<router-link class="button is-links" :to="{ name: 'Home' }"