nicwands/braindrops.nicwands.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rich text editor

Browse source
This commit is contained in:
nicwands 2026-07-17 13:52:32 -04:00
parent f24db846cf
commit 434e2171f8
14 changed files with 1002 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/package.json
View file

@ -16,7 +16,10 @@
"dependencies": {
"sass": "^1.98.0",
"sass-embedded": "^1.98.0",
"vue": "^3.5.30"
"vue": "^3.5.30",
"@tiptap/pm": "^3.28.0",
"@tiptap/starter-kit": "^3.28.0",
"@tiptap/vue-3": "^3.28.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.5",

41
app/public/drops/flowmap/meta.json
View file

@ -1,7 +1,44 @@
{
"name": "flowmap",
"title": "Flowmap Test",
"description": "An interactive flowmap visualization experiment and more",
"title": "Flowmap",
"description": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "I used a fluid simulation in webgl to create this flowmap with arrows showing the direction or \"current\" within the flow field."
}
]
},
{
"type": "paragraph"
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"marks": [
{
"type": "link",
"attrs": {
"href": "https://github.com/oframe/ogl/blob/master/examples/post-fluid-distortion.html",
"target": "_blank",
"rel": "noopener noreferrer nofollow",
"class": null,
"title": null
}
}
],
"text": "https://github.com/oframe/ogl/blob/master/examples/post-fluid-distortion.html"
}
]
}
]
},
"date": "2026-07-16",
"tags": [
"visualization"

45
app/public/drops/testing/meta.json
View file

@ -1,9 +1,50 @@
{
"name": "testing",
"title": "Testing",
"description": "A brief description of what this drop does",
"description": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "This is just a test drop to make sure everything is working correctly."
}
]
},
{
"type": "heading",
"attrs": {
"level": 1
},
"content": [
{
"type": "text",
"text": "Heading"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "more text."
}
]
},
{
"type": "paragraph"
}
]
},
"date": "2026-07-16",
"tags": ["tag1", "tag2", "tag3"],
"tags": [
"tag1",
"tag2",
"tag3"
],
"links": [
{
"label": "Source Code",

9
app/src/App.vue
View file

@ -6,6 +6,7 @@
:index="activeIndex"
:previousActive="activeIndex > 0"
:nextActive="activeIndex < drops.length - 1"
:key="activeIndex"
@previous="onPrevious"
@next="onNext"
/>
@ -23,7 +24,7 @@
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { ref, onMounted, computed, watchEffect } from 'vue'
import Panel from '@/components/Panel.vue'
import { wrapValue } from './libs/math'
import Btn from '@shared/Btn.vue'
@ -54,7 +55,6 @@ onMounted(async () => {
})
const onPrevious = () => {
console.log(wrapValue(activeIndex.value - 1, 0, drops.value.length - 1))
activeIndex.value = wrapValue(
activeIndex.value - 1,
0,
@ -70,10 +70,14 @@ const onNext = () => {
}
const activeDrop = computed(() => drops.value[activeIndex.value])
watchEffect(() => console.log(activeIndex.value, activeDrop.value?.src))
</script>
<style lang="scss">
.container {
background: var(--theme-layout);
.splash, .drops {
background: var(--theme-layout);
color: var(--theme-fg);
@ -87,6 +91,7 @@ const activeDrop = computed(() => drops.value[activeIndex.value])
.drop {
grid-column: 5 / -1;
border-radius: rs(10px);
border: 1px solid var(--theme-grey);
overflow: hidden;
position: relative;

42
app/src/components/Panel.vue
View file

@ -9,13 +9,13 @@
<span class="meta-value">{{ formattedDate }}</span>
</div>
<div v-if="drop.tags && drop.tags.length" class="tags">
<!-- <div v-if="drop.tags && drop.tags.length" class="tags">
<span v-for="tag in drop.tags" :key="tag" class="tag">{{ tag }}</span>
</div>
</div> -->
<h1 class="name h2">{{ displayTitle }}</h1>
<p v-if="drop.description" class="description">{{ drop.description }}</p>
<rich-text v-if="drop.description" class="description" :content="drop.description" />
</div>
<div class="btn-wrap">
@ -28,6 +28,7 @@
<script setup>
import { computed } from 'vue'
import Btn from '@shared/Btn.vue'
import RichText from '@shared/RichText.vue';
const props = defineProps({
drop: Object,
@ -84,6 +85,13 @@ const formattedDate = computed(() => {
.description, .date {
color: var(--theme-grey);
}
.description {
text-align: left;
a {
word-break: break-word;
}
}
.meta-item {
font-size: rs(12px);
@ -96,7 +104,6 @@ const formattedDate = computed(() => {
opacity: 0.9;
}
}
.tags {
display: flex;
flex-wrap: wrap;
@ -111,33 +118,6 @@ const formattedDate = computed(() => {
text-transform: lowercase;
}
}
.links {
display: flex;
flex-direction: column;
gap: rs(8px);
.link {
color: var(--theme-fg);
text-decoration: none;
font-size: rs(13px);
opacity: 0.8;
transition: opacity 0.2s;
&:hover {
opacity: 1;
text-decoration: underline;
}
}
}
.notes {
font-size: rs(12px);
font-style: italic;
opacity: 0.7;
line-height: 1.4;
margin-top: rs(10px);
}
}
.btn-wrap {
grid-template-columns: 1fr 1fr;

52
app/vite.config.js
View file

@ -1,6 +1,8 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import sharedConfig from '../shared/vite.config.js'
import fs from 'node:fs'
import path from 'node:path'
export default defineConfig({
...sharedConfig,
@ -10,4 +12,54 @@ export default defineConfig({
'@shared': fileURLToPath(new URL('../shared', import.meta.url)),
},
},
plugins: [
...sharedConfig.plugins,
{
name: 'serve-drops',
configureServer(server) {
server.middlewares.use((req, res, next) => {
// Check if the request is for a drop
if (req.url?.startsWith('/drops/')) {
let filePath = path.join(
fileURLToPath(new URL('./public', import.meta.url)),
req.url.split('?')[0] // Remove query params
)
// Check if the path exists
if (fs.existsSync(filePath)) {
// If it's a directory, append index.html
const stats = fs.statSync(filePath)
if (stats.isDirectory()) {
filePath = path.join(filePath, 'index.html')
if (!fs.existsSync(filePath)) {
return next()
}
}
// Determine content type
let contentType = 'text/html'
if (filePath.endsWith('.js')) {
contentType = 'application/javascript'
} else if (filePath.endsWith('.css')) {
contentType = 'text/css'
} else if (filePath.endsWith('.json')) {
contentType = 'application/json'
} else if (filePath.endsWith('.png')) {
contentType = 'image/png'
} else if (filePath.endsWith('.woff') || filePath.endsWith('.woff2')) {
contentType = 'font/woff' + (filePath.endsWith('.woff2') ? '2' : '')
}
// Read and serve the file
const content = fs.readFileSync(filePath)
res.setHeader('Content-Type', contentType)
res.end(content)
return
}
}
next()
})
},
},
],
})

3
cms/package.json
View file

@ -14,6 +14,9 @@
"singleQuote": true
},
"dependencies": {
"@tiptap/pm": "^3.28.0",
"@tiptap/starter-kit": "^3.28.0",
"@tiptap/vue-3": "^3.28.0",
"sass": "^1.98.0",
"sass-embedded": "^1.98.0",
"vue": "^3.5.30"

15
cms/src/components/MetaEditor.vue
View file

@ -41,13 +41,7 @@
<!-- Description -->
<div class="form-group">
<label for="description">Description</label>
<textarea
id="description"
v-model="meta.description"
rows="3"
required
placeholder="Brief description of what this drop does"
></textarea>
<rich-text v-model="meta.description" editable />
</div>
<!-- Date -->
@ -118,6 +112,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import RichText from '@shared/RichText.vue'
import Btn from '@shared/Btn.vue'
const dropName = ref(null)
@ -215,7 +210,7 @@ onMounted(async () => {
})
</script>
<style lang="scss" scoped>
<style lang="scss">
.meta-editor {
max-width: rs(800px);
margin: 0 auto;
@ -253,7 +248,7 @@ onMounted(async () => {
gap: 0.5rem;
input,
textarea {
textarea, .rich-text {
padding: 0.75rem;
border: 1px solid var(--theme-grey);
border-radius: rs(10px);
@ -264,7 +259,7 @@ onMounted(async () => {
border-color: var(--sea);
}
&.readonly {
background: var(--theme-layout);
background: var(--theme-shade);
pointer-events: none;
}
}

4
cms/src/main.js
View file

@ -3,4 +3,6 @@ import './styles/main.scss'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
const app = createApp(App)
app.mount('#app')

41
drops/flowmap/public/meta.json
View file

@ -1,7 +1,44 @@
{
"name": "flowmap",
"title": "Flowmap Test",
"description": "An interactive flowmap visualization experiment and more",
"title": "Flowmap",
"description": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "I used a fluid simulation in webgl to create this flowmap with arrows showing the direction or \"current\" within the flow field."
}
]
},
{
"type": "paragraph"
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"marks": [
{
"type": "link",
"attrs": {
"href": "https://github.com/oframe/ogl/blob/master/examples/post-fluid-distortion.html",
"target": "_blank",
"rel": "noopener noreferrer nofollow",
"class": null,
"title": null
}
}
],
"text": "https://github.com/oframe/ogl/blob/master/examples/post-fluid-distortion.html"
}
]
}
]
},
"date": "2026-07-16",
"tags": [
"visualization"

45
drops/testing/public/meta.json
View file

@ -1,9 +1,50 @@
{
"name": "testing",
"title": "Testing",
"description": "A brief description of what this drop does",
"description": {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "This is just a test drop to make sure everything is working correctly."
}
]
},
{
"type": "heading",
"attrs": {
"level": 1
},
"content": [
{
"type": "text",
"text": "Heading"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "more text."
}
]
},
{
"type": "paragraph"
}
]
},
"date": "2026-07-16",
"tags": ["tag1", "tag2", "tag3"],
"tags": [
"tag1",
"tag2",
"tag3"
],
"links": [
{
"label": "Source Code",

617
package-lock.json generated
View file

@ -18,6 +18,9 @@
"name": "braindrops-app",
"version": "0.0.0",
"dependencies": {
"@tiptap/pm": "^3.28.0",
"@tiptap/starter-kit": "^3.28.0",
"@tiptap/vue-3": "^3.28.0",
"sass": "^1.98.0",
"sass-embedded": "^1.98.0",
"vue": "^3.5.30"
@ -31,6 +34,9 @@
"name": "braindrops-cms",
"version": "0.0.0",
"dependencies": {
"@tiptap/pm": "^3.28.0",
"@tiptap/starter-kit": "^3.28.0",
"@tiptap/vue-3": "^3.28.0",
"sass": "^1.98.0",
"sass-embedded": "^1.98.0",
"vue": "^3.5.30"
@ -155,6 +161,31 @@
"tslib": "^2.4.0"
}
},
"node_modules/@floating-ui/core": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
"integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/utils": "^0.2.12"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
"integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
"license": "MIT",
"dependencies": {
"@floating-ui/core": "^1.8.0",
"@floating-ui/utils": "^0.2.12"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.12",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
"integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
"license": "MIT"
},
"node_modules/@fuzzco/font-loader": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@fuzzco/font-loader/-/font-loader-1.0.2.tgz",
@ -783,6 +814,429 @@
"integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
"license": "MIT"
},
"node_modules/@tiptap/core": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.28.0.tgz",
"integrity": "sha512-gUuD5WAYfbDxNSSJya/emh2KSzXZXLUYKW4fEnc1AQ5FE2twzh4LJ9UlKFIawigrUCAksWI5Fy1hRbv+5m4ZdQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/extension-blockquote": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.28.0.tgz",
"integrity": "sha512-y8Xi6Z3AQLXedz0J8Z3kDsu7SKBmL50gKVXx3RK1Oo1cuCGhNChm3syChkAz3PLAbrPUM5rvJDSZdF2jUrDnng==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/extension-bold": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.28.0.tgz",
"integrity": "sha512-JhZQmr0AU741bOwjVMfuwJdK4g0TQwwPbeca9aqKHv5zvZw4i4G9G6fESVyMFc3Yag1ffpnq5EtNldHKTnMhlw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-bubble-menu": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.28.0.tgz",
"integrity": "sha512-7AUNoHj2K4XLKCgW4uspeD/ENejPu2BeHvLTsiOoIO+XXDNSi2j0bbaIS8f2s/qnFirscwp/sbznp1qph/76qg==",
"license": "MIT",
"optional": true,
"dependencies": {
"@floating-ui/dom": "^1.0.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/extension-bullet-list": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.28.0.tgz",
"integrity": "sha512-dSVuNiH7PFMmWGkNER9vfUb5bXUHDARvHbJ3l+APEb+ZiusVN1KFdM3nd/RsW/Rt5Gd3XwlIEU/c2Uf7cxYDcw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extension-list": "3.28.0"
}
},
"node_modules/@tiptap/extension-code": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.28.0.tgz",
"integrity": "sha512-AUw2Acof3CQE6Q6Y22saK4lyg0nkeJ4XXniU65TdAi/9TE66TGiO4NQJJNNPgu8+VMEwl5j8VsIFK8sfTcNYtg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-code-block": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.28.0.tgz",
"integrity": "sha512-bHITDzT0umTLh+SiEVQzIXkCMt/TzbPM1+HQy9ZxgQDHAJj/vdmfNAnP3RCOrz4lETXyhNQ2b6kxeu3lWckxyA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/extension-document": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.28.0.tgz",
"integrity": "sha512-5SAKtlB1Tr/eZFhISL86HqmUup6rItvPtuPyRjmZo/VgbMwXEwiyAh1sMgFp5VNaeSMM14vJSyQpjhSaOmaBqg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-dropcursor": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.28.0.tgz",
"integrity": "sha512-JA+dXQjjfJBpD0nVsZeddGVXRsmanESM9+8CtM35hI9wJnYMXay/B+5GUhswO20zhT3zhB2ZOTGe9knu6A8nIQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extensions": "3.28.0"
}
},
"node_modules/@tiptap/extension-floating-menu": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.28.0.tgz",
"integrity": "sha512-59SECvJq3pQfeJBuydEdhQqrpl0oDlk8N1Ovs1Si3/fJa6rEQAJB2zIvcpBHky9Z+5JodI2eueDnv8eimiyGbg==",
"license": "MIT",
"optional": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@floating-ui/dom": "^1.0.0",
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/extension-gapcursor": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.28.0.tgz",
"integrity": "sha512-Wo73kM4q8z4Va9i4+0n1cO0UEMVUVBHPqM6cAqEYXjB4T48LQkKjRsiQydCezm185rQAsmm1dyi72gtvVQfdMg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extensions": "3.28.0"
}
},
"node_modules/@tiptap/extension-hard-break": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.28.0.tgz",
"integrity": "sha512-JHIFjX1luJgQ4VFEkIeXZpbc54Qiw+69P8FmlazYTh7AIJ6iLCpMFgQFELnivEAZ+/vS0lMPQubg0rCeM3UrHw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-heading": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.28.0.tgz",
"integrity": "sha512-rKjGG/Ik2lNaXBNVmONEDm5DBfGDLM1NWgSf5RRfBISrH8Lm1xqFruOB9tIaB0YUoSV3SBOiwTF9svmzvKSoRA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-horizontal-rule": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.28.0.tgz",
"integrity": "sha512-neBCMWprkppQUoLWyeJZDHqBw+xKX2oNhLD9MbFlhKIr092zgfP4mpCvQnSkn1OHl156KzZMp070+NyLBjgQ7A==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/extension-italic": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.28.0.tgz",
"integrity": "sha512-Yur/ELz6dNVKQC7m8wGjtoLFxamGjJmA0rUEEOacTH6J39aFmcSxYkEGNDkYHbZFyHFYqbej6eI3VE0h08O0mg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-link": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.28.0.tgz",
"integrity": "sha512-hy/PqSeTyl317yseFcHGE+3XVfQKQYaL4uZuj27xlrcO7MZ15drt1h9sUZy1FTBF3mr8676pQu7aoEm/Ww4ZRA==",
"license": "MIT",
"dependencies": {
"linkifyjs": "^4.3.3"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/extension-list": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.28.0.tgz",
"integrity": "sha512-zQ66i5DuhVOndmZ0d7H475Y5Yb+BMx+zfCjFkCzEc6WVef5MumtxBVTkGLQ0ibxUaD71s4QQZbjHWagpaTg0eQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/extension-list-item": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.28.0.tgz",
"integrity": "sha512-GbXrnMac6knSetZY33NHwOrgXFPqH28uCklQqmOZQlsrdGqezDKk31qoEMr4GsKW9n/lViAeuc07oIzwLwCMng==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extension-list": "3.28.0"
}
},
"node_modules/@tiptap/extension-list-keymap": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.28.0.tgz",
"integrity": "sha512-u9Wks8c/eQAv0RkULNggOyTKDD69WVbcV9H5cbasPDUbq5XbEFVa9ajxhEGfMmQ5et3EX0QL8qBi50K0GqbIjA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extension-list": "3.28.0"
}
},
"node_modules/@tiptap/extension-ordered-list": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.28.0.tgz",
"integrity": "sha512-OZNYrKKL9D01ySOujlNbKlLS9/3wGgKNYeoHZUg0e+Ta8WPVvL3W1zH6TgiU5sF2ZSGUBoq3w7mdaO/iROlUkw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/extension-list": "3.28.0"
}
},
"node_modules/@tiptap/extension-paragraph": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.28.0.tgz",
"integrity": "sha512-8UMlQIjzqf6r2hSJ/VeJ00RqaOrOB1J5rTk02Vcw2pYeHkOqp+B0ff0HFu4abT9x1q4oXrBAgMsxRtgh/kR14Q==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-strike": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.28.0.tgz",
"integrity": "sha512-VVj2ZZU9QYqiHLcjqMqRYvuHSsokj/AgUl+6TzLrKjlWwyZ18D4H2vkyI0g70iVTKnUpZ3sEy8WA/rqjgBjqBg==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-text": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.28.0.tgz",
"integrity": "sha512-Jqp1LgfY1mnp4TQHoy+vnHyfn6qnnAM6nHgGwbY5zA8b/Xf1Etll6pziTx9p1J1qcfAgSrnjOyAmA++H7VQqww==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extension-underline": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.28.0.tgz",
"integrity": "sha512-rwxCS6vTh2DJkNIYQX7JSrrRSmm76e2y48aZeuZO5ShkvLWMuJ3/zqDHRxAQVDiJhuE2Cp8NrTmPYlUc9YrT0A==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0"
}
},
"node_modules/@tiptap/extensions": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.28.0.tgz",
"integrity": "sha512-DJT1khCK+O/pT1gQlAnoKAx6zwDkgv7GtnhSfkqm1/4KHC3x+SSJnBIgBl9oGHymA+DxWbW1EULU4V3d/kT2uQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"peerDependencies": {
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0"
}
},
"node_modules/@tiptap/pm": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.28.0.tgz",
"integrity": "sha512-ALcpwZMUdat9gjJKlpscpoqXStoLhU246LPEVBDvJdIsoUKvUu3MrzfXik2Y8mtSGfhjtm9O2TRkWxQiFVMwsQ==",
"license": "MIT",
"dependencies": {
"prosemirror-changeset": "^2.4.1",
"prosemirror-commands": "^1.7.1",
"prosemirror-dropcursor": "^1.8.2",
"prosemirror-gapcursor": "^1.4.1",
"prosemirror-history": "^1.5.0",
"prosemirror-inputrules": "^1.5.1",
"prosemirror-keymap": "^1.2.3",
"prosemirror-model": "^1.25.9",
"prosemirror-schema-list": "^1.5.1",
"prosemirror-state": "^1.4.4",
"prosemirror-tables": "^1.8.5",
"prosemirror-transform": "^1.12.0",
"prosemirror-view": "^1.41.9"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
}
},
"node_modules/@tiptap/starter-kit": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.28.0.tgz",
"integrity": "sha512-pqvFpValV+ONtlu3l4s73ROm/tEjoGMmt6uHmSJaLbqTcMHkdWuR3flJ/5brr4IDHe1foxmNicMbRxlje7yBYw==",
"license": "MIT",
"dependencies": {
"@tiptap/core": "^3.28.0",
"@tiptap/extension-blockquote": "^3.28.0",
"@tiptap/extension-bold": "^3.28.0",
"@tiptap/extension-bullet-list": "^3.28.0",
"@tiptap/extension-code": "^3.28.0",
"@tiptap/extension-code-block": "^3.28.0",
"@tiptap/extension-document": "^3.28.0",
"@tiptap/extension-dropcursor": "^3.28.0",
"@tiptap/extension-gapcursor": "^3.28.0",
"@tiptap/extension-hard-break": "^3.28.0",
"@tiptap/extension-heading": "^3.28.0",
"@tiptap/extension-horizontal-rule": "^3.28.0",
"@tiptap/extension-italic": "^3.28.0",
"@tiptap/extension-link": "^3.28.0",
"@tiptap/extension-list": "^3.28.0",
"@tiptap/extension-list-item": "^3.28.0",
"@tiptap/extension-list-keymap": "^3.28.0",
"@tiptap/extension-ordered-list": "^3.28.0",
"@tiptap/extension-paragraph": "^3.28.0",
"@tiptap/extension-strike": "^3.28.0",
"@tiptap/extension-text": "^3.28.0",
"@tiptap/extension-underline": "^3.28.0",
"@tiptap/extensions": "^3.28.0",
"@tiptap/pm": "^3.28.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
}
},
"node_modules/@tiptap/vue-3": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/@tiptap/vue-3/-/vue-3-3.28.0.tgz",
"integrity": "sha512-twb3T6hofM0ajncCSgrLYIjfn86WfR2NVXteurdNOcnkJCIMTij5OhO/xn0z7y8+lp3TMkF6H5kajUpivBpnzw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"optionalDependencies": {
"@tiptap/extension-bubble-menu": "^3.28.0",
"@tiptap/extension-floating-menu": "^3.28.0"
},
"peerDependencies": {
"@floating-ui/dom": "^1.0.0",
"@tiptap/core": "3.28.0",
"@tiptap/pm": "3.28.0",
"vue": "^3.0.0"
}
},
"node_modules/@tresjs/cientos": {
"version": "5.8.1",
"resolved": "https://registry.npmjs.org/@tresjs/cientos/-/cientos-5.8.1.tgz",
@ -1475,6 +1929,12 @@
"url": "https://opencollective.com/parcel"
}
},
"node_modules/linkifyjs": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.3.tgz",
"integrity": "sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==",
"license": "MIT"
},
"node_modules/magic-string": {
"version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@ -1509,6 +1969,12 @@
"license": "MIT",
"optional": true
},
"node_modules/orderedmap": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
"integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
"license": "MIT"
},
"node_modules/perfect-debounce": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
@ -1567,6 +2033,145 @@
"integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
"license": "ISC"
},
"node_modules/prosemirror-changeset": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.1.tgz",
"integrity": "sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==",
"license": "MIT",
"dependencies": {
"prosemirror-transform": "^1.0.0"
}
},
"node_modules/prosemirror-commands": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
"integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.0.0",
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.10.2"
}
},
"node_modules/prosemirror-dropcursor": {
"version": "1.8.3",
"resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.3.tgz",
"integrity": "sha512-FoYbsJR8gK+DGlqhNoE29Loa38eIZPzQRIb1VMaDNBoo4OLP6vVof/jR8qFY/6XvUd6Dhug8MDCHl2a/h8RTfQ==",
"license": "MIT",
"dependencies": {
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.1.0",
"prosemirror-view": "^1.1.0"
}
},
"node_modules/prosemirror-gapcursor": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz",
"integrity": "sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==",
"license": "MIT",
"dependencies": {
"prosemirror-keymap": "^1.0.0",
"prosemirror-model": "^1.0.0",
"prosemirror-state": "^1.0.0",
"prosemirror-view": "^1.0.0"
}
},
"node_modules/prosemirror-history": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.5.0.tgz",
"integrity": "sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==",
"license": "MIT",
"dependencies": {
"prosemirror-state": "^1.2.2",
"prosemirror-transform": "^1.0.0",
"prosemirror-view": "^1.31.0",
"rope-sequence": "^1.3.0"
}
},
"node_modules/prosemirror-inputrules": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.1.tgz",
"integrity": "sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==",
"license": "MIT",
"dependencies": {
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.0.0"
}
},
"node_modules/prosemirror-keymap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
"integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
"license": "MIT",
"dependencies": {
"prosemirror-state": "^1.0.0",
"w3c-keyname": "^2.2.0"
}
},
"node_modules/prosemirror-model": {
"version": "1.25.11",
"resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.11.tgz",
"integrity": "sha512-QWg9RhnpLlogAmp3p96uEFrE5txQpFynd4vhBAELkwgOCWQs/X0yCzB3/hrHqiPwf91RG5KyWq6553zs9JqIOQ==",
"license": "MIT",
"dependencies": {
"orderedmap": "^2.0.0"
}
},
"node_modules/prosemirror-schema-list": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
"integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.0.0",
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.7.3"
}
},
"node_modules/prosemirror-state": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
"integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.0.0",
"prosemirror-transform": "^1.0.0",
"prosemirror-view": "^1.27.0"
}
},
"node_modules/prosemirror-tables": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz",
"integrity": "sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==",
"license": "MIT",
"dependencies": {
"prosemirror-keymap": "^1.2.3",
"prosemirror-model": "^1.25.4",
"prosemirror-state": "^1.4.4",
"prosemirror-transform": "^1.10.5",
"prosemirror-view": "^1.41.4"
}
},
"node_modules/prosemirror-transform": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.12.0.tgz",
"integrity": "sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.21.0"
}
},
"node_modules/prosemirror-view": {
"version": "1.42.1",
"resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.42.1.tgz",
"integrity": "sha512-rRqzZnRgkyh69XoOMrfFJHwauHscLBmHbq772kwbic1ymQAM8gXjzEbJse5j1ep2UO2HRIAQL0bY3kZ/RoqjVw==",
"license": "MIT",
"dependencies": {
"prosemirror-model": "^1.25.8",
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.1.0"
}
},
"node_modules/radashi": {
"version": "12.9.1",
"resolved": "https://registry.npmjs.org/radashi/-/radashi-12.9.1.tgz",
@ -1622,6 +2227,12 @@
"@rolldown/binding-win32-x64-msvc": "1.1.5"
}
},
"node_modules/rope-sequence": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
"integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
"license": "MIT"
},
"node_modules/rxjs": {
"version": "7.8.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@ -2298,6 +2909,12 @@
"optional": true
}
}
},
"node_modules/w3c-keyname": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
"license": "MIT"
}
}
}

116
shared/RichText.vue Normal file
View file

@ -0,0 +1,116 @@
<template>
<editor-content class="rich-text" :editor="editor" />
</template>
<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
const props = defineProps({
content: Object,
editable: {
type: Boolean,
default: false,
},
})
const model = defineModel()
const editor = useEditor({
content: props.content || model.value,
extensions: [
StarterKit.configure({
heading: {
levels: [1],
},
}),
],
editable: props.editable,
onUpdate: () => {
model.value = editor.value.getJSON()
},
})
</script>
<style lang="scss">
.rich-text {
font-family: inherit;
h1 {
margin: 2em 0 1em;
@include label;
}
p strong {
font-weight: 700;
}
p em {
font-style: italic;
}
hr {
border: 1px dashed currentColor;
}
ul {
list-style-type: disc;
li {
display: list-item;
margin-left: 1em;
*:not(:last-child) {
margin-bottom: 0.5em;
}
}
}
ol {
list-style-type: decimal;
li {
display: list-item;
margin-left: 1em;
&::marker {
@include p;
}
}
}
li:not(:last-child) {
margin-bottom: 0.5em;
}
a {
color: var(--sea);
cursor: pointer;
}
code {
border: 1px solid var(--theme-grey);
color: var(--theme-contrast);
padding: 0 0.2em;
border-radius: 0.2em;
}
pre code {
display: block;
color: inherit;
padding: 1em;
}
blockquote {
border-left: 4px solid var(--theme-grey);
padding-left: 0.5em;
}
s {
position: relative;
&::after {
content: ' ';
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: currentColor;
}
}
u {
text-decoration: underline;
}
}
</style>

15
shared/styles/_functions.scss
View file

@ -1,7 +1,20 @@
@use "sass:math";
@use 'sass:math';
@function rs($pixels, $base-vw: 1600px) {
$vw-value: math.div($pixels * 100vw, $base-vw);
@return max($vw-value, $pixels);
}
@function columns($columns) {
@return calc(
(#{$columns} * var(--layout-column-width)) +
((#{$columns} - 1) * var(--layout-column-gap))
);
}
@mixin child-grid($columns) {
grid-template-columns: repeat($columns, minmax(0, 1fr));
column-gap: var(--layout-columns-gap);
display: grid;
}