ブログのWIP機能を実装

app/assets/stylesheets/article.sass

@@ -1,12 +1,13 @@
 @import common-imports
 @import /blocks/base/body
 @import /blocks/footer/footer
+@import /blocks/shared/flash
 
 .articles__header
   margin-bottom: 1rem
 
 .articles__title
-  +text-block(1.75rem 1.4, center)
+  +text-block(1.75rem 1.4, center 700)
 
 .articles__item:not(:first-child)
   border-top: solid 1px $border
@@ -19,7 +20,9 @@
       text-decoration: underline
 
 .articles__item-title
-  +text-block(1.125rem 1.4, $default-text)
+  +text-block(1.125rem 1.4, $default-text 700)
+  .articles__item.is-wip &
+    color: $muted-text
 
 .articles__item-metas
   display: flex
@@ -81,6 +84,8 @@
     font-size: 2rem
   +media-breakpoint-down(sm)
     font-size: 1.625rem
+  &.is-wip
+    color: $muted-text
 
 .article__metas
   display: flex
@@ -180,3 +185,16 @@
     +media-breakpoint-up(md)
       max-width: 20rem
       +margin(horizontal, auto)
+
+.article__title-label
+  background-color: #ccc
+  font-size: .75rem
+  display: inline-block
+  vertical-align: middle
+  padding: .25rem .5rem
+  margin-right: .25rem
+  border-radius: 1rem
+  margin-top: -.5em
+  font-weight: 400
+  color: $default-text
+  line-height: 1

app/controllers/articles_controller.rb

@@ -5,13 +5,17 @@ class ArticlesController < ApplicationController
   before_action :require_admin_login, except: %i[index show]
 
   def index
-    @articles = Article.all.order(created_at: :desc)
+    @articles = list_articles
     @articles = @articles.tagged_with(params[:tag]) if params[:tag]
     render layout: 'article'
   end
 
   def show
-    render layout: 'article'
+    if !@article.wip? || admin_or_mentor_login?
+      render layout: 'article'
+    else
+      redirect_to root_path, alert: '管理者・メンターとしてログインしてください'
+    end
   end
 
   def new
@@ -23,17 +27,18 @@ def edit; end
   def create
     @article = Article.new(article_params)
     @article.user = current_user
-
+    set_wip_or_published_time
     if @article.save
-      redirect_to @article, notice: '記事を作成しました'
+      redirect_to redirect_url(@article), notice: notice_message(@article)
     else
       render :new
     end
   end
 
   def update
+    set_wip_or_published_time
     if @article.update(article_params)
-      redirect_to @article, notice: '記事を更新しました'
+      redirect_to redirect_url(@article), notice: notice_message(@article)
     else
       render :edit
     end
@@ -50,7 +55,37 @@ def set_article
     @article = Article.find(params[:id])
   end
 
+  def list_articles
+    if admin_or_mentor_login?
+      Article.all.order(created_at: :desc)
+    else
+      Article.all.where(wip: false).order(created_at: :desc)
+    end
+  end
+
   def article_params
     params.require(:article).permit(:title, :body, :tag_list)
   end
+
+  def redirect_url(article)
+    article.wip? ? edit_article_url(article) : article
+  end
+
+  def set_wip_or_published_time
+    if params[:commit] == 'WIP'
+      @article.wip = true
+    else
+      @article.wip = false
+      @article.published_at = Time.current
+    end
+  end
+
+  def notice_message(article)
+    case params[:action]
+    when 'create'
+      article.wip? ? '記事をWIPとして保存しました' : '記事を作成しました'
+    when 'update'
+      article.wip? ? '記事をWIPとして保存しました' : '記事を更新しました'
+    end
+  end
 end

app/views/articles/_form.html.slim

@@ -29,6 +29,8 @@
 
   .form-actions
     ul.form-actions__items
+      li.form-actions__item.is-main
+        = f.submit 'WIP', class: 'a-button is-lg is-primary is-block', id: 'js-shortcut-wip'
       li.form-actions__item.is-main
         = f.submit nil, class: 'a-button is-lg is-warning is-block', id: 'js-shortcut-submit'
       li.form-actions__item.is-sub

app/views/articles/index.html.slim

@@ -11,9 +11,12 @@
       .a-card
         .articles__items
           - @articles.each do |article|
-              .articles__item
+              div class=(article.wip? ? 'articles__item is-wip' : 'articles__item')
                 = link_to article, class: 'articles__item-link' do
                   h2.articles__item-title
+                    - if article.wip?
+                      span.article__title-label.is-wip
+                        | WIP
                     = article.title
                   .articles__item-metas
                     .articles__item-meta
@@ -22,4 +25,4 @@
                         = article.user.login_name
                     .articles__item-meta
                       .articles__item-published-at
-                        = l(article.created_at)
+                        = article.wip? ? '執筆中' : l(article.published_at)

app/views/articles/show.html.slim

@@ -5,7 +5,10 @@
     .a-card
       .article__inner
         header.article__header
-          h1.article__title
+          h1.article__title(class="#{@article.wip? ? 'is-wip' : ''}")
+            - if @article.wip?
+              span.article__title-label
+                | WIP
             = title
           .article__metas
             .article__meta
@@ -14,7 +17,7 @@
                 = @article.user.login_name
             .article__meta
               .article__published-at
-                = l(@article.created_at)
+                = @article.wip? ? '執筆中' : l(@article.published_at)
         .article__body
           .js-markdown-view.is-long-text
             = @article.body

app/views/layouts/article.html.slim

@@ -8,6 +8,8 @@ html.is-application lang='ja'
     = javascript_include_tag 'application'
     = javascript_pack_tag 'application'
     = csrf_meta_tags
+    - if defined?(@article) && @article.wip?
+      meta name="robots" content="none"
     = render 'favicons'
     = render 'current_user'
     = render 'rollbar' if Rails.env.production?
@@ -20,7 +22,7 @@ html.is-application lang='ja'
   body#body class="#{body_class}"
     = render 'google_tag_manager_body'
     - if notice
-      .flash
+      .flash.is-notice
         .flash__container
           p.flash__message
             = notice.html_safe

db/data/20220130224201_copy_timestamp_to_published_at_for_blog.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class CopyTimestampToPublishedAtForBlog < ActiveRecord::Migration[6.1]
+  def up
+    Article.where(wip: false).where(published_at: nil).find_each do |article|
+      article.published_at = article.created_at
+      article.save!(validate: false)
+    end
+  end
+
+  def down
+    raise ActiveRecord::IrreversibleMigration
+  end
+end

db/data_schema.rb

@@ -1,3 +1,3 @@
 # frozen_string_literal: true
 
-DataMigrate::Data.define(version: 20_220_114_203_650)
+DataMigrate::Data.define(version: 20_220_130_224_201)

db/fixtures/articles.yml

@@ -18,6 +18,8 @@ article1:
     ![Image from Gyazo](https://i.gyazo.com/9be15807028d985676f0f3a21526d55c.png)
     あとはインストーラーの指示に従ってインストールしましょう。
   user: komagata
+  wip: false
+  published_at: "2022-01-01 00:00:00"
 
 article2:
   title: Debian用の仮想マシンを作ろう
@@ -41,3 +43,15 @@ article2:
     左側にDebian用の仮想マシンが表示されました。
     しかしこれは中身の空っぽの仮想マシンができた状態なので続けてOSをインストールしましょう。
   user: machida
+  wip: false
+  published_at: "2022-01-02 00:00:00"
+
+article3:
+  title: 仮想マシンにDebianをインストールしよう
+  body: |-
+    仮想マシンにOS(Debian)をインストールしましょう。
+    仮想マシンの作成方法は下記の記事をみてください。
+    [Debian用の仮想マシンを作ろう](https://bootcamp.fjord.jp/articles/4)
+    物理マシンでしたらインストールCD（やUSB）をマシンに入れてインストールしますが、仮想マシンの場合は、仮想のCDドライブにCDイメージをセットしてインストールします。
+  user: komagata
+  wip: true

db/migrate/20220201020526_add_wip_and_published_at_to_articles.rb

@@ -0,0 +1,6 @@
+class AddWipAndPublishedAtToArticles < ActiveRecord::Migration[6.1]
+  def change
+    add_column :articles, :wip, :boolean, default: false, null: false
+    add_column :articles, :published_at, :datetime
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2022_01_27_083838) do
+ActiveRecord::Schema.define(version: 2022_02_01_020526) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -72,6 +72,8 @@
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.bigint "user_id"
+    t.boolean "wip", default: false, null: false
+    t.datetime "published_at"
     t.index ["user_id"], name: "index_articles_on_user_id"
   end
 

test/fixtures/articles.yml

@@ -2,8 +2,18 @@ article1:
   title: タイトル１
   body: 本文１
   user: komagata
+  wip: false
+  published_at: "2022-01-01 00:00:00"
 
 article2:
   title: タイトル２
   body: 本文２
   user: machida
+  wip: false
+  published_at: "2022-01-02 00:00:00"
+
+article3:
+  title: タイトル３
+  body: 本文３
+  user: komagata
+  wip: true

test/system/articles_test.rb

@@ -5,6 +5,7 @@
 class ArticlesTest < ApplicationSystemTestCase
   setup do
     @article = articles(:article1)
+    @article3 = articles(:article3)
   end
 
   # 仮デザインなので一時的に無効化
@@ -50,4 +51,55 @@ class ArticlesTest < ApplicationSystemTestCase
     visit edit_article_path(@article)
     assert_text '管理者としてログインしてください'
   end
+
+  test 'save article with WIP' do
+    visit_with_auth new_article_path, 'komagata'
+
+    fill_in 'article[title]', with: 'タイトル４'
+    fill_in 'article[body]', with: '本文４'
+    click_on 'WIP'
+    assert_text 'WIPとして保存しました'
+  end
+
+  test 'WIP label visible on index and show' do
+    visit_with_auth articles_path, 'komagata'
+    assert_text 'WIP'
+    assert_text '執筆中'
+
+    click_on @article3.title
+    assert_text 'WIP'
+    assert_text '執筆中'
+    assert_selector 'head', visible: false do
+      assert_selector "meta[name='robots'][content='none']", visible: false
+    end
+  end
+
+  test 'WIP articles not visible to users' do
+    visit_with_auth articles_url, 'kimura'
+    assert_no_text 'WIP'
+  end
+
+  test 'WIP articles not accessible to users' do
+    visit_with_auth article_path(@article3), 'kimura'
+    assert_text '管理者・メンターとしてログインしてください'
+  end
+
+  test 'no WIP marks after publication' do
+    visit_with_auth edit_article_path(@article3), 'komagata'
+    click_on '更新する'
+    assert_no_text 'WIP'
+    assert_no_text '執筆中'
+    assert_selector 'head', visible: false do
+      assert_no_selector "meta[name='robots'][content='none']", visible: false
+    end
+
+    visit_with_auth articles_url, 'kimura'
+    assert_text @article3.title
+    assert_no_text 'WIP'
+    assert_no_text '執筆中'
+
+    click_on @article3.title
+    assert_text @article3.title
+    assert_text @article3.body
+  end
 end