simpkey/src/views/_components.pug

mixin avatar(user)
    img.avatar(src=user.avatarUrl, alt="avatar for " + user.username style="width: 64px; height: 64px; border-radius: 50%")&attributes(attributes)

mixin note-header(note)
    header&attributes(attributes)
        a(href="/" + getAcct(note.user))
            span.name= getUserName(note.user)
            span.acct(style="color: gray")= getAcct(note.user)
        if note.user.isAdmin
            span.bot [ADMIN]
        else if note.user.isModerator
            span.bot [MOD]
        if note.user.isBot
            span.bot [BOT]
        if note.user.isCat
            span.bot [CAT]

mixin sub-note(note)
    .sub-note
        +avatar(note.user)                  
        +note-header(note)
        p
            if note.cw
                details
                    summary #{note.cw} (#{note.text.length}文字)
                    != mfmToHtml(note.text)
            else
                != mfmToHtml(note.text)
        aside
            span.visibility= getVisibility(note)
            a.date(href="/notes/" + note.id)= new Date(note.createdAt).toLocaleString()

mixin note(note)
    if note.reply
        +sub-note(note.reply)(style="opacity: 0.5")
    if note.renote && !note.text
        p: b 🔁 #{getUserName(note.user)} がRenote
        +note(note.renote)
    else
        .note&attributes(attributes)
            +avatar(note.user)
            +note-header(note)
            p
                if note.reply
                    | ↩
                if note.cw
                    details
                        summary #{note.cw} (#{note.text.length}文字)
                        != mfmToHtml(note.text)
                else
                    != mfmToHtml(note.text)
            if note.renote
                p RN:
                +sub-note(note.renote)
            aside
                span.visibility= getVisibility(note)
                a.date(href="/notes/" + note.id)= new Date(note.createdAt).toLocaleString()
            .reactions
                each val, key in note.reactions
                    span(class=(key === note.myReaction ? 'my reaction' : 'reaction'))=`${key} ${val}`
            footer
                |[
                a(href="/reply/" + note.id) 返信 #{note.repliesCount}
                |]
                if canRenote && canRenote(note)
                    |[
                    a(href="/renote/" + note.id) リノート #{note.renoteCount}
                    |]
                if canReact && canReact(note)
                    if !note.myReaction
                        | [
                        a(href="/react/" + note.id) リアクション
                        | ]
                    else
                        form(action="action/unreact", method="post" style="display: inline")
                            input(type="hidden", name="noteId", value=note.id)
                            button(type="submit") リアクション解除

mixin post-form(url, placeholder, buttonText)
    form(action=url, method="post")
        div: label
            input(type="checkbox", name="useCw")
            span CW
        input(type="text", name="cw" placeholder="注釈(省略可能)" style="max-width: 100%; min-width: 100%;")
        textarea(name="text", placeholder=placeholder style="max-width: 100%; min-width: 100%; height: 6em; margin-bottom: 8px")

        div: label 公開範囲: 
            select(name="visibility")
                option(value="public") パブリック
                option(value="home") ホーム
                option(value="followers") フォロワー
                option(value="direct") ダイレクト
        button(type="submit")= buttonText
        block

mixin nav()
    div
        |[
        a(href="/") ホーム
        |] [
        a(href="/ltl") ローカル
        |] [
        a(href="/stl") ソーシャル
        |] [
        a(href="/gtl") グローバル
        |] [
        a(href="/notifications") 通知
        |] [
        a(href="/settings") 設定
        |]

mixin user-header(user, detail = false)
    if detail
        if user.host
            .remote-caution ⚠ リモートのアカウントにつき、情報が正確では無い可能性があります。
                a(href=user.url || user.uri, target="_blank", rel="noopener noreferrer") リモートで確認する
        if user.isSuspended
            .suspended ⚠ このアカウントは凍結されています
        if user.isSilenced
            .silenced ⚠ このアカウントはサイレンスされています
    +avatar(user)
    .name: b=getUserName(user)
        |  
        span(style="color: gray")= getAcct(user)
        if user.isFollowed
            span.is-followed フォローされています

        if user.isLocked
            span.lock
        if user.isAdmin
            span.bot [ADMIN]
        else if user.isModerator
            span.bot [MOD]
        if user.isBot
            span.bot [BOT]
        if user.isCat
            span.bot [CAT]
    if detail
        if user.description
            .description !{mfmToHtml(user.description)}
        if user.birthday
            .birthday 🎂 #{user.birthday}
        if user.location
            .birthday 📍#{user.location}
        if user.sex
            .sex 性別: #{user.sex}
        dl
            each field in user.fields
                dt !{mfmToHtml(field.name)}
                dd !{mfmToHtml(field.value)}
                
    .count
        a.notes(href="/" + getAcct(user)) #{user.notesCount} ノート
        |  
        //- a.following(href="/" + getAcct(user) + "/following") 
        | #{user.followingCount} フォロー
        |  
        //- a.followers(href="/" + getAcct(user) + "/followers")
        | #{user.followersCount} フォロワー

mixin timeline(notes)
    each note in notes
        hr
        +note(note)