Add styling for notes and bookmarks

This commit is contained in:
JP Hastings-Spital 2024-01-16 21:46:13 +00:00
parent 24cf195125
commit cffe01b882
7 changed files with 78 additions and 7 deletions

View file

@ -779,6 +779,10 @@ time {
}
}
a:hover time {
color: inherit;
}
body.nownownow .post-content > p {
position: relative;
line-height: inherit;

View file

@ -518,4 +518,15 @@ figure {
opacity: 0.6;
}
}
}
}
.bookmark-of {
font-style: italic;
font-synthesis: none;
}
.notes-content {
footer {
text-align: right;
}
}

View file

@ -1,6 +1,6 @@
{{- $pages := slice -}}
{{- if .IsHome -}}
{{- $pages = where .Site.RegularPages "Type" "not in" (slice "memex" "timeless" "site-infra" "reading-lists") -}}
{{- $pages = where .Site.RegularPages "Type" "not in" (slice "memex" "timeless" "site-infra" "reading-lists" "notes") -}}
{{- else -}}
{{- $pages = .Pages -}}
{{- end -}}
@ -32,15 +32,19 @@
<pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
<guid>{{ .Permalink | absURL }}</guid>
<description>
{{- with index .Params.Media 0 }}
&lt;img src="{{ path.Join $page.RelPermalink . | absURL }}" /&gt;
{{- end }}
{{ .Summary | html }}
{{ with .Params.bookmarkOf }}
Thoughts on {{.}}
{{ else }}
{{ .Summary | html }}
{{ end }}
</description>
<content:encoded>
{{- range $i, $src := .Params.Media }}
&lt;img src="{{ path.Join $page.RelPermalink $src | absURL }}" /&gt;&lt;br/&gt;
{{- end }}
{{ if .Params.bookmarkOf }}
&lt;p&gt;&lt;i&gt;{{ partial "bookmark-of.html" . | html }}&lt;/i&gt;&lt;/p&gt;
{{ end }}
{{ .Content | html }}
</content:encoded>
{{- range .Params.syndications}}

View file

@ -84,6 +84,9 @@
{{ end }}
<div class="post-content e-content" data-pagefind-body data-pagefind-filter="type:{{.Type | title}}">
{{ if .Params.bookmarkOf }}
<p class="bookmark-of">{{ partial "bookmark-of.html" . }}</p>
{{ end }}
{{ .Content }}
</div>
</article>

32
layouts/notes/list.html Normal file
View file

@ -0,0 +1,32 @@
{{ define "main" }}
{{ $paginator := .Paginate .Data.Pages }}
{{/* Ignore entirely from search, as we want to index the individual notes, not this stream */}}
<main class="posts" data-pagefind-ignore="all">
{{ partial "generic-list-header.html" . }}
<hgroup class="post-title">
<h1 class="p-name">
{{ with .Params.emoji }}<span data-emoji="{{.}}"></span>{{end}}
<a href="{{ .Permalink }}" class="noaccent u-url">{{ title (replace .Title "-" " ") }}</a>
</h1>
{{ partial "alternates.html" . }}
</hgroup>
{{ if .Content }}
<div class="content" data-pagefind-body data-pagefind-filter="type:{{.Type | title}}">{{ .Content }}</div>
{{ end }}
<div class="posts-list">
{{ range $paginator.Pages }}
<hr />
<article class="notes-content e-content">
{{ .Content }}
<footer><a href="{{.Permalink}}">{{ partial "year-relative-date.html" .Date }}</a></footer>
</article>
{{ end }}
</div>
{{ partial "pagination-list.html" . }}
</main>
{{ end }}

View file

@ -0,0 +1,17 @@
{{ if not .Params.bookmarkOf}}
{{ errorf "BookmarkOf partial called when no bookmark of param set" }}
{{ end }}
{{ $url := .Params.bookmarkOf }}
{{ $reference := dict }}
{{ range .Params.references }}
{{ if eq .url $url }}
{{ $reference = . }}
{{ end }}
{{ end }}
💭 Thoughts on{{" "}}
{{- with $reference.name -}}
the article <a href="{{ $url }}" class="u-bookmark-of">{{ . }}</a>.
{{- else -}}
<a href="{{ $url }}" class="u-bookmark-of">an article from {{ ($url | urls.Parse).Hostname }}</a>
{{- end }}

View file

@ -16,7 +16,7 @@
<line x1="10" y1="3" x2="8" y2="21"></line>
<line x1="16" y1="3" x2="14" y2="21"></line>
</svg>
{{ len .Data.Pages }} {{ if eq .Title "Calendar" }}events{{ else }}posts{{ end }}
{{ len .Data.Pages }} {{ if eq .Title "Calendar" }}events{{ else if eq .Title "Notes" }}notes {{ else }}posts{{ end }}
</p>
<p class="author h-card hidden" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>