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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cb05b4e1ad3a267e9271a932686234f556e7268d64b6810f0bc454013c39a6a5
-  data.tar.gz: 88b725abc9beccc27a5879779be534fa8c3e1aef4443e8f3d33ab01224e03fcb
+  metadata.gz: 00467bcdd3c545ab2e4a2d7a92e019b05cfc7cae8f8bbb22cd991147cc6a6a7f
+  data.tar.gz: 97da422f5db0d66a21b96a5c7c415420550d8b52d14cae671d359cc970085796
 SHA512:
-  metadata.gz: 8f6f147dfc7855f2c9e67227455cda78baf867d13806a10178d2e279a1122398736d56ab0b3028f22395bd93ec769c4e9b6003c82dcc89aa1faafb66c4bd0b02
-  data.tar.gz: eef7ec098e81d0df97978634a9acaf2918f6fa14a3b9d17523a4b50f5c98d56c59575e0f9e03a38c1edaa5c8f5763337b3f39510532c1cb11042065ff39e861b
+  metadata.gz: 12ffc1d3642b707ab69d7a8e0f6618d3f99f8e426cfc47919b1a1a1eb78104c5693cf5db0f0ec03e386df221fe16f80a9a41a3ab2ffa0a7835be90d0404f8096
+  data.tar.gz: 8870974d0ad0f62f879fde375536cda65122e35dad473eed2fc6f2ef22d12354e31e63a6628feb7dd99a37c49140e722a40c861f9f7b55cef987bef09847e489

data/README.md

@@ -1,24 +1,39 @@
-# PrimerTheme: frontend for Spina
+# PrimerTheme for Spina
+
+PrimerTheme is a theme for Spina that uses [GitHub's Primer design system](https://primer.style/). It provides frontends for Spina pages, as well as for the following Spina plugins:
+
+- [Conferences](https://github.com/louis-vs/spina-admin-conferences-fork/)
+- [Journal](https://github.com/louis-vs/spina-admin-journal)
+- [Blog (fork)](https://github.com/louis-vs/spina-admin-conferences-blog)
+
+All of these plugins will be automatically installed with PrimerTheme, but you can use any selection of them that you wish. PrimerTheme provides you with an easy-to-setup Spina theme with a wide array of options, extending the core Spina setup.
+
+PrimerTheme was originally designed for the Undergraduate Linguistics Association of Britain's website, which you can [view here](https://www.ulab.org.uk/) if you want to see the theme in action.
+
+**NB:** Please use this fork, rather than the original. This fork provides a stable, updated release, whilst the old repo is no longer maintained.
 
 ![Rails tests](https://github.com/louis-vs/spina-conferences-primer_theme-fork/workflows/Verify/badge.svg?branch=master&event=push)
 [![codecov](https://codecov.io/gh/louis-vs/spina-conferences-primer_theme-fork/branch/master/graph/badge.svg?token=9TZ9QGGLAH)](https://codecov.io/gh/louis-vs/spina-conferences-primer_theme-fork)
 [![CodeFactor](https://www.codefactor.io/repository/github/louis-vs/spina-conferences-primer_theme-fork/badge)](https://www.codefactor.io/repository/github/louis-vs/spina-conferences-primer_theme-fork)
 [![Inline docs](http://inch-ci.org/github/louis-vs/spina-conferences-primer_theme-fork.svg?branch=master)](http://inch-ci.org/github/louis-vs/spina-conferences-primer_theme-fork)
 
-A plugin for `Spina` that provides a frontend for `Spina::Admin::Conferences`, `Spina::Admin::Journal`, and `Spina::Admin::Conferences::Blog` using components from `Primer::ViewComponents`.
+## Features
 
-This fork provides an updated version of the plugin, as the main repo is currently badly outdated.
+The plugin's main goal is to provide frontends for Spina core and the three plugins listed above, using Primer. It also provides a number of useful page templates for use with Spina.
 
 ## Usage
-See the READMEs for the conference plugin, the journal plugin, and the bog plugin, respectively, for more information on what kind of content this frontend allows you to create and how to do so within the admin interface. Also make sure to ensure compilation of the assets for this gem by adding the following line to your
-`manifest.js` file.
 
-```js
-//= link spina_conferences_primer_theme_manifest.js
-```
+See the READMEs for the conference plugin, the journal plugin, and the blog plugin, respectively, for more information on what kind of content this frontend allows you to create and how to do so within the admin interface.
+
+You can customise Primer by overriding the `_custom.sass` and `_custom_variables.sass` files. See the [ULAB Website](https://github.com/ulab-committee/ulab-website) repo for an example.
 
 ## Installation
-Add this line to your application's Gemfile:
+
+Make sure you have a working installation of Ruby on Rails 7. You can find a setup guide [here](https://guides.rubyonrails.org/getting_started.html).
+
+You then need to install Spina, following the guide [on the Spina website](https://spinacms.com/docs).
+
+To install the plugin, add this line to your application's Gemfile:
 
 ```ruby
 gem 'spina-conferences-primer_theme-fork', require: 'spina/conferences/primer_theme'
@@ -29,13 +44,46 @@ And then execute:
 $ bundle
 ```
 
-Or install it yourself as:
+You will also need to configure Yarn. Add this repo as a dependency, so that your `package.json` resembles the following:
+
+```json
+{
+  "name": "website_name",
+  "private": true,
+  "dependencies": {
+    "spina-conferences-primer-theme-fork": "louis-vs/spina-conferences-primer_theme-fork"
+  }
+}
+```
+
+You will then need to install and run the migrations from all of the plugins that come bundled with PrimerTheme:
+
+```bash
+$ bin/rails spina_admin_journal:install:migrations
+$ bin/rails spina_admin_conferences:install:migrations
+$ bin/rails spina_admin_conferences_blog:install:migrations
+$ bin/rails spina_conferences_primer_theme:install:migrations
+$ bin/rails db:migrate
+```
+
+Also make sure to ensure compilation of the assets for this gem by adding the following line to your `manifest.js` file.
+
+```js
+//= link spina_conferences_primer_theme_manifest.js
+```
+
+Finally, start the server with:
+
 ```bash
-$ gem install spina-conferences-primer_theme-fork
+$ bin/rails s
 ```
 
+If you want to customise Primer, you will need to add `_custom.sass` and/or `_custom_variables.sass` into `app/assets/stylesheets/spina/conferences/primer_theme`. You will also need to override the CSS build rake task so that it finds your new files - an example of this can be found in the ULAB website [here](https://github.com/ulab-committee/ulab-website/blob/master/lib/tasks/ulab_website_tasks.rake).
+
 ## Contributing
-Contributions welcome, open an issue first please.
+
+Bug reports and feature requests are welcome in the [Issues](https://github.com/louis-vs/spina-conferences-primer_theme-fork/issues) section. Translations are also very welcome!
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/builds/spina/conferences/primer_theme/application.css

@@ -25962,3 +25962,7 @@ address {
   width: 100%;
   height: 70vh;
 }
+
+img {
+  background-color: white !important;
+}

data/app/assets/javascripts/spina/conferences/primer_theme/controllers/slideshow_controller.js

@@ -56,8 +56,15 @@ export default class SlideshowController extends Controller {
    */
   connect() {
     this.showSlide()
+    this.resetInterval()
+  }
+
+  resetInterval() {
     if (this.data.has('advance')) {
-      setInterval(() => this.next(), this.delay)
+      if (this.intervalId) {
+        clearInterval(this.intervalId)
+      }
+      this.intervalId = setInterval(() => this.next(), this.delay)
     }
   }
 
@@ -74,6 +81,7 @@ export default class SlideshowController extends Controller {
    * @private
    */
   next() {
+    this.resetInterval()
     const incrementer = this.incrementer
     this.incrementer = incrementer === this.slideTargets.length - 1 ? 0 : incrementer + 1
   }
@@ -83,6 +91,7 @@ export default class SlideshowController extends Controller {
    * @private
    */
   previous() {
+    this.resetInterval()
     const incrementer = this.incrementer
     this.incrementer = incrementer === 0 ? this.slideTargets.length - 1 : incrementer - 1
   }

data/app/assets/stylesheets/spina/conferences/primer_theme/application.sass

@@ -42,3 +42,6 @@ address
   border: none
   width: 100%
   height: 70vh
+
+img
+  background-color: white !important

data/app/controllers/spina/conferences/primer_theme/blog/application_controller.rb

@@ -8,6 +8,8 @@ module Spina
         class ApplicationController < ::Spina::ApplicationController
           include ::Spina::Frontend
 
+          before_action :page
+
           def cookies_info
             render partial: 'cookies'
           end
@@ -17,6 +19,14 @@ module Spina
           def theme_layout
             'layouts/spina/conferences/primer_theme/blog/blog'
           end
+
+          def page
+            @page = Spina::Page.find_or_create_by name: 'blog' do |page|
+              page.title = 'Blog'
+              page.link_url = '/blog'
+              page.deletable = false
+            end
+          end
         end
       end
     end

data/app/controllers/spina/conferences/primer_theme/blog/categories_controller.rb

@@ -6,7 +6,6 @@ module Spina
       module Blog
         # Spina::Blog::CategoriesController
         class CategoriesController < ApplicationController
-          before_action :page
           before_action :category
           before_action :posts
           before_action :set_breadcrumb, only: :show
@@ -28,13 +27,6 @@ module Spina
                               .page(params[:page])
           end
 
-          def page
-            @page = Spina::Page.find_or_create_by name: 'blog' do |page|
-              page.link_url = '/blog'
-              page.deletable = false
-            end
-          end
-
           def set_breadcrumb
             add_breadcrumb 'Blog', frontend_blog_root_path
           end

data/app/controllers/spina/conferences/primer_theme/blog/posts_controller.rb

@@ -7,7 +7,6 @@ module Spina
         # Spina::Blog::PostsController
         class PostsController < ApplicationController
           before_action :find_posts, only: [:index]
-          before_action :current_spina_user_can_view_page?
           before_action :set_breadcrumb, only: :show
 
           decorates_assigned :posts, :post
@@ -51,14 +50,6 @@ module Spina
             start_date.end_of_year
           end
 
-          def page
-            @page ||= Spina::Page.find_or_create_by name: 'blog' do |page|
-              page.title = 'Blog'
-              page.link_url = '/blog'
-              page.deletable = false
-            end
-          end
-
           def find_posts
             @posts = Spina::Admin::Conferences::Blog::Post.available.live.order(published_at: :desc)
                                                           .page(params[:page])
@@ -69,10 +60,6 @@ module Spina
             redirect_to rule.new_path, status: :moved_permanently
           end
 
-          def current_spina_user_can_view_page?
-            raise ActiveRecord::RecordNotFound unless current_spina_user.present? || page.live?
-          end
-
           def set_breadcrumb
             add_breadcrumb 'Blog', frontend_blog_root_path
           end

data/app/controllers/spina/conferences/primer_theme/conferences/application_controller.rb

@@ -6,9 +6,22 @@ module Spina
       module Conferences
         # Base class from which controllers inherit
         class ApplicationController < Spina::ApplicationController
+          before_action :page
+
           def cookies_info
             render partial: 'cookies'
           end
+
+          private
+
+          def page
+            @page ||= Spina::Page.find_or_create_by name: 'conferences' do |page|
+              page.title = 'Conferences'
+              page.link_url = '/conferences/conferences'
+              page.deletable = false
+              page.active = true
+            end
+          end
         end
       end
     end

data/app/controllers/spina/conferences/primer_theme/journal/application_controller.rb

@@ -6,6 +6,18 @@ module Spina
       module Journal
         # Base class from which controllers related to the journal plugin inherit
         class ApplicationController < Spina::ApplicationController
+          before_action :page
+
+          private
+
+          def page
+            @page ||= Spina::Page.find_or_create_by name: 'journal' do |page|
+              page.title = 'Journal'
+              page.link_url = '/journal/issues'
+              page.deletable = false
+              page.active = true
+            end
+          end
         end
       end
     end

data/app/controllers/spina/conferences/primer_theme/journal/articles_controller.rb

@@ -6,8 +6,8 @@ module Spina
       module Journal
         # User-facing controller for journal articles
         class ArticlesController < ApplicationController
-          before_action :set_article, :set_issue, :set_journal, :set_licence, :set_breadcrumb, :set_metadata,
-                        :require_admin_for_invisible_article
+          before_action :set_volume, :set_issue, :set_article, :set_journal, :set_licence,
+                        :set_breadcrumb, :set_metadata, :require_admin_for_invisible_article
 
           def show
             respond_to do |format|
@@ -25,13 +25,19 @@ module Spina
           private
 
           def set_article
-            @article = Admin::Journal::Article.includes(affiliations: [:institution]).find(params[:id])
+            @article = @issue.articles.includes(affiliations: [:institution]).find_by!(number: params[:number])
           rescue ActiveRecord::RecordNotFound
             send_file Rails.root.join('public/404.html'), type: 'text/html; charset=utf-8', status: 404
           end
 
           def set_issue
-            @issue = Admin::Journal::Issue.includes(:volume, :articles).find(params[:issue_id])
+            @issue = @volume.issues.includes(:volume, :articles).find_by!(number: params[:issue_number])
+          rescue ActiveRecord::RecordNotFound
+            send_file Rails.root.join('public/404.html'), type: 'text/html; charset=utf-8', status: 404
+          end
+
+          def set_volume
+            @volume = Admin::Journal::Volume.includes(:issues).find_by!(number: params[:volume_number])
           rescue ActiveRecord::RecordNotFound
             send_file Rails.root.join('public/404.html'), type: 'text/html; charset=utf-8', status: 404
           end
@@ -47,11 +53,11 @@ module Spina
           def set_breadcrumb
             return if @issue.blank?
 
-            add_breadcrumb @journal.name, frontend_issues_path
-            add_breadcrumb Admin::Journal::Issue.model_name.human.pluralize, frontend_issues_path
+            add_breadcrumb helpers.journal_abbreviation_or_name(@journal), frontend_issues_path
+            # add_breadcrumb Admin::Journal::Issue.model_name.human.pluralize, frontend_issues_path
             add_breadcrumb t('spina.conferences.primer_theme.journal.volume_issue', volume_number: @issue.volume.number,
                                                                                     issue_number: @issue.number),
-                           frontend_issue_path(@issue.id)
+                           frontend_volume_issue_path(@issue.volume.number, @issue.number)
           end
 
           def set_metadata

data/app/controllers/spina/conferences/primer_theme/journal/authors_controller.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Spina
+  module Conferences
+    module PrimerTheme
+      module Journal
+        # User-facing controller for authors
+        class AuthorsController < ApplicationController
+          before_action :set_journal, :set_breadcrumb
+          before_action :set_author, only: :show
+          before_action :set_metadata
+
+          def index
+            @authors = Admin::Journal::Author.all.sort do |a, b|
+              a.primary_affiliation.name <=> b.primary_affiliation.name
+            end
+          end
+
+          def show
+            add_breadcrumb @author.primary_affiliation.name
+          end
+
+          private
+
+          def set_journal
+            @journal = Admin::Journal::Journal.instance
+          end
+
+          def set_author
+            @author = Admin::Journal::Author.includes(:affiliations, :articles).find(params[:id])
+          rescue ActiveRecord::RecordNotFound
+            send_file Rails.root.join('public/404.html'), type: 'text/html; charset=utf-8', status: 404
+          end
+
+          def set_metadata
+            @title = @journal.name
+            @description = ActionView::Base.full_sanitizer.sanitize(@journal.content(:description))
+          end
+
+          def set_breadcrumb
+            add_breadcrumb helpers.journal_abbreviation_or_name(@journal), frontend_issues_path
+            add_breadcrumb Admin::Journal::Author.model_name.human(count: :many), frontend_authors_path
+          end
+        end
+      end
+    end
+  end
+end

data/app/controllers/spina/conferences/primer_theme/journal/issues_controller.rb

@@ -7,7 +7,7 @@ module Spina
         # User-facing controller for journal issues
         class IssuesController < ApplicationController
           before_action :set_journal
-          before_action :set_issue, :set_breadcrumb, only: :show
+          before_action :set_volume, :set_issue, only: :show
           before_action :set_metadata
 
           def index
@@ -22,6 +22,7 @@ module Spina
 
           def show
             @articles = current_spina_user.present? ? @issue.articles : @issue.articles.visible
+            add_breadcrumb helpers.journal_abbreviation_or_name(@journal), frontend_issues_path
             add_breadcrumb t('spina.conferences.primer_theme.journal.volume_issue',
                              volume_number: @issue.volume.number, issue_number: @issue.number)
           end
@@ -33,14 +34,20 @@ module Spina
           end
 
           def set_issue
-            @issue = Admin::Journal::Issue.includes(:volume, :articles).find(params[:id])
+            @issue = @volume.issues.includes(:volume, :articles).find_by!(number: params[:number])
+          rescue ActiveRecord::RecordNotFound
+            send_file Rails.root.join('public/404.html'), type: 'text/html; charset=utf-8', status: 404
+          end
+
+          def set_volume
+            @volume = Admin::Journal::Volume.includes(:issues).find_by!(number: params[:volume_number])
           rescue ActiveRecord::RecordNotFound
             send_file Rails.root.join('public/404.html'), type: 'text/html; charset=utf-8', status: 404
           end
 
           def set_breadcrumb
-            add_breadcrumb @journal.name, frontend_issues_path
-            add_breadcrumb Admin::Journal::Issue.model_name.human.pluralize, frontend_issues_path
+            add_breadcrumb helpers.journal_abbreviation_or_name(@journal), frontend_issues_path
+            # add_breadcrumb Admin::Journal::Issue.model_name.human.pluralize, frontend_issues_path
           end
 
           def set_metadata

data/app/helpers/spina/conferences/primer_theme/application_helper.rb

@@ -12,10 +12,19 @@ module Spina
           Spina::Admin::Conferences::Conference.order(dates: :asc).find_by('upper(dates) >= ?', Time.zone.today)
         end
 
-        def ancestors
+        def journal_abbreviation_or_name(journal)
+          journal.content(:journal_abbreviation).nil? || journal.content(:journal_abbreviation).blank? ? journal.name : journal.content(:journal_abbreviation) # rubocop:disable Layout/LineLength
+        end
+
+        def ancestors # rubocop:disable Metrics/AbcSize,Metrics/MethodLength
           return [] if current_page.blank?
 
           render Primer::Beta::Breadcrumbs.new(mb: 4) do |component|
+            if current_page.resource&.name = 'journal'
+              component.item(href: frontend_issues_path) do
+                journal_abbreviation_or_name(Spina::Admin::Journal::Journal.instance)
+              end
+            end
             current_page.ancestors.each do |ancestor|
               component.item(href: ancestor.materialized_path) { ancestor.menu_title }
             end

data/app/helpers/spina/conferences/primer_theme/navigations_helper.rb

@@ -13,6 +13,15 @@ module Spina
           @footer_navigation_items ||= live_navigation_items('footer')
         end
 
+        def journal_navigation_items
+          @journal_navigation_items ||= live_resource_navigation_items('journal')
+        end
+
+        # Use this for caching, since pages are not touched when navigation position is updated.
+        def all_navigation_items
+          @all_navigation_items ||= ::Spina::NavigationItem.all
+        end
+
         private
 
         def live_navigation_items(name)
@@ -20,6 +29,10 @@ module Spina
                                  .where(spina_navigations: { name: name })
                                  .roots.regular_pages.in_menu.live.sorted
         end
+
+        def live_resource_navigation_items(name)
+          ::Spina::Resource.find_by(name: name)&.pages&.roots&.in_menu&.live&.sorted || []
+        end
       end
     end
   end

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

@@ -13,15 +13,17 @@
       = render Primer::SubheadComponent.new do |component|
         = component.heading { t :'.constitution.title' }
       - if content(:constitution).present?
-        = render Primer::FlexComponent.new(align_items: :center, py: 1) do
-          = render Primer::FlexItemComponent.new(flex_auto: true, pr: 1) do
+        = render Primer::BoxComponent.new(display: :flex, align_items: :center, py: 1) do
+          = render Primer::BoxComponent.new(flex: :auto, pr: 1) do
             = t :'.constitution.uploaded',
                 date: l(Spina::Attachment.find(content(:constitution).attachment_id).created_at.to_date, format: :long)
           = render Primer::ButtonComponent.new(tag: :a, href: content.attachment_url(:constitution), ml: 2, download: '') do
             = render Primer::OcticonComponent.new('desktop-download')
             = t :'.constitution.download'
       - else
-        = render Primer::BlankslateComponent.new(title: t(:'.constitution.no_constitution'), icon: 'law')
+        = render Primer::Beta::Blankslate.new do |blankslate|
+          - blankslate.visual_icon(icon: 'law')
+          - blankslate.heading(tag: :h3).with_content(t(:'.constitution.no_constitution'))
 
     = render Primer::BoxComponent.new(mt: 4, col: [12, nil, 6, nil], float: [nil, nil, :left, nil]) do
       = render Primer::SubheadComponent.new do |component|
@@ -30,7 +32,7 @@
         %ul
           - repeater :minutes do |minutes_entry|
             %li.list-style-none.py-1.d-flex.flex-items-center
-              = render Primer::FlexItemComponent.new(flex_auto: true) do
+              = render Primer::BoxComponent.new(flex: :auto) do
                 - if minutes_entry.content(:date).present?
                   = t(:'.minutes.minutes_for_html', date: time_tag(minutes_entry.content(:date)))
                 - else
@@ -43,7 +45,9 @@
               - else
                 = render(Primer::Beta::Text.new(color: :muted, font_size: 6)) { t :'.minutes.no_file' }
       - else
-        = render Primer::BlankslateComponent.new(title: t(:'.minutes.no_minutes'), icon: 'file')
+        = render Primer::Beta::Blankslate.new do |blankslate|
+          - blankslate.visual_icon(icon: 'file')
+          - blankslate.heading(tag: :h3).with_content(t(:'.minutes.no_minutes'))
 
     = render Primer::BoxComponent.new(mt: 4, col: [12, nil, 6, nil], float: [nil, nil, :left, nil]) do
       - if content(:documents).present?
@@ -66,10 +70,10 @@
     %ul
       - repeater :partner_societies do |partner_society|
         %li.list-style-none.py-4.border-bottom
-          = render Primer::FlexComponent.new(direction: [:column, nil, :row_reverse, nil], align_items: :start) do
+          = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row_reverse, nil], align_items: :flex_start) do
             = render Primer::BaseComponent.new(tag: :div, flex: :auto) do
               = render Primer::HeadingComponent.new(tag: :h3, mb: 1) do
-                = render Primer::FlexComponent.new(flex_wrap: true, justify_content: :space_between) do
+                = render Primer::BoxComponent.new(display: :flex, flex_wrap: :wrap, justify_content: :space_between) do
                   - if partner_society.content(:name).present?
                     = render(Primer::Beta::Text.new(tag: :div)) { partner_society.content(:name) }
                   = render Primer::ButtonGroup.new(aria: { label: t(:'.partner_societies.contact_buttons') }) do |component|
@@ -89,4 +93,6 @@
                                                   srcset: srcset(partner_society.content(:logo), variant: { resize_to_limit: [200, 150] }),
                                                   class: %w[mt-4 mt-md-0 mr-md-4])
   - else
-    = render Primer::BlankslateComponent.new(title: t(:'.partner_societies.no_societies'), icon: 'organization')
+    = render Primer::Beta::Blankslate.new do |blankslate|
+      - blankslate.visual_icon(icon: 'organization')
+      - blankslate.heading(tag: :h3).with_content(t(:'.partner_societies.no_societies'))

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

@@ -8,7 +8,7 @@
     %ul.mt-4
       - repeater(:committee_bios) do |committee_bio|
         %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 committee_bio.content(:profile_picture).present?
               -# TODO: create helper to replace this, because Primer::Beta::Avatar limits size to 80 sadly
               %img.avatar.circle.mr-md-3.mb-3.mb-md-0.flex-shrink-0{src: committee_bio.content.image_url(:profile_picture, resize_to_fill: [150, 150]),
@@ -16,8 +16,8 @@
                                                                                           variant: { resize_to_fill: [150, 150] }),
                                                                     draggable: false,
                                                                     alt: committee_bio.content(:profile_picture).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 committee_bio.content(:name).present?
                     = render(Primer::HeadingComponent.new(tag: :h3)) do
@@ -40,4 +40,6 @@
               - if committee_bio.content(:bio).present?
                 = render(Primer::Beta::Text.new(tag: :div, color: :muted)) { committee_bio.content.html(:bio).to_s }
   - else
-    = render Primer::BlankslateComponent.new(title: t(:'.no_bios'), icon: 'file')
+    = render Primer::Beta::Blankslate.new do |blankslate|
+      - blankslate.visual_icon(icon: 'file')
+      - blankslate.heading(tag: :h3).with_content(t(:'.no_bios'))

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

@@ -20,7 +20,9 @@
           - repeater(events) do |event|
             = render 'conferences_primer_theme/partials/event', event: event
       - else
-        = render Primer::BlankslateComponent.new(title: t(:'.no_events'), icon: 'calendar')
+        = render Primer::Beta::Blankslate.new do |blankslate|
+          - blankslate.visual_icon(icon: 'calendar')
+          - blankslate.heading(tag: :h3).with_content(t(:'.no_events'))
 
 
     = render Primer::SubheadComponent.new(mt: 4) do |component|
@@ -38,6 +40,10 @@
           - repeater(events) do |event|
             = render 'conferences_primer_theme/partials/event', event: event
       - else
-        = render Primer::BlankslateComponent.new(title: t(:'.no_events'), icon: 'calendar')
+        = render Primer::Beta::Blankslate.new do |blankslate|
+          - blankslate.visual_icon(icon: 'calendar')
+          - blankslate.heading(tag: :h3).with_content(t(:'.no_events'))
   - else
-    = render Primer::BlankslateComponent.new(title: t(:'.no_events'), icon: 'calendar')
+    = render Primer::Beta::Blankslate.new do |blankslate|
+      - blankslate.visual_icon(icon: 'calendar')
+      - blankslate.heading(tag: :h3).with_content(t(:'.no_events'))

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

@@ -6,7 +6,7 @@
       - if content(:carousel).present?
         .height-full.d-flex.flex-column.flex-justify-between{data: { controller: :slideshow, slideshow_incrementer: 0, slideshow_advance: true, slideshow_delay: 20000} }
           - content(:carousel).each_with_index do |carousel_item, index|
-            = render partial: 'conferences_primer_theme/partials/homepage_item', locals: { item: carousel_item }
+            = render partial: 'conferences_primer_theme/partials/homepage_item', locals: { item: carousel_item, index: index }
           - if content(:carousel).many?
             .container-lg.height-full.d-flex.flex-column-reverse.mb-8{ style: 'z-index: 5' }
               = render(Primer::ButtonGroup.new) do |component|

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

@@ -0,0 +1,10 @@
+- cache [current_page, journal_navigation_items] do
+  = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, nil, :row]) do
+    - cache current_page do
+      = render Primer::BoxComponent.new(col: [nil, nil, nil, 9]) do
+        = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }
+
+        - if content(:text).present?
+          = render(Primer::Markdown.new(mt: 4)) { content.html(:text).to_s }
+
+    = render 'journal_navigation'

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

@@ -8,16 +8,16 @@
     %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
@@ -28,7 +28,7 @@
               - if issue.content(:description).present?
                 = render Primer::Markdown.new(tag: :div, color: :muted) do
                   = issue.content.html(:description).to_s
-              = 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(: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')