-
Notifications
You must be signed in to change notification settings - Fork 22
/
embedded_profile.templ
137 lines (132 loc) · 4.82 KB
/
embedded_profile.templ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
package main
templ embeddedProfileTemplate(params ProfilePageParams) {
<!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"/>
<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 cursor-pointer"
npub-data={ templ.JSONString(params.Metadata.Npub()) }
>
<style> ::-webkit-scrollbar { display: none; } </style>
<div
class="mx-auto w-full max-w-screen-2xl justify-between gap-10 overflow-visible px-4 pb-4 pt-4 print:w-full sm:w-11/12 md:w-10/12 lg:w-9/12"
>
<div class="w-full break-words">
<div class="w-full break-words print:w-full">
<header class="mb-4 max-w-full">
<div class="flex items-center">
<div
class="print:basis-1-12 imgclip mr-2 flex-shrink-0 basis-1/5 overflow-hidden sm:mr-4"
>
<img
class="block h-auto w-full"
src={ params.Metadata.Picture }
/>
</div>
<div class="block print:text-base">
<div class="text-2xl">{ params.Metadata.Name }</div>
if params.Metadata.Name != params.Metadata.DisplayName {
<div class="leading-4 text-stone-400">
{ params.Metadata.DisplayName }
</div>
}
</div>
</div>
</header>
if params.Metadata.Website != "" || params.RenderedAuthorAboutText != "" {
<div class="-ml-4 mb-6 h-1.5 w-1/2 bg-zinc-100 dark:bg-zinc-700 sm:-ml-2.5"></div>
<div class="mb-6 leading-5">{ params.Metadata.Website }</div>
<div class="prose mb-6 leading-5 dark:prose-invert prose-headings:font-light sm:prose-a:text-justify">
@templ.Raw(params.RenderedAuthorAboutText)
</div>
}
<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="mb-6 leading-5">
<div class="text-sm text-strongpink">Public Key</div>
{ params.Metadata.Npub() }
</div>
<div class="mb-6 leading-5">
if params.Metadata.NIP05 != "" {
<div class="text-sm text-strongpink">NIP-05 Address</div>
{ params.Metadata.NIP05 }
}
</div>
<div class="mb-6 leading-5">
if params.Metadata.LUD16 != "" {
<div class="text-sm text-strongpink">NIP-57 Address</div>
{ params.Metadata.LUD16 }
}
</div>
if len(params.AuthorRelays) > 0 {
<div class="mb-6 leading-5">
<div class="text-sm text-strongpink">Publishing to</div>
for _, element := range params.AuthorRelays {
<span class="mr-1 mt-2 inline-block max-w-full rounded-lg border border-slate-300 px-2 py-0.5">{ element }</span>
}
</div>
}
</div>
<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>
<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>
<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"
></path>
</clipPath>
</defs>
</svg>
<script>
// Open links in a new tab
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].setAttribute('target', '_blank');
}
// Open the njump page if the target is not a link
document.onclick = function(event) {
if (event.target.tagName.toLowerCase() !== 'a') {
const npub = JSON.parse(document.body.getAttribute('npub-data'));
window.open("/" + npub, '_blank');
}
};
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')
}
if (event.data.setDarkMode) {
document.querySelector('html').classList.add('theme--dark')
}
})
</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 dark:to-neutral-900"
></div>
<a href="/" target="_new" class="fixed bottom-2 right-2 w-[100px]">
<img
src="/njump/static/logo.png"
/>
</a>
</body>
</html>
}