docbrown/app/views/users/show.html.erb

<main id="main-content">
<% title @user.name %>

<%= render "shared/payment_pointer", user: @user %>

<%= content_for :page_meta do %>
  <%= render "users/meta" %>
<% end %>

<% unless internal_navigation? || user_signed_in? %>
  <script type="application/ld+json">
    <%= @user_json_ld.to_json.html_safe %>
  </script>
<% end %>

<% cache "user-profile-header-area-#{@user.id}-#{@user.profile_updated_at}-#{user_signed_in?}", expires_in: 10.days do %>
  <style>
    :root {
      --profile-brand-color: <%= Color::CompareHex.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
    }
  </style>
  <div class="brand-bg">
    <div class="crayons-layout crayons-layout--limited-l pt-7 m:pt-9">
      <header class="profile-header crayons-card mt-2">
        <div class="relative profile-header__top">
          <span class="crayons-avatar crayons-avatar--3xl">
            <img src="<%= Images::Profile.call(@user.profile_image_url, length: 320) %>" width="128" height="128" alt="<%= @user.name %> profile picture" class="crayons-avatar__image">
          </span>

          <div class="profile-header__actions">
            <div class="profile-dropdown mr-2 relative hidden" data-username="<%= @user.username %>">
              <button id="user-profile-dropdown" aria-expanded="false" aria-controls="user-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon">
                <%= inline_svg_tag("overflow-horizontal.svg", class: "dropdown-icon crayons-icon", aria: true, title: "User actions") %>
              </button>

              <div id="user-profile-dropdownmenu" class="crayons-dropdown top-100 right-0 p-1">
                <%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
                <% if user_signed_in? %>
                  <a href="javascript:void(0);" id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="border-none crayons-link crayons-link--block">Block @<%= @user.username %></a>
                  <a
                    href="javascript:void(0);"
                    id="user-profile-dropdownmenu-flag-button"
                    data-profile-user-id="<%= @user.id %>"
                    data-profile-user-name="@<%= @user.username %>"
                    data-is-user-flagged="<%= @is_user_flagged %>"
                    class="border-none crayons-link crayons-link--block">
                    <%= @flag_status ? "Unflag" : "Flag" %> @<%= @user.username %>
                  </a>
                <% end %>
                <span class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= user_url(@user) %>"></span>
              </div>
            </div>
            <% if user_signed_in? %>
              <a href="/connect/@<%= @user.username %>" class="hidden mr-2" id="user-connect-redirect">
                <button class="chat-action-button crayons-btn crayons-btn--outlined hidden" id="modal-opener">Chat</button>
              </a>
            <% end %>
            <button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button follow-user" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>"}'>Follow</button>
          </div>
        </div>

        <div class="profile-header__details">
          <h1 class="crayons-title fw-heavy mb-2"><%= @user.name %></h1>
          <p class="fs-base m:fs-l color-base-90 mb-4 mx-auto max-w-100 m:max-w-75"><%= @user.profile.summary.presence || ["404 bio not found"].sample %></p>

          <div class="profile-header__meta">
            <% if @user.profile.location.present? %>
              <span class="profile-header__meta__item">
                <%= inline_svg_tag("location.svg", aria: true, class: "crayons-icon mr-2 shrink-0", title: "Location") %>
                <%= @user.location %>
              </span>
            <% end %>

            <span class="profile-header__meta__item">
              <%= inline_svg_tag("cake.svg", aria: true, class: "crayons-icon mr-2 shrink-0", title: "Joined") %>
              Joined on&nbsp;
              <%= local_date(@user.created_at) %>
            </span>

            <% if @user.setting.display_email_on_profile %>
              <a href="mailto:<%= @user.email %>" class="profile-header__meta__item">
                <%= inline_svg_tag("email.svg", class: "crayons-icon mr-2 shrink-0", aria: true, title: "Email address") %>
                <%= @user.email %>
              </a>
            <% end %>

            <% if @user.profile.website_url.present? %>
              <a href="<%= @user.website_url %>" target="_blank" rel="noopener me" class="profile-header__meta__item">
                <%= inline_svg_tag("link-external.svg", class: "crayons-icon mr-2 shrink-0", aria: true, title: "Personal website") %>
                <%= @user.website_url %>
              </a>
            <% end %>

            <% social_authentication_links_for(@user).each do |provider_name, url| %>
              <a href="<%= url %>" target="_blank" rel="noopener me" class="profile-header__meta__item p-1">
                <%= inline_svg_tag("#{provider_name}.svg", class: "crayons-icon shrink-0", aria: true, title: "#{provider_name} website") %>
              </a>
            <% end %>
          </div>
        </div>

        <%= render "users/metadata" %>

        <div class="p-3 pt-0 block m:hidden js-user-info-trigger-wrapper">
          <button type="button" class="crayons-btn crayons-btn--outlined w-100 js-user-info-trigger">More info about @<%= @user.username %></button>
        </div>

        <div class="crayons-modal align-left hidden">
          <div class="crayons-modal__box">
            <div class="crayons-modal__box__header">
              <h2 class="crayons-modal__box__header__title">Chat with <%= @user.name %></h2>
              <button title="Close" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon close-modal">
                <%= inline_svg_tag("x.svg", class: "crayons-icon", aria: true, title: "Close modal") %>
              </button>
            </div>

            <div class="crayons-modal__box__body">
              <% if @user.setting.inbox_guidelines.present? %>
                <p class="fw-bold mb-2">@<%= @user.username %>'s guidelines:</p>
                <p class="mb-6"><%= @user.setting.inbox_guidelines %></p>
              <% end %>
              <form id="new-message-form" class="message-form mb-4" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>","username":"<%= @user.username %>", "showChat":"<%= @user.setting.inbox_type %>"}'>
                <textarea id="new-message" rows="4" cols="70" placeholder="Enter your message here..." class="crayons-textfield"></textarea>
                <button type="submit" class="submit-message crayons-btn">Send</button>
              </form>
              <p class="fs-s color-base-60">All private interactions <b>must</b> abide by the <a href="/code-of-conduct">code of conduct</a>.</p>
            </div>
          </div>
          <div class="crayons-modal__overlay"></div>
        </div>
      </header>
    </div>
  </div>
<% end %>

<div
  class="crayons-layout crayons-layout--limited-l crayons-layout--2-cols crayons-layout--2-cols--1-2 pt-4 m:pt-0"
  id="index-container"
  data-params="<%= params.merge(user_id: @user.id, class_name: "Article", sort_by: "published_at", sort_direction: "desc").to_json(only: %i[tag user_id q class_name sort_by sort_direction]) %>" data-which="<%= @list_of %>"
  data-tag=""
  data-feed="<%= params[:timeframe] || "base-feed" %>"
  data-articles-since="0">

  <div class="crayons-layout__sidebar-left">
    <%= render partial: "users/sidebar", locals: { repositories: @github_repositories } %>
  </div>

  <main class="crayons-layout__content articles-list" id="articles-list">
    <div class="substories" id="substories">
      <% if params[:view] == "comments" %>
        <%= render "users/comments_section" %>
      <% elsif @stories.any? || @comments.any? || @pinned_stories.any? %>
        <%= render "users/main_feed" %>
      <% end %>
    </div>
    <div class="loading-articles" id="loading-articles">
      loading...
    </div>
  </main>
</div>
</main>

<%= javascript_packs_with_chunks_tag "storiesList", "followButtons", "feedPreviewCards", defer: true %>