spina-conferences-primer_theme-fork 0.10.0 → 1.0.0.rc4

data/app/views/conferences_primer_theme/pages/periodical.html.haml

@@ -2,22 +2,22 @@
   = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }
 
   - if content(:text).present?
-    = render(Primer::Markdown.new(mt: 4)) { content.html(:text) }
-  
+    = render(Primer::Markdown.new(mt: 4)) { content.html(:text).to_s }
+
   - if content(:periodical_issues).present?
     %ul.mt-4
       - repeater(:periodical_issues) do |issue|
         %li.list-style-none.py-4.border-bottom
-          = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], align_items: :start) do
+          = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], align_items: :flex_start) do
             - if issue.content(:cover_img).present?
-              = render Primer::FlexItemComponent.new(mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], flex_shrink: 0) do
+              = render Primer::BoxComponent.new(mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], flex_shrink: 0) do
                 = render Primer::LinkComponent.new(href: issue.content(:url)) do
                   = image_tag(issue.content.image_url(:cover_img, resize_to_limit: [300, 300]),
                               srcset: srcset_string(issue.content(:cover_img),
                                                     variant: { resize_to_limit: [300, 300] }),
                               alt: issue.content(:cover_img).alt)
-            = render Primer::FlexItemComponent.new(flex_auto: true) do
-              = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], mb: 1) do
+            = render Primer::BoxComponent.new(flex: :auto) do
+              = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], mb: 1) do
                 = render Primer::BoxComponent.new do
                   - if issue.content(:name).present?
                     = render Primer::HeadingComponent.new(tag: :h2) do
@@ -27,8 +27,8 @@
                       = time_tag issue.content(:date), format: :long_ordinal
               - if issue.content(:description).present?
                 = render Primer::Markdown.new(tag: :div, color: :muted) do
-                  = issue.content.html(:description)
-              = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], align_items: :start) do
+                  = issue.content.html(:description).to_s
+              = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], align_items: :flex_start) do
                 - if issue.content(:url).present?
                   = render Primer::ButtonComponent.new(scheme: :primary, tag: :a, href: issue.content(:url), mt: 2, mr: 2) do
                     = render Primer::OcticonComponent.new('link-external')

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
@@ -21,7 +21,7 @@
     = render Primer::HeadingComponent.new(tag: :h5, flex: :auto) do
       = event.content(:location).presence
     - if event.content(:description).present?
-      = render(Primer::Markdown.new(mt: 1, color: :muted)) { event.content.html(:description) }
+      = render(Primer::Markdown.new(mt: 1, color: :muted)) { event.content.html(:description).to_s }
     - if event.content(:url).present?
       = render Primer::ButtonComponent.new(tag: :a, href: event.content(:url), mt: 2) do
         = render Primer::OcticonComponent.new('link-external')

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

@@ -14,7 +14,7 @@
           = 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
-          = item.content(:description).html_safe
+          = item.content.html(:description).to_s
       - if item.content(:url).present?
         = link_to t('.more_info'), item.content(:url),
                   class: %w[btn-mktg btn-large-mktg btn-primary-mktg f3 mt-4]

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/application.html.haml

@@ -11,22 +11,17 @@
     %base{ target: '_blank' }
     = csrf_meta_tags
     %title= t(:'.title', title: seo_title, suffix: current_account.name)
-    = render 'spina/shared/google_site_verification'
-    = render 'spina/shared/analytics'
-    = stylesheet_link_tag 'spina/conferences/primer_theme/application', media: 'all', data: { turbolinks_track: true }
-    = javascript_include_tag 'spina/conferences/primer_theme/application', data: { turbolinks_track: true }
-    = javascript_include_tag 'turbo', type: 'module'
-    %script{ type: 'module', src: asset_path('@github/details-dialog-element/dist/index.js') }
-    %script{ type: 'module', src: asset_path('@github/include-fragment-element/dist/index.js') }
-    %script{ type: 'module', src: asset_path('@github/filter-input-element/dist/index.js') }
-    %script{ type: 'module', src: asset_path('@github/details-menu-element/dist/index.js') }
+    = render 'google_site_verification'
+    = render 'analytics'
+    = stylesheet_link_tag 'spina/conferences/primer_theme/application', media: 'all', data: { turbo_track: true }
+    = primer_theme_importmap_tags
     = yield :head
   %body
     - if current_spina_user.present?
-      .admin= render 'spina/shared/admin_bar'
+      .admin= render 'admin_bar'
     %header= render 'navigation'
     - unless local_assigns[:hide_alert]
-      = render 'current_conference_alert'
+      = render 'alert'
     - if content_for? :flash
       .flash-messages= yield :flash
     %main
@@ -35,6 +30,4 @@
         .container-lg.p-responsive.mt-4= yield :breadcrumbs
       = yield :header
       .container-lg.p-responsive.mt-4= yield
-    %footer
-      .container-lg.p-responsive.py-4= render 'footer'
-    = render 'spina/shared/social'
+    %footer.footer.width-full.container-lg.p-responsive= render 'footer'

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/_admin_bar.html.haml

@@ -0,0 +1,7 @@
+- if current_spina_user.present?
+  #admin_bar
+    = render Primer::BoxComponent.new(bg: :accent, p: 3, text_align: :right) do
+      = render Primer::LinkComponent.new(href: spina.admin_root_path, mr: 3, data: { turbo: false }, classes: 'btn') do
+        = t 'spina.edit_website'
+      = render Primer::LinkComponent.new(href: spina.admin_logout_path, classes: 'btn') do
+        = t 'spina.logout'

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

@@ -0,0 +1,4 @@
+- content_for :flash do
+  - cache current_account do
+    - if current_account.has_content? :alert
+      = render(Primer::FlashComponent.new(full: true, variant: :warning)) { current_account.content(:alert).html_safe }

data/app/views/spina/application/_analytics.html.erb

@@ -0,0 +1,10 @@
+<script type="text/javascript">
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', '<%= current_account.google_analytics %>', 'auto');
+  ga('set', 'anonymizeIp', true);
+  ga('send', 'pageview');
+</script>

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

@@ -0,0 +1,15 @@
+- 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,17 +1,25 @@
-- cache [footer_navigation_items, current_account] do
-  = render Primer::FlexComponent.new(direction: [:column, nil, :row_reverse, nil], align_items: :center) do
-    = render Primer::FlexComponent.new(direction: [:column, :row, nil, nil], mb: [4, nil, 0, nil], flex: :auto) do
-      - cache footer_navigation_items do
-        %ul.list-style-none.flex-auto.mb-2.mb-sm-0.mr-sm-2
-          - footer_navigation_items.each do |item|
-            - cache item do
-              %li
-                = render Primer::ButtonComponent.new(tag: :a, href: item.materialized_path, variant: :small) { item.menu_title }
-      = render 'footer_content'
+- cache [all_navigation_items, current_account] do
+  = render Primer::BoxComponent.new(position: :relative, display: :flex,
+    flex_wrap: :wrap,
+    direction: [:column_reverse, nil, :row, nil],
+    align_items: :center,
+    justify_content: :space_between,
+    mt: 6, pt: 6, pb: 2, mb: 6,
+    font_size: 6, color: :muted, border: :top, border_color: :muted) do
+    %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 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
+            %li.mr-3.mr-lg-0
+              = render Primer::LinkComponent.new(href: item.materialized_path) do
+                = item.menu_title
+    = render Primer::BoxComponent.new(display: :flex, mb: [2, nil, 0, nil]) do
+      = render 'cookies_footer'
       - if current_account.has_content? :github_url
         = render Primer::ButtonComponent.new(tag: :a, href: current_account.content(:github_url), button_type: :outline, variant: :small,
-                                             display: :inline_block) do
+                                              display: :inline_block, ml: 2) do
           = render Primer::OcticonComponent.new('mark-github')
           = t :'.find_on_github'
-    = render(Primer::Beta::Text.new(tag: :small, color: :muted, mr: [nil, 2, nil, nil], font_size: 6, flex_grow: 0)) do
-      = t :'.copyright', name: current_account.name, year: Date.today.year

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

@@ -0,0 +1 @@
+%meta{ name: 'google-site-verification' , content: current_account.google_site_verification  }

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/_post.html.haml

@@ -4,7 +4,8 @@
   = link_to post.title, frontend_blog_post_path(post)
 = render(Primer::HeadingComponent.new(tag: :h4)) do
   = time_tag post.published_at, format: :ordinal_datetime_with_year
-= render(Primer::Markdown.new(color: :muted)) do
-  = post.excerpt.html_safe
+- if post.excerpt.present?
+  = render(Primer::Markdown.new(color: :muted)) do
+    = post.excerpt.html_safe
 = render(Primer::Beta::Text.new(tag: :div, color: :muted)) do
   = t '.category_html', name: link_to(post.category.name, frontend_blog_category_path(post.category))

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 }) 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/_submission_flash.html.haml

@@ -2,9 +2,9 @@
   = render Primer::Beta::Text.new(tag: :div, display: :inline) do
     = t :'.submit_by_html', date: time_tag(@conference.content(:submission_date), format: :full)
   - if @conference.content(:submission_text).present?
-    = render(Primer::Beta::Text.new(tag: :div, color: :muted, display: :inline)) { @conference.content.html(:submission_text) }
+    = render(Primer::Beta::Text.new(tag: :div, color: :muted, display: :inline)) { @conference.content.html(:submission_text).to_s }
   - if @conference.content(:submission_url).present?
     - component.action do
-      = render Primer::ButtonComponent.new(tag: :a, href: @conference.content.html(:submission_url), button_type: :primary,
+      = render Primer::ButtonComponent.new(tag: :a, href: @conference.content.html(:submission_url).to_s, button_type: :primary,
                                            variant: :small) do
         = t :'.submit_abstract'

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 }) 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

@@ -23,9 +23,11 @@
     - when 'information'
       - cache [@conference, @tab] do
         - if @conference.content(:text).present?
-          = render(Primer::Markdown.new(my: 4)) { @conference.content.html(:text) }
+          = 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

@@ -2,13 +2,13 @@
   %link{ rel: 'schema.DC', href: 'http://purl.org/dc/elements/1.1/' }
   - @article.authorships.sorted_within_article.each do |authorship|
     %meta{ name: 'DC.Creator.PersonalName', content: authorship.affiliation.name }
-  %meta{ name: 'DC.Date.created', scheme: 'ISO8601', content: @issue.date.to_s(:iso8601) }
-  %meta{ name: 'DC.Date.issued', scheme: 'ISO8601', content: @issue.date.to_s(:iso8601) }
-  %meta{ name: 'DC.Date.modified', scheme: 'ISO8601', content: @issue.date.to_s(:iso8601) }
+  %meta{ name: 'DC.Date.created', scheme: 'ISO8601', content: @issue.date.to_formatted_s(:iso8601) }
+  %meta{ name: 'DC.Date.issued', scheme: 'ISO8601', content: @issue.date.to_formatted_s(:iso8601) }
+  %meta{ name: 'DC.Date.modified', scheme: 'ISO8601', content: @issue.date.to_formatted_s(:iso8601) }
   - 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' }
@@ -31,11 +31,11 @@
     %meta{ name: 'citation_author', content: authorship.affiliation.name }
     %meta{ name: 'citation_author_institution', content: authorship.affiliation.institution.name }
   %meta{ name: 'citation_language', content: 'en' }
-  %meta{ name: 'citation_date', content: @issue.date.to_s(:iso8601).gsub('-', '/') }
+  %meta{ name: 'citation_date', content: @issue.date.to_formatted_s(:iso8601).gsub('-', '/') }
   %meta{ name: 'citation_volume', content: @issue.volume.number }
   %meta{ name: 'citation_issue', content: @issue.number }
   - 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' }