Skip to content

Commit b3266bf

Browse files
author
Filip Johansson
committed
update post entry design
1 parent f552d17 commit b3266bf

14 files changed

Lines changed: 138 additions & 257 deletions

‎build.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,18 @@ const sortByDate = (a, b) => new Date(b.date) - new Date(a.date);
8080
const createPostListItem = (post) => {
8181
const description = converter.makeHtml(post.description);
8282
return `
83-
<li>
84-
<h3>${post.title}</h3>
85-
<p class="date">${post.date.toISOString().split("T").at(0)}</p>
86-
${description}
87-
<div class="button-link-wrapper">
88-
<a href="${post.fileName}" class="button-link">Read this post</a>
89-
</div>
90-
</li>`;
83+
<li>
84+
<fieldset>
85+
<legend>${post.date.toISOString().split("T").at(0)}</legend>
86+
87+
<h3>${post.title}</h3>
88+
${description}
89+
90+
<a href="${post.fileName}" class="button-link">Read post</a>
91+
92+
</fieldset>
93+
</li>
94+
`;
9195
};
9296

9397
try {

‎docs/css/index.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
ul {
2+
list-style-type: none;
3+
margin-left: 0;
4+
padding-left: 0;
5+
}
6+
7+
ul li {
8+
display: flex;
9+
flex-direction: column;
10+
}
11+
12+
ul li h3 {
13+
margin-top: 0;
14+
margin-bottom: 0;
15+
}
16+
17+
.date {
18+
font-weight: bold;
19+
font-size: 0.8rem;
20+
color: #222;
21+
margin: 0;
22+
}
23+
24+
.button-link {
25+
display: block;
26+
padding: 8px 16px;
27+
border-radius: 4px;
28+
background-color: #000;
29+
color: #fff;
30+
text-decoration: none;
31+
cursor: pointer;
32+
font-size: 16px;
33+
font-weight: 600;
34+
width: 100%;
35+
max-width: 500px;
36+
text-align: center;
37+
margin-top: 16px;
38+
}
39+
40+
.read-indicator {
41+
content: "";
42+
}

‎docs/css/post.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
display: flex;
3+
flex-direction: column;
4+
min-height: 100vh;
5+
}

‎docs/declare-with-iife.html‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,10 @@
1414
href="https://cdn.jsdelivr.net/npm/prismjs@v1/themes/prism.css"
1515
rel="stylesheet"
1616
/>
17+
18+
<link rel="stylesheet" href="css/post.css" />
1719
</head>
1820
<body>
19-
<style>
20-
body {
21-
display: flex;
22-
flex-direction: column;
23-
min-height: 100vh;
24-
}
25-
26-
main {
27-
flex: 1;
28-
}
29-
</style>
3021
<header>
3122
<nav>
3223
<a href="index.html">Blog</a>

‎docs/falsy-and-is-defined.html‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,10 @@
1414
href="https://cdn.jsdelivr.net/npm/prismjs@v1/themes/prism.css"
1515
rel="stylesheet"
1616
/>
17+
18+
<link rel="stylesheet" href="css/post.css" />
1719
</head>
1820
<body>
19-
<style>
20-
body {
21-
display: flex;
22-
flex-direction: column;
23-
min-height: 100vh;
24-
}
25-
26-
main {
27-
flex: 1;
28-
}
29-
</style>
3021
<header>
3122
<nav>
3223
<a href="index.html">Blog</a>

‎docs/general-reducer-action-switch.html‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,10 @@
1414
href="https://cdn.jsdelivr.net/npm/prismjs@v1/themes/prism.css"
1515
rel="stylesheet"
1616
/>
17+
18+
<link rel="stylesheet" href="css/post.css" />
1719
</head>
1820
<body>
19-
<style>
20-
body {
21-
display: flex;
22-
flex-direction: column;
23-
min-height: 100vh;
24-
}
25-
26-
main {
27-
flex: 1;
28-
}
29-
</style>
3021
<header>
3122
<nav>
3223
<a href="index.html">Blog</a>

‎docs/index.html‎

Lines changed: 59 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
href="https://cdn.jsdelivr.net/npm/prismjs@v1/themes/prism.css"
1515
rel="stylesheet"
1616
/>
17+
18+
<link rel="stylesheet" href="css/index.css" />
1719
</head>
1820
<body>
1921
<header>
@@ -25,60 +27,6 @@
2527
</nav>
2628
</header>
2729

28-
<style>
29-
body {
30-
display: flex;
31-
flex-direction: column;
32-
min-height: 100vh;
33-
}
34-
35-
main {
36-
flex: 1;
37-
}
38-
39-
ul {
40-
list-style-type: none;
41-
margin-left: 0;
42-
padding-left: 0;
43-
}
44-
45-
ul li {
46-
border-radius: 8px;
47-
padding: 32px;
48-
border: 1px solid rgba(0, 0, 0, 0.1);
49-
margin-bottom: 16px;
50-
display: flex;
51-
flex-direction: column;
52-
}
53-
54-
.date {
55-
font-weight: bold;
56-
font-size: 0.8rem;
57-
color: #222;
58-
margin: 0;
59-
}
60-
61-
.button-link-wrapper {
62-
display: flex;
63-
justify-content: flex-end;
64-
margin-top: 16px;
65-
}
66-
67-
.button-link {
68-
display: block;
69-
padding: 8px 16px;
70-
border-radius: 100px;
71-
background-color: #000;
72-
color: #fff;
73-
text-decoration: none;
74-
cursor: pointer;
75-
}
76-
77-
.read-indicator {
78-
content: "";
79-
}
80-
</style>
81-
8230
<main>
8331
<h1>The Chief Pig Makeup Artist</h1>
8432

@@ -103,68 +51,83 @@ <h1>The Chief Pig Makeup Artist</h1>
10351
<h2>Posts</h2>
10452
<ul>
10553
<li>
106-
<h3>IIFE as a way to avoid mutation</h3>
107-
<p class="date">2024-12-29</p>
108-
<p>
109-
A trick if you want to have pure conditional declaration of
110-
variables
111-
</p>
112-
<div class="button-link-wrapper">
113-
<a href="declare-with-iife.html" class="button-link"
114-
>Read this post</a
115-
>
116-
</div>
54+
<fieldset>
55+
<legend>2024-12-29</legend>
56+
57+
<h3>IIFE as a way to avoid mutation</h3>
58+
<p>
59+
A trick if you want to have pure conditional declaration of
60+
variables
61+
</p>
62+
63+
<a href="declare-with-iife.html" class="button-link">Read post</a>
64+
</fieldset>
11765
</li>
66+
11867
<li>
119-
<h3>Nullish coalescing operator</h3>
120-
<p class="date">2024-12-12</p>
121-
<p>Use <code>??</code> over <code>||</code></p>
122-
<div class="button-link-wrapper">
68+
<fieldset>
69+
<legend>2024-12-12</legend>
70+
71+
<h3>Nullish coalescing operator</h3>
72+
<p>Use <code>??</code> over <code>||</code></p>
73+
12374
<a href="nullish-coalescing-operator.html" class="button-link"
124-
>Read this post</a
75+
>Read post</a
12576
>
126-
</div>
77+
</fieldset>
12778
</li>
79+
12880
<li>
129-
<h3>Why falsiness is a bad idea</h3>
130-
<p class="date">2024-10-25</p>
131-
<p>Why this is a bad idea</p>
132-
<pre><code class="javascript language-javascript">if (myData) doSomething()
81+
<fieldset>
82+
<legend>2024-10-25</legend>
83+
84+
<h3>Why falsiness is a bad idea</h3>
85+
<p>Why this is a bad idea</p>
86+
<pre><code class="javascript language-javascript">if (myData) doSomething()
13387
</code></pre>
134-
<div class="button-link-wrapper">
88+
13589
<a href="falsy-and-is-defined.html" class="button-link"
136-
>Read this post</a
90+
>Read post</a
13791
>
138-
</div>
92+
</fieldset>
13993
</li>
94+
14095
<li>
141-
<h3>Javascript Emptiness</h3>
142-
<p class="date">2024-10-23</p>
143-
<pre><code class="javascript language-javascript">[].isEmpty() // true
96+
<fieldset>
97+
<legend>2024-10-23</legend>
98+
99+
<h3>Javascript Emptiness</h3>
100+
<pre><code class="javascript language-javascript">[].isEmpty() // true
144101
</code></pre>
145-
<div class="button-link-wrapper">
146-
<a href="is-empty.html" class="button-link">Read this post</a>
147-
</div>
102+
103+
<a href="is-empty.html" class="button-link">Read post</a>
104+
</fieldset>
148105
</li>
106+
149107
<li>
150-
<h3>General Reducer Action Switch</h3>
151-
<p class="date">2024-10-19</p>
152-
<pre><code class="javascript language-javascript">dispatch({ $set: { count: 1 } })
108+
<fieldset>
109+
<legend>2024-10-19</legend>
110+
111+
<h3>General Reducer Action Switch</h3>
112+
<pre><code class="javascript language-javascript">dispatch({ $set: { count: 1 } })
153113
</code></pre>
154-
<div class="button-link-wrapper">
114+
155115
<a href="general-reducer-action-switch.html" class="button-link"
156-
>Read this post</a
116+
>Read post</a
157117
>
158-
</div>
118+
</fieldset>
159119
</li>
120+
160121
<li>
161-
<h3>React reducer idea</h3>
162-
<p class="date">2024-10-19</p>
163-
<pre><code class="javascript language-javascript">dispatch(action1, action2, action3, ...)
122+
<fieldset>
123+
<legend>2024-10-19</legend>
124+
125+
<h3>React reducer idea</h3>
126+
<pre><code class="javascript language-javascript">dispatch(action1, action2, action3, ...)
164127
</code></pre>
165-
<div class="button-link-wrapper">
166-
<a href="reducer.html" class="button-link">Read this post</a>
167-
</div>
128+
129+
<a href="reducer.html" class="button-link">Read post</a>
130+
</fieldset>
168131
</li>
169132
</ul>
170133
</main>

‎docs/is-empty.html‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,10 @@
1414
href="https://cdn.jsdelivr.net/npm/prismjs@v1/themes/prism.css"
1515
rel="stylesheet"
1616
/>
17+
18+
<link rel="stylesheet" href="css/post.css" />
1719
</head>
1820
<body>
19-
<style>
20-
body {
21-
display: flex;
22-
flex-direction: column;
23-
min-height: 100vh;
24-
}
25-
26-
main {
27-
flex: 1;
28-
}
29-
</style>
3021
<header>
3122
<nav>
3223
<a href="index.html">Blog</a>

‎docs/nullish-coalescing-operator.html‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,10 @@
1414
href="https://cdn.jsdelivr.net/npm/prismjs@v1/themes/prism.css"
1515
rel="stylesheet"
1616
/>
17+
18+
<link rel="stylesheet" href="css/post.css" />
1719
</head>
1820
<body>
19-
<style>
20-
body {
21-
display: flex;
22-
flex-direction: column;
23-
min-height: 100vh;
24-
}
25-
26-
main {
27-
flex: 1;
28-
}
29-
</style>
3021
<header>
3122
<nav>
3223
<a href="index.html">Blog</a>

0 commit comments

Comments
 (0)