Skip to content

Commit

Permalink
Charts (#703)
Browse files Browse the repository at this point in the history
  • Loading branch information
icco authored Oct 7, 2024
2 parents b4a7720 + ccfd80b commit 6f12c08
Show file tree
Hide file tree
Showing 8 changed files with 944 additions and 63 deletions.
9 changes: 6 additions & 3 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
FROM node:22-alpine AS base
FROM node:22 AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat

WORKDIR /app

# Install dependencies based on the preferred package manager
Expand All @@ -29,6 +28,8 @@ ENV NEXT_TELEMETRY_DISABLED 1
ENV DOMAIN="https://writing.natwelch.com"
ENV GRAPHQL_ORIGIN="https://graphql.natwelch.com/graphql"

RUN yarn playwright-core install --with-deps chromium

RUN yarn build

# If using npm comment out above and use below instead
Expand All @@ -52,6 +53,8 @@ COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

RUN yarn playwright-core install --with-deps chromium

USER nextjs

EXPOSE 8080
Expand Down
7 changes: 6 additions & 1 deletion contentlayer.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { all } from "@wooorm/starry-night"
import { defineDocumentType, makeSource } from "contentlayer2/source-files"
import { format, parseISO } from "date-fns"
import readingTime from "reading-time"
import rehypeMermaid from "rehype-mermaid"
import rehypeSlug from "rehype-slug"
import rehypeStarryNight from "rehype-starry-night"
import remarkEmoji from "remark-emoji"
Expand Down Expand Up @@ -82,6 +83,10 @@ export default makeSource({
remarkGfm,
[remarkEmoji, { emoticon: false, accessible: true }],
],
rehypePlugins: [rehypeSlug, [rehypeStarryNight, { grammars: all }]],
rehypePlugins: [
rehypeSlug,
[rehypeStarryNight, { grammars: all }],
[rehypeMermaid, { strategy: "img-svg", dark: true }],
],
},
})
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"reading-time": "^1.5.0",
"rehype-mermaid": "^2.1.0",
"rehype-slug": "^6.0.0",
"rehype-starry-night": "^2.1.0",
"remark-emoji": "^5.0.1",
Expand All @@ -37,7 +38,7 @@
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"@types/node": "^22.5.5",
"@types/node": "^22.7.4",
"@types/react": "^18.2.46",
"@types/react-dom": "^18.2.11",
"@types/vivus": "^0.4.6",
Expand All @@ -51,6 +52,7 @@
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-simple-import-sort": "^12.0.0",
"next-sitemap": "^4.2.2",
"playwright-core": "^1.47.2",
"postcss": "^8.4.36",
"prettier": "^3.0.2",
"tailwind-scrollbar": "^3.1.0",
Expand Down
81 changes: 33 additions & 48 deletions posts/745.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,61 +8,46 @@ permalink: "/post/745"

---

In my home, there is a pile of servers. It didn't used to be this big or complicated, but since buying a home, my situation has changed. I have more space, cheaper electricity, and better internet.

```
│ │
│ │
│ Plex │ HTTP + SSH
│ │
│ │
┌───────────────────┼────────────────────────┼─────────────────────────────────────────────────┐
│ │ │ │
│ │ │ │
│ │ │ │
│ │ ▼ │
│ │ ┌─────────────────┐ │
│ │ │ │ │
│ │ │ NUC 3 │ │
│ ▼ │ │ │
│ ┌──────────────┐ │ - Caddy2 │ │
│ │ │ │ - Websites │ │
│ │ NUC 1 │ │ │ │
│ │ │ │ │ │
│ │ Plex │ └─────────────────┘ ┌──────────────────────┐ │
│ │ │ ▲ │ │ │
│ └──────────────┘ │ │ NUC 2 │ │
│ ▲ │ │ │ │
│ │ │ │ Docker Compose │ │
│ │ NFS │ NFS │ - Sonarr │ │
│ │ │ │ - Radarr │ │
│ │ │ │ - Lidarr │ │
│ │ │ │ - Readarr │ │
│ ┌───────┴───────┐ │ │ - Notifiarr │ │
│ │ ├──────────┘ │ - Prowlarr │ │
│ │ │ │ - Sabnzbd │ │
│ │ QNAP NAS ├──────────────────────────────────►│ │ │
│ │ │ NFS └──────────────────────┘ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └───────────────┘ │
│ │
│ │
└──────────────────────────────────────────────────────────────────────────────────────────────┘
In my home, there is a pile of servers. It didn't used to be this big or complicated, but since buying a home, my situation has changed. I have more space, cheaper electricity, and better internet. I used to run everything off of a single Synology box. But with space comes growth.

TBD: Photo of rack.

```mermaid
graph TD;
subgraph AA [House]
Glass;
Storm;
Rope;
Cask;
end
Plex-->Glass;
HTTPS-->Storm;
Storm-->Cask;
Storm-->Rope;
Rope-->Cask;
Glass-->Cask;
Rope-->Glass;
```
The above is a rough diagram of the network of these systems.

[Source](https://asciiflow.com/#/share/eJztls9PwjAUx%2F%2BVplch0QkmciMYw4Esk%2BGtl%2BJqsgirGURBQmI8e%2BCwEA7%2BFcaT4a%2FZX%2BImUX61o%2B1WJELTZGu7vs%2B377WvG0APtwkswSptkxpuAuPYKMAcbOE%2B8aPuAYIPxO%2B41EOwZOQQ7EXP82IheuvHPWfF6K1Let2ogSCQKWHwIvX9QkHI2x9UgsV4qNpoWOAI2HY1K5jVIj05HSlgnJIOFgavYfCsWqcp5uozpbWOvp3GcrmWGEUzD8DdAI6n2wCqHsiRXlHrn8kHQAVpXlfAqSbkakB1rlIyrKNFeB5UsOP0jYwFcWKs1wuzdhzVk21D1zr%2BLfT3t2QODZSSymTJeJo%2FBXaekvTdrDF%2BT%2FCK0AAPK%2BWkCdc8mxzveUNS0s8ga8kqd6MUlNW9o9ALenNHfFCh7XvaISpQ89IW6FyC5oFNPez7XKE6VpoHdexsH1pz%2FwBaJ8tLFYHys9TH5oQkIsqkXffWncsSE7VqNwzeZHIvW4rl08fWgoNUpYhcPvM9j5veU9PhTU%2BAXpllC5hlW3D9GdXxZ6rEtNlf7CSheuMmbYJMAypS9hYoGzvuWc1Cjq5ygB1gQrBMMtn%2B1AmCQzj8AjzG%2FEg%3D)
## Glass

The above is a rough diagram of the network of these systems.
Glass is the newest and most powerful of the servers. It's a [MINISFORUM NPB6](https://amzn.to/3zQffXk). The main reason I got this was for the i7-13620H CPU, as it has great benchmarks with Plex and is relatively affordable.

Glass has an NFSv4 mount of Cask, and serves content to Plex users remotely. It doesn't do much else, but works great.

## NUC 1 (Glass)
[![glass fastfetch](https://icco.imgix.net/photos/2024/0HGACVZTN3J7P.png)](https://icco.imgix.net/photos/2024/0HGACVZTN3J7P.png)

## Rope

## NUC 2 (Rope)
Rope is the second newest. It is a NUC10, and runs internal services. It runs things like the [Servarr](https://wiki.servarr.com/) family of services, various crons, and other random things. Everything is managed by `docker compose` and many of the services have filemounts over NFSv4

[![rope fastfetch](https://icco.imgix.net/photos/2024/0HGACWRZH3G8S.png)](https://icco.imgix.net/photos/2024/0HGACWRZH3G8S.png)

## NUC 3 (Storm)
## Storm

[![storm fastfetch](https://icco.imgix.net/photos/2024/0HGACXHAX3KYW.png)](https://icco.imgix.net/photos/2024/0HGACXHAX3KYW.png)

## QNAP NAS
## Cask
4 changes: 2 additions & 2 deletions public/sitemap-0.xml
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://writing.natwelch.com/feed.atom</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/drafts</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/feed.rss</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/post/10</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/post/100</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/post/101</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
Expand Down Expand Up @@ -690,6 +689,7 @@
<url><loc>https://writing.natwelch.com/post/97</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/post/98</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/post/99</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/drafts</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/tag/000000</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/tag/065</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://writing.natwelch.com/tag/1</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
Expand Down
13 changes: 8 additions & 5 deletions src/app/drafts/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import { Metadata, Viewport } from "next"

import { PostCard } from "@/components/PostCard"

import { allPosts } from "contentlayer/generated"
import { allPosts, Post } from "contentlayer/generated"

const domain = new URL(process.env.DOMAIN ?? "")
const title = `Drafts!`
export const metadata: Metadata = {
metadataBase: new URL(process.env.DOMAIN ?? ""),
metadataBase: domain,
title,
robots: { index: false, follow: false },
}
Expand All @@ -18,10 +19,12 @@ export const viewport: Viewport = {
maximumScale: 1,
}

export default function Home() {
export default function Drafts() {
const posts = allPosts
.sort((a, b) => compareDesc(new Date(a.datetime), new Date(b.datetime)))
.filter((post) => post.draft)
.sort((a: Post, b: Post) =>
compareDesc(new Date(a.datetime), new Date(b.datetime))
)
.filter((post: Post) => post.draft)

return (
<>
Expand Down
6 changes: 6 additions & 0 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,12 @@ article hr {
margin: 1rem;
}

picture {
background-color: theme('colors.secondary');
padding: 1rem;
border-radius: 1rem;
}

/* https://tailwindcss.com/docs/responsive-design */
@media not all and (min-width: 640px) {

Expand Down
Loading

0 comments on commit 6f12c08

Please sign in to comment.