mirror of
https://github.com/glassflame/glassflame.github.io.git
synced 2024-11-25 09:34:27 +00:00
254 lines
No EOL
7.4 KiB
HTML
254 lines
No EOL
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Obsiview</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<!-- Interaction scripts -->
|
|
<script type="module" src="src/index.mjs"></script>
|
|
<!-- Global style -->
|
|
<style>
|
|
@import "style/base.css";
|
|
@import "style/light.css";
|
|
@import "style/dark.css";
|
|
</style>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
|
|
<!-- Templates -->
|
|
<template id="template-landing">
|
|
<style>
|
|
.landing {
|
|
margin-left: var(--margins);
|
|
margin-right: var(--margins);
|
|
|
|
max-width: calc(100vw - var(--margins) * 2);
|
|
}
|
|
|
|
.landing-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.landing-form label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.landing-form label span {
|
|
width: calc(var(--margins) * 4);
|
|
}
|
|
|
|
.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>File path</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=README.md" style="--color-accent: #D14224;">Steffo's University Notes</a></li>
|
|
<li><a href="./?vault=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-help%2Fmaster%2Fen%2F&path=Home.md" style="--color-accent: #8A5CF5;">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>file-index</code></a> plugin was developed; once installed in a given Vault, and once the <code>file-index.json</code> file it generates is published, Obsiview will be able to resolve Wikilinks.
|
|
</p>
|
|
</div></template>
|
|
<template id="template-vault">
|
|
<style>
|
|
.vault {
|
|
margin-left: var(--margins);
|
|
margin-right: var(--margins);
|
|
}
|
|
</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;
|
|
|
|
margin-top: 64px;
|
|
margin-bottom: 64px;
|
|
|
|
background-image: url("./style/dot.png");
|
|
}
|
|
</style>
|
|
<div class="canvas">
|
|
<slot name="canvas-nodes">{Canvas nodes}</slot>
|
|
<slot name="canvas-edges">{Canvas edges}</slot>
|
|
</div></template>
|
|
<template id="template-display">
|
|
<slot name="display-container">{Displayed content}</slot></template>
|
|
<template id="template-node-group">
|
|
<style>
|
|
.node {
|
|
outline: var(--node-group-border-width) solid var(--color-canvas);
|
|
background-color: color-mix(in srgb, var(--color-canvas) 20%, var(--color-background));
|
|
border-radius: 0 8px 8px 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.node-group-label {
|
|
position: relative;
|
|
bottom: 14px;
|
|
left: -12px;
|
|
transform: translateY(-100%);
|
|
|
|
display: inline-block;
|
|
|
|
outline: var(--node-group-border-width) solid var(--color-canvas);
|
|
background-color: color-mix(in srgb, var(--color-canvas) 20%, var(--color-background));
|
|
border-radius: 8px 8px 0 0;
|
|
padding: 12px;
|
|
}
|
|
|
|
.node-group-label-title {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<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></template>
|
|
<template id="template-node-file">
|
|
<style>
|
|
.node {
|
|
outline: var(--node-file-border-width) solid var(--color-canvas);
|
|
background-color: color-mix(in srgb, var(--color-canvas) 10%, var(--color-background));
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.node-file {
|
|
overflow-x: clip;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.node-file-label {
|
|
font-size: 2em;
|
|
margin-block-start: .67em;
|
|
margin-block-end: .67em;
|
|
}
|
|
</style>
|
|
<article class="canvas-item node node-file">
|
|
<h1 class="node-file-label">
|
|
<slot name="node-file-label">{Node title}</slot>
|
|
</h1>
|
|
<slot name="node-file-contents">{Node contents}</slot>
|
|
</article></template>
|
|
<template id="template-node-text">
|
|
<style>
|
|
.node {
|
|
outline: var(--node-file-border-width) solid var(--color-canvas);
|
|
background-color: color-mix(in srgb, var(--color-canvas) 10%, var(--color-background));
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.node-text {
|
|
overflow-x: clip;
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|
|
<article class="canvas-item node node-text">
|
|
<slot name="node-text-contents">{Node contents}</slot>
|
|
</article></template>
|
|
<template id="template-edge">
|
|
<style>
|
|
.edge {
|
|
|
|
}
|
|
</style>
|
|
<div class="canvas-item edge">
|
|
<slot name="edge-svg">{Edge SVG}</slot>
|
|
</div></template>
|
|
<template id="template-markdown">
|
|
<style>
|
|
.markdown {
|
|
|
|
}
|
|
</style>
|
|
<div class="markdown">
|
|
<slot name="markdown-document">{Markdown text}</slot>
|
|
</div></template>
|
|
<template id="template-frontmatter">
|
|
<style>
|
|
.frontmatter {
|
|
opacity: 50%;
|
|
}
|
|
</style>
|
|
<div class="frontmatter">
|
|
<slot name="frontmatter-contents">{Markdown text}</slot>
|
|
</div></template>
|
|
<template id="template-hashtag">
|
|
<style>
|
|
.hashtag {
|
|
background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
|
|
color: var(--color-accent);
|
|
}
|
|
</style>
|
|
<span class="hashtag"><slot name="hashtag-tag">{#Hashtag}</slot></span></template>
|
|
<template id="template-wikilink">
|
|
<slot name="wikilink-anchor">{Wikilink}</slot></template>
|
|
<template id="template-math">
|
|
<slot name="math-katex">{Math}</slot></template>
|
|
</head>
|
|
<body is="x-browse"></body>
|
|
</html> |