Readme

stevekrouse.com - my personal website

This val hosts my personal website. The view data is stored in Val Town SQLite - @std/sqlite.

It used to live on Github Pages, which is why I proxy over requests to certain blog posts over to the Github Pages site still.

Todos

Speed up page load by loading sqlite data later like in @healeycodes/steve_web
Store more (legally storable) analytics data, and maybe make a sparkline!
Add some sort of way to contact me
Move over all my blog posts from Github Pages (maybe into @std/blob as a CMS?)

dot_com

100

/** @jsxImportSource https://esm.sh/react */

import { email } from "https://esm.town/v/std/email?v=11";

import { sqlite } from "https://esm.town/v/std/sqlite?v=5";

import { ReloadScriptReactElement } from "https://esm.town/v/stevekrouse/ReloadScript";

import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";

import { renderToString } from "npm:react-dom/server";

const linkClass = "text-blue-500 hover:underline";

const Link = (

{ children, href }: {

children?: React.ReactNode;

href: string;

) => <a className={linkClass} href={href}>{children}</a>;

const dateClass = "text-xs text-gray-400 font-mono mr-1 hidden sm:inline-block";

async function getHits() {

const [, , { rows: [[allHits]] }, { rows: [[todayHits]] }] = await sqlite.batch([

"CREATE TABLE IF NOT EXISTS stevekrouse_com_hits (timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)",

"INSERT INTO stevekrouse_com_hits DEFAULT VALUES",

"SELECT COUNT(*) FROM stevekrouse_com_hits where timestamp > datetime('now', '-28 day')",

"SELECT COUNT(*) from stevekrouse_com_hits where timestamp > datetime('now', '-1 day')",

]);

if (allHits % 100 === 0) email({ subject: `You got ${todayHits} hits today! (${allHits} total)` });

return { allHits, todayHits };

}

export default async (request: Request) => {

const url = new URL(request.url);

if (url.pathname === "/favicon.ico") return new Response(null, { status: 404 });

if (url.pathname !== "/")

return fetch(

`https://stevekrouse.github.io/${url.pathname}${url.search}`,

request as any as RequestInit,

);

const { allHits, todayHits } = await getHits();

return new Response(

renderToString(

<html>

<head>

<title>Steve Krouse</title>

{url.searchParams.get("dev")

? <ReloadScriptReactElement vals={[{ valName: "dot_com", userHandle: "stevekrouse" }]} />

: null}

</head>

<body>

<h1 className="text-orange-600 text-2xl font-medium">Steve Krouse</h1>

<div>

👋 Hi, I'm Steve. I live in Prospect Heights, Brooklyn.

</div>

<div>

I build <Link href="https://val.town">Val Town</Link>, a social website to code in the cloud.

</div>

<div>

This site was{" "}

<Link href="https://www.val.town/v/stevekrouse/dot_com">built in Val Town</Link>. It was viewed{" "}

{todayHits} times today, and {allHits} times this month.

</div>

<div>

<h2 className="text-xl mb-1">Projects</h2>

<ul>

</li>

<Link href="https://dateme.directory">Date Me Directory</Link>

</li>

<Link href="https://twitter.com/stevekrouse/status/1520162279899078657">Zaplib</Link>

</li>

<Link href="http://updates.compose.run">Compose</Link>

</li>

<Link href="https://futureofcoding.org/">Future of Coding</Link>

</li>

<Link href="https://github.com/stevekrouse/woofjs">WoofJS</Link>

</li>

<Link href="http://coding.space">The Coding Space Curriculum</Link>

</li>

<Link href="http://thecodingspace.com">The Coding Space</Link>

</li>

<span className={dateClass}>2014 Jan -</span>Software Engineer @{" "}

<Link href="https://looker.com/">Looker</Link>

</li>

👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.