spina-conferences-primer_theme-fork 1.0.0.rc1 → 1.0.0.rc5

data/app/views/conferences_primer_theme/partials/_event.html.haml

@@ -1,5 +1,5 @@
 %li.list-style-none.py-4.border-bottom
-  = render Primer::FlexComponent.new(direction: :column, align_items: :start) do
+  = render Primer::BoxComponent.new(display: :flex, direction: :column, align_items: :flex_start) do
     - if event.content(:name).present?
       = render(Primer::HeadingComponent.new(tag: :h3, flex: :auto)) { event.content(:name) }
     = render Primer::HeadingComponent.new(tag: :h4, flex: :auto) do

data/app/views/conferences_primer_theme/partials/_homepage_item.html.haml

@@ -1,4 +1,4 @@
-%div{ data: { slideshow_target: 'slide' } }
+%div{ data: { slideshow_target: 'slide' }, hidden: (index != 0) }
   - if item.content(:background_image).present?
     = render Primer::BoxComponent.new(position: :absolute, top: false, left: false, right: false, bottom: false, style: 'z-index: 1') do
       = image_tag(main_app.url_for(item.content(:background_image).variant(resize_to_limit: [1680, 1680])),
@@ -9,11 +9,11 @@
                   class: %w[width-full height-full])
   .container-lg.p-responsive.position-relative.color-text-white.height-full{ style: 'z-index: 3'}
     = render Primer::BoxComponent.new(py: [3, nil, nil, 6]) do
-      %div{ style: 'text-shadow: 0 1px 1px #01040940, 0 1px 25px #010409bf;' }
+      %div{ style: 'color: var(--color-scale-white); text-shadow: 0 1px 1px #01040940, 0 1px 25px #010409bf;' }
         = render(Primer::HeadingComponent.new(tag: :h1, classes: 'h000-mktg lh-condensed-ultra')) do
           = item.content(:title)
-      %div{ style: 'text-shadow: 0 1px 1px rgba(var(--color-scale-black), 0.25), 0 1px 25px rgba(var(--color-scale-black), 0.75);' }
-        = render(Primer::Markdown.new(my: 4)) do
+      %div{ style: 'color: var(--color-scale-white); text-shadow: 0 1px 1px #010409bf, 0 1px 25px #010409bf;' }
+        = render(Primer::Markdown.new(my: 4, font_size: 3)) do
           = item.content.html(:description).to_s
       - if item.content(:url).present?
         = link_to t('.more_info'), item.content(:url),

data/app/views/layouts/conferences_primer_theme/application.html.haml

@@ -1,5 +1,5 @@
 - content_for :breadcrumbs do
-  - if current_page.ancestors.any?
+  - if current_page.ancestors.any? || current_page.resource&.name == 'journal'
     = ancestors
 
 = render template: 'layouts/spina/conferences/primer_theme/application',

data/app/views/layouts/spina/conferences/primer_theme/journal/articles.html.haml

@@ -1,2 +1,5 @@
+- content_for :breadcrumbs do
+  = render_breadcrumbs(builder: Spina::Conferences::PrimerTheme::Breadcrumbs::Builder)
+
 = render template: 'layouts/spina/conferences/primer_theme/application',
          locals: { author: current_account.name, description: @description, title: @title, seo_title: @title, hide_alert: false }

data/app/views/layouts/spina/conferences/primer_theme/journal/authors.html.haml

@@ -0,0 +1,5 @@
+- content_for :breadcrumbs do
+  = render_breadcrumbs(builder: Spina::Conferences::PrimerTheme::Breadcrumbs::Builder)
+
+= render template: 'layouts/spina/conferences/primer_theme/application',
+         locals: { author: current_account.name, description: @description, title: @title, seo_title: @title, hide_alert: false }

data/app/views/layouts/spina/conferences/primer_theme/journal/issues.html.haml

@@ -1,2 +1,5 @@
+- content_for :breadcrumbs do
+  = render_breadcrumbs(builder: Spina::Conferences::PrimerTheme::Breadcrumbs::Builder)
+
 = render template: 'layouts/spina/conferences/primer_theme/application',
          locals: { author: current_account.name, description: @description, title: @title, seo_title: @title, hide_alert: false }

data/app/views/spina/application/_cookies.html.haml

@@ -1,7 +1,8 @@
-= render Primer::BorderBoxComponent.new(classes: 'Box--overlay') do |component|
-  - component.header do
-    = button_tag(data: { 'close-dialog': true }, aria: { label: t(:'spina.close') }, type: 'button',
-                 class: %w[Box-btn-octicon btn-octicon float-right]) do
-      = render Primer::OcticonComponent.new('x')
-    .Box-title= t(:'.title')
-  = component.body { }
+- cache do
+  = render Primer::BorderBoxComponent.new(classes: 'Box--overlay') do |component|
+    - component.header do
+      = button_tag(data: { 'close-dialog': true }, aria: { label: t(:'spina.close') }, type: 'button',
+                  class: %w[Box-btn-octicon btn-octicon float-right]) do
+        = render Primer::OcticonComponent.new('x')
+      .Box-title= t(:'.title')
+    = component.body { }

data/app/views/spina/application/_cookies_footer.html.haml

@@ -1,13 +1,15 @@
-= render Primer::DetailsComponent.new(overlay: :dark, reset: true) do |component|
-  = component.summary(button_type: :outline, variant: :small, aria: { haspopup: 'dialog' }, type: nil) do
-    = render Primer::OcticonComponent.new('info')
-    = t :'.cookies'
-  = component.body(tag: :'details-dialog') do
-    %include-fragment{ src: frontend_cookies_info_path, loading: :lazy }
-      = render Primer::BorderBoxComponent.new(classes: 'Box--overlay') do |box_component|
-        = box_component.body do
-          = button_tag(data: { 'close-dialog': true }, aria: { label: t(:'spina.close') }, type: 'button',
-                       class: %w[Box-btn-octicon btn-octicon m-0 position-absolute right-0 top-0]) do
-            = render Primer::OcticonComponent.new('x')
-          = render Primer::BlankslateComponent.new(title: t('.loading')) do |blankslate_component|
-            = blankslate_component.spinner(size: :large)
+- cache frontend_cookies_info_path do
+  = render Primer::DetailsComponent.new(overlay: :dark, reset: true) do |component|
+    = component.summary(button_type: :outline, variant: :small, aria: { haspopup: 'dialog' }, type: nil) do
+      = render Primer::OcticonComponent.new('info')
+      = t :'.cookies'
+    = component.body(tag: :'details-dialog') do
+      %include-fragment{ src: frontend_cookies_info_path, loading: :lazy }
+        = render Primer::BorderBoxComponent.new(classes: 'Box--overlay') do |box_component|
+          = box_component.body do
+            = button_tag(data: { 'close-dialog': true }, aria: { label: t(:'spina.close') }, type: 'button',
+                        class: %w[Box-btn-octicon btn-octicon m-0 position-absolute right-0 top-0]) do
+              = render Primer::OcticonComponent.new('x')
+            = render Primer::Beta::Blankslate.new(title: t('.loading')) do |blankslate_component|
+              = blankslate_component.visual_spinner(size: :large)
+              = blankslate_component.heading(tag: :h3).with_content(t('.loading'))

data/app/views/spina/application/_footer.html.haml

@@ -1,4 +1,4 @@
-- cache [footer_navigation_items, current_account] do
+- cache [all_navigation_items, current_account] do
   = render Primer::BoxComponent.new(position: :relative, display: :flex,
     flex_wrap: :wrap,
     direction: [:column_reverse, nil, :row, nil],
@@ -9,7 +9,7 @@
     %div
       = render(Primer::Beta::Text.new(tag: :span, color: :muted, mr: [nil, 2, nil, nil], font_size: 6, flex_grow: 0)) do
         = t :'.copyright', name: current_account.name, year: Date.today.year
-    - cache footer_navigation_items do
+    - cache all_navigation_items do
       %ul.list-style-none.d-flex.flex-wrap.flex-1.flex-justify-center.flex-lg-justify-around.mb-2.mb-lg-0
         - footer_navigation_items.each do |item|
           - cache item do

data/app/views/spina/application/_journal_navigation.html.haml

@@ -0,0 +1,17 @@
+- cache [current_page, controller_name, journal_navigation_items] do
+  = render Primer::MenuComponent.new(ml: [0, nil, nil, 4], mt: [4, 0, nil, nil], col: [nil, nil, nil, 3]) do |component|
+    - component.heading(tag: :h2) do
+      = Spina::Admin::Journal::Journal.instance.name
+
+    - component.item(selected: controller_name == 'issues', href: frontend_issues_path) do
+      = t '.issues'
+    - component.item(selected: controller_name == 'authors', href: frontend_authors_path) do
+      = t '.authors'
+
+    - journal_navigation_items.each do |page|
+      - component.item(selected: page == current_page, href: page.materialized_path) do
+        = page.menu_title
+      - if page.children&.in_menu.live.any?
+        - page.children.in_menu.live.sorted.each do |sub_page|
+          - component.item(selected: sub_page == current_page, href: sub_page.materialized_path, pl: 5) do
+            = sub_page.menu_title

data/app/views/spina/application/_mobile_navigation_items.html.haml

@@ -1,5 +1,2 @@
 %nav.d-flex.flex-column.flex-self-stretch
   = render partial: 'mobile_navigation_item', collection: main_navigation_items, as: :navigation_item, cache: -> navigation_item { [navigation_item, navigation_item.children] }
-  .Header-item.mr-0.border-top.border-white-fade-15= link_to 'Blog', frontend_blog_root_path, class: %w[Header-link py-2 py-lg-0]
-  .Header-item.mr-0.border-top.border-white-fade-15= link_to 'Journal', frontend_issues_path, class: %w[Header-link py-2 py-lg-0]
-  .Header-item.mr-0.border-top.border-white-fade-15= link_to 'Conferences', frontend_conferences_path, class: %w[Header-link py-2 py-lg-0]

data/app/views/spina/application/_navigation.html.haml

@@ -1,4 +1,4 @@
-- cache main_navigation_items do
+- cache all_navigation_items do
   .Header.px-3.px-md-4.px-lg-5.flex-wrap.flex-lg-nowrap
     .Header-item.mt-n1.mb-n1= link_to render('logo'), root_path, class: 'Header-link'
     %details.details-reset.d-lg-none{ style: 'display: contents' }
@@ -7,6 +7,3 @@
       .Header-item.Header-item--full.flex-column.width-full.flex-order-1.mr-0.mt-3
         = render partial: 'mobile_navigation_items'
     = render partial: 'navigation_item', collection: main_navigation_items, cache: -> navigation_item { [navigation_item, navigation_item.children] }
-    .Header-item.d-none.d-lg-flex= link_to 'Blog', frontend_blog_root_path, class: %w[Header-link]
-    .Header-item.d-none.d-lg-flex= link_to 'Journal', frontend_issues_path, class: %w[Header-link]
-    .Header-item.d-none.d-lg-flex= link_to 'Conferences', frontend_conferences_path, class: %w[Header-link]

data/app/views/spina/conferences/primer_theme/blog/categories/show.html.haml

@@ -3,10 +3,12 @@
 = render(Primer::HeadingComponent.new(tag: :h2)) do
   = t '.category', name: @category.name
 
-= render(Primer::FlexComponent.new(flex: :auto, direction: [:column, nil, :row, nil])) do
-  = render(Primer::FlexItemComponent.new(flex_auto: true)) do
+= render(Primer::BoxComponent.new(display: :flex, flex: :auto, direction: [:column, nil, :row, nil])) do
+  = render(Primer::BoxComponent.new(flex: :auto)) do
     - if @posts.any?
       %ul= render collection: @posts, partial: 'spina/conferences/primer_theme/blog/posts/post', layout: 'list_item', cached: true
     - else
-      = render Primer::BlankslateComponent.new(title: t(:'.no_posts'), icon: 'mortar-board')
+      = render Primer::Beta::Blankslate.new do |blankslate|
+        - blankslate.visual_icon(icon: 'mortar-board')
+        - blankslate.heading(tag: :h3).with_content(t(:'.no_posts'))
   = render 'spina/conferences/primer_theme/blog/shared/sidebar'

data/app/views/spina/conferences/primer_theme/blog/posts/index.html.haml

@@ -1,11 +1,13 @@
 = render(Primer::HeadingComponent.new(tag: :h1)) do
   Blog
 
-= render(Primer::FlexComponent.new(flex: :auto, direction: [:column, nil, :row, nil])) do
-  = render(Primer::FlexItemComponent.new(flex_auto: true)) do
+= render(Primer::BoxComponent.new(display: :flex, flex: :auto, direction: [:column, nil, :row, nil])) do
+  = render(Primer::BoxComponent.new(flex: :auto)) do
     - if @posts.any?
       %ul= render collection: @posts, partial: 'post', layout: 'list_item', cached: true
     - else
-      = render Primer::BlankslateComponent.new(title: t(:'.no_posts'), icon: 'mortar-board')
+      = render Primer::Beta::Blankslate.new do |blankslate|
+        - blankslate.visual_icon(icon: 'mortar-board')
+        - blankslate.heading(tag: :h3).with_content(t(:'.no_posts'))
   = render 'spina/conferences/primer_theme/blog/shared/sidebar'
 

data/app/views/spina/conferences/primer_theme/blog/posts/show.html.haml

@@ -2,16 +2,16 @@
   = @post.title
 
 %ul.list-style-none.d-flex.flex-column.flex-sm-row.my-2
-  = render(Primer::FlexComponent.new(tag: :li, mr: 4, align_items: :center)) do
-    = render(Primer::FlexItemComponent.new(mr: 2)) do
+  = render(Primer::BoxComponent.new(display: :flex, tag: :li, mr: 4, align_items: :center)) do
+    = render(Primer::BoxComponent.new(mr: 2)) do
       = render(Primer::OcticonComponent.new('person'))
-    = render(Primer::FlexComponent.new(tag: :address, direction: :column)) do
+    = render(Primer::BoxComponent.new(display: :flex, tag: :address, direction: :column)) do
       = render(Primer::Beta::Text.new(tag: :div, font_weight: :bold)) { @post.user.name }
 
 - if @post.image
   = image_tag main_app.url_for(@post.image.file)
 
-= render(Primer::FlexComponent.new(flex: :auto, direction: [:column, nil, :row, nil])) do
-  = render(Primer::FlexItemComponent.new(flex_auto: true)) do
+= render(Primer::BoxComponent.new(display: :flex, flex: :auto, direction: [:column, nil, :row, nil])) do
+  = render(Primer::BoxComponent.new(flex: :auto)) do
     = render(Primer::Markdown.new(tag: :article)) do
       = @post.content.html_safe

data/app/views/spina/conferences/primer_theme/conferences/conferences/_conference.html.haml

@@ -1,7 +1,7 @@
-= render Primer::FlexComponent.new(direction: [:column, nil, :row_reverse, nil]) do
+= render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row_reverse, nil]) do
   %ul.list-style-none.d-flex.flex-wrap.flex-md-justify-end.pl-md-2.pb-2.pb-md-0
     = render partial: 'institution', collection: conference.institutions, cached: -> institution { [institution, institution.logo] }
-  = render Primer::FlexItemComponent.new(flex_auto: true) do
+  = render Primer::BoxComponent.new(flex: :auto) do
     = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) { link_to conference.name, frontend_conference_path(conference) }
     %ul.text-secondary.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
       %li.mr-sm-3

data/app/views/spina/conferences/primer_theme/conferences/conferences/_event.html.haml

@@ -1,12 +1,12 @@
-= render Primer::FlexComponent.new(direction: [:column, nil, :row, nil]) do
-  = render Primer::FlexItemComponent.new(mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], col: [nil, nil, 4, nil]) do
+= render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil]) do
+  = render Primer::BoxComponent.new(mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], col: [nil, nil, 4, nil]) do
     = render Primer::Beta::Text.new(tag: :div, font_size: 3, font_weight: :light, mb: 1) do
       = render Primer::OcticonComponent.new('clock', vertical_align: :baseline)
       = t :'.times_html', start_time: time_tag(event.start_time, format: :short), finish_time: time_tag(event.finish_time, format: :time)
     = render Primer::Beta::Text.new(tag: :div, color: :muted) do
       = render Primer::OcticonComponent.new('location')
       = render(Primer::BaseComponent.new(tag: :address, display: :inline)) { event.location }
-  = render Primer::FlexItemComponent.new(flex_auto: true, col: [nil, nil, 8, nil]) do
+  = render Primer::BoxComponent.new(flex: :auto, col: [nil, nil, 8, nil]) do
     = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) { event.name }
     = render(Primer::Beta::Text.new(tag: :div, color: :muted)) do
       = event.description

data/app/views/spina/conferences/primer_theme/conferences/conferences/_events.html.haml

@@ -11,6 +11,9 @@
         %ul{ data: { filter: { list: true } } }
           = render partial: 'event', collection: events.sorted, layout: 'list_item', cached: true
       - else
-        = render Primer::BlankslateComponent.new(title: t(:'.no_events'), icon: 'calendar')
-      = render Primer::BlankslateComponent.new(title: t(:'.no_matching_events'), icon: 'calendar', hidden: true,
-                                               data: { 'filter-empty-state': true })
+        = render Primer::Beta::Blankslate.new do |blankslate|
+          - blankslate.visual_icon(icon: 'calendar')
+          - blankslate.heading(tag: :h3).with_content(t(:'.no_events'))
+      = render Primer::Beta::Blankslate.new(data: { 'filter-empty-state': true }) do |blankslate|
+        - blankslate.visual_icon(icon: 'calendar')
+        - blankslate.heading(tag: :h3).with_content(t(:'.no_matching_events'))

data/app/views/spina/conferences/primer_theme/conferences/conferences/_header.html.haml

@@ -19,9 +19,9 @@
     - if @conference.content(:sponsors).present?
       = render Primer::SubheadComponent.new(spacious: true) do |component|
         = component.heading(tag: :h2) { t :'.sponsors.title' }
-      = render Primer::FlexComponent.new(flex_wrap: true, ml: -2, mr: -2, mt: -2, mb: -2) do
+      = render Primer::BoxComponent.new(display: :flex, flex_wrap: :wrap, ml: -2, mr: -2, mt: -2, mb: -2) do
         - repeater @conference.content(:sponsors) do |sponsor|
-          = render Primer::FlexItemComponent.new(m: 2, vertical_align: :middle) do
+          = render Primer::BoxComponent.new(m: 2, vertical_align: :middle) do
             - if sponsor.content(:logo).present?
               = link_to sponsor.content(:website) do
                 = sponsor.content.image_tag(:logo, { resize_to_limit: [200, 60] }, draggable: false,
@@ -30,7 +30,7 @@
               = render(Primer::LinkComponent.new(href: sponsor.content(:website) || '')) { sponsor.content(:name) }
 
   - if @conference.content(:gallery).present?
-    = render Primer::FlexComponent.new(flex_direction: :column, justify_content: :center, align_items: :center, mb: 4, position: :relative,
+    = render Primer::BoxComponent.new(display: :flex, flex_direction: :column, justify_content: :center, align_items: :center, mb: 4, position: :relative,
                                        data: { controller: :slideshow, slideshow_incrementer: 0, slideshow_advance: true }) do
       - @conference.content(:gallery).each_with_index do |image, index|
         = @conference.content.image_tag(image, { resize_to_fill: [1680, 600] }, draggable: false, data: { 'slideshow-target': 'slide' },

data/app/views/spina/conferences/primer_theme/conferences/conferences/_presentation.html.haml

@@ -1,4 +1,4 @@
-= render Primer::FlexComponent.new(direction: [:column, nil, :row, nil]) do
+= render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil]) do
   = render Primer::BaseComponent.new(tag: :div, flex_shrink: 0, mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], col: [nil, nil, 3, nil]) do
     = render Primer::Beta::Text.new(tag: :div, font_size: 3, font_weight: :light, mb: 1) do
       = render Primer::OcticonComponent.new('clock', vertical_align: :baseline)

data/app/views/spina/conferences/primer_theme/conferences/conferences/_presentations.html.haml

@@ -1,6 +1,6 @@
 - cache [@conference.presentations, @presentation_type, @presentations, @presentations.collect(&:presenters), @tab] do
-  = render Primer::FlexComponent.new(direction: [:column, nil, nil, :row], my: 4) do
-    = render Primer::FlexItemComponent.new(pr: [nil, nil, nil, 4], mb: [4, nil, nil, 0], col: [12, nil, nil, 3]) do
+  = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, nil, :row], my: 4) do
+    = render Primer::BoxComponent.new(pr: [nil, nil, nil, 4], mb: [4, nil, nil, 0], col: [12, nil, nil, 3]) do
       %ul.filter-list
         - cache [@conference.presentations, @presentation_type] do
           %li
@@ -10,7 +10,7 @@
               %span.count{ title: t(:'.results') }= @conference.presentations.count
         = render partial: 'presentation_type', collection: @conference.presentation_types.sorted,
                  cached: -> presentation_type { [presentation_type, @presentation_type] }
-    = render Primer::FlexItemComponent.new(col: [12, nil, nil, 9]) do
+    = render Primer::BoxComponent.new(col: [12, nil, nil, 9]) do
       - if @presentations.any?
         %filter-input{ aria: { owns: 'presentation_list' } }
           .subnav.subnav-flush
@@ -24,6 +24,9 @@
                      locals: { conference: @conference }, cached: -> presentation { [presentation, presentation.presenters] }
           = paginate @presentations.sorted, views_prefix: 'spina/conferences/primer_theme/conferences'
         - else
-          = render Primer::BlankslateComponent.new(title: t(:'.no_presentations'), icon: 'mortar-board')
-        = render Primer::BlankslateComponent.new(title: t(:'.no_matching_presentations'), icon: 'mortar-board', hidden: true,
-                                                 data: { 'filter-empty-state': true })
+          = render Primer::Beta::Blankslate.new do |blankslate|
+            - blankslate.visual_icon(icon: 'mortar-board')
+            - blankslate.heading(tag: :h3).with_content(t(:'.no_presentations'))
+        = render Primer::Beta::Blankslate.new(data: { 'filter-empty-state': true }, hidden: true) do |blankslate|
+          - blankslate.visual_icon(icon: 'mortar-board')
+          - blankslate.heading(tag: :h3).with_content(t(:'.no_matching_presentations'))

data/app/views/spina/conferences/primer_theme/conferences/conferences/index.html.haml

@@ -1,12 +1,12 @@
-= render Primer::FlexComponent.new(direction: [:column_reverse, nil, :row, nil]) do
-  = render Primer::FlexItemComponent.new(flex_auto: true, mb: [4, nil, 0, nil]) do
+= render Primer::BoxComponent.new(display: :flex, direction: [:column_reverse, nil, :row, nil]) do
+  = render Primer::BoxComponent.new(flex: :auto, mb: [4, nil, 0, nil]) do
     %filter-input{ aria: { owns: 'conference_list' } }
       - if @conferences.any?
         .subnav.subnav-flush
           .subnav-search.float-left.ml-0
             = search_field_tag 'search', nil, class: %w[form-control subnav-search-input], aria: { label: t(:'.search') }
             = render Primer::OcticonComponent.new('search', classes: 'subnav-search-icon')
-  = render Primer::FlexItemComponent.new(mb: [4, nil, 0, nil]) do
+  = render Primer::BoxComponent.new(mb: [4, nil, 0, nil]) do
     = render Primer::ButtonComponent.new(tag: :a, href: frontend_conferences_url(protocol: :webcal, format: :ics), button_type: :primary,
                                          ml: [0, nil, 6, nil]) do
       = render Primer::OcticonComponent.new('calendar')
@@ -18,6 +18,9 @@
       = render partial: 'conference', collection: @conferences, layout: 'list_item',
                cached: -> conference { [conference, conference.institutions, conference.institutions.collect(&:logo)] }
   - else
-    = render Primer::BlankslateComponent.new(title: t(:'.no_conferences'), icon: 'mortar-board')
-  = render Primer::BlankslateComponent.new(title: t(:'.no_matching_conferences'), icon: 'mortar-board', hidden: true,
-                                           data: { 'filter-empty-state': true })
+    = render Primer::Beta::Blankslate.new do |blankslate|
+      - blankslate.visual_icon(icon: 'mortar-board')
+      - blankslate.heading(tag: :h3).with_content(t(:'.no_conferences'))
+  = render Primer::Beta::Blankslate.new(data: { 'filter-empty-state': true }, hidden: true) do |blankslate|
+    - blankslate.visual_icon(icon: 'mortar-board')
+    - blankslate.heading(tag: :h3).with_content(t(:'.no_matching_conferences'))

data/app/views/spina/conferences/primer_theme/conferences/conferences/show.html.haml

@@ -25,7 +25,9 @@
         - if @conference.content(:text).present?
           = render(Primer::Markdown.new(my: 4)) { @conference.content.html(:text).to_s }
         - else
-          = render Primer::BlankslateComponent.new(title: t(:'.no_information'), icon: 'info', my: 4)
+          = render Primer::Beta::Blankslate.new(my: 4) do |blankslate|
+            - blankslate.visual_icon(icon: 'info')
+            - blankslate.heading(tag: :h3).with_content(t(:'.no_information'))
     - when 'presentations'
       - cache [@conference.presentations, @presentation_type, @presentations, @presentations.collect(&:presenters), @tab] do
         = render partial: 'presentations'
@@ -33,5 +35,7 @@
       - cache [@conference.events, @tab] do
         = render partial: 'events', locals: { events: @conference.events }
     - else
-      = render Primer::BlankslateComponent.new(title: t('.no_tab'), description: t('.tab_does_not_exist', tab: @tab), icon: 'x-circle',
-                                               my: 4)
+      = render Primer::Beta::Blankslate.new(my: 4) do |blankslate|
+        - blankslate.visual_icon(icon: 'x-circle')
+        - blankslate.heading(tag: :h3).with_content(t(:'.no_tab'))
+        - blankslate.description { t('.tab_does_not_exist', tab: @tab) }

data/app/views/spina/conferences/primer_theme/journal/articles/_authorship.html.haml

@@ -1,6 +1,8 @@
-= render(Primer::FlexComponent.new(tag: :li, mr: 4, align_items: :center)) do
-  = render(Primer::FlexItemComponent.new(mr: 2)) do
-    = render(Primer::OcticonComponent.new('person'))
-  = render(Primer::FlexComponent.new(tag: :address, direction: :column)) do
-    = render(Primer::Beta::Text.new(tag: :div, font_weight: :bold)) { authorship.affiliation.name }
-    = render(Primer::Beta::Text.new(tag: :div, color: :muted)) { authorship.affiliation.institution.name }
+%li
+  = link_to frontend_author_path(authorship.affiliation.author) do
+    = render(Primer::BoxComponent.new(display: :flex, tag: :li, mr: 4, align_items: :center)) do
+      = render(Primer::BoxComponent.new(mr: 2)) do
+        = render(Primer::OcticonComponent.new('person'))
+      = render(Primer::BoxComponent.new(display: :flex, tag: :address, direction: :column)) do
+        = render(Primer::Beta::Text.new(tag: :div, font_weight: :bold)) { authorship.affiliation.name }
+        = render(Primer::Beta::Text.new(tag: :div, color: :muted)) { authorship.affiliation.institution.name }

data/app/views/spina/conferences/primer_theme/journal/articles/_metadata.html.haml

@@ -8,7 +8,7 @@
   - if @article.has_content? :attachment
     %meta{ name: 'DC.Format', scheme: 'IMT', content: 'application/pdf' }
   %meta{ name: 'DC.Identifier', content: @article.id }
-  %meta{ name: 'DC.Identifier.URI', content: frontend_issue_article_url(@issue.id, @article.id) }
+  %meta{ name: 'DC.Identifier.URI', content: frontend_volume_issue_article_url(@volume.number, @issue.number, @article.number) }
   - if @article.has_content? :page_range
     %meta{ name: 'DC.Identifier.pageNumber', content: "#{@article.content(:page_range).first_page}-#{@article.content(:page_range).last_page}" }
   %meta{ name: 'DC.Language', scheme: 'ISO639-1', content: 'en' }
@@ -37,5 +37,5 @@
   - if @article.has_content? :page_range
     %meta{ name: 'citation_firstpage', content: @article.content(:page_range).first_page }
     %meta{ name: 'citation_lastpage', content: @article.content(:page_range).last_page }
-  %meta{ name: 'citation_abstract_html_url', content: frontend_issue_article_url(@issue.id, @article.id) }
-  %meta{ name: 'citation_pdf_url', content: frontend_issue_article_url(@issue.id, @article.id) + '.pdf' }
+  %meta{ name: 'citation_abstract_html_url', content: frontend_volume_issue_article_url(@volume.number, @issue.number, @article.number) }
+  %meta{ name: 'citation_pdf_url', content: frontend_volume_issue_article_url(@volume.number, @issue.number, @article.number) + '.pdf' }

data/app/views/spina/conferences/primer_theme/journal/articles/show.html.haml

@@ -3,29 +3,23 @@
 
   = render(Primer::HeadingComponent.new(tag: :h1)) { @article.title }
 
-  = render(Primer::FlexComponent.new(direction: [:column, nil, :row, nil])) do
-    = render(Primer::FlexItemComponent.new(flex_auto: true, mr: [nil, nil, 4, nil])) do
+  = render(Primer::BoxComponent.new(display: :flex, direction: [:column, nil, nil, :row])) do
+    = render(Primer::BoxComponent.new(flex: :auto, mr: [nil, nil, nil, 4], col: [nil, nil, nil, 8])) do
       %ul.list-style-none.d-flex.flex-column.flex-sm-row.my-2
-        - @article.affiliations.each do |affiliation|
-          = render(Primer::FlexComponent.new(tag: :li, mr: 4, align_items: :center)) do
-            = render(Primer::FlexItemComponent.new(mr: 2)) do
-              = render(Primer::OcticonComponent.new('person'))
-            = render(Primer::FlexComponent.new(tag: :address, direction: :column)) do
-              = render(Primer::Beta::Text.new(tag: :div, font_weight: :bold)) { affiliation.name }
-              = render(Primer::Beta::Text.new(tag: :div, color: :muted)) { affiliation.institution.name }
+        = render partial: 'authorship', collection: @article.authorships.sorted_within_article
 
       - if @article.has_content?(:abstract)
         = render(Primer::HeadingComponent.new(tag: :h2, mt: 4, font_size: 3)) { t '.abstract' }
-        = render(Primer::Markdown.new) { @article.content.html(:abstract) }
+        = render(Primer::Markdown.new) { @article.content.html(:abstract).to_s }
 
-    = render(Primer::BorderBoxComponent.new(ml: [nil, nil, 4, nil], style: 'min-width: 20vw')) do |sidebar|
+    = render(Primer::BorderBoxComponent.new(ml: [nil, nil, nil, 4], col: [nil, nil, nil, 4])) do |sidebar|
       - sidebar.body do
         - if @article.issue.has_content?(:cover_img)
           = render partial: 'spina/conferences/primer_theme/journal/issues/issue_cover', locals: { issue: @article.issue, cover_img: @article.issue.content(:cover_img), size: [200, 400] }
         = render(Primer::BorderBoxComponent.new) do |component|
           - if @article.has_content?(:attachment)
             - component.row do
-              = render(Primer::ButtonComponent.new(tag: :a, href: frontend_issue_article_path(@issue, @article, format: :pdf), download: '', scheme: :primary)) do
+              = render(Primer::ButtonComponent.new(tag: :a, href: frontend_volume_issue_article_path(@issue.volume.number, @issue.number, @article.number, format: :pdf), download: '', scheme: :primary)) do
                 = render Primer::OcticonComponent.new('download')
                 = t '.download'
           - component.row do
@@ -37,7 +31,7 @@
             = render(Primer::Beta::Text.new) do
               = link_to t('spina.conferences.primer_theme.journal.volume_issue',
                           volume_number: @article.issue.volume.number,
-                          issue_number: @article.issue.number), frontend_issue_path(@article.issue)
+                          issue_number: @article.issue.number), frontend_volume_issue_path(@article.issue.volume.number, @article.issue.number)
           - unless @article.doi.blank?
             - component.row do
               = render(Primer::HeadingComponent.new(tag: :h2, font_size: 4, color: :muted)) { t '.doi' }
@@ -49,7 +43,11 @@
               = render(Primer::Beta::Text.new(tag: :div, color: :muted, mt: 1)) do
                 = link_to nil, @article.url
           - component.row do
-            = render(Primer::FlexComponent.new(direction: :column)) do
+            = render(Primer::HeadingComponent.new(tag: :h2, font_size: 4, color: :muted)) { t '.permalink' }
+            = render(Primer::Beta::Text.new(tag: :div, color: :muted, mt: 1)) do
+              = link_to nil, frontend_volume_issue_article_url(@volume.number, @issue.number, @article.number)
+          - component.row do
+            = render(Primer::BoxComponent.new(display: :flex, direction: :column)) do
               = render(Primer::Beta::Text.new(mb: 2)) do
                 Copyright © #{@article.issue.date.year} #{@article.affiliations.collect(&:name).to_sentence}
               - unless @licence.nil?

data/app/views/spina/conferences/primer_theme/journal/authors/_author.html.haml

@@ -0,0 +1,9 @@
+= render(Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], align_items: [:flex_start, nil, nil, :center])) do
+  = render(Primer::BoxComponent.new(mr: 2)) do
+    = render(Primer::OcticonComponent.new('person'))
+  = render(Primer::BoxComponent.new(flex: :auto)) do
+    = link_to frontend_author_path(author) do
+      = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) do
+        = author.primary_affiliation.name
+      = render(Primer::HeadingComponent.new(tag: :h4, color: :muted, mb: 1)) do
+        = author.primary_affiliation.institution.name

data/app/views/spina/conferences/primer_theme/journal/authors/index.html.haml

@@ -0,0 +1,12 @@
+= render(Primer::BoxComponent.new(display: :flex, direction: [:column, nil, nil, :row])) do
+  = render(Primer::BoxComponent.new(col: [nil, nil, nil, 9])) do
+    = render(Primer::HeadingComponent.new(tag: :h1)) do
+      = @journal.name
+    = render(Primer::HeadingComponent.new(tag: :h2, mt: 3)) { t '.authors' }
+    - if @authors.any?
+      %ul= render partial: 'author', collection: @authors, layout: 'list_item', cached: true
+    - else
+      = render Primer::Beta::Blankslate.new do |blankslate|
+        - blankslate.visual_icon(icon: 'mortar-board')
+        - blankslate.heading(tag: :h3).with_content(t(:'.no_authors'))
+  = render 'journal_navigation'

data/app/views/spina/conferences/primer_theme/journal/authors/show.html.haml

@@ -0,0 +1,22 @@
+= render(Primer::BoxComponent.new(display: :flex, direction: [:column, nil, nil, :row])) do
+  = render(Primer::BoxComponent.new(col: [nil, nil, nil, 9])) do
+    = render(Primer::HeadingComponent.new(tag: :h1)) do
+      = @journal.name
+    = render(Primer::HeadingComponent.new(tag: :h2, mt: 2)) do
+      = t '.name_institution', name: @author.primary_affiliation.name, institution: @author.primary_affiliation.institution.name
+    - if @author.affiliations.count > 1
+      = render(Primer::BoxComponent.new) do
+        = render(Primer::Beta::Text.new) do
+          = t '.aka'
+          = @author.affiliations.not_primary.map { |affiliation| t('.name_institution', name: affiliation.name, institution: affiliation.institution.name) }.join(', ')
+
+    = render(Primer::HeadingComponent.new(tag: :h3, mt: 3)) { t '.articles' }
+
+    - if @author.articles.any?
+      %ul= render partial: 'spina/conferences/primer_theme/journal/issues/article', collection: @author.articles.sorted_asc, layout: 'list_item', cached: true
+    - else
+      = render Primer::Beta::Blankslate.new do |blankslate|
+        - blankslate.visual_icon(icon: 'mortar-board')
+        - blankslate.heading(tag: :h3).with_content(t(:'.no_articles'))
+
+  = render 'journal_navigation'

data/app/views/spina/conferences/primer_theme/journal/issues/_article.html.haml

@@ -1,7 +1,7 @@
-= render(Primer::FlexComponent.new(direction: [:column, nil, :row, nil])) do
-  = render(Primer::FlexItemComponent.new(flex_auto: true)) do
+= render(Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil])) do
+  = render(Primer::BoxComponent.new(flex: :auto)) do
     = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) do
-      = link_to article.title, frontend_issue_article_path(article.issue, article)
+      = link_to article.title, frontend_volume_issue_article_path(article.issue.volume.number, article.issue.number, article.number)
     = render(Primer::Beta::Text.new(tag: :div, color: :muted)) do
       = render(Primer::OcticonComponent.new(article.affiliations.many? ? 'people' : 'person'))
       = render(Primer::BaseComponent.new(tag: :address, display: :inline)) do
@@ -10,6 +10,6 @@
       = render(Primer::Beta::Text.new(tag: :div, color: :muted)) do
         = link_to nil, article.doi
     - if article.has_content?(:attachment)
-      = render(Primer::ButtonComponent.new(tag: :a, href: frontend_issue_article_path(article.issue, article, format: :pdf), mt: 2, download: '')) do
+      = render(Primer::ButtonComponent.new(tag: :a, href: frontend_volume_issue_article_path(article.issue.volume.number, article.issue.number, article.number, format: :pdf), mt: 2, download: '')) do
         = render Primer::OcticonComponent.new('download')
         = t '.download'

data/app/views/spina/conferences/primer_theme/journal/issues/_issue.html.haml

@@ -1,12 +1,13 @@
-= render(Primer::FlexComponent.new(direction: [:column, nil, :row, nil])) do
+= render(Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil])) do
   - if issue.content(:cover_img).present?
-    = render(Primer::FlexItemComponent.new(mr: 4)) do
-      = render partial: 'issue_cover', locals: { issue: issue, cover_img: issue.content(:cover_img), size: [150, 300] }
-  = render(Primer::FlexItemComponent.new(flex_auto: true)) do
+    = render(Primer::BoxComponent.new(mr: 4)) do
+      = link_to frontend_volume_issue_path(issue.volume.number, issue.number) do
+        = render partial: 'issue_cover', locals: { issue: issue, cover_img: issue.content(:cover_img), size: [150, 300] }
+  = render(Primer::BoxComponent.new(flex: :auto)) do
     = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) do
       = link_to t('spina.conferences.primer_theme.journal.volume_issue',
                   volume_number: issue.volume.number,
-                  issue_number: issue.number), frontend_issue_path(issue)
+                  issue_number: issue.number), frontend_volume_issue_path(issue.volume.number, issue.number)
     - unless issue.title.blank?
       = render(Primer::HeadingComponent.new(tag: :h4, color: :muted, mb: 1)) do
         = issue.title
@@ -14,4 +15,4 @@
       = time_tag issue.date, format: :long
     - if issue.has_content?(:description)
       = render(Primer::Beta::Text.new(tag: :div, color: :muted, mt: 2)) do
-        = issue.content.html(:description)
+        = issue.content.html(:description).to_s