Small fixes to the Website

README.md

@@ -12,7 +12,7 @@
     </div>
 </h1>
 
-![Host Patrol Web UI Screenshot](https://github.com/vst/hostpatrol/assets/374793/88e33afd-7b0b-45b6-a542-01c5994af076)
+![Host Patrol Web UI Screenshot](https://github.com/vst/hostpatrol/assets/374793/416e1135-fe9a-4998-8acc-de07dd62c88b)
 
 Host Patrol (`hostpatrol`) is a command-line application to retrieve
 information from remote hosts. The information is retrieved over SSH

website/next.config.mjs

@@ -1,4 +1,5 @@
 import createMDX from '@next/mdx';
+import rehypePrettyCode from 'rehype-pretty-code';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -17,6 +18,18 @@ const nextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
 };
 
-const withMDX = createMDX({})
+const withMDX = createMDX({
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: [
+      [
+        rehypePrettyCode,
+        {
+          theme: 'dracula',
+        },
+      ],
+    ],
+  },
+});
 
 export default withMDX(nextConfig);

website/package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "format-check": "prettier --check \"src/**/*.{ts,tsx,md,mdx}\"",
-    "format": "prettier --write \"src/**/*.{ts,tsx,md,mdx}\"",
+    "format": "prettier --write \"src/**/*.{ts,tsx,md,mdx,css}\" next.config.mjs",
     "check": "npm run format-check && npm run lint && npm run build"
   },
   "dependencies": {
@@ -26,7 +26,9 @@
     "react-dom": "^18",
     "react-icons": "^5.1.0",
     "react-toastify": "^10.0.5",
-    "recharts": "^2.12.3"
+    "recharts": "^2.12.3",
+    "rehype-pretty-code": "^0.13.1",
+    "shiki": "^1.3.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.12",

website/src/app/(landing)/page.tsx

@@ -34,7 +34,9 @@ function Hero() {
 
       <div className="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40">
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8">
-          <Logo />
+          <div className="hidden lg:block">
+            <Logo />
+          </div>
 
           <div className="mt-6 flex space-x-2">
             <a href="https://github.com/vst/hostpatrol/releases/latest">
@@ -90,10 +92,10 @@ function Hero() {
           <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
             <div className="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
               <img
-                src="https://github.com/vst/hostpatrol/assets/374793/88e33afd-7b0b-45b6-a542-01c5994af076"
-                alt="App screenshot"
-                width={2432}
-                height={1442}
+                src="https://github.com/vst/hostpatrol/assets/374793/416e1135-fe9a-4998-8acc-de07dd62c88b"
+                alt="Web UI Screenshot (with Mock Data)"
+                width={1634}
+                height={801}
                 className="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10"
               />
             </div>

website/src/app/(pages)/layout.tsx

@@ -1,3 +1,3 @@
 export default function MdxLayout({ children }: { children: React.ReactNode }) {
-  return <div className="prose mx-auto my-6 flex  w-full max-w-4xl flex-col prose-pre:my-0 sm:my-20">{children}</div>;
+  return <div className="prose mx-auto my-6 flex w-full max-w-4xl flex-col px-4 sm:my-16">{children}</div>;
 }

website/src/app/(pages)/quickstart/page.mdx

@@ -51,7 +51,7 @@ nix profile install --file https://github.com/vst/hostpatrol/archive/v<VERSION>.
 Instead of providing hosts one-by-one, you can use a configuration
 file. For example given a configuration file `config.yaml` like this:
 
-```yaml
+```yaml showLineNumbers
 ## List of known SSH public keys for all hosts.
 knownSshKeys:
   - gh:some-github-user

website/src/app/globals.css

@@ -3,5 +3,29 @@
 @tailwind utilities;
 
 .text-balance {
-    text-wrap: balance;
+  text-wrap: balance;
+}
+
+code {
+  counter-reset: line;
+}
+
+code > [data-line]::before {
+  counter-increment: line;
+  content: counter(line);
+
+  /* Other styling */
+  display: inline-block;
+  width: 1rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: gray;
+}
+
+code[data-line-numbers-max-digits='2'] > [data-line]::before {
+  width: 2rem;
+}
+
+code[data-line-numbers-max-digits='3'] > [data-line]::before {
+  width: 3rem;
 }