Skip to content

Commit f36b991

Browse files
andygrunwaldandygrunwald
authored
Merge pull request #278 from sourcectl/refactor/news-post-preview-dedup
refactor: deduplicate NewsPostPreview even/odd rendering
2 parents 2626153 + e3f7e19 commit f36b991

1 file changed

Lines changed: 31 additions & 61 deletions

File tree

‎src/components/NewsPostPreview.astro‎

Lines changed: 31 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -11,66 +11,36 @@ import { formatDateWithoutWeekday } from '../scripts/date.js';
1111
1212
const { entry, n } = Astro.props;
1313
const { frontmatter } = entry;
14-
---
1514
16-
{
17-
n % 2 == 0 && (
18-
<div class="flex flex-wrap -mx-4 mb-20">
19-
<div class="w-full lg:w-1/2 px-4 lg:pr-20 lg:pt-4 order-1 lg:order-0">
20-
<span class="inline-block py-1 px-3 uppercase text-xs font-semibold bg-red-50 rounded-full text-red-600">
21-
<time class="date" datetime={frontmatter.pubDate}>
22-
{formatDateWithoutWeekday(frontmatter.pubDate)}
23-
</time>
24-
</span>
25-
<h3 class="my-4 text-xl md:text-2xl font-bold font-heading">
26-
<a href={entry.url} title={frontmatter.title}>
27-
{frontmatter.title}
28-
</a>
29-
</h3>
30-
<p class="mb-4 text-sm md:text-base leading-loose text-blueGray-500">{frontmatter.description}</p>
31-
<a class="text-base font-semibold text-sourcectl-orange" href={entry.url} title={frontmatter.title}>
32-
<span>Read More</span>
33-
<svg class="inline-block w-4 h-4 ml-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
34-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
35-
</svg>
36-
</a>
37-
</div>
38-
<div class="w-full lg:w-1/2 px-4 mb-8 order-0 lg:order-1">
39-
<a href={entry.url} title={frontmatter.title}>
40-
<img class="w-full h-80 object-cover rounded" src={frontmatter.coverImage} alt={frontmatter.title} title={frontmatter.title} />
41-
</a>
42-
</div>
43-
</div>
44-
)
45-
}
15+
const isEven = n % 2 === 0;
16+
const textPadding = isEven ? 'lg:pr-20' : 'lg:pl-20';
17+
const textOrder = isEven ? 'order-1 lg:order-0' : 'order-1';
18+
const imageOrder = isEven ? 'order-0 lg:order-1' : 'order-0';
19+
---
4620

47-
{
48-
n % 2 > 0 && (
49-
<div class="flex flex-wrap -mx-4 mb-20">
50-
<div class="w-full lg:w-1/2 px-4 lg:pl-20 lg:pt-4 order-1">
51-
<span class="inline-block py-1 px-3 uppercase text-xs font-semibold bg-red-50 rounded-full text-red-600">
52-
<time class="date" datetime={frontmatter.pubDate}>
53-
{formatDateWithoutWeekday(frontmatter.pubDate)}
54-
</time>
55-
</span>
56-
<h3 class="my-4 text-xl md:text-2xl font-bold font-heading">
57-
<a href={entry.url} title={frontmatter.title}>
58-
{frontmatter.title}
59-
</a>
60-
</h3>
61-
<p class="mb-4 text-sm md:text-base leading-loose text-blueGray-500">{frontmatter.description}</p>
62-
<a class="text-base font-semibold text-sourcectl-orange" href={entry.url} title={frontmatter.title}>
63-
<span>Read More</span>
64-
<svg class="inline-block w-4 h-4 ml-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
65-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
66-
</svg>
67-
</a>
68-
</div>
69-
<div class="w-full lg:w-1/2 px-4 mb-8 order-0">
70-
<a href={entry.url} title={frontmatter.title}>
71-
<img class="w-full h-80 object-cover rounded" src={frontmatter.coverImage} alt={frontmatter.title} title={frontmatter.title} />
72-
</a>
73-
</div>
74-
</div>
75-
)
76-
}
21+
<div class="flex flex-wrap -mx-4 mb-20">
22+
<div class={`w-full lg:w-1/2 px-4 ${textPadding} lg:pt-4 ${textOrder}`}>
23+
<span class="inline-block py-1 px-3 uppercase text-xs font-semibold bg-red-50 rounded-full text-red-600">
24+
<time class="date" datetime={frontmatter.pubDate}>
25+
{formatDateWithoutWeekday(frontmatter.pubDate)}
26+
</time>
27+
</span>
28+
<h3 class="my-4 text-xl md:text-2xl font-bold font-heading">
29+
<a href={entry.url} title={frontmatter.title}>
30+
{frontmatter.title}
31+
</a>
32+
</h3>
33+
<p class="mb-4 text-sm md:text-base leading-loose text-blueGray-500">{frontmatter.description}</p>
34+
<a class="text-base font-semibold text-sourcectl-orange" href={entry.url} title={frontmatter.title}>
35+
<span>Read More</span>
36+
<svg class="inline-block w-4 h-4 ml-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
37+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
38+
</svg>
39+
</a>
40+
</div>
41+
<div class={`w-full lg:w-1/2 px-4 mb-8 ${imageOrder}`}>
42+
<a href={entry.url} title={frontmatter.title}>
43+
<img class="w-full h-80 object-cover rounded" src={frontmatter.coverImage} alt={frontmatter.title} title={frontmatter.title} />
44+
</a>
45+
</div>
46+
</div>

0 commit comments

Comments
 (0)