Compare commits

..

8 Commits

9 changed files with 577 additions and 1209 deletions

1698
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -10,10 +10,10 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^2.1.1", "@astrojs/mdx": "^3.1.7",
"@astrojs/rss": "^4.0.5", "@astrojs/rss": "^4.0.7",
"@astrojs/sitemap": "^3.0.5", "@astrojs/sitemap": "^3.1.6",
"@fontsource/roboto": "^5.0.13", "@fontsource/roboto": "^5.0.13",
"astro": "^4.4.0" "astro": "^4.15.8"
} }
} }

View File

@ -7,12 +7,24 @@ import NavLink from './NavLink.astro';
&copy; {new Date().getFullYear()}&nbsp;<span lang="pl">Maciej Pędzich</span> &copy; {new Date().getFullYear()}&nbsp;<span lang="pl">Maciej Pędzich</span>
</span> </span>
<nav class="cmr2-text" aria-label="Social media links"> <nav class="cmr2-text" aria-label="Social media links">
<NavLink href="https://github.com/maciejpedzich">GitHub</NavLink> <NavLink
<NavLink href="https://git.maciejpedzi.ch/maciejpedzich">Gitea</NavLink> href="https://github.com/maciejpedzich"
target="_blank"
rel="noopener noreferrer">GitHub</NavLink
>
<NavLink
href="https://git.maciejpedzi.ch/maciejpedzich"
target="_blank"
rel="noopener noreferrer">Gitea</NavLink
>
<NavLink rel="me" href="https://notacult.social/@macindahaus"> <NavLink rel="me" href="https://notacult.social/@macindahaus">
Mastodon Mastodon
</NavLink> </NavLink>
<NavLink href="https://twitter.com/maciejpedzich">Twitter</NavLink> <NavLink
href="https://twitter.com/maciejpedzich"
target="_blank"
rel="noopener noreferrer">Twitter</NavLink
>
</nav> </nav>
</footer> </footer>

View File

@ -10,8 +10,6 @@ import NavLink from './NavLink.astro';
<nav class="cmr2-text" aria-label="Site navigation"> <nav class="cmr2-text" aria-label="Site navigation">
<NavLink href="/">Home</NavLink> <NavLink href="/">Home</NavLink>
<NavLink href="/blog">Blog</NavLink> <NavLink href="/blog">Blog</NavLink>
<NavLink href="/projects">Projects (404)</NavLink>
<NavLink href="/resume.pdf">Resume (404)</NavLink>
<NavLink <NavLink
href="https://analytics.maciejpedzi.ch/share/eodLjhuAE51MBSth/maciejpedzi.ch" href="https://analytics.maciejpedzi.ch/share/eodLjhuAE51MBSth/maciejpedzi.ch"
> >

View File

@ -1,5 +1,6 @@
--- ---
import { CollectionEntry, getCollection } from 'astro:content'; import type { CollectionEntry } from 'astro:content';
import { getCollection } from 'astro:content';
export interface Props { export interface Props {
filterFn?: (entry: CollectionEntry<'blog'>) => unknown; filterFn?: (entry: CollectionEntry<'blog'>) => unknown;

View File

@ -2,7 +2,7 @@
title: going global with localhost title: going global with localhost
description: "This is how I've set up my local network and machine to safely expose my personal projects and other services to the outside world" description: "This is how I've set up my local network and machine to safely expose my personal projects and other services to the outside world"
pubDate: 2024-09-23T15:00:00.00Z pubDate: 2024-09-23T15:00:00.00Z
draft: true draft: false
categories: categories:
- project homelabtop - project homelabtop
tags: tags:
@ -25,10 +25,12 @@ With that out of the way, let's dive into today's topic!
## Demo ## Demo
_I go to maciejpedzi.ch, click the the analytics link in the header, show stats and move on. I click the Gitea link on my website's footer. Show off some repos' pages, but catsof.tech and six-degs-of-f1 in particular. For each repo click on the website link, briefly explain and show off the app_. _I quit the slides and go to maciejpedzi.ch, click the the analytics link in the header, show stats and move on. I click the Gitea link on my website's footer. Show off some repos' pages, but catsof.tech and six-degs-of-f1 in particular. For each repo click on the website link, briefly explain and show off the app. Then I come back to the slides_.
## My network's diagram and its quick breakdown ## My network's diagram and its quick breakdown
_I show this slide and exit them again. I switch over to the diagram tab_
Now let me show you a simplified diagram of my local network and all the components from _the outside world_ that ensure my server can be reached from all over the globe. Don't worry if you fail to understand certain bits of the diagram or my rundown through it, as we will come back to each part and concept and break it down in subsequent slides. Now let me show you a simplified diagram of my local network and all the components from _the outside world_ that ensure my server can be reached from all over the globe. Don't worry if you fail to understand certain bits of the diagram or my rundown through it, as we will come back to each part and concept and break it down in subsequent slides.
<img src="/lbt-talk-net-graph.svg" alt="Diagram of my local network and components in the wide-area network that allow my home server to be reached from the outside world" loading="lazy" /> <img src="/lbt-talk-net-graph.svg" alt="Diagram of my local network and components in the wide-area network that allow my home server to be reached from the outside world" loading="lazy" />
@ -85,7 +87,7 @@ Local network is the key phrase here, because introducing those firewall rules a
One thing you might have noticed on the diagram is a different IP addressing scheme for each VLAN. While you might be familiar with the 4 numbers separated by dots, the slash followed by another number might not seem familiar. One thing you might have noticed on the diagram is a different IP addressing scheme for each VLAN. While you might be familiar with the 4 numbers separated by dots, the slash followed by another number might not seem familiar.
This is what's known as the <abbr>CIDR</abbr> (ClaTLSes Inter-Domain Routing) notation. It's a shorthand way of writing an IP address range, where instead of using _first address-last address_, you denote the first IP address in a given range and then the number of 1 bits from the left to the right that represent the subnet mask. The 1-bits in that mask mark the bits that stay the same across all addresses in a specified range written in binary. This is what's known as the <abbr>CIDR</abbr> (Classless Inter-Domain Routing) notation. It's a shorthand way of writing an IP address range, where instead of using _first address-last address_, you denote the first IP address in a given range and then the number of 1 bits from the left to the right that represent the subnet mask. The 1-bits in that mask mark the bits that stay the same across all addresses in a specified range written in binary.
Let's take my homelab VLAN's range for example: `10.0.10.1/24`. The first address in the range is `10.0.10.1`, and the first 24 bits in the address stay the same. Since each one of four numbers cannot be greater than 255, it means that each part fits perfectly in 8 bits. Let's take my homelab VLAN's range for example: `10.0.10.1/24`. The first address in the range is `10.0.10.1`, and the first 24 bits in the address stay the same. Since each one of four numbers cannot be greater than 255, it means that each part fits perfectly in 8 bits.

View File

@ -4,7 +4,7 @@ const blog = defineCollection({
schema: z.object({ schema: z.object({
title: z.string(), title: z.string(),
description: z.string(), description: z.string(),
draft: z.boolean(), draft: z.boolean().default(false),
pubDate: z pubDate: z
.string() .string()
.or(z.date()) .or(z.date())

View File

@ -26,6 +26,47 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</p> </p>
<PostList limit={5} /> <PostList limit={5} />
</section> </section>
<section>
<h3>Featured projects</h3>
<ul>
<li>
<a
href="https://spotifyplaylistarchive.com"
target="_blank"
rel="noopener noreferrer">Spotify Playlist Archive</a
> - frontend for browsing the <a
href="https://github.com/mackorone/spotify-playlist-archive"
target="_blank"
rel="noopener noreferrer">spotify-playlist-archive</a
> GitHub repository, viewing specific snapshots of indexed playlists and
their statistics.
</li>
<li>
<a
href="https://github.com/maciejpedzich/playlist-entry-validator"
target="_blank"
rel="noopener noreferrer">Playlist Entry Validator</a
> - GitHub bot for validating new playlist entries added via pull requests
to the aforementioned archive repository.
</li>
<li>
<a
href="https://sixdegs.maciejpedzi.ch"
target="_blank"
rel="noopener noreferrer">Six Degrees of F1</a
> - website for visualising the shortest paths between two F1 drivers and
their teammates
</li>
<li>
<a
href="https://cats.maciejpedzi.ch"
target="_blank"
rel="noopener noreferrer">Cats Of Tech</a
> - online album of cats that belong to people in the software development
industry
</li>
</ul>
</section>
</BaseLayout> </BaseLayout>
<style> <style>

View File

@ -3,9 +3,9 @@ import { getCollection } from 'astro:content';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
export async function GET(context) { export async function GET(context) {
const posts = (await getCollection('blog')).sort( const posts = (await getCollection('blog'))
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf() .filter((p) => !p.data.draft)
); .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
const { body } = await rss({ const { body } = await rss({
title: SITE_TITLE, title: SITE_TITLE,