feat: venus adjust

.github/deployment/Dockerfile-affine

@@ -0,0 +1,21 @@
+FROM node:16-alpine as builder
+WORKDIR /app
+COPY . .
+RUN apk add g++ make python3 git
+RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:local
+
+FROM node:16-alpine as relocate
+WORKDIR /app
+COPY --from=builder /app/dist/apps/ligo-virgo ./dist
+COPY --from=builder /app/.github/deployment/Caddyfile-lisa ./
+RUN rm ./dist/*.txt
+
+# =============
+# lisa image
+# =============
+FROM caddy:2.4.6-alpine as lisa
+WORKDIR /app
+COPY --from=relocate /app .
+
+EXPOSE 3000
+CMD ["caddy", "run"]

.github/workflows/affine.yml

@@ -0,0 +1,57 @@
+name: Build AFFiNE-Local
+
+on:
+    push:
+        branches: [master]
+    pull_request:
+        branches: [master]
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+# See https://docs.github.com/en/actions/using-jobs/using-concurrency
+concurrency:
+    # The concurrency group contains the workflow name and the branch name for
+    # pull requests or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+env:
+    REGISTRY: ghcr.io
+    NAMESPACE: toeverything
+    AFFINE_IMAGE_NAME: AFFiNE
+    IMAGE_TAG_LATEST: nightly-latest
+
+jobs:
+    ligo-virgo:
+        runs-on: self-hosted
+        environment: development
+        permissions:
+            contents: read
+            packages: write
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+
+            - name: Log in to the Container registry
+              uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Extract metadata (tags, labels) for Docker (AFFiNE-Local)
+              id: meta_affine
+              uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.AFFINE_IMAGE_NAME }}
+                  tags: ${{ env.IMAGE_TAG_LATEST }}
+
+            - name: Build and push Docker image (AFFINE-Local)
+              uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+              with:
+                  context: .
+                  file: ./.github/deployment/Dockerfile-affine
+                  push: ${{ github.ref == 'refs/heads/master' && true || false }}
+                  tags: ${{ steps.meta_affine.outputs.tags }}
+                  labels: ${{ steps.meta_affine.outputs.labels }}
+                  target: AFFiNE

apps/venus/package.json

@@ -14,6 +14,9 @@
     },
     "devDependencies": {
         "mini-css-extract-plugin": "^2.6.1",
-        "webpack": "^5.73.0"
+        "image-minimizer-webpack-plugin": "^3.2.3",
+        "imagemin": "^8.0.1",
+        "imagemin-optipng": "^8.0.0",
+        "webpack": "^5.74.0"
     }
 }

apps/venus/src/app/index.tsx

@@ -6,13 +6,18 @@ import clsx from 'clsx';
 
 import { CssVarsProvider, styled } from '@mui/joy/styles';
 import { Box, Button, Container, Grid, SvgIcon, Typography } from '@mui/joy';
-import Card from '@mui/joy/Card';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import RedditIcon from '@mui/icons-material/Reddit';
 import TelegramIcon from '@mui/icons-material/Telegram';
 // eslint-disable-next-line no-restricted-imports
 import { useMediaQuery } from '@mui/material';
 
+import LogoImage from './logo.png';
+import CollaborationImage from './collaboration.png';
+import PageImage from './page.png';
+import ShapeImage from './shape.png';
+import TaskImage from './task.png';
+
 const DiscordIcon = (props: any) => {
     return (
         <SvgIcon
@@ -407,10 +412,7 @@ export function App() {
                             },
                         }}
                     >
-                        <AffineImage
+                        <AffineImage src={PageImage} alt="AFFiNE main ui" />
-                            src="/assets/page.png"
-                            alt="AFFiNE main ui"
-                        />
                     </Box>
                 </Grid>
                 <Grid xs={12} sx={{ display: 'flex' }}>
@@ -524,7 +526,7 @@ export function App() {
                             }}
                         >
                             <AffineImage
-                                src="/assets/shape.png"
+                                src={ShapeImage}
                                 alt="AFFiNE Shape Your Page"
                             />
                         </Box>
@@ -606,7 +608,7 @@ export function App() {
                             }}
                         >
                             <AffineImage
-                                src="/assets/task.png"
+                                src={TaskImage}
                                 alt="AFFiNE Plan Your Task"
                             />
                         </Box>
@@ -667,7 +669,7 @@ export function App() {
                         }}
                     >
                         <AffineImage
-                            src="/assets/collaboration.png"
+                            src={CollaborationImage}
                             alt="AFFiNE Privacy-first, and collaborative"
                         />
                     </Box>
@@ -680,7 +682,7 @@ export function App() {
                             margin: 'auto',
                         }}
                     >
-                        <AffineImage src="/assets/logo.png" alt="AFFiNE Logo" />
+                        <AffineImage src={LogoImage} alt="AFFiNE Logo" />
                     </Box>
                 </Grid>
                 <Grid xs={12} sx={{ display: 'flex' }}>

apps/venus/webpack.config.js

@@ -7,6 +7,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const Style9Plugin = require('style9/webpack');
 
@@ -61,6 +62,14 @@ module.exports = function (webpackConfig) {
                     parallel: true,
                 }),
                 new CssMinimizerPlugin(),
+                new ImageMinimizerPlugin({
+                    minimizer: {
+                        implementation: ImageMinimizerPlugin.imageminMinify,
+                        options: {
+                            plugins: [['optipng', { optimizationLevel: 5 }]],
+                        },
+                    },
+                }),
             ],
             splitChunks: {
                 chunks: 'all',