More things
This commit is contained in:
@@ -4,7 +4,7 @@ import { useTreeState } from '~/composables/useTreeState'
|
||||
defineProps({ nodes: Array, depth: { type: Number, default: 0 } })
|
||||
|
||||
const router = useRouter()
|
||||
const { collapsed } = useTreeState() // ← shared state, not local ref
|
||||
const { collapsed } = useTreeState()
|
||||
|
||||
function getTitle(node) {
|
||||
if (node.title === 'index') return 'Index'
|
||||
@@ -19,12 +19,37 @@ function navigate(path) {
|
||||
function toggle(key) {
|
||||
collapsed.value[key] = !collapsed.value[key]
|
||||
}
|
||||
|
||||
/**
|
||||
* If the folder contains a child whose path/title matches the folder itself
|
||||
* (e.g. places/ has a child at places/places.md), return that child.
|
||||
* Otherwise return null.
|
||||
*/
|
||||
function getSelfTitledChild(node) {
|
||||
if (!node.children?.length) return null
|
||||
const folderSlug = node.path?.split('/').pop() ?? node.title
|
||||
return node.children.find((child) => {
|
||||
const childSlug = child.path?.split('/').pop() ?? child.title
|
||||
return childSlug === folderSlug
|
||||
}) ?? null
|
||||
}
|
||||
|
||||
/**
|
||||
* Children to actually render — excludes the self-titled child so it
|
||||
* doesn't appear twice (once as the clickable folder label, once in the list).
|
||||
*/
|
||||
function visibleChildren(node) {
|
||||
const selfTitled = getSelfTitledChild(node)
|
||||
if (!selfTitled) return node.children
|
||||
return node.children.filter((c) => c !== selfTitled)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul :style="{ paddingLeft: depth ? '1rem' : '0' }">
|
||||
<li v-for="node in nodes" :key="node.path ?? node.title">
|
||||
|
||||
<!-- Leaf node (no children) -->
|
||||
<template v-if="!node.children?.length">
|
||||
<a v-if="node.path" :href="node.path" @click.prevent="navigate(node.path)">
|
||||
{{ getTitle(node) }}
|
||||
@@ -32,14 +57,33 @@ function toggle(key) {
|
||||
<span v-else>{{ getTitle(node) }}</span>
|
||||
</template>
|
||||
|
||||
<!-- Folder node -->
|
||||
<template v-else>
|
||||
<button class="folder-toggle" @click="toggle(node.path ?? node.title)">
|
||||
<span class="chevron" :class="{ open: !collapsed[node.path ?? node.title] }">›</span>
|
||||
{{ getTitle(node) }}
|
||||
</button>
|
||||
<div class="folder-row">
|
||||
<!-- Chevron toggle (always present) -->
|
||||
<button
|
||||
class="folder-toggle"
|
||||
@click="toggle(node.path ?? node.title)"
|
||||
:aria-expanded="!collapsed[node.path ?? node.title]"
|
||||
>
|
||||
<span class="chevron" :class="{ open: !collapsed[node.path ?? node.title] }">›</span>
|
||||
</button>
|
||||
|
||||
<!-- Folder label: clickable link if there's a self-titled child, plain text otherwise -->
|
||||
<a
|
||||
v-if="getSelfTitledChild(node)"
|
||||
class="folder-label folder-label--link"
|
||||
:href="getSelfTitledChild(node).path"
|
||||
@click.prevent="navigate(getSelfTitledChild(node).path)"
|
||||
>
|
||||
{{ getTitle(node) }}
|
||||
</a>
|
||||
<span v-else class="folder-label">{{ getTitle(node) }}</span>
|
||||
</div>
|
||||
|
||||
<TreeNode
|
||||
v-if="!collapsed[node.path ?? node.title]"
|
||||
:nodes="node.children"
|
||||
:nodes="visibleChildren(node)"
|
||||
:depth="depth + 1"
|
||||
/>
|
||||
</template>
|
||||
@@ -62,24 +106,44 @@ a {
|
||||
color: var(--text-link);
|
||||
}
|
||||
|
||||
.folder-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.folder-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-link);
|
||||
}
|
||||
}
|
||||
|
||||
.folder-label {
|
||||
flex: 1;
|
||||
cursor: default;
|
||||
|
||||
&--link {
|
||||
color: var(--text-link);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chevron {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
|
||||
@@ -2,10 +2,53 @@
|
||||
visible: true
|
||||
---
|
||||
|
||||
# Millor campana
|
||||
|
||||
Hola que tal! Hauria de funcionar
|
||||
|
||||
Test
|
||||
|
||||
<a href="/razas" class="dead-link" data-hidden="Razas">Razas</a>
|
||||
# Como asesinar a tu dragón
|
||||
|
||||
Hola! En esta web encontraréis nota y info adicional de la campaña que iré modificando conforme vaya avanzando. Le he puesto este horripilante nombre de momento porque no se me ocurre ninguno otro.
|
||||
|
||||
Es como una wiki, a la izquierda teneis diferentes notas que también tienen links entre ellas.
|
||||
|
||||
Y que más cualquier cosa me decis por Whatsapp o por Discord si quereis.
|
||||
|
||||
|
||||
|
||||
## Links importantes
|
||||
|
||||
Os dejo aqui debajo links importantes. La campaña la haremos en Foundry. Para los jugadores no es muy complicado de usar comparado con otras webs como Nivel20 o Roll20.
|
||||
|
||||
- **Foundry**: [https://foundry.aranroig.com](https://foundry.aranroig.com)
|
||||
- **Esta web**: [https://caatd.rol.aranroig.com](https://caatd.rol.aranroig.com)
|
||||
|
||||
# FAQ
|
||||
|
||||
> Os aconsejo encarecidamente leer esto porfa 🙏
|
||||
|
||||
## ¿Qué sistema?
|
||||
|
||||
DnD 5E
|
||||
|
||||
## ¿Por dónde empiezo?
|
||||
|
||||
Aquí: [0 - Prologo](/diario/0-prologo) hay escrito en que situación se encontrarian vuestros personajes en este preciso instante.
|
||||
|
||||
El resto de cosas es todo worldbuilding que podéis leer si quereis más immersion. Podeis empezar a leer por [Hibolia](/hibolia/hibolia). De momento aquí hay conocimiento general que cualquier persona dentro del mundo sabe. Mi idea es que a medida que vayais descubriendo cosas vaya publicando y escribiendo más cosas aquí.
|
||||
|
||||
Si alguno de vuestros personajes tuviese el rol de ir escribiendo o documentando las aventuras que va haciendo siguiendo un diario o algo así pues seria este, se podría adaptar y creo que molaria así como idea.
|
||||
|
||||
## ¿Qué días hay campaña?
|
||||
|
||||
Sábados o domingos dependiendo de disponibilidad cada semana sesión de 2h a 4h aproximadamente si a todo el mundo va bien se puede negociar.
|
||||
|
||||
## Hola hago ingeniería informática ¿Cómo te has montado esto?
|
||||
|
||||
Esto es un vault de Obsidian (archivos de markdown con mods) dentro de un repositorio de git. En un server self-hosted de Gitea ([https://git.aranroig.com](https://git.aranroig.com)) tengo una acción que coge un frontend hecho con Nuxt Pages que es Nuxt pero con un plugin raro de generar webs a partir de markdown. Al hacer push desde un plugin que integra Git con Obsidian, se hace una acción al servidor de gitea que entre muchas cosas llama a un script vibecodeado que transforma las notas a el formato de Nuxt Pages y entonces se compila todo un frontend que luego se hace deploy también en el mini datacenter de mi casa.
|
||||
|
||||
El código fuente de todo esto está [aquí](https://git.aranroig.com/Syndria98/dnd-vault-template)
|
||||
|
||||
## Me he encontrado un link de color gris y me da mucho miedo ¿Qué es?
|
||||
|
||||
Un link gris como <a href="/este-link-de-aqu" class="dead-link" data-missing="Este link de aquí">Este link de aquí</a> significa una referencia a un concepto, sitio, lugar o cosa en general que aún no está escrito
|
||||
|
||||
## ¿Eres buen DM?
|
||||
|
||||
No :D
|
||||
|
||||
Reference in New Issue
Block a user