Created
September 6, 2022 17:11
-
-
Save wbadart/fd5435185a50261dff56780fcf2de290 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- TODO: Main navigation links (Home, index, tags, ...) --><!-- DoNotFormat --> | |
<!-- DoNotFormat --> | |
<html lang='en'> | |
<head> | |
<meta charset='UTF-8' /> | |
<meta name='viewport' content='width=device-width, initial-scale=1' /> | |
<title> | |
A note – My Emanote Site | |
</title> | |
<meta property='og:description' content /> | |
<meta property='og:site_name' content='My Emanote Site' /> | |
<meta property='og:image' content /> | |
<meta property='og:type' content='website' /> | |
<meta property='og:title' content='A note' /> | |
<base href='/' /> | |
<link href='favicon.svg' rel='icon' /> | |
<meta name='generator' content='Emanote' /> | |
<link href='_emanote-live-server/tailwind/2.2.2/tailwind.min.css?t=1662480405' rel='stylesheet' type='text/css' /> | |
<!-- Heist error element --> | |
<style> | |
strong.error { | |
color: lightcoral; | |
font-size: 90%; | |
font-family: monospace; | |
} | |
</style> | |
<!-- What goes in this file will appear on near the end of <head>--><link rel='preload' href='_emanote-static/fonts/Maven_Pro/WorkSans-VariableFont_wght.ttf' as='font' type='font/ttf' crossorigin /> | |
<style> | |
@font-face { | |
font-family: 'WorkSans'; | |
/* FIXME: This ought to be: ${ema:emanoteStaticLayerUrl}/fonts/Maven_Pro/WorkSans-VariableFont_wght.ttf */ | |
src: url(_emanote-static/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf) format(\"truetype\"); | |
font-display: swap; | |
} | |
body { | |
font-family: 'WorkSans', sans-serif; | |
font-variation-settings: 'wght' 350; | |
} | |
a.mavenLinkBold { | |
font-variation-settings: 'wght' 400; | |
} | |
strong { | |
font-variation-settings: 'wght' 500; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
header, | |
.header-font { | |
font-family: 'WorkSans', sans-serif; | |
} | |
h1 { | |
font-variation-settings: 'wght' 500; | |
} | |
h2 { | |
font-variation-settings: 'wght' 400; | |
} | |
h3 { | |
font-variation-settings: 'wght' 300; | |
} | |
</style> | |
<link rel='stylesheet' href='_emanote-static/inverted-tree.css' /> | |
<link rel='stylesheet' href='https://files.stork-search.net/releases/v1.5.0/flat.css' /> | |
<!-- Custom Stork-search styling for Emanote --> | |
<style> | |
#stork-search-container { | |
z-index: 1000; | |
background-color: rgb(15 23 42/.8); | |
} | |
.stork-overflow-hidden-important { | |
overflow: hidden !important; | |
} | |
</style> | |
<script src='https://files.stork-search.net/releases/v1.5.0/stork.js'></script> | |
<script data-emanote-base-url='/'> | |
window.emanote = {}; | |
window.emanote.stork = { | |
searchShown: false, | |
toggleSearch: function () { | |
document.getElementById('stork-search-container').classList.toggle('hidden'); | |
window.emanote.stork.searchShown = document.body.classList.toggle('stork-overflow-hidden-important'); | |
if (window.emanote.stork.searchShown) { | |
document.getElementById('stork-search-input').focus(); | |
} | |
}, | |
clearSearch: function () { | |
document.getElementById('stork-search-container').classList.add('hidden'); | |
document.body.classList.remove('stork-overflow-hidden-important'); | |
window.emanote.stork.searchShown = false; | |
}, | |
init: function () { | |
const indexName = 'emanote-search'; // used to match input[data-stork] attribute value | |
const baseUrl = document.currentScript.getAttribute('data-emanote-base-url') || '/'; | |
const indexUrl = baseUrl + '-/stork.st'; | |
if (document.readyState !== 'complete') { | |
window.addEventListener('load', function () { | |
stork.register(indexName, indexUrl); | |
}); | |
document.addEventListener('keydown', event => { | |
if (window.emanote.stork.searchShown && event.key === 'Escape') { | |
window.emanote.stork.clearSearch(); | |
event.preventDefault(); | |
} else if ((event.key == 'k' || event.key == 'K') && (event.ctrlKey || event.metaKey)) { | |
window.emanote.stork.toggleSearch(); | |
event.preventDefault(); | |
} | |
}); | |
} else { | |
// Override existing on Ema's hot-reload | |
stork.register(indexName, indexUrl, { forceOverwrite: true }); | |
} | |
} | |
}; | |
window.emanote.stork.init(); | |
</script> | |
</head> | |
<!-- DoNotFormat --> | |
<!-- DoNotFormat --> | |
<body class='bg-gray-400 overflow-y-scroll'> | |
<div class='container mx-auto max-w-prose'> | |
<div class='mt-2 md:mt-4'> | |
<!-- DoNotFormat --> | |
<!-- DoNotFormat --> | |
<nav id='uptree' class='flipped tree' style='transform-origin: 50%;'> | |
<ul class='root'> | |
<li> | |
<ul> | |
<li> | |
<div class='text-gray-900 forest-link'> | |
<a href='kasten.html'> | |
kasten | |
</a> | |
</div> | |
<ul> | |
<li> | |
<div class='text-gray-900 forest-link'> | |
<a href=''> | |
Hello | |
</a> | |
</div> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</nav> | |
<div class='relative md:shadow-2xl md:mb-8'> | |
<div class='absolute -top-6 right-1 md:right-0 flex flex-row items-center justify-center'> | |
<a title='Search (Ctrl+K)' class='cursor-pointer' onclick='window.emanote.stork.toggleSearch()'> | |
<svg xmlns='http://www.w3.org/2000/svg' style='width: 1rem;' class='hover:text-blue-700' f | |
fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'> | |
<path stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path> | |
</svg> | |
</a> | |
</div> | |
<div class='flex-1 w-full overflow-x-auto bg-white'> | |
<main class='px-4 py-4'> | |
<h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'> | |
<a class='z-40 tracking-tighter '> | |
A note | |
</a> | |
</h1> | |
<article class='overflow-auto'> | |
<!-- What goes in this file will appear on top of note body--> | |
<!-- What goes in this file will appear below the note body--> | |
</article> | |
<div class='flex flex-col lg:flex-row lg:space-x-2'> | |
</div> | |
<section class='flex flex-wrap items-end justify-center my-4 space-x-2 space-y-2 font-mono text-sm'> | |
</section> | |
<!-- What goes in this file will at the very end of the main div --> | |
</main> | |
</div> | |
</div> | |
<footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'> | |
<div> | |
<a href='' title='Go to Home page'> | |
<svg xmlns='http://www.w3.org/2000/svg' class='w-6 h-6 hover:text-blue-700' fill='none' viewBox='0 0 24 24' stroke='currentColor'> | |
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'></path> | |
</svg> | |
</a> | |
</div> | |
<div> | |
<a href='-/all.html' title='View Index'> | |
<svg class='w-6 h-6 hover:text-blue-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'> | |
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4'> | |
</path> | |
</svg> | |
</a> | |
</div> | |
<div> | |
<a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 0.7.8.2'> | |
<img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' /> | |
</a> | |
</div> | |
<div> | |
<a href='-/tags.html' title='View tags'> | |
<svg class='w-6 h-6 hover:text-blue-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'> | |
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'> | |
</path> | |
</svg> | |
</a> | |
</div> | |
<div> | |
<a href='-/tasks.html' title='View tasks'> | |
<svg xmlns='http://www.w3.org/2000/svg' class='w-6 h-6 hover:text-blue-700' fill='none' viewBox='0 0 24 24' stroke='currentColor'> | |
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'></path> | |
</svg> | |
</a> | |
</div> | |
</footer> | |
</div> | |
</div> | |
<div id='stork-search-container' class='hidden fixed w-screen h-screen inset-0 backdrop-filter backdrop-blur-sm'> | |
<div class='fixed w-screen h-screen inset-0' onclick='window.emanote.stork.toggleSearch()'></div> | |
<div class='container mx-auto p-10 mt-10'> | |
<div class='stork-wrapper-flat container mx-auto'> | |
<input id='stork-search-input' data-stork='emanote-search' class='stork-input' placeholder='Search (Ctrl+K) ...' /> | |
<div data-stork='emanote-search-output' class='stork-output'></div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html><!-- | |
The inline CSS here is roughly analogous to the ones generated by Tailwind. | |
See the original version based on Tailwind`: https://gist.github.com/srid/2471813953a6df9b24909b9bb1d3cd2b | |
--> | |
<div style=\" | |
display: none; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
padding: 0.5rem; | |
font-size: 12px; | |
line-height: 18px; | |
tab-size: 4; | |
text-size-adjust: 100%; | |
\" id=\"ema-indicator\"> | |
<div style=\" | |
display: flex; | |
overflow: hidden; | |
font-size: 0.75rem; | |
align-items: center; | |
gap: 0.5rem; | |
padding: 0.5rem; | |
height: 2rem; | |
width: 2rem; | |
box-sizing: border-box; | |
border-style: solid; | |
border-width: 2px; | |
border-color: rgb(229 231 235); | |
background-color: rgb(255 255 255); | |
border-radius: 9999px; | |
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
transition-property: width, height; | |
transition-duration: 500ms; | |
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
\" onMouseOver=\"this.style.width='100%'\" onMouseOut=\"this.style.width='2rem'\" id=\"ema-status\" title=\"Ema Status\"> | |
<div hidden style=\" | |
flex: none; | |
width: 0.75rem; | |
height: 0.75rem; | |
background-color: rgb(22 163 74); | |
border-radius: 9999px; | |
\" id=\"ema-connected\"></div> | |
<div hidden style=\" | |
flex: none; | |
width: 0.75rem; | |
height: 0.75rem; | |
border-radius: 9999px; | |
animation: spin 1s linear infinite; | |
background-image: linear-gradient(to right, var(--tw-gradient-stops)); | |
--tw-gradient-from: #93c5fd; | |
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); | |
--tw-gradient-to: #2563eb; | |
\" id=\"ema-reloading\"> | |
<style> | |
@keyframes spin { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
</style> | |
</div> | |
<div hidden style=\" | |
flex: none; | |
width: 0.75rem; | |
height: 0.75rem; | |
border-radius: 9999px; | |
background-color: rgb(234 179 8); | |
\" id=\"ema-connecting\"> | |
<div style=\" | |
flex: none; | |
width: 0.75rem; | |
height: 0.75rem; | |
border-radius: 9999px; | |
background-color: rgb(234 179 8); | |
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; | |
\"> | |
<style> | |
@keyframes ping { | |
75%, | |
100% { | |
transform: scale(2); | |
opacity: 0; | |
} | |
} | |
</style> | |
</div> | |
</div> | |
<div hidden style=\" | |
flex: none; | |
width: 0.75rem; | |
height: 0.75rem; | |
border-radius: 9999px; | |
background-color: rgb(239 68 68); | |
\" id=\"ema-disconnected\"></div> | |
<p style=\"white-space: nowrap;\" id=\"ema-message\"></p> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment