ci(website): add ci

.github/workflows/main.yml

@@ -299,6 +299,54 @@ jobs:
             codeimage-ui-pr-{{PR_NUMBER}}.vercel.app
 
 
+  build-website-dev:
+    name: "@codeimage/website dev and Preview"
+    environment: Preview
+    needs: [ build-packages ]
+    if: (${{ needs.install.outputs.app-change == 'true' }} || ${{ needs.install.outputs.libs-change == 'true' }})
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout PR
+        uses: actions/checkout@v2
+        with:
+          ref: "refs/pull/${{ github.event.number }}/merge"
+      - uses: pnpm/[email protected]
+        with:
+          version: 7
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Restore dist
+        uses: actions/cache@v3
+        with:
+          path: packages
+          key: packages-dist-${{ github.run_id }}-${{ github.run_number }}
+
+      - name: Build website preview
+        env:
+          ENABLE_VERCEL_BUILD: true
+        run: |
+          pnpm --filter=@codeimage/website build
+
+      - uses: amondnet/vercel-action@v19
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
+          github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
+          vercel-args: '--prebuilt' #Optional
+          working-directory: packages/website
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}  #Required
+          vercel-project-id: ${{ secrets.VERCEL_WEBSITE_DEV_PROJECT_ID}} #Required
+          alias-domains: | #Optional
+            codeimage-website-pr-{{PR_NUMBER}}.vercel.app
+
+
   build-api:
     if: ${{ needs.install.outputs.backend-change == 'true' }}
     name: Build Api

apps/website/src/components/Main/MainPage.css.ts

@@ -41,11 +41,12 @@ export const backdrop = style({
   background:
     'conic-gradient(from 230.29deg at 51.63% 52.16%, rgb(36, 0, 255) 0deg, rgb(0, 135, 255) 67.5deg, rgb(108, 39, 157) 198.75deg, rgb(24, 38, 163) 251.25deg, rgb(54, 103, 196) 301.88deg, rgb(105, 30, 255) 360deg)',
   overflow: 'hidden',
-  width: '75%',
+  width: '60%',
   height: '100%',
   position: 'relative',
   zIndex: 0,
   margin: 'auto',
+  marginTop: '100px',
 });
 
 export const screenshot = style({

apps/website/src/components/Main/MainPage.tsx

@@ -1,4 +1,5 @@
-import {Box, Text} from '@codeimage/ui';
+import {Box, Button, Text} from '@codeimage/ui';
+import {HStack} from '@codeimage/ui';
 import {
   imageLeft,
   imageBox,
@@ -24,6 +25,16 @@ export function MainPage() {
           Create beautiful <div class={screenshot}>screenshots</div> <br /> of
           your source code.
         </Text>
+
+        <HStack spacing={4} marginTop={6}>
+          <Button size={'lg'} variant={'solid'} theme={'primary'}>
+            Getting started
+          </Button>
+
+          <Button size={'lg'} variant={'solid'} theme={'primaryAlt'}>
+            See more
+          </Button>
+        </HStack>
       </Box>
       <Box class={imageBox}>
         <img

apps/website/vite.config.ts

@@ -1,10 +1,14 @@
 import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin';
 import solid from 'solid-start/vite';
 import {defineConfig} from 'vite';
+import {withStaticVercelPreview} from '../../scripts/vercel-output-build';
+
+const enableSsr = !process.env.ENABLE_VERCEL_BUILD;
 
 export default defineConfig({
   plugins: [
-    solid(),
+    solid({ssr: enableSsr}),
+    withStaticVercelPreview(),
     vanillaExtractPlugin({
       esbuildOptions: {
         external: ['solid-js/web'],