improve output

Signed-off-by: Kirill Mokevnin <mokevnin@gmail.com>

app/controllers/web/blog_posts_controller.rb

@@ -7,5 +7,13 @@ def index
 
   def show
     @blog_post = BlogPost.published.find_by!(slug: params[:id])
+
+    @category = @blog_post.language&.category
+    @blog_posts = []
+    @languages = []
+    if @category
+      @blog_posts = @category.blog_posts.except(@blog_post).limit(3)
+      @languages = @category.languages.limit(3)
+    end
   end
 end

app/controllers/web/home_controller.rb

@@ -11,6 +11,8 @@ def index
     @user = User::SignUpForm.new
     @users_count = User.count
 
+    @blog_posts = BlogPost.published.last(2)
+
     @languages_links_by_slug = Language.all.each_with_object({}) do |item, acc|
       acc[item.slug.to_sym] = view_context.link_to(item, language_path(item.slug))
     end

app/controllers/web/languages_controller.rb

@@ -27,6 +27,7 @@ def show
     @next_lesson = current_user.not_finished_lessons_for_language(@language).ordered.first
 
     @similar_languages = Language.order('RANDOM()').except(@language).limit(4)
+    @blog_posts = @language.blog_posts.published
 
     human_language_header = [@language.current_version.name, @language.learn_as.text].join(' ')
     @header = @language_version_info.header || human_language_header

app/helpers/application_helper.rb

@@ -50,6 +50,7 @@ def markdown2html(text, options = {}, extensions = {})
     }
     combined_options = default_options.merge options
 
+    # TODO: use HTMLWithHoc
     renderer = Redcarpet::Render::HTML.new(combined_options)
     markdown = Redcarpet::Markdown.new(renderer, combined_extensions)
     markdown.render(text)

app/lib/html_with_hoc.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class HTMLWithHoc < Redcarpet::Render::HTML
+  include Redcarpet::Render::SmartyPants
+  # TODO: implement hoc
+  # https://github.com/vmg/redcarpet#and-you-can-even-cook-your-own
+end

app/models/language/category.rb

@@ -4,6 +4,7 @@ class Language::Category < ApplicationRecord
   validates :name, presence: true
 
   has_many :languages, ->(category) { where(category: category) }, dependent: :nullify, inverse_of: :category
+  has_many :blog_posts, through: :languages, dependent: :restrict_with_exception
 
   def name
     send :"name_#{I18n.locale}"

app/views/web/home/_blog_posts.html.slim

@@ -0,0 +1,9 @@
+- @blog_posts.each do |post|
+  .col
+    .card.border-0.bg-body
+      - if post.cover.attached?
+        = link_to blog_post_path(post.slug) do
+          = image_tag post.cover.variant(:list), class: 'card-img-top image-fluid'
+      .card-body
+        h2.card-title.fs-6 = link_to post, blog_post_path(post.slug), class: 'text-decoration-none'
+        .card-text = truncate post.body

app/views/web/home/index.html.slim

@@ -13,6 +13,15 @@
     .row.g-4.row-cols-1.row-cols-sm-2.row-cols-lg-3
       = render 'reviews'
 
+.mb-5.pb-5
+  .container
+    .d-flex
+      h2.me-auto.mt-auto = t('.blog_posts')
+      .mt-auto = link_to t('.all_blog_posts'), reviews_path, class: 'text-decoration-none text-muted small'
+    hr.mb-5.mt-1
+    .row.row-cols-sm-2.row-cols-1
+      = render 'blog_posts'
+
 - if I18n.locale == :ru
   .mb-5.pb-2
     = render partial: 'web/shared/faq', object: t('faq.main')

app/views/web/languages/lessons/_content.html.slim

@@ -29,12 +29,12 @@
 
   .mb-3.d-flex.justify-content-center
     .me-4
-      | ← 
       - if @lesson_version.prev_lesson
+        | ← 
         = link_to t('.prev'), language_lesson_path(resource_language.slug, @lesson_version.prev_lesson.slug), class: 'text-black text-decoration-none'
     - if @lesson_version.next_lesson
       = link_to t('.next'), language_lesson_path(resource_language.slug, @lesson_version.next_lesson.slug), class: 'text-black text-decoration-none'
-    |  →
+      |  →
 
 - if @info.definitions.any? || @info.tips.any?
   hr.my-4

app/views/web/languages/show.html.slim

@@ -104,3 +104,9 @@
               .mt-auto = link_to anchor, language_category_path(@language.category.slug), class: 'text-muted text-decoration-none small'
         hr.mt-1.mb-4
         = render 'web/shared/languages', languages: @similar_languages, language_members_by_language: {}
+
+      .my-5
+        .d-flex
+          h2.me-auto.mt-auto = t('.blog_posts')
+        hr.mt-1.mb-4
+        = render 'web/shared/blog_posts', blog_posts: @blog_posts

app/views/web/shared/_blog_posts.html.slim

@@ -0,0 +1,10 @@
+.row.row-cols-1.row-cols-sm-2.row-cols-md-3
+  - @blog_posts.each do |post|
+    .col
+      .card.border-0.mb-3
+        - if post.cover.attached?
+          = link_to blog_post_path(post.slug) do
+            = image_tag post.cover.variant(:list), class: 'card-img-top image-fluid'
+        .card-body
+          h2.card-title.fs-6 = link_to post, blog_post_path(post.slug), class: 'text-decoration-none'
+          .card-text = truncate post.body

config/locales/en.views.yml

@@ -38,6 +38,8 @@ en:
           Learn the Code Basics of HTML, CSS and JavaScript with Interactive Coding Environment right in your Browser! Perfect for Beginners & 100% for Free | Join our Online Programming Courses
         reviews: Reviews
         all_reviews: All Reviews
+        blog_posts: Posts
+        all_blog_posts: All Blog Posts
         categories: Categories
         join: Join the %{count} learners for free. Forever.
         header: Learn to code. Online. For free.
@@ -90,6 +92,7 @@ en:
         empty: Looks like there is noting yet
     languages:
       show:
+        blog_posts: Blog Posts
         breadcrumbs: Breadcrumbs
         to_home_title: Home
         see_all_courses_in_category: See all courses in %{name}

test/fixtures/active_storage/attachments.yml

@@ -2,3 +2,13 @@ blog_post_from_full_cover:
   name: cover
   record: from-full (BlogPost)
   blob: blog_post
+
+blog_post_from_full_ru_cover:
+  name: cover
+  record: from-full-ru (BlogPost)
+  blob: blog_post
+
+blog_post_from_full_en_cover:
+  name: cover
+  record: from-full-en (BlogPost)
+  blob: blog_post

test/fixtures/blog_posts.yml

@@ -11,10 +11,56 @@ from-full:
 
 from-full-ru:
   <<: *DEFAULTS
-  body: <%= Faker::Lorem.paragraph_by_chars %>
+  body: DRAFT
+  state: draft
   locale: ru
 
 from-full-en:
+  <<: *DEFAULTS
+  body: DRAFT
+  state: draft
+  locale: en
+
+from-full-js:
+  <<: *DEFAULTS
+  body: <%= Faker::Lorem.paragraph_by_chars %>
+  language: javascript
+  locale: ru
+
+from-full-ru-js:
+  <<: *DEFAULTS
+  body: <%= Faker::Lorem.paragraph_by_chars %>
+  language: javascript
+  locale: ru
+
+from-full-en-js:
+  <<: *DEFAULTS
+  body: |
+    ## Header 2
+    <%= Faker::Lorem.paragraph_by_chars %>
+    ## Header 3
+    <%= Faker::Lorem.paragraph_by_chars %>
+    ## Header 4
+    <%= Faker::Lorem.paragraph_by_chars %>
+    ## Header 5
+    <%= Faker::Lorem.paragraph_by_chars %>
+  language: javascript
+  locale: en
+
+from-full-php:
+  <<: *DEFAULTS
+  body: <%= Faker::Lorem.paragraph_by_chars %>
+  language: php
+  locale: ru
+
+from-full-ru-php:
+  <<: *DEFAULTS
+  body: <%= Faker::Lorem.paragraph_by_chars %>
+  language: php
+  locale: ru
+
+from-full-en-php:
   <<: *DEFAULTS
   body: <%= Faker::Lorem.paragraph_by_chars %>
+  language: php
   locale: en