chore: add ssr placeholder in index.html

boojack · boojack · commit 6cf7192d6ae1 · 2023-12-14T23:29:42.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,6 @@ tmp
 
 # Frontend asset
 web/dist
-server/dist
 
 # build folder
 build
diff --git a/Dockerfile b/Dockerfile
@@ -15,7 +15,7 @@ FROM golang:1.21-alpine AS backend
 WORKDIR /backend-build
 
 COPY . .
-COPY --from=frontend /frontend-build/web/dist ./server/dist
+COPY --from=frontend /frontend-build/web/dist ./server/frontend/dist
 
 RUN CGO_ENABLED=0 go build -o memos ./bin/memos/main.go
 
diff --git a/docs/development-windows.md b/docs/development-windows.md
@@ -56,12 +56,12 @@ Memos should now be running at [http://localhost:3001](http://localhost:3001) an
 
 ## Building
 
-Frontend must be built before backend. The built frontend must be placed in the backend ./server/dist directory. Otherwise, you will get a "No frontend embeded" error.
+Frontend must be built before backend. The built frontend must be placed in the backend ./server/frontend/dist directory. Otherwise, you will get a "No frontend embeded" error.
 
 ### Frontend
 
 ```powershell
-Move-Item "./server/dist" "./server/dist.bak"
+Move-Item "./server/frontend/dist" "./server/frontend/dist.bak"
 cd web; pnpm i --frozen-lockfile; pnpm build; cd ..;
 Move-Item "./web/dist" "./server/" -Force
 ```
diff --git a/scripts/build.ps1 b/scripts/build.ps1
@@ -85,16 +85,16 @@ if (!$?) {
 }
 
 Write-Host "`nBacking up frontend placeholder..." -f Magenta
-Move-Item "$repoRoot/server/dist" "$repoRoot/server/dist.bak" -Force -ErrorAction Stop
+Move-Item "$repoRoot/server/frontend/dist" "$repoRoot/server/frontend/dist.bak" -Force -ErrorAction Stop
 if (!$?) {
     Write-Host -BackgroundColor red -ForegroundColor white "Could not backup frontend placeholder. See above."
     Exit 1
 }
 
-Write-Host "Moving frontend build to ./server/dist..." -f Magenta
+Write-Host "Moving frontend build to ./server/frontend/dist..." -f Magenta
 Move-Item "$repoRoot/web/dist" "$repoRoot/server/" -Force -ErrorAction Stop
 if (!$?) {
-    Write-Host -BackgroundColor red -ForegroundColor white "Could not move frontend build to /server/dist. See above."
+    Write-Host -BackgroundColor red -ForegroundColor white "Could not move frontend build to /server/frontend/dist. See above."
     Exit 1
 }
 
@@ -126,15 +126,15 @@ Write-Host "Backend built!" -f green
 Write-Host "`nFrontend build took $($frontendTime.TotalSeconds) seconds." -f Cyan
 Write-Host "Backend builds took $($backendTime.TotalSeconds) seconds." -f Cyan
 
-Write-Host "`nRemoving frontend from ./server/dist ..." -f Magenta
-Remove-Item "$repoRoot/server/dist" -Recurse -Force -ErrorAction SilentlyContinue
+Write-Host "`nRemoving frontend from ./server/frontend/dist ..." -f Magenta
+Remove-Item "$repoRoot/server/frontend/dist" -Recurse -Force -ErrorAction SilentlyContinue
 if (!$?) {
-    Write-Host -BackgroundColor red -ForegroundColor white "Could not remove frontend from /server/dist. See above."
+    Write-Host -BackgroundColor red -ForegroundColor white "Could not remove frontend from /server/frontend/dist. See above."
     Exit 1
 }
 
 Write-Host "Restoring frontend placeholder..." -f Magenta
-Move-Item "$repoRoot/server/dist.bak" "$repoRoot/server/dist" -Force -ErrorAction Stop
+Move-Item "$repoRoot/server/frontend/dist.bak" "$repoRoot/server/frontend/dist" -Force -ErrorAction Stop
 if (!$?) {
     Write-Host -BackgroundColor red -ForegroundColor white "Could not restore frontend placeholder. See above."
     Exit 1
diff --git a/scripts/build.sh b/scripts/build.sh
@@ -93,13 +93,13 @@ echo -e "\033[32mFrontend built!\033[0m"
 cd $repo_root
 
 echo -e "\n\033[35mBacking up frontend placeholder...\033[0m"
-mv -f "$repo_root/server/dist" "$repo_root/server/dist.bak"
+mv -f "$repo_root/server/frontend/dist" "$repo_root/server/frontend/dist.bak"
 if [ $? -ne 0 ]; then
     echo -e "\033[0;31mFailed to backup frontend placeholder! Exiting.\033[0m"
     exit 1
 fi
 
-echo -e "\033[35mMoving frontend build to ./server/dist...\033[0m"
+echo -e "\033[35mMoving frontend build to ./server/frontend/dist...\033[0m"
 mv -f "$repo_root/web/dist" "$repo_root/server/"
 if [ $? -ne 0 ]; then
     echo -e "\033[0;31mFailed to move frontend build! Exiting.\033[0m"
@@ -129,16 +129,16 @@ done
 
 echo -e "\033[32mBackend built!\033[0m"
 
-echo -e "\n\033[35mRemoving frontend from ./server/dist...\033[0m"
-rm -rf $repo_root/server/dist
+echo -e "\n\033[35mRemoving frontend from ./server/frontend/dist...\033[0m"
+rm -rf $repo_root/server/frontend/dist
 if [ $? -ne 0 ]
 then
-    echo -e "\033[93mCould not remove frontend from /server/dist.\033[0m"
+    echo -e "\033[93mCould not remove frontend from /server/frontend/dist.\033[0m"
     exit 1
 fi
 
 echo -e "\033[35mRestoring frontend placeholder...\033[0m"
-mv $repo_root/server/dist.bak $repo_root/server/dist
+mv $repo_root/server/frontend/dist.bak $repo_root/server/frontend/dist
 if [ $? -ne 0 ]
 then
     echo -e "\033[93mCould not restore frontend placeholder.\033e[0m"
diff --git a/server/frontend/dist/index.html b/server/frontend/dist/index.html
@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Memos</title>
+    <!-- memos.metadata -->
   </head>
   <body>
     <p>No frontend embeded.</p>
diff --git a/server/frontend/frontend.go b/server/frontend/frontend.go
@@ -1,9 +1,10 @@
-package server
+package frontend
 
 import (
 	"embed"
 	"io/fs"
 	"net/http"
+	"strings"
 
 	"github.com/labstack/echo/v4"
 	"github.com/labstack/echo/v4/middleware"
@@ -14,16 +15,10 @@ import (
 //go:embed dist
 var embeddedFiles embed.FS
 
-func getFileSystem(path string) http.FileSystem {
-	fs, err := fs.Sub(embeddedFiles, path)
-	if err != nil {
-		panic(err)
-	}
+//go:embed dist/index.html
+var rawIndexHTML string
 
-	return http.FS(fs)
-}
-
-func embedFrontend(e *echo.Echo) {
+func Serve(e *echo.Echo) {
 	// Use echo static middleware to serve the built dist folder
 	// refer: https://github.com/labstack/echo/blob/master/middleware/static.go
 	e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
@@ -33,6 +28,10 @@ func embedFrontend(e *echo.Echo) {
 	}))
 
 	assetsGroup := e.Group("assets")
+	assetsGroup.Use(middleware.GzipWithConfig(middleware.GzipConfig{
+		Skipper: defaultAPIRequestSkipper,
+		Level:   5,
+	}))
 	assetsGroup.Use(func(next echo.HandlerFunc) echo.HandlerFunc {
 		return func(c echo.Context) error {
 			c.Response().Header().Set(echo.HeaderCacheControl, "max-age=31536000, immutable")
@@ -44,6 +43,23 @@ func embedFrontend(e *echo.Echo) {
 		HTML5:      true,
 		Filesystem: getFileSystem("dist/assets"),
 	}))
+
+	registerRoutes(e)
+}
+
+func registerRoutes(e *echo.Echo) {
+	e.GET("/m/:memoID", func(c echo.Context) error {
+		indexHTML := strings.ReplaceAll(rawIndexHTML, "<!-- memos.metadata -->", "<meta name=\"memos-memo-id\" content=\""+c.Param("memoID")+"\">"+"\n")
+		return c.HTML(http.StatusOK, indexHTML)
+	})
+}
+
+func getFileSystem(path string) http.FileSystem {
+	fs, err := fs.Sub(embeddedFiles, path)
+	if err != nil {
+		panic(err)
+	}
+	return http.FS(fs)
 }
 
 func defaultAPIRequestSkipper(c echo.Context) bool {
diff --git a/server/server.go b/server/server.go
@@ -16,6 +16,7 @@ import (
 	apiv1 "github.com/usememos/memos/api/v1"
 	apiv2 "github.com/usememos/memos/api/v2"
 	"github.com/usememos/memos/plugin/telegram"
+	"github.com/usememos/memos/server/frontend"
 	"github.com/usememos/memos/server/integration"
 	"github.com/usememos/memos/server/profile"
 	"github.com/usememos/memos/server/service/backup"
@@ -83,7 +84,7 @@ func NewServer(ctx context.Context, profile *profile.Profile, store *store.Store
 	s.ID = serverID
 
 	// Serve frontend.
-	embedFrontend(e)
+	frontend.Serve(e)
 
 	// Serve swagger in dev/demo mode.
 	if profile.Mode == "dev" || profile.Mode == "demo" {
diff --git a/web/index.html b/web/index.html
@@ -7,7 +7,8 @@
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="manifest" href="/manifest.json" />
-    <title>memos</title>
+    <title>Memos</title>
+    <!-- memos.metadata -->
   </head>
   <body>
     <div id="root"></div>
