add a byline

haileyok · Apr 15, 2024 · 3e34ea6 · 3e34ea6
1 parent 7131224
commit 3e34ea6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/app/routes/_index.tsx b/src/app/routes/_index.tsx
@@ -33,7 +33,7 @@ export default function Index() {
   return (
     <div className="container mx-auto pt-10 md:pt-20 pb-20">
       <div className="flex-col text-center">
-        <div className="flex flex-col md:flex-row justify-center items-center gap-4 md:gap-20 pb-10">
+        <div className="flex flex-col md:flex-row justify-center items-center gap-4 md:gap-20 pb-4 md:pb-8">
           {profile ? (
             <img
               className="rounded-full w-32 h-32"
@@ -45,8 +45,8 @@ export default function Index() {
           )}
           <h1 className="text-5xl md:text-6xl font-bold">It's Hailey! 👋</h1>
         </div>
-        <p className="text-3xl text-theme-300">
-          react native, nonsense, and maybe something serious (probably not)
+        <p className="text-2xl text-theme-300">
+          react native, bluesky, nonsense
         </p>
       </div>
       <div className="flex flex-col gap-4 pt-14">

diff --git a/src/app/routes/posts.$rkey.tsx b/src/app/routes/posts.$rkey.tsx
@@ -2,14 +2,16 @@ import React from 'react'
 import {useLoaderData} from '@remix-run/react'
 import Markdown, {Components} from 'react-markdown'
 import {WhtwndBlogEntryView} from '../../types'
-import {getPost} from '../../atproto'
+import {getPost, getProfile} from '../../atproto'
 import {json, LoaderFunctionArgs, MetaFunction} from '@remix-run/node'
 import {Link} from '../components/link'
+import {AppBskyActorDefs} from '@atproto/api'
 
 export const loader = async ({params}: LoaderFunctionArgs) => {
   const {rkey} = params
   const post = await getPost(rkey!)
-  return json({post})
+  const profile = await getProfile()
+  return json({post, profile})
 }
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
@@ -38,18 +40,30 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   ]
 }
 export default function Posts() {
-  const {post} = useLoaderData<{post: WhtwndBlogEntryView}>()
+  const {post, profile} = useLoaderData<{
+    post: WhtwndBlogEntryView
+    profile: AppBskyActorDefs.ProfileViewDetailed
+  }>()
 
   if (!post) {
     return <Error />
   }
 
   return (
     <div className="container mx-auto pt-10 md:pt-20 pb-20">
-      <h1 className="text-5xl md:text-6xl font-bold text-center">
-        {post.title}
-      </h1>
-      <div className="py-4 md:py-8" />
+      <div className="flex flex-col text-center gap-4">
+        <h1 className="text-5xl md:text-6xl font-bold">{post.title}</h1>
+        <span className="text-md italic text-theme-300">
+          Poorly written by the one and only {profile.displayName} on{' '}
+          {new Date(post.createdAt).toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          })}
+        </span>
+      </div>
+
+      <div className="py-4" />
       <div>
         <Markdown components={markdownComponents} className="break-words">
           {post.content}
@@ -111,10 +125,10 @@ const markdownComponents: Partial<Components> = {
     </blockquote>
   ),
   code: ({children}) => (
-    <code className="bg-theme-900 px-1 rounded-md">{children}</code>
+    <code className="bg-theme-950 px-1 rounded-md">{children}</code>
   ),
   pre: ({children}) => (
-    <pre className="bg-theme-900 p-2 rounded-md overflow-x-auto my-4">
+    <pre className="bg-theme-950 p-2 rounded-md overflow-x-auto my-4">
       {children}
     </pre>
   ),