add a readme

README.md

@@ -1,36 +1,89 @@
-# Welcome to Remix + Vite!
+# Blug - An ATProtocol Blog
 
-📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features.
+A simple little blog that pulls posts from your PDS, using the `com.whtwnd.blog.entry` lexicon. Uses Redis to keep them
+cached for a bit, in case you're popular and don't want to be constantly polling your PDS.
 
-## Development
+```ts
+interface WhtwndBlogEntryRecord {
+  $type: 'com.whtwnd.blog.entry'
+  content?: string
+  createdAt: string
+  theme?: string
+  title: string
+  ogp?: {
+    height: number | null
+    url: string | null
+    width: number | null
+  }
+}
 
-Run the Vite dev server:
+interface WhtwndBlogEntryView {
+  rkey: string
+  cid: string
+  title: string
+  content?: string
+  createdAt: string
+  banner?: string
+}
+```
 
-```shellscript
-npm run dev
+## Configuration
+
+Just a few things are needed in your `.env` file.
+
+```shell
+ATP_SERVICE=https://pds.haileyok.com/
+ATP_IDENTIFIER=haileyok.com
+ATP_DID=did:plc:oisofpd7lj26yvgiivf3lxsi
 ```
 
-## Deployment
+- `ATP_SERVICE` is the URL of your PDS. It's probably hosted by Bluesky. Find it at [internect.info](https://internect.info).
+- `ATP_IDENTIFIER` is your handle. It's used to know which repo to get records from.
+- `ATP_DID` is...your DID. Again, find it at [internect.info](https://internect.info). Used to get your Bluesky profile
+  (I use this just to get the already-hosted copy of your profile picture. You could rewrite this if you wanted to, would
+  be faster too).
+
+You also need to have Redis running. I didn't bother adding configuration for it, so if you want to change where it's
+hosted at check `src/redis/redis.ts`.
 
-First, build your app for production:
+```shell
+# macos
+brew install redis
+brew services start redis
 
-```sh
-npm run build
+# ubuntu
+sudo apt-get install redis-server
+sudo systemctl start redis
+
+# centos
+sudo yum install redis
+sudo systemctl start redis
 ```
 
-Then run the app in production mode:
+## Development
 
-```sh
-npm start
+Just run the vite server, you know, like usual?
+
+```shellscript
+yarn run dev
 ```
 
-Now you'll need to pick a host to deploy it to.
+## Deployment
+
+Make sure you have `dotenv-cli` installed.
 
-### DIY
+```shell
+npm install -g dotenv-cli
+```
+
+Then build and serve.
 
-If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
+```
+yarn build
+yarn start
+```
 
-Make sure to deploy the output of `npm run build`
+## Creating Posts
 
-- `build/server`
-- `build/client`
+There's various ways you could do this. I just use a Markdown editor and then manually save them with `createRecord`.
+You can also use the editor at [whtwnd's website](https://whtwnd.com/edit) to create them.

src/app/root.tsx

@@ -48,14 +48,12 @@ export function Layout({children}: {children: React.ReactNode}) {
         </div>
         <div className="flex justify-center gap-4 pb-4">{children}</div>
         <footer>
-          <div className="container mx-auto text-center text-theme-300 py-4">
-            <p>
-              Made with <Link href="https://remix.run/">Remix</Link>,{' '}
-              <Link href="https://tailwindcss.com/">Tailwind</Link>, and{' '}
-              <Link href="https://atproto.com/">ATProtocol</Link>. Find it{' '}
-              <Link href="https://github.com/haileyok/blug">on GitHub</Link>.
-            </p>
-          </div>
+          <p className="container mx-auto text-center text-theme-100 py-4">
+            Made with <Link href="https://remix.run/">Remix</Link>,{' '}
+            <Link href="https://tailwindcss.com/">Tailwind</Link>, and{' '}
+            <Link href="https://atproto.com/">ATProtocol</Link>. Find it{' '}
+            <Link href="https://github.com/haileyok/blug">on GitHub</Link>.
+          </p>
         </footer>
         <ScrollRestoration />
         <Scripts />