Files
njump/templates/embedded_note.html
2023-11-27 12:20:49 +01:00

119 lines
4.6 KiB
HTML

<!doctype html>
<html class="theme--default text-lg font-light print:text-base sm:text-xl">
<meta charset="UTF-8" />
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
<link
rel="stylesheet"
type="text/css"
href="/njump/static/tailwind-bundle.min.css"
/>
</head>
<body
class="relative bg-white text-gray-600 dark:bg-neutral-900 dark:text-neutral-50 print:text-black"
>
<div
class="mx-auto px-4 pb-4 pt-4 sm:flex sm:items-center sm:justify-center sm:px-0"
>
<a href="/{{ .Url }}" target="_new">
<div
class="w-full max-w-screen-2xl justify-between gap-10 overflow-visible print:w-full sm:flex sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12 lg:gap-48vw"
>
<div class="w-full break-words print:w-full">
<header class="mb-4 max-w-full">
<div class="flex flex-wrap items-center">
<div
class="print:basis-1-12 imgclip mr-2 max-w-full basis-1/6 overflow-hidden sm:mr-4 sm:basis-[10%]"
>
<img
class="block h-auto w-full"
src="{{.Metadata.Picture}}"
/>
</div>
<div class="block print:text-base sm:grow">
<div class="leading-4">
{{.Metadata.Name}}
<!---->
{{if not (eq .Metadata.Name .Metadata.DisplayName)}}
<span class="text-stone-400"
>{{.Metadata.DisplayName}}</span
>
{{end}}
</div>
<div class="text-sm leading-4 text-stone-400 sm:text-base">
{{.NpubShort}}
</div>
</div>
</div>
</header>
<div
class="-ml-4 mb-6 h-1.5 w-1/3 bg-zinc-100 dark:bg-zinc-700 sm:-ml-2.5"
></div>
<article
class="prose-cite:text-sm prose mb-6 leading-5 dark:prose-invert prose-headings:font-light prose-p:m-0 prose-p:mb-2 prose-blockquote:mx-0 prose-blockquote:my-8 prose-blockquote:mb-2 prose-blockquote:mt-2 prose-blockquote:border-l-05rem prose-blockquote:border-solid prose-blockquote:border-l-neutral-200 prose-blockquote:py-2 prose-blockquote:pl-4 prose-blockquote:pr-0 prose-blockquote:pt-0 prose-blockquote:font-light prose-blockquote:not-italic prose-ol:m-0 prose-ol:p-0 prose-ol:pl-4 prose-ul:m-0 prose-ul:p-0 prose-ul:pl-4 prose-li:mb-2 dark:prose-blockquote:border-l-neutral-700 sm:prose-a:text-justify"
>
{{ if (not (eq "" .Subject))}}
<h1 class="text-2xl">{{.Subject}}</h1>
{{ end }}
<!-- main content -->
<div dir="auto">{{ .Content }}</div>
<div class="mt-2 w-full text-right text-sm text-stone-400">
{{.CreatedAt}}
</div>
</article>
<div
class="-ml-4 mb-6 h-1.5 w-1/3 bg-zinc-100 dark:bg-zinc-700 sm:-ml-2.5"
></div>
<div class="text-sm leading-3 text-neutral-400">
This note has been published on Nostr and is embedded via Njump,
<a href="/" target="_new" class="underline">learn more</a>
</div>
</div>
</div>
</a>
</div>
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="svg-shape" clipPathUnits="objectBoundingBox">
<path
transform="scale(0.005, 0.005)"
d="M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z"
/>
</clipPath>
</defs>
</svg>
<script>
window.addEventListener('load', function () {
var contentHeight = document.body.scrollHeight
window.parent.postMessage({height: contentHeight}, '*')
})
window.addEventListener('message', function (event) {
if (event.data.showGradient) {
var gradient = document.getElementById('bottom-gradient')
gradient.classList.remove('hidden')
}
})
</script>
<div
id="bottom-gradient"
class="pointer-events-none sticky bottom-0 left-0 hidden h-20 w-full bg-gradient-to-b from-transparent to-white"
></div>
<img
src="/njump/static/logo.png"
class="pointer-events-none fixed bottom-2 right-2 w-[100px]"
/>
</body>
</html>