Skip to content

Commit

Permalink
feat(website): improve landing page hero, add sample screenshot
Browse files Browse the repository at this point in the history
  • Loading branch information
@vst
vst committed Apr 19, 2024
1 parent 33496b4 commit d5bc979
Show file tree
Hide file tree
Showing 2 changed files with 208 additions and 137 deletions.
331 changes: 198 additions & 133 deletions website/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,147 +1,44 @@
import { Logo } from '@/components/header';
import { Card, CardBody, CardHeader, Code } from '@nextui-org/react';
import Link from 'next/link';

export default function Page() {
return (
<div className="flex w-full flex-col items-center justify-center">
<Points />

<div className="mx-auto my-12 max-w-7xl space-y-8">
<Card className="w-full space-y-6 p-6 lg:p-8">
<CardHeader className="font-semibold">Install via Nix</CardHeader>

<CardBody className="space-y-6">
<p>For the current development version:</p>
<Code>{`nix profile install --file https://github.com/vst/hostpatrol/archive/main.tar.gz app`}</Code>
<p>For a versioned release:</p>
<Code>{`nix profile install --file https://github.com/vst/hostpatrol/archive/v<VERSION>.tar.gz app`}</Code>
</CardBody>

<CardHeader className="font-semibold">Install Statically Build Executable (for Linux on x86_64)</CardHeader>

<CardBody>
<Code>
<pre>
{`curl -Lo /tmp/hostpatrol https://github.com/vst/hostpatrol/releases/latest/download/hostpatrol-static-linux-x86_64
sudo install /tmp/hostpatrol /usr/local/bin/hostpatrol`}
</pre>
</Code>
</CardBody>
</Card>

<Card className="w-full space-y-6 p-6 lg:p-8">
<CardHeader className="font-semibold">Configuration Example</CardHeader>

<CardBody>
<Code>
<pre>
{`## List of known SSH public keys for all hosts.
knownSshKeys:
- gh:some-github-user
- ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKq9bpy0IIfDnlgaTCQk0YhKyKFqInRjoqeIPlBuiFwS test-key-admin
## List of hosts to patrol
hosts:
- ## Name of the host (required)
name: somehost
## SSH configuration (optional)
ssh:
## SSH destination (required)
destination: [email protected]
## SSH options (optional)
options: ["-i", "/keys/hebele.pri"]
## External identifier of the host (optional)
id: 20b88669-743f-4ae5-9823-5aacc2df7086
## External URL for the host (optional)
url: https://internal.documentation/hosts/somehost
## List of tags for the host (optional)
tags:
- oranges
- strawberries
## Arbitrary JSON data for the host (optional)
data:
owner: Client-1
cost: 50
## List of known SSH public keys for the host (optional)
knownSshKeys:
- gh:another-github-user
- ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIGmlBxUagOqtWcW6B77TUL8li85ZNYx0tphd3TSx4SEB test-key-tenant
- name: otherhost
url: https://internal.documentation/hosts/otherhost
tags:
- apples
- strawberries`}
</pre>
</Code>
</CardBody>
</Card>

<Card className="w-full space-y-6 p-6 lg:p-8">
<CardHeader className="font-semibold">Usage</CardHeader>

<CardBody className="space-y-8">
<p>You can pass hosts via CLI arguments:</p>

<Code>
<pre>{`hostpatrol compile --host my-host-1 --host my-host-2 > /tmp/hostpatrol-report.json`}</pre>
</Code>

<p>
This command connects to hosts in parallel and ignores all failed hosts by reporting errors in the output.
</p>

<p>
If you want to change the number of maximum number of threads to use for concurrent patrol tasks, do so
with `--threads` option that defaults to `4` otherwise:
</p>

<Code>
<pre>{`hostpatrol compile --threads 10 --host my-host-1 --host my-host-2 ... > /tmp/hostpatrol-report.json`}</pre>
</Code>

<p>
Alternatively, you can use the configuration file which has additional benefit of attaching static
information to your hosts such as external documentation URL and/or tags, and using SSH configuration
instead of plain host name.
</p>

<Code>
<pre>{`hostpatrol compile --config config.yaml > /tmp/hostpatrol-report.json`}</pre>
</Code>

<p>..., or mix with `--host` option:</p>

<Code>
<pre>{`hostpatrol compile --config config.yaml --host a-host --host b-host > /tmp/hostpatrol-report.json`}</pre>
</Code>

<p>
You can process/analyse the JSON output itself or use{' '}
<Link href="/report" className="font-semibold text-indigo-500">
Web application
</Link>{' '}
to list, tabulate and visualise the information.
</p>
</CardBody>
</Card>
</div>
<Hero />
<LearnMore />
<GettingStarted />
</div>
);
}

function Points() {
function Hero() {
return (
<div className="py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Patrol Your Hosts</h2>
<div className="relative isolate w-full overflow-hidden bg-white">
<svg
className="absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
aria-hidden="true"
>
<defs>
<pattern
id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
width={200}
height={200}
x="50%"
y={-1}
patternUnits="userSpaceOnUse"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<rect width="100%" height="100%" strokeWidth={0} fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)" />
</svg>

<p className="mt-6 text-lg leading-8 text-gray-600">
Host Patrol is a command-line tool for gathering information about your hosts via SSH. It also offers a Web
application for viewing this information in your browser.
</p>
<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="mt-6 flex space-x-2">
<div className="mt-6 flex space-x-2">
<a href="https://github.com/vst/hostpatrol/releases/latest">
<img
alt="GitHub Release"
Expand All @@ -164,10 +61,54 @@ function Points() {
/>
</a>
</div>

<h1 className="mt-10 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
<span className="block">Patrol Your Hosts</span>
</h1>

<p className="mt-6 text-lg leading-8 text-gray-600">
Host Patrol is a command-line tool for gathering information about your hosts via SSH. It also offers a Web
application for viewing this information in your browser.
</p>

<div className="mt-10 flex items-center gap-x-6">
<a
href="#getting-started"
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Get started
</a>

<a href="#learn-more" className="text-sm font-semibold leading-6 text-gray-900">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>

<div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
<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}
className="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10"
/>
</div>
</div>
</div>
</div>
</div>
);
}

function LearnMore() {
return (
<div id="learn-more" className="py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base leading-7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{points.map((point) => (
{POINTS.map((point) => (
<div key={point.name}>
<dt className="font-semibold text-gray-900">{point.name}</dt>
<dd className="mt-1 text-balance text-gray-600">{point.description}</dd>
Expand All @@ -179,7 +120,7 @@ function Points() {
);
}

const points = [
const POINTS = [
{
name: 'Who is it for?',
description: (
Expand Down Expand Up @@ -258,3 +199,127 @@ const points = [
),
},
];

function GettingStarted() {
return (
<div id="getting-started" className="mx-auto my-12 max-w-7xl space-y-8">
<Card className="w-full space-y-6 p-6 lg:p-8">
<CardHeader className="font-semibold">Install via Nix</CardHeader>

<CardBody className="space-y-6">
<p>For the current development version:</p>
<Code>{`nix profile install --file https://github.com/vst/hostpatrol/archive/main.tar.gz app`}</Code>
<p>For a versioned release:</p>
<Code>{`nix profile install --file https://github.com/vst/hostpatrol/archive/v<VERSION>.tar.gz app`}</Code>
</CardBody>

<CardHeader className="font-semibold">Install Statically Build Executable (for Linux on x86_64)</CardHeader>

<CardBody>
<Code>
<pre>
{`curl -Lo /tmp/hostpatrol https://github.com/vst/hostpatrol/releases/latest/download/hostpatrol-static-linux-x86_64
sudo install /tmp/hostpatrol /usr/local/bin/hostpatrol`}
</pre>
</Code>
</CardBody>
</Card>

<Card className="w-full space-y-6 p-6 lg:p-8">
<CardHeader className="font-semibold">Configuration Example</CardHeader>

<CardBody>
<Code>
<pre>
{`## List of known SSH public keys for all hosts.
knownSshKeys:
- gh:some-github-user
- ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKq9bpy0IIfDnlgaTCQk0YhKyKFqInRjoqeIPlBuiFwS test-key-admin
## List of hosts to patrol
hosts:
- ## Name of the host (required)
name: somehost
## SSH configuration (optional)
ssh:
## SSH destination (required)
destination: [email protected]
## SSH options (optional)
options: ["-i", "/keys/hebele.pri"]
## External identifier of the host (optional)
id: 20b88669-743f-4ae5-9823-5aacc2df7086
## External URL for the host (optional)
url: https://internal.documentation/hosts/somehost
## List of tags for the host (optional)
tags:
- oranges
- strawberries
## Arbitrary JSON data for the host (optional)
data:
owner: Client-1
cost: 50
## List of known SSH public keys for the host (optional)
knownSshKeys:
- gh:another-github-user
- ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIGmlBxUagOqtWcW6B77TUL8li85ZNYx0tphd3TSx4SEB test-key-tenant
- name: otherhost
url: https://internal.documentation/hosts/otherhost
tags:
- apples
- strawberries`}
</pre>
</Code>
</CardBody>
</Card>

<Card className="w-full space-y-6 p-6 lg:p-8">
<CardHeader className="font-semibold">Usage</CardHeader>

<CardBody className="space-y-8">
<p>You can pass hosts via CLI arguments:</p>

<Code>
<pre>{`hostpatrol compile --host my-host-1 --host my-host-2 > /tmp/hostpatrol-report.json`}</pre>
</Code>

<p>
This command connects to hosts in parallel and ignores all failed hosts by reporting errors in the output.
</p>

<p>
If you want to change the number of maximum number of threads to use for concurrent patrol tasks, do so with
`--threads` option that defaults to `4` otherwise:
</p>

<Code>
<pre>{`hostpatrol compile --threads 10 --host my-host-1 --host my-host-2 ... > /tmp/hostpatrol-report.json`}</pre>
</Code>

<p>
Alternatively, you can use the configuration file which has additional benefit of attaching static
information to your hosts such as external documentation URL and/or tags, and using SSH configuration
instead of plain host name.
</p>

<Code>
<pre>{`hostpatrol compile --config config.yaml > /tmp/hostpatrol-report.json`}</pre>
</Code>

<p>..., or mix with `--host` option:</p>

<Code>
<pre>{`hostpatrol compile --config config.yaml --host a-host --host b-host > /tmp/hostpatrol-report.json`}</pre>
</Code>

<p>
You can process/analyse the JSON output itself or use{' '}
<Link href="/report" className="font-semibold text-indigo-500">
Web application
</Link>{' '}
to list, tabulate and visualise the information.
</p>
</CardBody>
</Card>
</div>
);
}
14 changes: 10 additions & 4 deletions website/src/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,15 @@ import {
import Link from 'next/link';
import { useState } from 'react';

export function Logo() {
return (
<p className="text-2xl tracking-tight text-inherit">
<span className="font-medium text-gray-700">HOST</span>
<span className="font-black">PATROL</span>
</p>
);
}

export default function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false);

Expand All @@ -24,10 +33,7 @@ export default function Header() {
classNames={{ base: 'z-50 bg-gray-200' }}
>
<NavbarBrand>
<p className="text-2xl tracking-tight text-inherit">
<span className="font-medium text-gray-700">HOST</span>
<span className="font-black">PATROL</span>
</p>
<Logo />
</NavbarBrand>

<NavbarContent className="hidden md:flex" justify="center">
Expand Down

0 comments on commit d5bc979

Please sign in to comment.