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": {}, // "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. // 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( const highlightedPosts = _.reverse(
_.sortBy( _.sortBy(
posts.filter((post) => post.meta.highlighted), posts.filter(
(post) => post.meta.highlighted && (!mostRecentPost || post.path !== mostRecentPost.path),
),
({ meta }) => meta.date, ({ 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 MastodonLogo from 'phosphor-svelte/lib/MastodonLogo';
import BlogPostList from './posts/[[page=integer]]/BlogPostList.svelte'; import BlogPostList from './posts/[[page=integer]]/BlogPostList.svelte';
import Button from '$lib/Button.svelte'; import Button from '$lib/Button.svelte';
import BlogPost from './posts/[[page=integer]]/BlogPost.svelte';
export let data; export let data;
</script> </script>
@ -101,6 +102,13 @@
</ul> </ul>
</section> </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} {#if data.highlightedPosts.length > 0}
<section class="highlighted"> <section class="highlighted">
<h2>Highlighted Blog Posts</h2> <h2>Highlighted Blog Posts</h2>
@ -122,7 +130,7 @@
clip-path: var(--clip-path); clip-path: var(--clip-path);
} }
.highlighted { section {
margin-top: 4rem; margin-top: 4rem;
} }

View file

@ -2,6 +2,7 @@
title: 'Adding single click dev environment links to your open source project for easy contributions' title: 'Adding single click dev environment links to your open source project for easy contributions'
date: 2024-05-27T05:10:06Z 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!' 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 [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. up.
This comes with many benefits: This comes with many benefits:
- Assuming you deploy with containers, your development environment can more - Assuming you deploy with containers, your development environment can more
closely match your production environment. closely match your production environment.
- There are no "works on my machine" issues, everyone has the same development - 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 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). can be used with other forge services like [Gitlab](https://about.gitlab.com) or [Codeberg](https://codeberg.org).
```md ```md
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/<Owner>/<Repo>) [![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>) [![Open in DevPod](https://devpod.sh/assets/open-in-devpod.svg)](https://devpod.sh/open#https://github.com/<Owner>/<Repo>)
@ -82,8 +83,8 @@ with the appropriate links. Let's see what that workflow looks like:
```yml ```yml
on: pull_request on: pull_request
permissions: permissions:
pull-requests: write pull-requests: write
jobs: jobs:
comment_click_dev: comment_click_dev:
@ -95,7 +96,7 @@ jobs:
with: with:
message: | message: |
Click links below to open this PR in a dev environment: Click links below to open this PR in a dev environment:
[![Open PR in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/<Owner>/<Repo>/tree/${{github.head_ref}}) [![Open PR in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/<Owner>/<Repo>/tree/${{github.head_ref}})
[![Open PR in DevPod](https://devpod.sh/assets/open-in-devpod.svg)](https://devpod.sh/open#https://github.com/<Owner>/<Repo>@${{github.head_ref}}) [![Open PR in DevPod](https://devpod.sh/assets/open-in-devpod.svg)](https://devpod.sh/open#https://github.com/<Owner>/<Repo>@${{github.head_ref}})
[![Open PR in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/<Owner>/<Repo>/tree/${{github.head_ref}}) [![Open PR in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/<Owner>/<Repo>/tree/${{github.head_ref}})

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"> <script lang="ts">
import { format } from 'date-fns'; import { format } from 'date-fns';
import type { Post } from './+page.server'; import type { Post } from './+page.server';
import { readingTime } from 'reading-time-estimator'; import BlogPost from './BlogPost.svelte';
export let showYear: boolean = false; export let showYear: boolean = false;
export let showReadingTime: boolean = true; export let showReadingTime: boolean = true;
@ -10,60 +10,12 @@
<ol class="posts"> <ol class="posts">
{#each posts as post} {#each posts as post}
<a href={`/${post.path}`}> <BlogPost {post} {showYear} {showReadingTime} />
<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>
{/each} {/each}
</ol> </ol>
<style lang="scss"> <style lang="scss">
@import '../../../vars'; @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 { .posts {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -72,16 +24,4 @@
.posts { .posts {
gap: 1.5rem; 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> </style>