gitcitadel-online/templates/components.html

{{/* Feed Component - Reusable feed sidebar */}}
{{define "feed"}}
<div class="feed-container">
    <h3><span class="icon-inline">{{icon "rss"}}</span> Recent Notes</h3>
    <div class="feed-items">
        {{range .FeedItems}}
        <article class="feed-item">
            <header class="feed-header">
                <span class="feed-author">{{template "user-badge-simple" (dict "Pubkey" .Author "Profiles" $.Profiles)}}</span>
                <time class="feed-time" datetime="{{.TimeISO}}"><span class="icon-inline">{{icon "clock"}}</span> {{.Time}}</time>
            </header>
            <div class="feed-content">{{.Content}}</div>
        </article>
        {{else}}
        <p class="feed-empty"><span class="icon-inline">{{icon "inbox"}}</span> No recent notes available.</p>
        {{end}}
    </div>
</div>
{{end}}

{{/* Alert Component - Success message */}}
{{define "alert-success"}}
<div class="alert alert-success" role="alert">
    <strong><span class="icon-inline">{{icon "check-circle"}}</span> Success!</strong> {{.}}
</div>
{{end}}

{{/* Alert Component - Error message */}}
{{define "alert-error"}}
<div class="alert alert-error" role="alert">
    <strong><span class="icon-inline">{{icon "alert-circle"}}</span> Error:</strong> {{.}}
</div>
{{end}}

{{/* Wiki Sidebar Component - Reusable wiki navigation */}}
{{define "wiki-sidebar"}}
<aside class="wiki-sidebar" aria-label="Project Wiki navigation">
    <nav class="wiki-nav">
        <h2><span class="icon-inline">{{icon "book-open"}}</span> Project Wiki</h2>
        <ul class="wiki-menu">
            <li><a href="/wiki"{{if eq .CanonicalURL (printf "%s/wiki" .SiteURL)}} class="active"{{end}}><span class="icon-inline">{{icon "info"}}</span> Project Overview</a></li>
            {{range .WikiPages}}
            <li><a href="/wiki/{{.DTag}}"{{if eq $.CanonicalURL (printf "%s/wiki/%s" $.SiteURL .DTag)}} class="active"{{end}}><span class="icon-inline">{{icon "file-text"}}</span> {{.Title}}</a></li>
            {{end}}
        </ul>
    </nav>
</aside>
{{end}}

{{/* User Badge Component - Displays user profile with picture, name, or shortened npub
     Usage: {{template "user-badge" (dict "Pubkey" .Author "Picture" "" "DisplayName" "" "Name" "")}}
     Or simpler: {{template "user-badge-simple" .Author}} for just pubkey
*/}}
{{define "user-badge"}}
<span class="user-badge" title="{{.Pubkey}}">
    {{if .Picture}}
    <img src="{{.Picture}}" alt="{{if .DisplayName}}{{.DisplayName}}{{else if .Name}}{{.Name}}{{else}}User{{end}}" class="user-badge-avatar" loading="lazy">
    {{else}}
    <span class="user-badge-avatar-placeholder"><span class="icon-inline">{{icon "user"}}</span></span>
    {{end}}
    <span class="user-badge-name">
        {{if .DisplayName}}
            {{.DisplayName}}
        {{else if .Name}}
            {{.Name}}
        {{else}}
            {{shortenPubkey .Pubkey}}
        {{end}}
    </span>
    {{if and .Name (not .DisplayName)}}
    <span class="user-badge-handle">@{{.Name}}</span>
    {{end}}
</span>
{{end}}

{{/* Simple user badge - takes a pubkey string and looks up profile from parent context's Profiles map
     Usage: {{template "user-badge-simple" (dict "Pubkey" .Author "Profiles" $.Profiles)}}
     Or with root context: {{template "user-badge-simple" (dict "Pubkey" .Author "Profiles" $)}}
*/}}
{{define "user-badge-simple"}}
{{$pubkey := .Pubkey}}
{{$profiles := .Profiles}}
{{$profile := index $profiles $pubkey}}
{{$npub := pubkeyToNpub $pubkey}}
{{$profileURL := printf "https://alexandria.gitcitadel.eu/events?id=%s" $npub}}
<a href="{{$profileURL}}" class="user-badge" title="{{$pubkey}}" target="_blank" rel="noopener noreferrer">
    {{if and $profile $profile.Picture}}
    <img src="{{$profile.Picture}}" alt="{{if $profile.DisplayName}}{{$profile.DisplayName}}{{else if $profile.Name}}{{$profile.Name}}{{else}}User{{end}}" class="user-badge-avatar" loading="lazy">
    {{else}}
    <span class="user-badge-avatar-placeholder"><span class="icon-inline">{{icon "user"}}</span></span>
    {{end}}
    <span class="user-badge-name">
        {{if and $profile $profile.DisplayName}}
            {{$profile.DisplayName}}
        {{else if and $profile $profile.Name}}
            {{$profile.Name}}
        {{else}}
            {{shortenPubkey $pubkey}}
        {{end}}
    </span>
    {{if and $profile $profile.Name (not $profile.DisplayName)}}
    <span class="user-badge-handle">@{{$profile.Name}}</span>
    {{end}}
</a>
{{end}}

{{/* Mobile Custom Dropdown Component - Shows title and profile pic
     Usage for blog/articles: {{template "mobile-dropdown" (dict "Id" "mobile-blog-selector" "Items" .BlogItems "Profiles" $.Profiles "Type" "blog")}}
     Usage for ebooks: {{template "mobile-dropdown" (dict "Id" "mobile-ebooks-selector" "Items" .EBooks "Profiles" $.Profiles "Type" "ebook")}}
*/}}
{{define "mobile-dropdown"}}
<div class="mobile-selector-custom" id="{{.Id}}-container">
    <button class="mobile-dropdown-toggle" id="{{.Id}}-toggle" aria-haspopup="true" aria-expanded="false" type="button">
        <span class="mobile-dropdown-selected">
            {{$firstItem := index .Items 0}}
            {{$profile := index .Profiles $firstItem.Author}}
            {{if and $profile $profile.Picture}}
            <img src="{{$profile.Picture}}" alt="" class="mobile-dropdown-avatar">
            {{else}}
            <span class="mobile-dropdown-avatar-placeholder"><span class="icon-inline">{{icon "user"}}</span></span>
            {{end}}
            <span class="mobile-dropdown-title">{{$firstItem.Title}}</span>
        </span>
        <span class="mobile-dropdown-arrow">▼</span>
    </button>
    <ul class="mobile-dropdown-menu" id="{{.Id}}-menu" role="listbox" aria-labelledby="{{.Id}}-toggle">
        {{range $index, $item := .Items}}
        <li role="option" data-value="{{if eq $.Type "ebook"}}{{$item.Naddr}}{{else}}{{$item.DTag}}{{end}}" data-index="{{$index}}"{{if eq $index 0}} aria-selected="true" class="selected"{{end}}>
            {{$profile := index $.Profiles $item.Author}}
            {{if and $profile $profile.Picture}}
            <img src="{{$profile.Picture}}" alt="" class="mobile-dropdown-avatar">
            {{else}}
            <span class="mobile-dropdown-avatar-placeholder"><span class="icon-inline">{{icon "user"}}</span></span>
            {{end}}
            <span class="mobile-dropdown-title">{{$item.Title}}</span>
        </li>
        {{end}}
    </ul>
</div>
{{end}}