Skip to content

Commit e3df858

Browse files
Thomas StrombergThomas Stromberg
Thomas Stromberg
authored and
Thomas Stromberg
committed
add blog back
1 parent 02ae003 commit e3df858

File tree

10 files changed

+615
-0
lines changed

10 files changed

+615
-0
lines changed

‎src/_layouts/base.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
<ul class="nav-links">
3535
<li><a href="/about/">about</a></li>
3636
<li><a href="/products/">products</a></li>
37+
<li><a href="/blog/">blog</a></li>
3738
<li><a href="/support/">support</a></li>
3839
<li><a href="/security/">security</a></li>
3940
<li><a href="/opensource/">opensource</a></li>

‎src/_layouts/post.njk‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: base.njk
3+
---
4+
5+
<section class="blog-post-content">
6+
<div class="blog-post-content__container">
7+
<header class="blog-post-content__header">
8+
<h1 class="blog-post-content__title">{{ title }}</h1>
9+
<div class="blog-post-content__meta">
10+
<time class="blog-post-content__date">{{ date }}</time>
11+
{% if author %}
12+
<span class="blog-post-content__author">by {{ author }}</span>
13+
{% endif %}
14+
</div>
15+
</header>
16+
17+
<article class="blog-post-content__body">
18+
{{ content | safe }}
19+
</article>
20+
21+
<footer style="margin-top: 4rem; padding-top: 2rem; border-top: 4px solid #000;">
22+
<a href="/blog/" style="font-weight: 700; color: #000; text-decoration: none;">← Back to blog</a>
23+
</footer>
24+
</div>
25+
</section>

‎src/assets/css/style.css‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5764,3 +5764,320 @@ hr.text-separator {
57645764
padding: calc(var(--space) * 3);
57655765
}
57665766
}
5767+
5768+
/* =============================================================================
5769+
Blog Styles
5770+
============================================================================= */
5771+
5772+
/* Blog Hero */
5773+
.blog-hero {
5774+
padding: calc(var(--space) * 6) calc(var(--space) * 3) calc(var(--space) * 10) calc(var(--space) * 3);
5775+
background: var(--black);
5776+
color: var(--white);
5777+
}
5778+
5779+
@media (min-width: 1024px) {
5780+
.blog-hero {
5781+
padding: calc(var(--space) * 6) calc(var(--space) * 6) calc(var(--space) * 10) calc(var(--space) * 6);
5782+
}
5783+
}
5784+
5785+
.blog-hero__container {
5786+
max-width: 80rem;
5787+
margin: 0 auto;
5788+
}
5789+
5790+
.blog-hero__title {
5791+
font-size: clamp(48px, 6vw, 72px);
5792+
font-weight: 900;
5793+
margin-top: 0 !important;
5794+
margin-bottom: calc(var(--space) * 3);
5795+
text-transform: uppercase;
5796+
letter-spacing: -1px;
5797+
}
5798+
5799+
.blog-hero__subtitle {
5800+
font-size: clamp(18px, 2.5vw, 24px);
5801+
font-weight: 400;
5802+
opacity: 0.9;
5803+
}
5804+
5805+
/* Blog Content */
5806+
.blog-content {
5807+
padding: calc(var(--space) * 8) calc(var(--space) * 3);
5808+
background: var(--gray-50);
5809+
}
5810+
5811+
@media (min-width: 1024px) {
5812+
.blog-content {
5813+
padding: calc(var(--space) * 8) calc(var(--space) * 6);
5814+
}
5815+
}
5816+
5817+
.blog-content__container {
5818+
max-width: 80rem;
5819+
margin: 0 auto;
5820+
display: grid;
5821+
grid-template-columns: 1fr;
5822+
gap: calc(var(--space) * 6);
5823+
}
5824+
5825+
@media (min-width: 1024px) {
5826+
.blog-content__container {
5827+
grid-template-columns: 2fr 1fr;
5828+
}
5829+
}
5830+
5831+
.blog-content__posts {
5832+
display: flex;
5833+
flex-direction: column;
5834+
gap: calc(var(--space) * 4);
5835+
}
5836+
5837+
/* Blog Post Card */
5838+
.blog-post-card {
5839+
background: var(--white);
5840+
border: 4px solid var(--black);
5841+
padding: calc(var(--space) * 4);
5842+
box-shadow: var(--shadow-brutal);
5843+
}
5844+
5845+
.blog-post-card__meta {
5846+
display: flex;
5847+
flex-wrap: wrap;
5848+
gap: calc(var(--space) * 2);
5849+
margin-bottom: calc(var(--space) * 2);
5850+
font-size: 14px;
5851+
color: var(--gray-600);
5852+
}
5853+
5854+
.blog-post-card__date {
5855+
font-weight: 600;
5856+
}
5857+
5858+
.blog-post-card__author::before {
5859+
content: "•";
5860+
margin-right: calc(var(--space) * 2);
5861+
}
5862+
5863+
.blog-post-card__title {
5864+
font-size: clamp(24px, 3vw, 32px);
5865+
font-weight: 900;
5866+
margin-bottom: calc(var(--space) * 2);
5867+
line-height: 1.2;
5868+
}
5869+
5870+
.blog-post-card__title a {
5871+
color: var(--black);
5872+
text-decoration: none;
5873+
}
5874+
5875+
.blog-post-card__title a:hover {
5876+
color: var(--yellow-dark);
5877+
}
5878+
5879+
.blog-post-card__excerpt {
5880+
font-size: 18px;
5881+
line-height: 1.6;
5882+
color: var(--gray-700);
5883+
margin-bottom: calc(var(--space) * 3);
5884+
}
5885+
5886+
.blog-post-card__link {
5887+
display: inline-block;
5888+
font-weight: 700;
5889+
color: var(--black);
5890+
text-decoration: none;
5891+
font-size: 16px;
5892+
}
5893+
5894+
.blog-post-card__link:hover {
5895+
color: var(--yellow-dark);
5896+
}
5897+
5898+
/* Blog Sidebar */
5899+
.blog-sidebar {
5900+
display: flex;
5901+
flex-direction: column;
5902+
gap: calc(var(--space) * 4);
5903+
}
5904+
5905+
.blog-sidebar__card {
5906+
background: var(--white);
5907+
border: 4px solid var(--black);
5908+
padding: calc(var(--space) * 4);
5909+
box-shadow: var(--shadow-brutal);
5910+
}
5911+
5912+
.blog-sidebar__title {
5913+
font-size: 20px;
5914+
font-weight: 900;
5915+
margin-bottom: calc(var(--space) * 2);
5916+
color: var(--black);
5917+
}
5918+
5919+
.blog-sidebar__text {
5920+
font-size: 16px;
5921+
line-height: 1.6;
5922+
color: var(--gray-700);
5923+
margin-bottom: calc(var(--space) * 3);
5924+
}
5925+
5926+
.blog-sidebar__link {
5927+
display: inline-flex;
5928+
align-items: center;
5929+
gap: calc(var(--space) * 1);
5930+
padding: calc(var(--space) * 2) calc(var(--space) * 3);
5931+
background: var(--black);
5932+
color: var(--yellow);
5933+
border: 4px solid var(--black);
5934+
font-weight: 700;
5935+
text-decoration: none;
5936+
box-shadow: var(--shadow-brutal);
5937+
transition: all 0.2s;
5938+
}
5939+
5940+
.blog-sidebar__link:hover {
5941+
background: var(--yellow);
5942+
color: var(--black);
5943+
transform: translate(2px, 2px);
5944+
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
5945+
}
5946+
5947+
/* Blog Post Content */
5948+
.blog-post-content {
5949+
padding: calc(var(--space) * 8) calc(var(--space) * 3);
5950+
background: var(--white);
5951+
}
5952+
5953+
@media (min-width: 1024px) {
5954+
.blog-post-content {
5955+
padding: calc(var(--space) * 8) calc(var(--space) * 6);
5956+
}
5957+
}
5958+
5959+
.blog-post-content__container {
5960+
max-width: 48rem;
5961+
margin: 0 auto;
5962+
}
5963+
5964+
.blog-post-content__header {
5965+
margin-bottom: calc(var(--space) * 4);
5966+
padding-bottom: calc(var(--space) * 4);
5967+
border-bottom: 4px solid var(--black);
5968+
}
5969+
5970+
.blog-post-content__title {
5971+
font-size: clamp(32px, 5vw, 48px);
5972+
font-weight: 900;
5973+
margin-bottom: calc(var(--space) * 3);
5974+
line-height: 1.2;
5975+
}
5976+
5977+
.blog-post-content__meta {
5978+
display: flex;
5979+
flex-wrap: wrap;
5980+
gap: calc(var(--space) * 2);
5981+
font-size: 16px;
5982+
color: var(--gray-600);
5983+
}
5984+
5985+
.blog-post-content__date {
5986+
font-weight: 600;
5987+
}
5988+
5989+
.blog-post-content__author::before {
5990+
content: "•";
5991+
margin-right: calc(var(--space) * 2);
5992+
}
5993+
5994+
.blog-post-content__body h2 {
5995+
font-size: clamp(24px, 3vw, 32px);
5996+
font-weight: 900;
5997+
margin: calc(var(--space) * 6) 0 calc(var(--space) * 3);
5998+
line-height: 1.3;
5999+
}
6000+
6001+
.blog-post-content__body h3 {
6002+
font-size: clamp(20px, 2.5vw, 24px);
6003+
font-weight: 700;
6004+
margin: calc(var(--space) * 4) 0 calc(var(--space) * 2);
6005+
line-height: 1.4;
6006+
}
6007+
6008+
.blog-post-content__body p {
6009+
font-size: 18px;
6010+
line-height: 1.7;
6011+
margin-bottom: calc(var(--space) * 3);
6012+
color: var(--gray-800);
6013+
}
6014+
6015+
.blog-post-content__body a {
6016+
color: var(--black);
6017+
font-weight: 600;
6018+
text-decoration: underline;
6019+
}
6020+
6021+
.blog-post-content__body a:hover {
6022+
color: var(--yellow-dark);
6023+
}
6024+
6025+
.blog-post-content__body ul,
6026+
.blog-post-content__body ol {
6027+
font-size: 18px;
6028+
line-height: 1.7;
6029+
margin-bottom: calc(var(--space) * 3);
6030+
padding-left: calc(var(--space) * 4);
6031+
}
6032+
6033+
.blog-post-content__body li {
6034+
margin-bottom: calc(var(--space) * 1);
6035+
}
6036+
6037+
.blog-post-content__body code {
6038+
background: var(--gray-100);
6039+
padding: 2px 6px;
6040+
border-radius: 3px;
6041+
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
6042+
font-size: 16px;
6043+
}
6044+
6045+
.blog-post-content__body pre {
6046+
background: var(--gray-900);
6047+
color: var(--white);
6048+
padding: calc(var(--space) * 3);
6049+
border: 4px solid var(--black);
6050+
overflow-x: auto;
6051+
margin-bottom: calc(var(--space) * 3);
6052+
}
6053+
6054+
.blog-post-content__body pre code {
6055+
background: none;
6056+
padding: 0;
6057+
border-radius: 0;
6058+
color: var(--white);
6059+
}
6060+
6061+
.blog-post-content__body hr {
6062+
border: none;
6063+
border-top: 4px solid var(--black);
6064+
margin: calc(var(--space) * 6) 0;
6065+
}
6066+
6067+
.blog-post-content__body blockquote {
6068+
border-left: 4px solid var(--yellow);
6069+
padding-left: calc(var(--space) * 3);
6070+
margin: calc(var(--space) * 4) 0;
6071+
font-style: italic;
6072+
color: var(--gray-700);
6073+
}
6074+
6075+
@media (max-width: 768px) {
6076+
.blog-hero__title {
6077+
font-size: 36px;
6078+
}
6079+
6080+
.blog-content__container {
6081+
grid-template-columns: 1fr;
6082+
}
6083+
}

‎src/blog/blog.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"layout": "post.njk",
3+
"tags": "post",
4+
"permalink": "/blog/{{ title | slugify }}/"
5+
}

‎src/blog/feed.xml.njk‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
permalink: /blog/feed.xml
3+
eleventyExcludeFromCollections: true
4+
---
5+
<?xml version="1.0" encoding="utf-8"?>
6+
<feed xmlns="http://www.w3.org/2005/Atom">
7+
<title>codeGROOVE Blog</title>
8+
<subtitle>Updates, insights, and stories from the codeGROOVE team</subtitle>
9+
<link href="https://codegroove.dev/blog/feed.xml" rel="self"/>
10+
<link href="https://codegroove.dev/blog/"/>
11+
<updated>{{ (collections.post | reverse)[0].date }}</updated>
12+
<id>https://codegroove.dev/blog/</id>
13+
<author>
14+
<name>codeGROOVE Team</name>
15+
<email>move-faster@codegroove.dev</email>
16+
</author>
17+
{%- for post in collections.post | reverse -%}
18+
{% if loop.index <= 20 %}
19+
<entry>
20+
<title>{{ post.data.title | escape }}</title>
21+
<link href="https://codegroove.dev{{ post.url }}"/>
22+
<updated>{{ post.date }}</updated>
23+
<id>https://codegroove.dev{{ post.url }}</id>
24+
<content type="html">{{ post.templateContent | escape }}</content>
25+
</entry>
26+
{% endif %}
27+
{%- endfor -%}
28+
</feed>

0 commit comments

Comments
 (0)