Use Build Output API for landing page (#819)

* build output api

* deploy

* fix blog posts

* maybe idk

* remove vercel-build

apps/landing/package.json

@@ -3,7 +3,6 @@
 	"scripts": {
 		"dev": "pnpm run server",
 		"prod": "pnpm run build && pnpm run server:prod",
-		"vercel-build": "./vercel/deploy.sh",
 		"build": "vite build",
 		"server": "ts-node ./server",
 		"server:prod": "cross-env NODE_ENV=production ts-node ./server",
@@ -38,6 +37,7 @@
 		"vite-plugin-ssr": "^0.4.39"
 	},
 	"devDependencies": {
+		"@magne4000/vite-plugin-vercel-ssr": "^0.1.5",
 		"@sd/config": "workspace:*",
 		"@sd/ui": "workspace:*",
 		"@tailwindcss/line-clamp": "^0.4.2",
@@ -57,6 +57,7 @@
 		"vite-plugin-esmodule": "^1.4.4",
 		"vite-plugin-markdown": "^2.1.0",
 		"vite-plugin-svgr": "^2.2.1",
+		"vite-plugin-vercel": "^0.1.7",
 		"vite-tsconfig-paths": "^3.5.2"
 	}
 }

apps/landing/server/index.ts

@@ -1,6 +1,6 @@
 import compression from 'compression';
 import express from 'express';
-import { renderPage } from 'vite-plugin-ssr';
+import { renderPage } from 'vite-plugin-ssr/server';
 
 const isProduction = process.env.NODE_ENV === 'production';
 const root = `${__dirname}/..`;

apps/landing/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { PageContextBuiltIn } from 'vite-plugin-ssr';
+import { PageContextBuiltIn } from 'vite-plugin-ssr/types';
 import '@sd/ui/style';
 import { Footer } from './components/Footer';
 import NavBar from './components/NavBar';

apps/landing/src/pages/blog/index.page.tsx

@@ -15,37 +15,35 @@ function Page({ posts }: { posts: BlogPosts }) {
 				<p className="fade-in-heading animation-delay-1">Get the latest from Spacedrive.</p>
 			</section>
 			<section className="animation-delay-2 grid grid-cols-1 gap-4 will-change-transform fade-in sm:grid-cols-1 lg:grid-cols-1">
-				{postsArray.map((post) => {
-					return (
-						<a
-							key={post.slug}
-							href="/blog/${post.slug}"
-							className="relative z-0 mb-8 flex cursor-pointer flex-col gap-2 overflow-hidden rounded-xl border border-gray-500 transition-colors"
-						>
-							{post.image && (
-								<img
-									src={`/${post.image}`}
-									alt=""
-									className="inset-0 -z-10 m-0 w-full rounded-t-xl object-cover md:h-96"
-								/>
-							)}
-							<div className="p-8">
-								<h2 className="text2xl m-0 md:text-4xl">{post.title}</h2>
-								<small className="m-0">{post.readTime} minute read.</small>
-								{/* <p className="line-clamp-3 my-2">{post.excerpt}</p> */}
-								<p className="m-0 text-white">
-									by {post.author} &middot;{' '}
-									{new Date(post.date ?? '').toLocaleDateString()}
-								</p>
-								<div className="mt-4 flex flex-wrap gap-2">
-									{post.tags?.map((tag) => (
-										<BlogTag key={tag} name={tag} />
-									))}
-								</div>
+				{postsArray.map((post) => (
+					<a
+						key={post.slug}
+						href={`/blog/${post.slug}`}
+						className="relative z-0 mb-8 flex cursor-pointer flex-col gap-2 overflow-hidden rounded-xl border border-gray-500 transition-colors"
+					>
+						{post.image && (
+							<img
+								src={`/${post.image}`}
+								alt=""
+								className="inset-0 -z-10 m-0 w-full rounded-t-xl object-cover md:h-96"
+							/>
+						)}
+						<div className="p-8">
+							<h2 className="text2xl m-0 md:text-4xl">{post.title}</h2>
+							<small className="m-0">{post.readTime} minute read.</small>
+							{/* <p className="line-clamp-3 my-2">{post.excerpt}</p> */}
+							<p className="m-0 text-white">
+								by {post.author} &middot;{' '}
+								{new Date(post.date ?? '').toLocaleDateString()}
+							</p>
+							<div className="mt-4 flex flex-wrap gap-2">
+								{post.tags?.map((tag) => (
+									<BlogTag key={tag} name={tag} />
+								))}
 							</div>
-						</a>
-					);
-				})}
+						</div>
+					</a>
+				))}
 			</section>
 		</div>
 	);

apps/landing/src/pages/blog/post.page.server.ts

@@ -1,5 +1,5 @@
-import { PageContextBuiltIn } from 'vite-plugin-ssr';
-import { getBlogPost, getBlogPosts } from './api';
+import { PageContextBuiltIn } from 'vite-plugin-ssr/types';
+import { getBlogPost } from './api';
 
 export const passToClient = ['pageProps'];
 

apps/landing/src/pages/blog/post.page.tsx

@@ -30,38 +30,36 @@ function Page({ post }: { post: BlogPost }) {
 				<meta name="author" content={post?.author || 'Spacedrive Technology Inc.'} />
 			</Helmet>
 			<div className="lg:prose-xs prose dark:prose-invert container m-auto mb-20 max-w-4xl p-4 pt-14">
-				<>
-					<figure>
-						{/* <figcaption dangerouslySetInnerHTML={{ __html: post.imageCaption as any }}></figcaption> */}
-						<img src={`/${featured_image}`} alt="" className="mt-8 rounded-xl" />
-					</figure>
-					<section className="-mx-8 flex flex-wrap gap-4 rounded-xl px-8">
-						<div className="w-full grow">
-							<h1 className="m-0 text-2xl leading-snug sm:text-4xl sm:leading-normal">
-								{post?.title}
-							</h1>
-							<p className="m-0 mt-2">
-								by <b>{post?.author}</b> &middot;{' '}
-								{new Date(post?.date ?? '').toLocaleDateString()}
-							</p>
-						</div>
-						<div className="flex flex-wrap gap-2">
-							{post.tags?.map((tag) => (
-								<BlogTag key={tag} name={tag} />
-							))}
-						</div>
-					</section>
-					<article
-						id="content"
-						className="text-lg"
-						dangerouslySetInnerHTML={{
-							__html: post.html?.replaceAll(
-								'<a href=',
-								`<a target="_blank" rel="noreferrer" href=`
-							) as string
-						}}
-					></article>
-				</>
+				<figure>
+					{/* <figcaption dangerouslySetInnerHTML={{ __html: post.imageCaption as any }}></figcaption> */}
+					<img src={`/${featured_image}`} alt="" className="mt-8 rounded-xl" />
+				</figure>
+				<section className="-mx-8 flex flex-wrap gap-4 rounded-xl px-8">
+					<div className="w-full grow">
+						<h1 className="m-0 text-2xl leading-snug sm:text-4xl sm:leading-normal">
+							{post?.title}
+						</h1>
+						<p className="m-0 mt-2">
+							by <b>{post?.author}</b> &middot;{' '}
+							{new Date(post?.date ?? '').toLocaleDateString()}
+						</p>
+					</div>
+					<div className="flex flex-wrap gap-2">
+						{post.tags?.map((tag) => (
+							<BlogTag key={tag} name={tag} />
+						))}
+					</div>
+				</section>
+				<article
+					id="content"
+					className="text-lg"
+					dangerouslySetInnerHTML={{
+						__html: post.html?.replaceAll(
+							'<a href=',
+							`<a target="_blank" rel="noreferrer" href=`
+						) as string
+					}}
+				></article>
 			</div>
 		</>
 	);

apps/landing/src/pages/docs/doc.page.server.ts

@@ -1,4 +1,4 @@
-import { PageContextBuiltIn } from 'vite-plugin-ssr';
+import { PageContextBuiltIn } from 'vite-plugin-ssr/types';
 import { getDoc } from './api';
 import config from './docs';
 

apps/landing/vite.config.ts

@@ -1,3 +1,4 @@
+import vercelSsr from '@magne4000/vite-plugin-vercel-ssr';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -6,16 +7,17 @@ import { defineConfig } from 'vite';
 import md, { Mode } from 'vite-plugin-markdown';
 import ssr from 'vite-plugin-ssr/plugin';
 import svg from 'vite-plugin-svgr';
+import vercel from 'vite-plugin-vercel';
 
 export default defineConfig({
-	// prettier-ignore
-	// Prettier reeeally wants to one-line this -- I AM PUTTING MY FOOT DOWN AND SAYING NO!
 	plugins: [
 		react(),
-		ssr({ prerender: true }),
 		svg(),
 		md({ mode: [Mode.REACT] }),
 		visualizer(),
+		ssr({ prerender: true }),
+		vercel(),
+		vercelSsr()
 	],
 	css: {
 		modules: {