2023-10-18 23:58:51 +00:00
<!DOCTYPE html>
2023-10-18 21:23:22 +00:00
< html lang = "" >
< head >
< meta charset = "utf-8" / >
2023-10-18 23:11:03 +00:00
< title > WIP: Obsiview< / title >
2023-10-19 10:41:35 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
2023-10-26 02:53:08 +00:00
<!-- Interaction scripts -->
< script type = "module" src = "src/index.mjs" > < / script >
<!-- Global style -->
2023-10-19 12:56:08 +00:00
< style >
2023-10-27 01:15:29 +00:00
@import "style/base.css";
2023-10-19 12:56:08 +00:00
@import "style/light.css";
@import "style/dark.css";
< / style >
2023-10-26 02:53:08 +00:00
<!-- Templates -->
2023-10-30 03:49:36 +00:00
< template id = "template-landing" >
< style >
.landing {
margin-left: 64px;
margin-right: 64px;
max-width: calc(100vw - 128px);
}
.landing-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.landing-form label {
display: flex;
flex-direction: row;
}
.landing-form label span {
min-width: 20%;
}
.landing-form input {
flex-grow: 1;
}
.landing-form input[type="submit"] {
flex-grow: 0;
}
a {
color: var(--color-accent);
}
< / style >
< div class = "landing" >
< h2 >
What is this?
< / h2 >
< p >
Obsiview is a web viewer for < a href = "https://obsidian.md/" > Obsidian< / a > vaults!
< / p >
< p >
It's currently in the Alpha development stage, so some features are still missing, but it's already functional!
< / p >
< p >
Please report bugs, suggest features, and leave feedback at < a href = "https://github.com/Steffo99/obsidian-file-index/issues" > the project's issue tracker< / a > !
< / p >
< h2 >
How do I browse a Vault?
< / h2 >
< p >
To browse a vault, enter its details here:
< / p >
< form class = "landing-form" >
< label >
< span > Vault base URL< / span >
< input type = "url" name = "vault" required placeholder = "https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/" >
< / label >
< label >
< span > Path of the initial file< / span >
< input type = "text" name = "path" placeholder = "8 - Crittografia applicata/2 - Comunicazione simmetrica/3 - Indistinguibilità/★ mappa concettuale.canvas" >
< / label >
< input type = "submit" value = "Open" >
< / form >
< p >
Alternatively, browse an example vault, such as:
< / p >
< ul >
< li > < a href = "./?vault=https%3A%2F%2Fraw.githubusercontent.com%2FSteffo99%2Fappunti-magistrali%2Fmain%2F&path=9 - Algoritmi distribuiti/1 - Problemi/★ problemi.canvas" > Steffo's University notes on Distributed Problems< / a > < / li >
< li > < a href = "./?vault=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-help%2Fmaster%2Fen%2F&path=Home.md>" > Obsidian's own documentation< / a > (no wikilinks)< / li >
< / ul >
< h2 >
Wikilinks are not working!
< / h2 >
< p >
To resolve Wikilinks, full knowledge of a Vault's contents is required.
< / p >
< p >
Obsidian does not include a list of files in a Vault anywhere in it, because it operates under the assumption that this would be trivial to do via the file system.
< / p >
< p >
Obsiview, running on the web, does not have this ability, and needs to somehow learn about it.
< / p >
< p >
To solve this problem, the < a href = "https://github.com/Steffo99/obsidian-file-index" > < code > steffo-file-index< / code > < / a > plugin was developed; once installed in a given Vault, and once the < code > steffo-file-index.json< / code > file it generates is published, Obsiview will be able to resolve Wikilinks.
< / p >
< / div >
< / template >
2023-10-26 02:53:08 +00:00
< template id = "template-vault" >
< style >
2023-10-27 00:44:49 +00:00
.vault {
2023-10-27 08:22:19 +00:00
margin-left: 64px;
margin-right: 64px;
2023-10-27 00:44:49 +00:00
}
2023-10-26 02:53:08 +00:00
< / style >
< div class = "vault" >
< slot name = "vault-child" > < / slot >
< / div >
< / template >
< template id = "template-canvas" >
< style >
.canvas {
position: relative;
display: flex;
width: max-content;
height: max-content;
2023-10-27 08:22:19 +00:00
margin-top: 64px;
margin-bottom: 64px;
2023-10-26 02:53:08 +00:00
}
< / style >
< div class = "canvas" >
< slot name = "canvas-nodes" > {Canvas nodes}< / slot >
2023-10-27 01:15:29 +00:00
< slot name = "canvas-edges" > {Canvas edges}< / slot >
2023-10-26 02:53:08 +00:00
< / div >
< / template >
2023-10-21 22:37:05 +00:00
< template id = "template-display" >
2023-10-24 07:53:59 +00:00
< slot name = "display-container" > {Displayed content}< / slot >
2023-10-21 22:37:05 +00:00
< / template >
< template id = "template-node-group" >
2023-10-18 21:23:22 +00:00
< style >
2023-10-26 02:53:08 +00:00
.node {
2023-10-21 22:37:05 +00:00
outline: var(--node-group-border-width) solid var(--color-node);
background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
border-radius: 0 8px 8px 8px;
padding: 12px;
2023-10-20 01:44:56 +00:00
}
2023-10-21 22:37:05 +00:00
.node-group-label {
position: relative;
bottom: 14px;
left: -12px;
transform: translateY(-100%);
display: inline-block;
outline: var(--node-group-border-width) solid var(--color-node);
background-color: color-mix(in srgb, var(--color-node) 20%, var(--color-background));
border-radius: 8px 8px 0 0;
padding: 12px;
}
2023-10-26 02:53:08 +00:00
.node-group-label-title {
2023-10-21 22:37:05 +00:00
margin: 0;
}
< / style >
2023-10-26 02:53:08 +00:00
< div class = "canvas-item node node-group" >
< aside class = "node-group-label" >
< h1 class = "node-group-label-title" > < slot name = "node-group-label" > {Group label}< / slot > < / h1 >
< / aside >
< / div >
2023-10-21 22:37:05 +00:00
< / template >
< template id = "template-node-file" >
< style >
2023-10-26 02:53:08 +00:00
.node {
2023-10-21 22:37:05 +00:00
outline: var(--node-file-border-width) solid var(--color-node);
background-color: color-mix(in srgb, var(--color-node) 10%, var(--color-background));
2023-10-18 23:58:51 +00:00
border-radius: 8px;
padding: 12px;
2023-10-26 02:53:08 +00:00
}
2023-10-20 01:44:56 +00:00
2023-10-26 02:53:08 +00:00
.node-file {
2023-10-20 01:44:56 +00:00
overflow-x: clip;
overflow-y: scroll;
}
2023-10-22 01:40:49 +00:00
2023-10-26 02:53:08 +00:00
.node-file-label {
2023-10-22 01:40:49 +00:00
font-size: 2em;
margin-block-start: .67em;
margin-block-end: .67em;
}
2023-10-18 21:23:22 +00:00
< / style >
2023-10-26 02:53:08 +00:00
< article class = "canvas-item node node-file" >
< h1 class = "node-file-label" >
< slot name = "node-file-label" > {Node title}< / slot >
2023-10-18 21:23:22 +00:00
< / h1 >
2023-10-26 02:53:08 +00:00
< slot name = "node-file-contents" > {Node contents}< / slot >
2023-10-20 01:44:56 +00:00
< / article >
< / template >
2023-10-21 22:37:05 +00:00
< template id = "template-node-text" >
2023-10-20 01:44:56 +00:00
< style >
2023-10-26 02:53:08 +00:00
.node {
2023-10-21 22:37:05 +00:00
outline: var(--node-file-border-width) solid var(--color-node);
background-color: color-mix(in srgb, var(--color-node) 10%, var(--color-background));
border-radius: 8px;
padding: 12px;
2023-10-26 02:53:08 +00:00
}
2023-10-21 22:37:05 +00:00
2023-10-26 02:53:08 +00:00
.node-text {
2023-10-21 22:37:05 +00:00
overflow-x: clip;
overflow-y: scroll;
2023-10-20 01:44:56 +00:00
}
< / style >
2023-10-26 02:53:08 +00:00
< article class = "canvas-item node node-text" >
< slot name = "node-text-contents" > {Node contents}< / slot >
2023-10-21 22:37:05 +00:00
< / article >
< / template >
< template id = "template-edge" >
2023-10-26 02:53:08 +00:00
< style >
2023-10-27 00:44:49 +00:00
.edge {
2023-10-26 02:53:08 +00:00
}
< / style >
2023-10-27 00:44:49 +00:00
< div class = "canvas-item edge" >
2023-10-26 02:53:08 +00:00
< slot name = "edge-svg" > {Edge SVG}< / slot >
< / div >
2023-10-21 22:37:05 +00:00
< / template >
< template id = "template-markdown" >
2023-10-26 02:53:08 +00:00
< style >
2023-10-27 00:44:49 +00:00
.markdown {
}
2023-10-26 02:53:08 +00:00
< / style >
< div class = "markdown" >
< slot name = "markdown-document" > {Markdown text}< / slot >
< / div >
2023-10-21 22:37:05 +00:00
< / template >
2023-10-22 01:40:49 +00:00
< template id = "template-frontmatter" >
< style >
.frontmatter {
opacity: 50%;
}
< / style >
2023-10-26 02:53:08 +00:00
< div class = "frontmatter" >
< slot name = "frontmatter-contents" > {Markdown text}< / slot >
< / div >
2023-10-22 01:40:49 +00:00
< / template >
2023-10-26 02:53:08 +00:00
< template id = "template-hashtag" >
2023-10-21 23:36:55 +00:00
< style >
2023-10-26 02:53:08 +00:00
.hashtag {
background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
color: var(--color-accent);
2023-10-22 01:40:49 +00:00
}
2023-10-21 23:36:55 +00:00
< / style >
2023-10-26 02:53:08 +00:00
< span class = "hashtag" > < slot name = "hashtag-tag" > {#Hashtag}< / slot > < / span >
2023-10-18 21:23:22 +00:00
< / template >
2023-10-19 12:56:08 +00:00
< template id = "template-wikilink" >
< style >
.wikilink {
2023-10-30 02:11:23 +00:00
color: color-mix(in srgb, var(--color-accent) 50%, transparent);
2023-10-20 01:44:56 +00:00
text-decoration: underline 1px solid currentColor;
2023-10-30 02:11:23 +00:00
}
.wikilink[href] {
color: var(--color-accent);
2023-10-20 01:44:56 +00:00
cursor: pointer;
2023-10-19 12:56:08 +00:00
}
< / style >
2023-10-27 00:44:49 +00:00
< a class = "wikilink" > < / a >
2023-10-19 12:56:08 +00:00
< / template >
2023-10-20 01:44:56 +00:00
< / head >
2023-10-27 00:44:49 +00:00
< body is = "x-browse" > < / body >
2023-10-18 21:23:22 +00:00
< / html >
