Skip to content

Commit eed8f11

Browse files
rosstarossta
committed
Iterate on home page layout with page summaries
1 parent 9dfed56 commit eed8f11

File tree

12 files changed

+115
-55
lines changed

12 files changed

+115
-55
lines changed

‎app/content/helpers/page_helper.rb

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ def link_to_if_current(text, page, active_class: "active")
2323
end
2424
end
2525

26-
# Conditionally renders the block if an arg is present. If all the args are nil,
27-
# the block is not rendered. Handy for laconic templating languages like slim, haml, etc.
28-
def with(*args, &block)
29-
block.call(*args) unless args.all?(&:nil?)
30-
end
31-
3226
# Render a block within a layout. This is a useful, and prefered way, to handle
3327
# nesting layouts, within Sitepress.
3428
def render_layout(layout, **, &)

‎app/content/layouts/article.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<%= render "application/skip_to_content" %>
22
<%= render_layout "application" do %>
33
<article>
4-
<%= render PageHeader.new(
4+
<%= render Pages::Header.new(
55
title: current_page.data.title!,
66
description: current_page.data.description,
77
published_on: current_page.data.published&.to_date

‎app/content/models/article_page.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ class ArticlePage < Sitepress::Model
33
include ActiveModel::Conversion
44

55
collection glob: "articles/*.html*"
6-
data :title, :published, :updated, :summary, :description, :tags
6+
data :title, :published, :updated, :summary, :description, :tags, :image
77

88
delegate :mime_type, :handler, to: :page
99

‎app/content/pages/articles/index.html.erb

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
11
<section>
2-
<%= render PageHeader.new(title: "Articles") %>
3-
<section>
4-
<div class="main-content container">
5-
<% ArticlePage.published.each do |page| %>
6-
<div>
7-
<h2>
8-
<%= link_to_page page do %>
9-
<%= page.title %>
10-
<% end %>
11-
</h2>
12-
<div>
13-
<%= page.description %>
14-
</div>
15-
</div>
16-
<% end %>
17-
</div>
18-
</section>
2+
<div class="main-content container py-3xl">
3+
<% ArticlePage.published.take(20).zip(%w[left right]).each do |(page, side)| %>
4+
<%= render Pages::Summary.from_page(page, side: side) %>
5+
<% end %>
6+
</div>
197
</section>

‎app/content/pages/articles/introducing-joy-of-rails.html.mdrb

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ description: Joy of Rails is a Rails application dedicated to teaching and showi
77
published: '2024-05-02'
88
toc: false
99
uuid: 4106248b-ae8f-40a3-9853-48b91d815a71
10+
image: articles/introducing-joy-of-rails/adventure-world.gif
1011
tags:
1112
- Rails
1213
---

‎app/content/pages/index.html.erb

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,11 @@
22
title: Joy of Rails
33
---
44

5-
<section>
6-
<%= render PageHeader.new(description: "Learn how to build web applications with Ruby on Rails") do |header| %>
7-
<% header.title do %>
8-
Experience the <span class="emphasis">Joy of Rails</span>
5+
<section style="min-height: 51vh">
6+
<div class="main-content container py-3xl">
7+
<% ArticlePage.published.take(3).zip(%w[left right]).each do |(page, side)| %>
8+
<%= render Pages::Summary.from_page(page, side: side) %>
99
<% end %>
10-
<% end %>
11-
<section style="min-height: 51vh">
12-
<div class="main-content container">
13-
<h2>Recently published</h2>
14-
<% ArticlePage.published.each do |page| %>
15-
<div>
16-
<h2>
17-
<%= link_to_page page do %>
18-
<%= page.title %>
19-
<% end %>
20-
</h2>
21-
<div>
22-
<%= page.description %>
23-
</div>
24-
</div>
25-
<% end %>
26-
</div>
27-
</section>
10+
</div>
2811
</section>
2912
<section><%= render "newsletter/banner" %></section>

‎app/javascript/css/baseline.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,12 @@ h1 {
5757

5858
h2 {
5959
font-size: var(--step-2);
60+
61+
&.important {
62+
font-size: var(--step-4);
63+
letter-spacing: -2px;
64+
font-weight: 800;
65+
}
6066
}
6167

6268
h3 {

‎app/javascript/css/layout.scss

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
body > *,
1919
main > *,
20+
.grid,
2021
.header-content,
2122
.section-content,
2223
.footer-content,
@@ -39,23 +40,33 @@ main > *,
3940
grid-template-columns: 2fr;
4041
}
4142

43+
.grid {
44+
grid-gap: var(--grid-gutter);
45+
}
46+
47+
.grid-cols-2 {
48+
grid-template-columns: repeat(2, minmax(0, 1fr));
49+
}
50+
4251
.main-content,
4352
.article-content,
4453
.section-content {
45-
grid-template-columns: repeat(var(--grid-columns), [col-start] 1fr);
4654
grid-gap: var(--grid-gutter);
55+
grid-template-columns: repeat(var(--grid-columns), [col-start] 1fr);
4756
grid-template-rows: minmax(calc(var(--leading) * 1em), max-content);
4857
}
4958

5059
.main-content,
5160
.section-content,
52-
.article-content {
61+
.article-content,
62+
.grid-row-mid {
5363
grid-auto-flow: row;
5464
row-gap: var(--space-m);
5565
}
5666

5767
.header-content,
58-
.footer-content {
68+
.footer-content,
69+
.grid-row-tight {
5970
grid-auto-flow: row;
6071
row-gap: var(--space-3xs-2xs);
6172
}
@@ -69,7 +80,6 @@ main > *,
6980
}
7081

7182
@media screen and (min-width: $screen-lg) {
72-
.main-content > *,
7383
.article-content > * {
7484
grid-column: col-start 1 / span 8;
7585
}

‎app/javascript/css/theme/code/monokai.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* Monkai theme generated by
3-
* $ bundle exec rougify style monokai > app/javascript/css-redesign/theme/colors/monokai.css
3+
* $ bundle exec rougify style monokai > app/javascript/css/theme/colors/monokai.css
44
*/
55

66
.highlight table td {

‎app/javascript/css/utilities.css

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,7 @@
350350
justify-content: space-between;
351351
}
352352

353-
.gap-0 {
353+
/* .gap-0 {
354354
gap: 0px;
355355
}
356356
@@ -395,7 +395,7 @@
395395
.gap-x-4 {
396396
-moz-column-gap: 1rem;
397397
column-gap: 1rem;
398-
}
398+
} */
399399

400400
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
401401
--tw-space-x-reverse: 0;
@@ -961,3 +961,17 @@ focus\:ring-0:focus {
961961
.emphasis {
962962
color: var(--joy-text-emphasis);
963963
}
964+
965+
.text-left {
966+
text-align: left;
967+
}
968+
969+
.text-right {
970+
text-align: right;
971+
}
972+
/* Custom utilities */
973+
974+
.py-3xl {
975+
padding-top: var(--space-3xl);
976+
padding-bottom: var(--space-3xl);
977+
}

0 commit comments

Comments
 (0)