mirror of
https://github.com/aljazceru/njump.git
synced 2025-12-17 14:24:27 +01:00
Add note rendering with basic formatting (images and links)
This commit is contained in:
Daniele Tonon
263
note.html
Normal file
263
note.html
Normal file
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="UTF-8">
|
||||
<head>
|
||||
{{if eq .type "profile"}}
|
||||
<title>Nostr Public Key {{.npub}}</title>
|
||||
<meta property="og:site_name" content="{{.npub}}" />
|
||||
<meta property="og:title" content="{{.title}}" />
|
||||
{{ if .metadata.Picture }}
|
||||
<meta property="og:image" content="{{.metadata.Picture}}" />
|
||||
<meta property="twitter:image" content="{{.proxy}}{{.metadata.Picture}}" />
|
||||
{{end}} {{ if .metadata.About }}
|
||||
<meta property="og:description" content="{{.metadata.About}}" />
|
||||
{{end}}
|
||||
<meta property="twitter:card" content="summary" />
|
||||
{{end}}
|
||||
<!----------->
|
||||
{{ if eq .type "event" }}
|
||||
<title>Nostr Event {{.nevent}}</title>
|
||||
<meta property="og:site_name" content="{{.authorLong}}" />
|
||||
<meta property="og:title" content="{{.title}}" />
|
||||
<meta name="twitter:title" content="{{.twitterTitle}}" />
|
||||
<!---->
|
||||
{{ if .textImageURL }}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@nostrprotocol" />
|
||||
<meta property="og:image" content="{{.textImageURL}}" />
|
||||
<meta name="twitter:image" content="{{.textImageURL}}" />
|
||||
{{ else }}
|
||||
<!---->
|
||||
<meta property="twitter:card" content="summary" />
|
||||
{{ if .image }}
|
||||
<meta property="og:image" content="{{.image}}" />
|
||||
<meta name="twitter:image" content="{{.proxy}}{{.image}}" />
|
||||
{{end}} {{ if .video }}
|
||||
<meta property="og:video" content="{{.video}}" />
|
||||
<meta property="og:video:secure_url" content="{{.video}}" />
|
||||
<meta property="og:video:type" content="video/{{.videoType}}" />
|
||||
{{end}}
|
||||
<!---->
|
||||
{{end}}
|
||||
<meta property="og:description" content="{{.description}}" />
|
||||
<meta name="twitter:description" content="{{.description}}" />
|
||||
{{end}}
|
||||
<!----------->
|
||||
{{ if eq .type "address" }}
|
||||
<title>Nostr Address {{.naddr}}</title>
|
||||
{{end}}
|
||||
<!----------->
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top">
|
||||
<a href="https://nostr.com" class="nostr_link">What is nostr?</a>
|
||||
</div>
|
||||
|
||||
<div class="container_wrapper">
|
||||
<div class="container note">
|
||||
|
||||
<div class="column column_content">
|
||||
|
||||
<div class="profile_intro">
|
||||
<div class="pic-wrapper">
|
||||
<a href="/{{.npub}}"><img class="pic" src="{{ .metadata.Picture }}" /></a>
|
||||
</div>
|
||||
<div class="info-wrapper">
|
||||
<div class="name">
|
||||
{{.metadata.Name}} <span class="display">{{.metadata.DisplayName}}</span>
|
||||
</div>
|
||||
<div class="npub">{{.npubShort}}</div>
|
||||
</div>
|
||||
<div class="published_at">
|
||||
{{.createdAt}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field separator"></div>
|
||||
|
||||
<div class="field content">
|
||||
{{.description | BasicFormatting }}
|
||||
</div>
|
||||
|
||||
<div class="field separator"></div>
|
||||
|
||||
<div class="field">
|
||||
<div class="label">Author Public key</div>
|
||||
{{.npub}}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="label">Nevent</div>
|
||||
<div>{{.nevent}}</div>
|
||||
</div>
|
||||
|
||||
<div class="field last_update">
|
||||
Last update:<br/>
|
||||
{{.createdAt}}
|
||||
</div>
|
||||
|
||||
<div class="field advanced-switch-wrapper">
|
||||
<input type="checkbox" id="advanced-switch" class="advanced-switch" />
|
||||
<label for="advanced-switch">X</label>
|
||||
<label for="advanced-switch">Show more details</label>
|
||||
</div>
|
||||
|
||||
<div class="field advanced">
|
||||
<div class="label">Event JSON</div>
|
||||
<div class="json">{{.eventJSON}}</div>
|
||||
</div>
|
||||
<div class="field separator"></div>
|
||||
</div>
|
||||
|
||||
<div class="column column_clients">
|
||||
<div class="title open-list">
|
||||
<span class="text">Open {{.type}} in</span>
|
||||
<span class="open">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill="#FAFAFA" fill-rule="evenodd" d="M3.808.355h2.85a2.85 2.85 0 0 1 2.85 2.85v2.85a2.85 2.85 0 0 1-2.85 2.85h-2.85a2.85 2.85 0 0 1-2.85-2.85v-2.85a2.85 2.85 0 0 1 2.85-2.85Zm2.85 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0 3.8h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm10.45-6.65h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0-17.1h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="16" fill="currentColor" viewBox="0 0 31 16">
|
||||
<path fill="#fff" d="M30.207 3.016 16.744 14.983a1.496 1.496 0 0 1-1.974 0L1.307 3.016A1.496 1.496 0 0 1 3.28.772l12.476 11.085L28.233.772a1.496 1.496 0 1 1 1.974 2.244Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="clients_wrapper">
|
||||
{{range .clients}}
|
||||
<div class="btn">
|
||||
<a class="client" href="{{.url}}"><span>Open {{.type}} in</span> {{.name}}</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="footer">
|
||||
Powered by <a href="https://git.fiatjaf.com/njump">njump</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const type = '{{.type}}'
|
||||
let counts = []
|
||||
let clients = document.querySelectorAll('.client')
|
||||
for (let i = 0; i < clients.length; i++) {
|
||||
let name = clients[i].innerText
|
||||
let url = clients[i].href
|
||||
let key = 'nj:' + type + ':' + name
|
||||
let count = parseInt(localStorage.getItem(key) || 0)
|
||||
clients[i].parentNode.setAttribute("count", count)
|
||||
clients[i].parentNode.setAttribute("title", "Used " + count + " times")
|
||||
clients[i].addEventListener('click', () => {
|
||||
localStorage.setItem(key, count + 1)
|
||||
})
|
||||
counts.push([count, name, url])
|
||||
}
|
||||
|
||||
// Reorder clients following the counter
|
||||
let clients_wrapper = document.querySelector('.clients_wrapper')
|
||||
const elements = Array.from(clients_wrapper.getElementsByClassName("btn"));
|
||||
elements.sort((a, b) => {
|
||||
const rankA = parseInt(a.getAttribute("count"));
|
||||
const rankB = parseInt(b.getAttribute("count"));
|
||||
return rankB - rankA;
|
||||
});
|
||||
elements.forEach((element) => clients_wrapper.appendChild(element));
|
||||
|
||||
counts.sort((a, b) => b[0] - a[0])
|
||||
let tailsum = counts.slice(1).reduce((acc, c) => acc + c[0], 0)
|
||||
|
||||
if (location.hash !== '#noredirect') {
|
||||
if (counts[0][0] - tailsum > 10) {
|
||||
location.href = counts[0][2]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
let jsons = document.querySelectorAll('.json')
|
||||
for (let i = 0; i < jsons.length; i++) {
|
||||
console.log(jsons[i].innerHTML);
|
||||
jsons[i].innerHTML = syntaxHighlight(jsons[i].innerHTML);
|
||||
}
|
||||
|
||||
const shareButton = document.querySelector('.open-list');
|
||||
const clients_list = document.querySelector('.column_clients');
|
||||
shareButton.addEventListener('click', function() {
|
||||
clients_list.classList.toggle('up');
|
||||
if (clients_list.classList.contains('up')) {
|
||||
document.body.classList.add('lock');
|
||||
} else {
|
||||
document.body.classList.remove('lock');
|
||||
}
|
||||
});
|
||||
|
||||
function updateAdvanceSwitch() {
|
||||
advanced_list.forEach(element => {
|
||||
if (advanceSwitch.checked) {
|
||||
element.classList.add('visible');
|
||||
} else {
|
||||
element.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const advanceSwitch = document.querySelector('.advanced-switch');
|
||||
const advanced_list = document.querySelectorAll('.advanced');
|
||||
advanceSwitch.addEventListener('change', function() {
|
||||
updateAdvanceSwitch()
|
||||
});
|
||||
|
||||
updateAdvanceSwitch(); // Check at the page load, some browsers keep the state in cache
|
||||
|
||||
var url = new URL(window.location.href);
|
||||
var searchParams = new URLSearchParams(url.search);
|
||||
if (searchParams.has('details') && searchParams.get('details') == 'yes') {
|
||||
advanceSwitch.click();
|
||||
}
|
||||
|
||||
function syntaxHighlight(json) {
|
||||
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||
var cls = 'number';
|
||||
if (/^"/.test(match)) {
|
||||
if (/:$/.test(match)) {
|
||||
cls = 'key';
|
||||
} else {
|
||||
cls = 'string';
|
||||
}
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = 'boolean';
|
||||
} else if (/null/.test(match)) {
|
||||
cls = 'null';
|
||||
}
|
||||
return '<span class="' + cls + '">' + match + '</span>';
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
14
profile.html
14
profile.html
@@ -62,7 +62,7 @@
|
||||
<div class="container profile">
|
||||
|
||||
<div class="column columnA">
|
||||
<div class="name">
|
||||
<div class="info-wrapper">
|
||||
{{.metadata.Name}} <span class="display">{{.metadata.DisplayName}}</span>
|
||||
</div>
|
||||
<div class="pic-wrapper">
|
||||
@@ -74,9 +74,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column columnB">
|
||||
<div class="field name">
|
||||
{{.metadata.Name}} <span class="display">{{.metadata.DisplayName}}</span>
|
||||
<div class="column column_content">
|
||||
<div class="field info-wrapper">
|
||||
<div class="name">
|
||||
{{.metadata.Name}} <span class="display">{{.metadata.DisplayName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field separator long"></div>
|
||||
<div class="field">
|
||||
@@ -122,7 +124,7 @@
|
||||
<div class="field separator"></div>
|
||||
</div>
|
||||
|
||||
<div class="column columnC">
|
||||
<div class="column column_clients">
|
||||
<div class="title open-list">
|
||||
<span class="text">Open {{.type}} in</span>
|
||||
<span class="open">
|
||||
@@ -200,7 +202,7 @@
|
||||
}
|
||||
|
||||
const shareButton = document.querySelector('.open-list');
|
||||
const clients_list = document.querySelector('.columnC');
|
||||
const clients_list = document.querySelector('.column_clients');
|
||||
shareButton.addEventListener('click', function() {
|
||||
clients_list.classList.toggle('up');
|
||||
if (clients_list.classList.contains('up')) {
|
||||
|
||||
14
render.go
14
render.go
@@ -19,7 +19,7 @@ var rawHTML string
|
||||
//go:embed profile.html
|
||||
var profileHTML string
|
||||
|
||||
//go:embed raw.html
|
||||
//go:embed note.html
|
||||
var noteHTML string
|
||||
|
||||
func render(w http.ResponseWriter, r *http.Request) {
|
||||
@@ -161,6 +161,9 @@ func render(w http.ResponseWriter, r *http.Request) {
|
||||
|
||||
eventJSON, _ := json.MarshalIndent(event, "", " ")
|
||||
|
||||
// TODO: Sanitize content
|
||||
description += "\n<script>alert('TODO: Sanitize the content!')</script>"
|
||||
|
||||
params := map[string]any{
|
||||
"createdAt": createdAt,
|
||||
"clients": generateClientList(code, event),
|
||||
@@ -168,6 +171,7 @@ func render(w http.ResponseWriter, r *http.Request) {
|
||||
"title": title,
|
||||
"twitterTitle": twitterTitle,
|
||||
"npub": npub,
|
||||
"npubShort": npubShort,
|
||||
"nevent": nevent,
|
||||
"naddr": naddr,
|
||||
"metadata": metadata,
|
||||
@@ -183,9 +187,13 @@ func render(w http.ResponseWriter, r *http.Request) {
|
||||
|
||||
templates := make(map[string]string)
|
||||
templates["profile"] = profileHTML
|
||||
templates["note"] = rawHTML
|
||||
templates["note"] = noteHTML
|
||||
templates["address"] = rawHTML
|
||||
var tmpl = template.Must(template.New("event").Parse(templates[typ]))
|
||||
|
||||
var funcMap = template.FuncMap{
|
||||
"BasicFormatting": BasicFormatting,
|
||||
}
|
||||
var tmpl = template.Must(template.New("event").Funcs(funcMap).Parse(templates[typ]))
|
||||
|
||||
if err := tmpl.ExecuteTemplate(w, "event", params); err != nil {
|
||||
http.Error(w, "error rendering: "+err.Error(), 500)
|
||||
|
||||
@@ -63,6 +63,26 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.pic-wrapper {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.pic-wrapper {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
}
|
||||
.pic-wrapper img.pic {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-webkit-clip-path: url(#svg-shape);
|
||||
-moz-clip-path: url(#svg-shape);
|
||||
-o-clip-path: url(#svg-shape);
|
||||
-ms-clip-path: url(#svg-shape);
|
||||
clip-path: url(#svg-shape);
|
||||
}
|
||||
|
||||
.container_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -82,146 +102,122 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container.profile {
|
||||
.container {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
justify-content: space-between;
|
||||
gap: 4.8vw;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile {
|
||||
.container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.container.profile .columnA {
|
||||
.container .columnA {
|
||||
flex-basis: 25%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnA {
|
||||
.container .columnA {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
}
|
||||
.container.profile .columnA .name {
|
||||
.container .columnA .info-wrapper {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnA .name {
|
||||
.container .columnA .info-wrapper {
|
||||
display: block;
|
||||
flex-basis: 64%;
|
||||
max-width: 64%;
|
||||
overflow: hidden;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.container.profile .columnA .name .display {
|
||||
.container .columnA .info-wrapper .display {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
color: #C9C9C9;
|
||||
}
|
||||
}
|
||||
.container.profile .columnA .pic-wrapper {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnA .pic-wrapper {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
}
|
||||
.container.profile .columnA .pic-wrapper img.pic {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-webkit-clip-path: url(#svg-shape);
|
||||
-moz-clip-path: url(#svg-shape);
|
||||
-o-clip-path: url(#svg-shape);
|
||||
-ms-clip-path: url(#svg-shape);
|
||||
clip-path: url(#svg-shape);
|
||||
}
|
||||
.container.profile .columnA .last_update {
|
||||
.container .columnA .last_update {
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5rem;
|
||||
text-align: center;
|
||||
color: #C9C9C9;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnA .last_update {
|
||||
.container .columnA .last_update {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.container.profile .columnB {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
.container .column_content {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
word-wrap: break-word;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnB {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.container.profile .columnB .name {
|
||||
.container .column_content .info-wrapper {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.container.profile .columnB .name .display {
|
||||
.container .column_content .info-wrapper .display {
|
||||
color: #C9C9C9;
|
||||
}
|
||||
.container .column_content .info-wrapper .npub {
|
||||
font-size: 1rem;
|
||||
color: #C9C9C9;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnB .name {
|
||||
.container .column_content .info-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.container.profile .columnB .separator {
|
||||
.container .column_content .separator {
|
||||
height: 6px;
|
||||
width: 30%;
|
||||
margin-left: -0.6rem;
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
.container.profile .columnB .separator.long {
|
||||
.container .column_content .separator.long {
|
||||
width: 50%;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnB .separator {
|
||||
.container .column_content .separator {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
}
|
||||
.container.profile .columnB .field {
|
||||
.container .column_content .field {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.container.profile .columnB .field .label {
|
||||
.container .column_content .field .label {
|
||||
font-size: 0.8rem;
|
||||
color: #E32A6D;
|
||||
}
|
||||
.container.profile .columnB .field.advanced {
|
||||
.container .column_content .field.advanced {
|
||||
display: none;
|
||||
}
|
||||
.container.profile .columnB .field.advanced.visible {
|
||||
.container .column_content .field.advanced.visible {
|
||||
display: block;
|
||||
}
|
||||
.container.profile .columnB .field.advanced .label {
|
||||
.container .column_content .field.advanced .label {
|
||||
padding: 0.2rem 1rem;
|
||||
margin: 0 -1rem;
|
||||
color: #373737;
|
||||
background-color: #C9C9C9;
|
||||
}
|
||||
.container.profile .columnB .field.advanced-switch-wrapper {
|
||||
.container .column_content .field.advanced-switch-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.container.profile .columnB .field.advanced-switch-wrapper input[type=checkbox] {
|
||||
.container .column_content .field.advanced-switch-wrapper input[type=checkbox] {
|
||||
height: 0;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type {
|
||||
.container .column_content .field.advanced-switch-wrapper label:first-of-type {
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
width: 2.6rem;
|
||||
@@ -233,12 +229,12 @@ a {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type {
|
||||
.container .column_content .field.advanced-switch-wrapper label:first-of-type {
|
||||
width: 3rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
}
|
||||
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after {
|
||||
.container .column_content .field.advanced-switch-wrapper label:first-of-type:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
@@ -250,83 +246,87 @@ a {
|
||||
transition: 0.2s;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after {
|
||||
.container .column_content .field.advanced-switch-wrapper label:first-of-type:after {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
}
|
||||
.container.profile .columnB .field.advanced-switch-wrapper input:checked + label {
|
||||
.container .column_content .field.advanced-switch-wrapper input:checked + label {
|
||||
background: #E32A6D;
|
||||
}
|
||||
.container.profile .columnB .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
|
||||
.container .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
|
||||
left: calc(100% - 2px);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:active:after {
|
||||
.container .column_content .field.advanced-switch-wrapper label:first-of-type:active:after {
|
||||
width: 2rem;
|
||||
}
|
||||
.container.profile .columnB .field .json, .container.profile .columnB .field .data {
|
||||
.container .column_content .field.content img {
|
||||
max-width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.container .column_content .field .json, .container .column_content .field .data {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
background-color: #F3F3F3;
|
||||
padding: 1rem;
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
.container.profile .columnB .field .json .key, .container.profile .columnB .field .data .key {
|
||||
.container .column_content .field .json .key, .container .column_content .field .data .key {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
color: #E32A6D;
|
||||
}
|
||||
.container.profile .columnB .field .json .string, .container.profile .columnB .field .data .string {
|
||||
.container .column_content .field .json .string, .container .column_content .field .data .string {
|
||||
color: #373737;
|
||||
}
|
||||
.container.profile .columnB .field .json .number, .container.profile .columnB .field .data .number {
|
||||
.container .column_content .field .json .number, .container .column_content .field .data .number {
|
||||
color: darkorange;
|
||||
}
|
||||
.container.profile .columnB .field .json .boolean, .container.profile .columnB .field .data .boolean {
|
||||
.container .column_content .field .json .boolean, .container .column_content .field .data .boolean {
|
||||
color: #373737;
|
||||
}
|
||||
.container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null {
|
||||
.container .column_content .field .json .null, .container .column_content .field .data .null {
|
||||
color: #373737;
|
||||
}
|
||||
.container.profile .columnB .field.last_update {
|
||||
.container .column_content .field.last_update {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnB .field.last_update {
|
||||
.container .column_content .field.last_update {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
color: #C9C9C9;
|
||||
}
|
||||
}
|
||||
.container.profile .columnC {
|
||||
.container .column_clients {
|
||||
flex-basis: 25%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnC {
|
||||
.container .column_clients {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
.container.profile .columnC.up .btn {
|
||||
.container .column_clients.up .btn {
|
||||
display: block;
|
||||
}
|
||||
.container.profile .columnC.up .title span.open {
|
||||
.container .column_clients.up .title span.open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.container.profile .columnC .title {
|
||||
.container .column_clients .title {
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.container.profile .columnC .title span.open, .container.profile .columnC .title span.close {
|
||||
.container .column_clients .title span.open, .container .column_clients .title span.close {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnC .title {
|
||||
.container .column_clients .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -334,31 +334,31 @@ a {
|
||||
height: 2.6rem;
|
||||
border-left: 1px solid #bc1150;
|
||||
}
|
||||
.container.profile .columnC .title span.text {
|
||||
.container .column_clients .title span.text {
|
||||
display: none;
|
||||
}
|
||||
.container.profile .columnC .title span.open, .container.profile .columnC .title span.close {
|
||||
.container .column_clients .title span.open, .container .column_clients .title span.close {
|
||||
display: inline;
|
||||
}
|
||||
.container.profile .columnC .title span.open svg, .container.profile .columnC .title span.close svg {
|
||||
.container .column_clients .title span.open svg, .container .column_clients .title span.close svg {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin: 28% auto auto auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.container.profile .columnC .btn {
|
||||
.container .column_clients .btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnC .btn {
|
||||
.container .column_clients .btn {
|
||||
display: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.container.profile .columnC .btn a {
|
||||
.container .column_clients .btn a {
|
||||
flex-basis: 80%;
|
||||
padding: 0.4rem;
|
||||
text-align: center;
|
||||
@@ -370,7 +370,7 @@ a {
|
||||
border-radius: 8px;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnC .btn a {
|
||||
.container .column_clients .btn a {
|
||||
display: block;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0px;
|
||||
@@ -378,45 +378,113 @@ a {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.container.profile .columnC .btn a span {
|
||||
.container .column_clients .btn a span {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnC .btn a span {
|
||||
.container .column_clients .btn a span {
|
||||
display: inline;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.container.profile .columnC .btn a:hover {
|
||||
.container .column_clients .btn a:hover {
|
||||
background-color: #373737;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnC .btn:first-of-type {
|
||||
.container .column_clients .btn:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.container.profile .columnC .btn:first-of-type a {
|
||||
.container .column_clients .btn:first-of-type a {
|
||||
background-color: #E32A6D;
|
||||
border-bottom: none;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnC .btn:first-of-type a {
|
||||
.container .column_clients .btn:first-of-type a {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
}
|
||||
.container.profile .columnC .btn:first-of-type a:hover {
|
||||
.container .column_clients .btn:first-of-type a:hover {
|
||||
background-color: #bc1150;
|
||||
}
|
||||
.container.profile .columnC .btn span {
|
||||
.container .column_clients .btn span {
|
||||
flex-basis: 20%;
|
||||
margin-left: 0.4rem;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .columnC .btn span {
|
||||
.container .column_clients .btn span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.container.profile .column_content {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.profile .column_content {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.container.note .column_content {
|
||||
flex-basis: 70%;
|
||||
max-width: 70%;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.note .column_content {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.container.note .column_content .profile_intro {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
margin: 1rem 0 1rem 0;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.note .column_content .profile_intro {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.container.note .column_content .profile_intro .info-wrapper {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.note .column_content .profile_intro .info-wrapper {
|
||||
flex-basis: 80%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.note .column_content .profile_intro .info-wrapper .name, .container.note .column_content .profile_intro .info-wrapper .npub {
|
||||
display: block-inline;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
.container.note .column_content .profile_intro .pic-wrapper {
|
||||
flex-basis: 16%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.note .column_content .profile_intro .pic-wrapper {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
.container.note .column_content .profile_intro .published_at {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
align-self: end;
|
||||
font-size: 0.8rem;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.container.note .column_content .profile_intro .published_at {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 0.8rem;
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OAlHK;;;AAsHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OA3IO;;AA4IP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OAhKM;;AAkKP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBAnKkB;;AAoKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OArLM;;AAuLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAjMK;EAkML,kBAjMK;;AAoMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA5MgB;EA6MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YA/OK;;AAkPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA,kBAzPiB;EA0PjB;EACA;;AACA;EACC;EACA;EACA,OArQK;;AAuQN;EAAU,OAzQJ;;AA0QN;EAAU;;AACV;EAAW,OA3QL;;AA4QN;EAAQ,OA5QF;;AA8QP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAlRK;;;AAuRT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OAhVM;EAiVN,kBA3UiB;EA4UjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAhWI;;;AAmWN;EACC,kBA7VgB;;AAiWjB;EADD;IAEE;;;AAED;EACC,kBApWgB;EAqWhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAzWe;;AA6WlB;EACC;EACA;EACA,OAxXM;;AAyXN;EAJD;IAKE;;;;AAML;EACC;EACA","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAIF;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OArIK;;;AAyIR;EACC;EACA;EACA;EACA,OA7IO;;AA8IP;EALD;IAME;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC,OA7JM;;AA+JP;EACC;EACA,OAjKM;;AAmKP;EATD;IAUE;;;AAGF;EACC;EACA;EACA;EACA,kBApKkB;;AAqKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAtLM;;AAwLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAlMK;EAmML,kBAlMK;;AAqMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA7MgB;EA8MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAhPK;;AAmPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;;AAED;EACC;EACA;EACA,kBA9PiB;EA+PjB;EACA;;AACA;EACC;EACA;EACA,OA1QK;;AA4QN;EAAU,OA9QJ;;AA+QN;EAAU;;AACV;EAAW,OAhRL;;AAiRN;EAAQ,OAjRF;;AAmRP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAvRK;;;AA8RT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OAvVM;EAwVN,kBAlViB;EAmVjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAvWI;;;AA0WN;EACC,kBApWgB;;AAwWjB;EADD;IAEE;;;AAED;EACC,kBA3WgB;EA4WhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAhXe;;AAoXlB;EACC;EACA;EACA,OA/XM;;AAgYN;EAJD;IAKE;;;AAOH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAMF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EAgBC;EACA;EACA;EACA;;AAlBA;EADD;IAEE;;;AAED;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAQH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;EACA,OA5bK;;AA6bL;EAND;IAOE;;;;AASN;EACC;EACA","file":"styles.css"}
|
||||
@@ -68,6 +68,25 @@ a {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-wrapper {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
@media (max-width: 580px) {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
img.pic {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-webkit-clip-path: url(#svg-shape);
|
||||
-moz-clip-path: url(#svg-shape);
|
||||
-o-clip-path: url(#svg-shape);
|
||||
-ms-clip-path: url(#svg-shape);
|
||||
clip-path: url(#svg-shape);
|
||||
}
|
||||
}
|
||||
|
||||
.container_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -83,7 +102,7 @@ a {
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
.container.profile {
|
||||
.container {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
justify-content: space-between;
|
||||
@@ -102,7 +121,7 @@ a {
|
||||
align-items: center;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
.name {
|
||||
.info-wrapper {
|
||||
display: none;
|
||||
@media (max-width: 580px) {
|
||||
display: block;
|
||||
@@ -117,23 +136,6 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
.pic-wrapper {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
@media (max-width: 580px) {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
img.pic {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-webkit-clip-path: url(#svg-shape);
|
||||
-moz-clip-path: url(#svg-shape);
|
||||
-o-clip-path: url(#svg-shape);
|
||||
-ms-clip-path: url(#svg-shape);
|
||||
clip-path: url(#svg-shape);
|
||||
}
|
||||
}
|
||||
.last_update {
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5rem;
|
||||
@@ -144,23 +146,22 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
.columnB {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
.column_content {
|
||||
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
word-wrap: break-word;
|
||||
margin-right: 1vw;
|
||||
@media (max-width: 580px) {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
.name {
|
||||
|
||||
.info-wrapper {
|
||||
font-size: 1.6rem;
|
||||
.display {
|
||||
color: $color_2;
|
||||
}
|
||||
.npub {
|
||||
font-size: 1rem;
|
||||
color: $color_2;
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
display: none;
|
||||
}
|
||||
@@ -252,6 +253,10 @@ a {
|
||||
}
|
||||
|
||||
}
|
||||
&.content img {
|
||||
max-width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.json, .data {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
@@ -277,8 +282,10 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.columnC {
|
||||
|
||||
.column_clients {
|
||||
flex-basis: 25%;
|
||||
margin-top: 2rem;
|
||||
@media (max-width: 580px) {
|
||||
@@ -384,8 +391,72 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.profile {
|
||||
.column_content {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
@media (max-width: 580px) {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.note {
|
||||
.column_content {
|
||||
flex-basis: 70%;
|
||||
max-width: 70%;
|
||||
@media (max-width: 580px) {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
.profile_intro {
|
||||
@media (max-width: 580px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.info-wrapper {
|
||||
display: block;
|
||||
@media (max-width: 580px) {
|
||||
flex-basis: 80%;
|
||||
}
|
||||
.name, .npub {
|
||||
@media (max-width: 580px) {
|
||||
display: block-inline;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
margin: 1rem 0 1rem 0;
|
||||
.pic-wrapper {
|
||||
flex-basis: 16%;
|
||||
margin-right: 1rem;
|
||||
@media (max-width: 580px) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
.published_at {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
align-self: end;
|
||||
font-size: 0.8rem;
|
||||
color: $color_5;
|
||||
@media (max-width: 580px) {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
|
||||
37
utils.go
37
utils.go
@@ -2,7 +2,9 @@ package main
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"net/http"
|
||||
"regexp"
|
||||
"strings"
|
||||
|
||||
"github.com/nbd-wtf/go-nostr"
|
||||
@@ -114,3 +116,38 @@ func getPreviewStyle(r *http.Request) string {
|
||||
return "unknown"
|
||||
}
|
||||
}
|
||||
|
||||
func BasicFormatting(input string) string {
|
||||
lines := strings.Split(input, "\n")
|
||||
|
||||
var processedLines []string
|
||||
for _, line := range lines {
|
||||
processedLine := ReplaceURLsWithTags(line)
|
||||
processedLines = append(processedLines, processedLine)
|
||||
}
|
||||
|
||||
return strings.Join(processedLines, "<br/>")
|
||||
}
|
||||
|
||||
func ReplaceURLsWithTags(line string) string {
|
||||
|
||||
// Match and replace image URLs with <img> tags
|
||||
imageExtensions := []string{".jpg", ".jpeg", ".png", ".webp", ".gif"}
|
||||
for _, extension := range imageExtensions {
|
||||
regexPattern := fmt.Sprintf(`\s*(https?://\S+%s)\s*`, extension)
|
||||
regex := regexp.MustCompile(regexPattern)
|
||||
matches := regex.FindAllString(line, -1)
|
||||
|
||||
for _, match := range matches {
|
||||
imgTag := fmt.Sprintf(`<img src="%s" alt="">`, strings.ReplaceAll(match, "\n", ""))
|
||||
line = strings.ReplaceAll(line, match, imgTag)
|
||||
return line
|
||||
}
|
||||
}
|
||||
|
||||
// Match and replace other URLs with <a> tags
|
||||
otherRegexPattern := `\S*(https?://\S+)\S*`
|
||||
otherRegex := regexp.MustCompile(otherRegexPattern)
|
||||
line = otherRegex.ReplaceAllString(line, `<a href="$1">$1</a>`)
|
||||
return line
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user