Add the most recent post to the home page
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Kaan Barmore-Genç 2024-05-27 14:54:29 +00:00
parent ed82bbc721
commit 2d85ca331c
8 changed files with 120 additions and 71 deletions

View file

@ -18,5 +18,13 @@
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
"remoteUser": "root"
"remoteUser": "root",
"customizations": {
"vscode": {
"extensions": [
"svelte.svelte-vscode",
"esbenp.prettier-vscode"
]
}
}
}

8
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,8 @@
{
"recommendations": [
"svelte.svelte-vscode",
"ms-vscode-remote.remote-containers",
"esbenp.prettier-vscode",
"streetsidesoftware.code-spell-checker"
]
}

7
bgenc.net.code-workspace Normal file
View file

@ -0,0 +1,7 @@
{
"folders": [
{
"path": "."
}
]
}

View file

@ -30,12 +30,15 @@ export async function load() {
}),
);
const mostRecentPost = _.maxBy(posts, ({ meta }) => meta.date);
const highlightedPosts = _.reverse(
_.sortBy(
posts.filter((post) => post.meta.highlighted),
posts.filter(
(post) => post.meta.highlighted && (!mostRecentPost || post.path !== mostRecentPost.path),
),
({ meta }) => meta.date,
),
);
).slice(0, 4);
return { highlightedPosts };
return { highlightedPosts, mostRecentPost };
}

View file

@ -12,6 +12,7 @@
import MastodonLogo from 'phosphor-svelte/lib/MastodonLogo';
import BlogPostList from './posts/[[page=integer]]/BlogPostList.svelte';
import Button from '$lib/Button.svelte';
import BlogPost from './posts/[[page=integer]]/BlogPost.svelte';
export let data;
</script>
@ -101,6 +102,13 @@
</ul>
</section>
{#if data.mostRecentPost}
<section class="most-recent">
<h2>Most Recent Blog Post</h2>
<BlogPost showYear showReadingTime={false} post={data.mostRecentPost} />
</section>
{/if}
{#if data.highlightedPosts.length > 0}
<section class="highlighted">
<h2>Highlighted Blog Posts</h2>
@ -122,7 +130,7 @@
clip-path: var(--clip-path);
}
.highlighted {
section {
margin-top: 4rem;
}

View file

@ -2,6 +2,7 @@
title: 'Adding single click dev environment links to your open source project for easy contributions'
date: 2024-05-27T05:10:06Z
description: 'See how you can streamline contributions and onboarding by leveraging DevContainers and cloud dev environments - a one-click setup that lets new folks dive right in!'
highlighted: true
---
[I have been using DevContainers](/2023.02.10.why-use-devcontainer/) a lot. If
@ -15,6 +16,7 @@ containers, and runs any commands you defined in the configuration to set things
up.
This comes with many benefits:
- Assuming you deploy with containers, your development environment can more
closely match your production environment.
- There are no "works on my machine" issues, everyone has the same development
@ -63,7 +65,6 @@ To do so, simply add the following links to your Readme, replacing `<Owner>` and
Codespaces, these are not restricted to Github and
can be used with other forge services like [Gitlab](https://about.gitlab.com) or [Codeberg](https://codeberg.org).
```md
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/<Owner>/<Repo>)
[![Open in DevPod](https://devpod.sh/assets/open-in-devpod.svg)](https://devpod.sh/open#https://github.com/<Owner>/<Repo>)

View file

@ -0,0 +1,74 @@
<script lang="ts">
import { format } from 'date-fns';
import type { Post } from './+page.server';
export let showYear: boolean = false;
export let showReadingTime: boolean = true;
export let post: Post;
</script>
<a href={`/${post.path}`}>
<li>
<div>
<h5 class="post-title">
{post.meta.title}
</h5>
{#if post.meta.description}
<p class="description">{post.meta.description}</p>
{/if}
</div>
<div class="meta">
<time datetime={post.meta.date}>
{format(new Date(post.meta.date), showYear ? 'MMMM d, yyyy' : 'MMMM d')}
</time>
{#if showReadingTime}
<div>{post.readingTime.words} words, {post.readingTime.text}</div>
{/if}
</div>
</li>
</a>
<style lang="scss">
@import '../../../vars';
/* Restore the color of everything under the post links, except the titles */
a {
color: $color-text;
text-decoration: none;
.post-title {
color: $color-primary;
}
&:hover .post-title {
text-decoration-color: unset;
}
}
time {
width: 8rem;
}
.post-title {
text-decoration: underline;
text-decoration-color: transparent;
transition: all var(--animation-speed) var(--animation-type);
}
li {
list-style-type: none;
font-weight: normal;
}
.description {
font-size: 0.9rem;
margin-top: -1.4rem;
}
.meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: 0.9rem;
opacity: 0.8;
}
</style>

View file

@ -1,7 +1,7 @@
<script lang="ts">
import { format } from 'date-fns';
import type { Post } from './+page.server';
import { readingTime } from 'reading-time-estimator';
import BlogPost from './BlogPost.svelte';
export let showYear: boolean = false;
export let showReadingTime: boolean = true;
@ -10,60 +10,12 @@
<ol class="posts">
{#each posts as post}
<a href={`/${post.path}`}>
<li>
<div>
<h5 class="post-title">
{post.meta.title}
</h5>
{#if post.meta.description}
<p class="description">{post.meta.description}</p>
{/if}
</div>
<div class="meta">
<time datetime={post.meta.date}>
{format(new Date(post.meta.date), showYear ? 'MMMM d, yyyy' : 'MMMM d')}
</time>
{#if showReadingTime}
<div>{post.readingTime.words} words, {post.readingTime.text}</div>
{/if}
</div>
</li>
</a>
<BlogPost {post} {showYear} {showReadingTime} />
{/each}
</ol>
<style lang="scss">
@import '../../../vars';
/* Restore the color of everything under the post links, except the titles */
.posts a {
color: $color-text;
}
.posts a .post-title {
color: $color-primary;
}
time {
width: 8rem;
}
.post-title {
text-decoration: underline;
text-decoration-color: transparent;
transition: all var(--animation-speed) var(--animation-type);
}
a:hover .post-title {
text-decoration-color: unset;
}
.posts a {
text-decoration: none;
}
li {
list-style-type: none;
font-weight: normal;
}
.posts {
display: flex;
flex-direction: column;
@ -72,16 +24,4 @@
.posts {
gap: 1.5rem;
}
.description {
font-size: 0.9rem;
margin-top: -1.4rem;
}
.meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: 0.9rem;
opacity: 0.8;
}
</style>