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

<script type="application/ld+json">
  <%
    set_meta_tags title: "#{@user.name}'s profile on Notebook.ai",
    description: "#{@user.name} is creating fictional worlds on Notebook.ai.",
    image_src: @user.image_url(120)

    content_jsonld = {
      '@id': user_url(id: @user.id),
      '@type': 'https://schema.org/Person',
      'https://schema.org/name': @user.name,
      'https://schema.org/description': "#{@user.name}’s worldbuilding profile on Notebook.ai",
      'https://schema.org/image': @user.image_url(120)
    }
  %>
  <%= content_jsonld.to_json.html_safe %> %>
</script>

<%
  show_collections_tab = @user.page_collections.any? || @user.published_in_page_collections.any?
%>

<%= content_for :full_width_page_header do %>
  <div class="user-profile-ui card">
    <div class="card-image">
      <% if @user.favorite_page_type? %>
        <div class="<%= @accent_color %> darken-4" style="height: 200px; width: 100%"></div>
      <% else %>
        <%= image_tag "card-headers/users.png", style: 'height: 200px;' %>
      <% end %>
      <span class="card-title">
        <%= image_tag @user.image_url.html_safe, class: 'header-avatar materialboxed', data: { caption: "#{@user.display_name}'s avatar" } %>

        <%= @user.name %>
        <span class="black-text">
          <%= render partial: 'thredded/users/badge', locals: { user: @user } %>
        </span>
      </span>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
      <li class="tab col s3"><a class="blue-text" href="#tab-about-me">About Me</a></li>
      <li class="tab col s3"><a class="active blue-text" href="#tab-recent-activity">Recent Activity</a></li>
      <li class="tab col s3"><a class="blue-text" href="#tab-universes">Universes</a></li>
      <!--<li class="tab col s3"><a class="blue-text" href="#tab-documents">Documents</a></li>-->
      <% if show_collections_tab %>
        <li class="tab col s3"><a class="blue-text" href="#tab-collections">Collections</a></li>
      <% end %>
      </ul>
    </div>
  </div>
<% end %>

<div class="row user-profile-ui">
  <div class="col s12">

    <div id="tab-about-me">
      <div class="row">
        <div class="col s12">
          <%= render partial: 'users/profile/actions' %>
        </div>
      </div>
      <%= render partial: 'users/profile/info' %>
    </div>
    <div id="tab-recent-activity">
      <% if user_signed_in? && @user.blocked_by?(current_user) %>
        <p class="card-panel red center lighten-5 black-text">
          You've blocked this user.
        </p>
      <% else %>
        <%= render partial: 'stream/share', collection: @feed %>
        <% if @feed.empty? %>
          <div class="row">
            <div class='col s12'>
              <div class="hoverable card">
                <div class="card-content">
                  <p class="card-title">
                    There are no posts here yet!
                  </p>
                  <p>
                    You can follow other worldbuilders from their profiles.
                    Whenever a user you follow shares one of their public pages,
                    it will appear here for you to comment on!
                  </p>
                </div>
              </div>
            </div>
          </div>
        <% end %>
      <% end %>
    </div>
    <div id="tab-universes">
      <% if user_signed_in? && @user.blocked_by?(current_user) %>
        <p class="card-panel red center lighten-5 black-text">
          You've blocked this user.
        </p>
      <% else %>
        <div class="row">
          <% @user.universes.is_public.each do |universe| %>
            <div class="col s12 m12 l6">
              <%= link_to universe do %>
                <div class="hoverable card">
                  <div class="card-image">
                    <%= image_tag universe.random_public_image %>
                    <span class="card-title"><%= universe.name %></span>
                  </div>
                  <div class="card-content <%= Universe.color %> white-text fixed-card-content">
                    <p><%= truncate(universe.description, length: 140) %></p>
                  </div>
                </div>
              <% end %>
            </div>
          <% end %>
        </div>
        <div class="row">
          <div class="col s12 m4 l4">
            You can also browse this user's public pages directly.
            <% if @content.empty? %>
              However, they haven't made anything public yet!
            <% end %>
          </div>
          <div class="col s12 m8 l8">
            <%= render partial: 'users/profile/public_pages' %>
          </div>
        </div>
      <% end %>
    </div>
    <div id="tab-collections">
      <% if user_signed_in? && @user.blocked_by?(current_user) %>
        <p class="card-panel red center lighten-5 black-text">
          You've blocked this user.
        </p>
      <% else %>
        <div class="row">

          <% if @user.published_in_page_collections.any? %>
            <h3 class="grey-text center">Published in</h3>
            <% @user.published_in_page_collections.each do |page_collection| %>
              <div class="col s12 m6 l4">
                <%= link_to page_collection do %>
                  <div class="hoverable card">
                    <div class="card-image">
                      <%= image_tag page_collection.random_public_image %>
                      <span class="card-title">
                        <i class="material-icons bordered-text <%= PageCollection.color %>-text"><%= PageCollection.icon %></i>
                        <%= page_collection.title %><br />
                        <%= page_collection.subtitle %>
                      </span>
                    </div>
                    <div class="card-content <%= PageCollection.color %> white-text fixed-card-content">
                      <p><%= truncate(page_collection.description, length: 140) %></p>
                    </div>
                  </div>
                <% end %>
              </div>
            <% end %>
          <% end %>
        
        </div>
        <div class="row">

          <% if @user.page_collections.any? %>
            <h3 class="grey-text center">My Collections</h3>
            <% @user.page_collections.each.with_index do |page_collection, i| %>
              <div class="col s12 m6 l4">
                <%= link_to page_collection do %>
                  <div class="hoverable card"">
                    <div class="card-image">
                      <%= image_tag page_collection.random_public_image, height: 250 %>
                      <span class="card-title">
                        <i class="material-icons bordered-text <%= PageCollection.color %>-text"><%= PageCollection.icon %></i>
                        <%= page_collection.title %><br />
                        <%= page_collection.subtitle %>
                      </span>
                    </div>
                    <div class="card-content <%= PageCollection.color %> white-text fixed-card-content">
                      <p><%= truncate(page_collection.description, length: 140) %></p>
                    </div>
                  </div>
                <% end %>
              </div>
            <% end %>
          <% end %>

        </div>
      <% end %>
    </div>
    <!--
    <div id="tab-documents">
      Tab 4
    </div>
    -->
  </div>
</div>