Skip to content

Commit de953ce

Browse files
michaellambgelomichaellambgelo
committed
add Newsletter page and navbar button
1 parent 01091b0 commit de953ce

File tree

5 files changed

+181
-22
lines changed

5 files changed

+181
-22
lines changed

‎_includes/body/sections/header/page.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
{% if page.title or page.subtitle or site.description %}
2-
{% assign header_page_html = null %}
3-
{% capture header_page_html %}
4-
<div class="page-header">
5-
{% if page.title %}
6-
<h1>{{ page.title }}</h1>
7-
{% elsif site.description %}
8-
<h1>{{ site.description }}</h1>
9-
{% endif %}
1+
{% unless page.hide_title %}
2+
{% if page.title or page.subtitle or site.description %}
3+
{% assign header_page_html = null %}
4+
{% capture header_page_html %}
5+
<div class="page-header">
6+
{% if page.title %}
7+
<h1>{{ page.title }}</h1>
8+
{% elsif site.description %}
9+
<h1>{{ site.description }}</h1>
10+
{% endif %}
1011

11-
{% if page.subtitle %}
12-
<h4>{{ page.subtitle }}</h4>
13-
{% endif %}
14-
</div>
15-
{% endcapture %}
16-
{{ header_page_html | strip_newlines | remove:' ' }}
17-
{% endif %}
12+
{% if page.subtitle %}
13+
<h4>{{ page.subtitle }}</h4>
14+
{% endif %}
15+
</div>
16+
{% endcapture %}
17+
{{ header_page_html | strip_newlines | remove:' ' }}
18+
{% endif %}
19+
{% endunless %}

‎_includes/body/sections/navbar/pages.html‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,35 @@
55
{% for pages_p in site.pages %}
66
{% if pages_p.order == pages_order %}
77
{% unless pages_p.exclude %}
8-
<li>
9-
<a href="{{site.url}}{{ pages_p.url }}">{{ pages_p.title }}</a>
10-
</li>
8+
{% if pages_p.title == "Newsletter" %}
9+
<li>
10+
<a href="{{site.url}}{{ pages_p.url }}" class="newsletter-nav-btn" style="background-color: #374151; color: white !important; border-radius: 4px; padding: 8px 16px; margin: 6px 4px; transition: background-color 0.2s;" onmouseover="this.style.backgroundColor='#1f2937'" onmouseout="this.style.backgroundColor='#374151'">
11+
📧 {{ pages_p.title }}
12+
</a>
13+
</li>
14+
{% else %}
15+
<li>
16+
<a href="{{site.url}}{{ pages_p.url }}">{{ pages_p.title }}</a>
17+
</li>
18+
{% endif %}
1119
{% endunless %}
1220
{% endif %}
1321
{% endfor %}
1422
{% endfor %}
1523
{% for pages_p_null in site.pages %}
1624
{% if pages_p_null.order == null %}
1725
{% unless pages_p_null.exclude %}
18-
<li>
19-
<a href="{{site.url}}{{ pages_p_null.url }}">{{ pages_p_null.title }}</a>
20-
</li>
26+
{% if pages_p_null.title == "Newsletter" %}
27+
<li>
28+
<a href="{{site.url}}{{ pages_p_null.url }}" class="newsletter-nav-btn" style="background-color: #374151; color: white !important; border-radius: 4px; padding: 8px 16px; margin: 6px 4px; transition: background-color 0.2s;" onmouseover="this.style.backgroundColor='#1f2937'" onmouseout="this.style.backgroundColor='#374151'">
29+
📧 {{ pages_p_null.title }}
30+
</a>
31+
</li>
32+
{% else %}
33+
<li>
34+
<a href="{{site.url}}{{ pages_p_null.url }}">{{ pages_p_null.title }}</a>
35+
</li>
36+
{% endif %}
2137
{% endunless %}
2238
{% endif %}
2339
{% endfor %}

‎_layouts/newsletter.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
{% assign layout_newsletter_html = null %}
3+
{% capture layout_newsletter_html %}
4+
<html lang="en">
5+
{% include head/page.html %}
6+
<body>
7+
{% include body/sections/navbar.html %}
8+
{% include body/sections/alerts_and_notices/site.html %}
9+
<div class="container">
10+
<div class="row">
11+
<div class="span12">
12+
{% include body/sections/header/page.html %}
13+
{% include body/sections/alerts_and_notices/page.html %}
14+
{{ content }}
15+
</div>
16+
</div>
17+
{% include body/sections/footer.html %}
18+
</div>
19+
{% include body/sections/javascript.html %}
20+
</body>
21+
22+
<!-- HTML Meta Tags -->
23+
<title>{{ page.title }} - Michael Lamb Blog</title>
24+
<meta name="description" content="Subscribe to the Michael Lamb newsletter for the latest tech posts, tutorials, and insights">
25+
26+
<!-- Facebook Meta Tags -->
27+
<meta property="og:url" content="https://michaellamb.dev/newsletter.html">
28+
<meta property="og:type" content="website">
29+
<meta property="og:title" content="{{ page.title }} - Michael Lamb Blog">
30+
<meta property="og:description" content="Subscribe to the Michael Lamb newsletter for the latest tech posts, tutorials, and insights">
31+
<meta property="og:image" content="https://michaellamb.dev/seo/default.png">
32+
33+
<!-- Twitter Meta Tags -->
34+
<meta name="twitter:card" content="summary_large_image">
35+
<meta property="twitter:domain" content="michaellamb.dev">
36+
<meta property="twitter:url" content="https://michaellamb.dev/newsletter.html">
37+
<meta name="twitter:title" content="{{ page.title }} - Michael Lamb Blog">
38+
<meta name="twitter:description" content="Subscribe to the Michael Lamb newsletter for the latest tech posts, tutorials, and insights">
39+
<meta name="twitter:image" content="https://michaellamb.dev/seo/default.png">
40+
41+
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
42+
43+
</html>
44+
{% endcapture %}
45+
{{ layout_newsletter_html | remove:' ' }}

‎css/newsletter.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,40 @@
6868
transform: translateY(0) !important;
6969
}
7070

71+
/* Newsletter Navigation Button */
72+
.newsletter-nav-btn {
73+
background-color: #374151 !important;
74+
color: white !important;
75+
border-radius: 4px !important;
76+
padding: 8px 16px !important;
77+
margin: 6px 4px !important;
78+
transition: background-color 0.2s !important;
79+
text-decoration: none !important;
80+
}
81+
82+
.newsletter-nav-btn:hover {
83+
background-color: #1f2937 !important;
84+
color: white !important;
85+
text-decoration: none !important;
86+
}
87+
88+
/* Newsletter Page Styles */
89+
.newsletter-page .well {
90+
background-color: #ffffff;
91+
border: 1px solid #e2e8f0;
92+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
93+
}
94+
95+
.newsletter-benefits ul {
96+
list-style: none;
97+
padding-left: 0;
98+
}
99+
100+
.newsletter-benefits li {
101+
margin-bottom: 10px;
102+
padding-left: 0;
103+
}
104+
71105
@media (max-width: 768px) {
72106
.newsletter-container {
73107
padding: 2rem;
@@ -78,4 +112,9 @@
78112
font-size: 1.5rem;
79113
line-height: 2rem;
80114
}
115+
116+
.newsletter-nav-btn {
117+
padding: 6px 12px !important;
118+
font-size: 14px !important;
119+
}
81120
}

‎newsletter.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
layout: newsletter
3+
title: Newsletter
4+
order: 1
5+
image: "/seo/default.png"
6+
hide_title: true
7+
---
8+
9+
<div class="newsletter-page">
10+
<div class="row">
11+
<div class="span8 offset2">
12+
<div class="well" style="text-align: center; padding: 40px;">
13+
<h1 style="margin-bottom: 30px;">Stay connected with michaellamb.dev</h1>
14+
15+
<p style="font-size: 1.2em; margin-bottom: 30px; color: #666;">
16+
Get the latest from Michael Lamb sent directly to your inbox.
17+
Join the community of developers, tech enthusiasts, and anyone interested in what Michael cares about.
18+
</p>
19+
20+
<div class="newsletter-benefits" style="text-align: left; margin: 30px 0;">
21+
<h3 style="text-align: center; margin-bottom: 20px;">What you'll get:</h3>
22+
<ul style="font-size: 1.1em; line-height: 1.8;">
23+
<li>📧 Daily digest of new blog posts</li>
24+
<li>💡 Insights from my active development work</li>
25+
<li>📅 News about local and online events</li>
26+
<li>✍️ Things written by a human who writes a lot</li>
27+
</ul>
28+
</div>
29+
30+
<div class="newsletter-form-container" style="background: #f8f9fa; padding: 30px; border-radius: 8px; margin: 30px 0;">
31+
<form action="https://hakanai.io/campaign/33c130d9-115d-4297-9a4f-543ef77b3330/subscribe" method="get" style="max-width: 400px; margin: 0 auto;">
32+
<div class="form-group" style="margin-bottom: 20px;">
33+
<input name="email"
34+
autocomplete="email"
35+
type="email"
36+
placeholder="Enter your email address"
37+
class="newsletter-input"
38+
style="width: 100%; padding: 15px; font-size: 16px; border: 2px solid #ddd; border-radius: 6px; box-sizing: border-box;"
39+
required>
40+
</div>
41+
<button type="submit"
42+
class="newsletter-button"
43+
style="width: 100%; padding: 15px; font-size: 16px; font-weight: bold; color: white; background-color: #374151; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s;"
44+
onmouseover="this.style.backgroundColor='#1f2937'"
45+
onmouseout="this.style.backgroundColor='#374151'">
46+
Stay in touch with Michael
47+
</button>
48+
</form>
49+
</div>
50+
51+
<p style="font-size: 0.9em; color: #888; margin-top: 20px;">
52+
No spam, ever. Unsubscribe at any time. Powered by <a href="https://hakanai.io" target="_blank">Hakanai</a>.
53+
</p>
54+
</div>
55+
</div>
56+
</div>
57+
</div>

0 commit comments

Comments
 (0)