Merge pull request #72 from hanihusam/break-update

Migrate to Vite

app/components/home/project-section.tsx

@@ -0,0 +1,45 @@
+import { Grid } from '@/components/grid'
+import { Header } from '@/components/header'
+import { Spacer } from '@/components/spacer'
+import { clsxm } from '@/utils/clsxm'
+
+import { type Project } from 'contents/projects'
+
+type ProjectectionProps = {
+	title: string
+	subTitle: string
+	cta: string
+	projects: Project[]
+}
+
+export function ProjectSection({
+	title,
+	subTitle,
+	cta,
+	projects,
+}: ProjectectionProps) {
+	return (
+		<>
+			<Header
+				title={title}
+				subTitle={subTitle}
+				cta={cta}
+				ctaUrl="/projects"
+				reverse
+			/>
+			<Spacer size="2xs" />
+			<Grid className="gap-10">
+				{projects.map((project, idx) => (
+					<div
+						key={idx}
+						className={clsxm('col-span-4', {
+							'hidden lg:block': idx >= 2,
+						})}
+					>
+						{project.name}
+					</div>
+				))}
+			</Grid>
+		</>
+	)
+}

app/components/navbar.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { clsxm } from '@/utils/clsxm'
 import { Theme, useTheme } from '@/utils/theme-provider'
 
-import logo from '../../public/images/hnh-logo.png'
+import logo from '../../public/images/hnh-logo.png?url'
 
 import { Popover, Switch } from '@headlessui/react'
 import { Bars3Icon, SunIcon, XMarkIcon } from '@heroicons/react/24/outline'

app/components/projects/project-card.tsx

@@ -0,0 +1,39 @@
+import { AnchorOrLink } from '@/components/links/anchor-or-link'
+
+import { type Project } from 'contents/projects'
+
+export function ProjectCard({ project }: { project: Project }) {
+	return (
+		<div className="flex max-w-xl flex-col items-start justify-between">
+			<div className="flex items-center gap-x-4 text-xs">
+				<a
+					href={project.link.href}
+					className="bg-gray-50 text-gray-600 hover:bg-gray-100 relative z-10 rounded-full px-3 py-1.5 font-medium"
+				>
+					{project.link.label}
+				</a>
+			</div>
+			<div className="group relative">
+				<h3 className="text-gray-900 group-hover:text-gray-600 mt-3 text-lg font-semibold leading-6">
+					<a href={project.link.href}>
+						<span className="absolute inset-0" />
+						{project.link.label}
+					</a>
+				</h3>
+				<p className="text-gray-600 mt-5 line-clamp-3 text-sm leading-6">
+					{project.description}
+				</p>
+			</div>
+			<div className="relative mt-8 flex items-center gap-x-4">
+				<img
+					src={project.cover}
+					alt=""
+					className="bg-gray-50 h-10 w-10 rounded-full"
+				/>
+				<AnchorOrLink href={project.link.href}>
+					{project.link.label}
+				</AnchorOrLink>
+			</div>
+		</div>
+	)
+}

app/entry.server.tsx

@@ -12,7 +12,8 @@ import { getInstanceInfo } from 'litefs-js'
 import { renderToPipeableStream } from 'react-dom/server'
 import { PassThrough } from 'stream'
 
-const ABORT_DELAY = 5000
+// Reject/cancel all pending promises after 5 seconds
+export const streamTimeout = 5000
 
 init()
 global.ENV = getEnv()
@@ -75,7 +76,9 @@ export default async function handleRequest(...args: DocRequestArgs) {
 			},
 		)
 
-		setTimeout(abort, ABORT_DELAY)
+		// Automatically timeout the React renderer after 6 seconds, which ensures
+		// React has enough time to flush down the rejected boundary contents
+		setTimeout(abort, streamTimeout + 1000)
 	})
 }
 

app/hooks/useScrollSpy.tsx

@@ -51,7 +51,6 @@ export default function useScrollSpy() {
 		return () => {
 			window.removeEventListener('scroll', actionSectionScrollSpy)
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [])
 
 	return activeSection

app/root.tsx

@@ -1,12 +1,11 @@
-import appStyles from '@/styles/app.css'
-import fonts from '@/styles/fonts.css'
-import noScriptStyles from '@/styles/no-script.css'
-import proseStyles from '@/styles/prose.css'
-import tailwindStyles from '@/styles/tailwind.css'
-
 import { Footer } from '@/components/footer'
 import { LayoutRoot } from '@/components/layout'
 import { Navbar } from '@/components/navbar'
+import appStyles from '@/styles/app.css?url'
+import fonts from '@/styles/fonts.css?url'
+import noScriptStyles from '@/styles/no-script.css?url'
+import proseStyles from '@/styles/prose.css?url'
+import tailwindStyles from '@/styles/tailwind.css?url'
 import { getEnv } from '@/utils/env.server'
 import { toErrorWithMessage } from '@/utils/helpers'
 import { useNonce } from '@/utils/nonce-provider'
@@ -25,7 +24,6 @@ import {
 import {
 	isRouteErrorResponse,
 	Links,
-	LiveReload,
 	Meta,
 	Outlet,
 	Scripts,
@@ -171,7 +169,6 @@ function App() {
 						__html: `window.ENV = ${JSON.stringify(data.ENV)};`,
 					}}
 				/>
-				{ENV.NODE_ENV === 'development' ? <LiveReload nonce={nonce} /> : null}
 			</body>
 		</html>
 	)

app/routes/_index.tsx

@@ -11,6 +11,7 @@ import { getBlogsFeatured } from '@/utils/blog.server'
 
 import { useLoaderData } from '@remix-run/react'
 import { json, type LoaderFunction } from '@remix-run/server-runtime'
+// import projects from 'contents/projects'
 
 type LoaderData = {
 	featuredPosts: BlogFrontmatter[]

app/routes/action.refresh-cache.tsx

@@ -1,7 +1,7 @@
 import { type ContentType } from '@/types'
 import { cache } from '@/utils/cache.server'
 import { ensurePrimary } from '@/utils/cjs/litefs-js.server'
-import { getContentMdxListItems, getMdxPage } from '@/utils/mdx'
+import { getContentMdxListItems, getMdxPage } from '@/utils/mdx.server'
 import { getRequiredServerEnvVar } from '@/utils/misc'
 
 import { type ActionFunctionArgs, json, redirect } from '@remix-run/node'

app/routes/blog.$slug.tsx

@@ -17,7 +17,8 @@ import {
 } from '@/utils/blog.server'
 import { clsxm } from '@/utils/clsxm'
 import { getImageBuilder, getImgProps } from '@/utils/images'
-import { getMdxPage, useMdxComponent } from '@/utils/mdx'
+import { useMdxComponent } from '@/utils/mdx'
+import { getMdxPage } from '@/utils/mdx.server'
 import { getSessionId } from '@/utils/session.server'
 import { getServerTimeHeader } from '@/utils/timing.server'
 
@@ -27,11 +28,15 @@ import {
 } from '@heroicons/react/24/outline'
 import { HandThumbUpIcon as HandThumbUpSolidIcon } from '@heroicons/react/24/solid'
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
-import { type DataFunctionArgs, json } from '@remix-run/server-runtime'
+import {
+	type ActionFunctionArgs,
+	json,
+	type LoaderFunctionArgs,
+} from '@remix-run/server-runtime'
 import { format } from 'date-fns/format'
 import { motion } from 'framer-motion'
 
-export async function action({ params, request }: DataFunctionArgs) {
+export async function action({ params, request }: ActionFunctionArgs) {
 	if (!params.slug) {
 		throw new Error('params.slug is not defined')
 	}
@@ -58,7 +63,7 @@ export async function action({ params, request }: DataFunctionArgs) {
 	}
 }
 
-export const loader = async ({ request, params }: DataFunctionArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 	if (!params.slug) {
 		throw new Error('params.slug is not defined')
 	}

app/routes/blog._index.tsx

@@ -9,14 +9,14 @@ import { Grid } from '@/components/grid'
 import { Spacer } from '@/components/spacer'
 import { H6 } from '@/components/typography'
 import { filterPosts } from '@/utils/blog'
-import { getContentMdxListItems } from '@/utils/mdx'
+import { getContentMdxListItems } from '@/utils/mdx.server'
 import { useUpdateQueryStringValueWithoutNavigation } from '@/utils/misc'
 import { getServerTimeHeader } from '@/utils/timing.server'
 
 import { useLoaderData, useSearchParams } from '@remix-run/react'
-import { type DataFunctionArgs, json } from '@remix-run/server-runtime'
+import { json, type LoaderFunctionArgs } from '@remix-run/server-runtime'
 
-export const loader = async ({ request }: DataFunctionArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const timings = {}
 	const blogs = await getContentMdxListItems('blog', { request, timings })
 
@@ -74,8 +74,6 @@ export default function BlogIndex() {
 		let filteredPosts = allPosts
 
 		return filterPosts(filteredPosts, regularQuery)
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [allPosts, query, regularQuery])
 
 	const visibleTags = isSearching

app/routes/cache.sqlite.ts

@@ -6,6 +6,7 @@ import {
 import { getRequiredServerEnvVar } from '@/utils/misc'
 
 import { type ActionFunctionArgs, json, redirect } from '@remix-run/node'
+import { serverOnly$ } from 'vite-env-only/macros'
 
 export async function action({ request }: ActionFunctionArgs) {
 	const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
@@ -35,27 +36,23 @@ export async function action({ request }: ActionFunctionArgs) {
 	return json({ success: true })
 }
 
-export async function updatePrimaryCacheValue({
-	key,
-	cacheValue,
-}: {
-	key: string
-	cacheValue: any
-}) {
-	const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
-	if (currentIsPrimary) {
-		throw new Error(
-			`updatePrimaryCacheValue should not be called on the primary instance (${primaryInstance})}`,
-		)
-	}
-	const domain = getInternalInstanceDomain(primaryInstance)
-	const token = getRequiredServerEnvVar('INTERNAL_COMMAND_TOKEN')
-	return fetch(`${domain}/cache/sqlite`, {
-		method: 'POST',
-		headers: {
-			Authorization: `Bearer ${token}`,
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify({ key, cacheValue }),
-	})
-}
+export const updatePrimaryCacheValue = serverOnly$(
+	async ({ key, cacheValue }: { key: string; cacheValue: any }) => {
+		const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
+		if (currentIsPrimary) {
+			throw new Error(
+				`updatePrimaryCacheValue should not be called on the primary instance (${primaryInstance})}`,
+			)
+		}
+		const domain = getInternalInstanceDomain(primaryInstance)
+		const token = getRequiredServerEnvVar('INTERNAL_COMMAND_TOKEN')
+		return fetch(`${domain}/cache/sqlite`, {
+			method: 'POST',
+			headers: {
+				Authorization: `Bearer ${token}`,
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({ key, cacheValue }),
+		})
+	},
+)

app/routes/healthcheck.tsx

@@ -1,4 +1,4 @@
-import { getContentMdxListItems } from '@/utils/mdx'
+import { getContentMdxListItems } from '@/utils/mdx.server'
 
 import { type LoaderFunctionArgs } from '@remix-run/node'
 

app/routes/links.tsx

@@ -4,7 +4,7 @@ import { AnchorOrLink } from '@/components/links/anchor-or-link'
 import { H3, Paragraph } from '@/components/typography'
 import { externalLinks } from '@/external-links'
 
-import logo from '../../public/images/hnh-logo.png'
+import logo from '../../public/images/hnh-logo.png?url'
 
 export default function Links() {
 	return (

app/utils/blog.server.ts

@@ -1,5 +1,5 @@
 import { prisma } from './db.server'
-import { type CachifiedOptions, getContentMdxListItems } from './mdx'
+import { type CachifiedOptions, getContentMdxListItems } from './mdx.server'
 
 /**
  * Get and order frontmatters by specified array

app/utils/cache.server.ts

@@ -76,7 +76,7 @@ export const cache: CachifiedCache = {
 					value: JSON.stringify(entry.value),
 					metadata: JSON.stringify(entry.metadata),
 				})
-		} else {
+		} else if (updatePrimaryCacheValue) {
 			// fire-and-forget cache update
 			void updatePrimaryCacheValue({
 				key,
@@ -95,7 +95,7 @@ export const cache: CachifiedCache = {
 		const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
 		if (currentIsPrimary) {
 			cacheDb.prepare('DELETE FROM cache WHERE key = ?').run(key)
-		} else {
+		} else if (updatePrimaryCacheValue) {
 			// fire-and-forget cache update
 			void updatePrimaryCacheValue({
 				key,
@@ -193,10 +193,3 @@ export async function cachified<Value>({
 	cachifiedResolved = true
 	return result
 }
-
-/*
-eslint
-  max-depth: "off",
-  no-multi-assign: "off",
-  @typescript-eslint/no-explicit-any: "off",
-*/

app/utils/cjs/litefs-js.server.js

@@ -1,5 +1,8 @@
-import pkg from 'litefs-js'
+import {
+	getAllInstances,
+	getInstanceInfo,
+	getInternalInstanceDomain,
+} from 'litefs-js'
 
 export { ensureInstance, ensurePrimary } from 'litefs-js/remix.js'
-const { getAllInstances, getInstanceInfo, getInternalInstanceDomain } = pkg
 export { getAllInstances, getInstanceInfo, getInternalInstanceDomain }