Skip to content

Commit 6cd74e2

Browse files
zeroedinzeroedin
authored
Merge pull request #2459 from patternfly/docs/blog-improvements
docs: fix blog layout and component headers
2 parents 3d443ae + abb882e commit 6cd74e2

File tree

7 files changed

+56
-43
lines changed

7 files changed

+56
-43
lines changed

‎.pfe.config.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"renderTitleInOverview": false,
3+
"site": {
4+
"renderTitleInOverview": false
5+
}
6+
}

‎docs/_includes/_nav.njk‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,9 @@
112112
</ul>
113113
</details>
114114
</li>
115+
<li class="site-navigation__item">
116+
<a class="site-navigation__link{% if page.url == "/blog/" %} site-navigation__link--active{% endif %}" href="/blog/">Blog</a>
117+
</li>
115118
<!-- <li class="site-navigation__item">
116119
<a class="site-navigation__link{% if page.url == "/about/" %} site-navigation__link--active{% endif %}" href="/about/">About PatternFly Elements</a>
117120
</li> -->

‎docs/_includes/layout-basic.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ layout: layout-base.njk
33
---
44
{% include '_nav.njk' %}
55
<main class="basic">
6-
{{ content | safe }}
6+
{{ content | safe }}
77
</main>
88
{% include '_foot.njk' %}

‎docs/_includes/layout-blog-index.njk‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,38 @@ layout: layout-base.njk
55

66

77
<main class="basic">
8-
<header class="band">
9-
<h1>{{ title }}</h1>
10-
</header>
11-
<section class="band">{% if content.trim().length %}
12-
<div id="content">{{ content | safe }}</div>{% endif %}{% for post in collections.blog %}
13-
<pf-card>
14-
<h2 slot="header">{{ post.data.title }}</h2>{% if post.data.tagline %}
15-
<p class="tagline">{{ post.data.tagline }}</p>{% endif %}
16-
{% if post.data.description %}
17-
{{ post.data.description }}
18-
{% endif %}
19-
<a class="cta" slot="footer" href="{{ post.data.page.url }}">Read Post</a>
20-
</pf-card>{% endfor %}
21-
</section>
8+
{{ content | safe }}
9+
10+
<div class="posts">
11+
{% for post in collections.blog | reverse %}
12+
<pf-card>
13+
<h2 slot="header">{{ post.data.title }}</h2>
14+
{% if post.data.tagline %}
15+
<p class="tagline"><a href="{{ post.data.page.url }}">{{ post.data.tagline }}</a></p>{% endif %}
16+
{% if post.data.description %}
17+
{{ post.data.description }}
18+
{% endif %}
19+
<a slot="footer" class="cta" href="{{ post.data.page.url }}">Read Post</a>
20+
<time slot="footer" datetime="{{ post.data.page.date }}">{{ post.data.page.date | prettyDate }}</time>
21+
</pf-card>
22+
{% endfor %}
23+
</div>
2224
</main>
2325

26+
2427
{% include '_foot.njk' %}
2528

2629
<style>
27-
section.band {
28-
display: grid;
29-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
30-
}
31-
32-
h1,
33-
#content {
34-
grid-column: -1/1;
35-
}
30+
.posts {
31+
display: grid;
32+
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
33+
padding: var(--pf-global--spacer--3xl, 4rem);
34+
gap: 2rem;
35+
}
36+
37+
pf-card::part(footer) {
38+
justify-content: space-between;
39+
align-items: center;
40+
}
3641
</style>
3742

‎docs/_includes/layout-blog.njk‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ layout: layout-base.njk
55

66
<main class="blog">
77
<header class="band header">
8-
<h1>{{ title }}</h1>{% if tagline %}
9-
<p class="tagline">{{ tagline }}</p>{% endif %}
8+
<h1>{{ title }}</h1>
9+
{% if tagline %}<p class="tagline">{{ tagline }}</p>{% endif %}
1010
<time datetime="{{ page.date }}">{{ page.date | prettyDate }}</time>
1111
</header>
1212

@@ -16,15 +16,16 @@ layout: layout-base.njk
1616
</aside>
1717

1818
{% band %}
19-
<details class="inline-toc">
20-
<summary>Contents</summary>
21-
{{- content | toc | safe -}}
22-
</details>
19+
<details class="inline-toc">
20+
<summary>Contents</summary>
21+
{{- content | toc | safe -}}
22+
</details>
2323
{% endband %}
2424

25-
{%- band -%}
25+
<section class="band">
2626
{{ content | safe }}
27-
{%- endband -%}
27+
</section>
28+
2829
</main>
2930

3031
{% include '_foot.njk' %}
@@ -67,10 +68,3 @@ layout: layout-base.njk
6768
6869
</script>
6970

70-
<style>
71-
main.blog > header.band {
72-
display: flex;
73-
align-items: baseline;
74-
justify-content: space-between;
75-
}
76-
</style>

‎docs/components/components.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,8 @@
1515
}
1616
---
1717

18+
<header class="band">
19+
<h1>{{element.title}}</h1>
20+
</header>
21+
1822
{% renderFile element.docsTemplatePath, element %}

‎docs/main.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -848,7 +848,8 @@ nav.toc li {
848848
display: grid;
849849
position: relative;
850850
grid-template-areas: 'header header' 'content toc';
851-
grid-template-columns: auto 300px;
851+
grid-template-columns: auto 18rem;
852+
grid-template-rows: min-content;
852853
}
853854

854855
main.blog > header.band {
@@ -857,6 +858,7 @@ nav.toc li {
857858

858859
main.blog > .block-toc {
859860
grid-area: toc;
861+
padding: 1rem 2rem;
860862
}
861863

862864
main.blog > .band:not(header) {
@@ -865,8 +867,7 @@ nav.toc li {
865867

866868
aside.block-toc > nav.toc {
867869
position: sticky;
868-
top: 60px;
869-
padding: 10px 16px;
870+
top: 126px;
870871
}
871872

872873
aside.block-toc > h2 {
@@ -884,7 +885,7 @@ nav.toc li {
884885
transition: opacity 0.2s ease-in-out;
885886
position: absolute;
886887
left: -1.2em;
887-
top: .2em;
888+
top: 0.35em;
888889
}
889890

890891
nav.toc .active::after {

0 commit comments

Comments
 (0)