Use Build Output API for landing page (#819)

* build output api

* deploy

* fix blog posts

* maybe idk

* remove vercel-build
This commit is contained in:
Brendan Allan authored and GitHub committed 2023-05-13 19:13:20 +00:00
1 parent 5430781f17
commit cfbc0124d6
9 files changed
+110 -73

No files matched your search

+2 -1
View File
@@ -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"
}
}
+1 -1
View File
@@ -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}/..`;
+1 -1
View File
@@ -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';
+28 -30
View File
@@ -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>
);
@@ -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'];
+30 -32
View File
@@ -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>
</>
);
@@ -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';
+5 -3
View File
@@ -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: {
+40 -2
View File
@@ -195,6 +195,9 @@ importers:
specifier: ^0.4.39
version: 0.4.123(vite@4.3.5)
devDependencies:
'@magne4000/vite-plugin-vercel-ssr':
specifier: ^0.1.5
version: 0.1.5
'@sd/config':
specifier: workspace:*
version: link:../../packages/config
@@ -252,6 +255,9 @@ importers:
vite-plugin-svgr:
specifier: ^2.2.1
version: 2.4.0(vite@4.3.5)
vite-plugin-vercel:
specifier: ^0.1.7
version: 0.1.7(vite@4.3.5)
vite-tsconfig-paths:
specifier: ^3.5.2
version: 3.6.0(vite@4.3.5)
@@ -2352,6 +2358,10 @@ packages:
resolution: {integrity: sha512-IxlOMD5gOM0WfFGdeR98jHKiC82Ad1tUnSjvLS5jnRkfMEKBI+YzHA32Umw8W3Ccp5N4fNEX229BW6RaRpxRWQ==}
dev: false
/@brillout/libassert@0.5.8:
resolution: {integrity: sha512-u/fu+jTRUdNdbLONGq1plCfh+k2/XjSbGVTfnF3rHnSPZd+ABWp0XinR5ifrFkyGOzMbzv8IiQ44lZ4U6ZGrGA==}
dev: true
/@brillout/picocolors@1.0.4:
resolution: {integrity: sha512-rhZBVyrRCb53T9xIGoEjZQ6O4Um3XQWcQ1z2VL2eBQBtJYCsABUUNE/isqbnts3XD1sAkisDF2L3OjJeIgrznQ==}
dev: false
@@ -3505,7 +3515,7 @@ packages:
magic-string: 0.27.0
react-docgen-typescript: 2.2.2(typescript@4.9.5)
typescript: 4.9.5
vite: 4.3.5(less@4.1.3)
vite: 4.3.5(@types/node@18.16.4)(sass@1.62.1)
/@jridgewell/gen-mapping@0.3.3:
resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
@@ -3557,6 +3567,10 @@ packages:
resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
dev: false
/@magne4000/vite-plugin-vercel-ssr@0.1.5:
resolution: {integrity: sha512-4RcK5qHFY+97ldMdw8k3LQyeDaGMkERV7QFJq43cSc27wSxnwz19ACpVHPRDbm8gM7rqhbGd+YksW8wwpw2RuQ==}
dev: true
/@mdx-js/react@2.3.0(react@18.2.0):
resolution: {integrity: sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==}
peerDependencies:
@@ -7652,6 +7666,14 @@ packages:
engines: {node: '>=14.6'}
dev: false
/@vercel/routing-utils@2.2.1:
resolution: {integrity: sha512-kzMZsvToDCDskNRZD71B9UAgstec7ujmlGH8cBEo6F/07VaFeji6GQdgd6Zwnrj+TvzQBggKoPQR64VkVY8Lzw==}
dependencies:
path-to-regexp: 6.1.0
optionalDependencies:
ajv: 6.12.6
dev: true
/@vitejs/plugin-react@2.2.0(vite@4.3.5):
resolution: {integrity: sha512-FFpefhvExd1toVRlokZgxgy2JtnBOdp4ZDsq7ldCWaqGSGn9UhWMAVm/1lxPL14JfNS5yGz+s9yFrQY6shoStA==}
engines: {node: ^14.18.0 || >=16.0.0}
@@ -14957,6 +14979,10 @@ packages:
/path-to-regexp@0.1.7:
resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
/path-to-regexp@6.1.0:
resolution: {integrity: sha512-h9DqehX3zZZDCEm+xbfU0ZmwCGFCAAraPJWMXJ4+v32NjZJilVg3k1TcKsRgIb8IQ/izZSaydDc1OhJCZvs2Dw==}
dev: true
/path-type@4.0.0:
resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
engines: {node: '>=8'}
@@ -18807,6 +18833,19 @@ packages:
- supports-color
dev: true
/vite-plugin-vercel@0.1.7(vite@4.3.5):
resolution: {integrity: sha512-/ta0vTUoKeCsd9ox8TGaVkExRUQpWY92PtcB90ci6UUraul8RXwheOtx6ZALh4nSyiKDOPD3EdmppGlv9Aifdg==}
peerDependencies:
vite: ^4.2.0
dependencies:
'@brillout/libassert': 0.5.8
'@vercel/routing-utils': 2.2.1
esbuild: 0.17.18
fast-glob: 3.2.12
vite: 4.3.5(@types/node@18.16.4)(sass@1.62.1)
zod: 3.21.4
dev: true
/vite-tsconfig-paths@3.6.0(vite@4.3.5):
resolution: {integrity: sha512-UfsPYonxLqPD633X8cWcPFVuYzx/CMNHAjZTasYwX69sXpa4gNmQkR0XCjj82h7zhLGdTWagMjC1qfb9S+zv0A==}
peerDependencies:
@@ -19299,4 +19338,3 @@ packages:
/zod@3.21.4:
resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
dev: false