fix: og image

frontend/appflowy_web_app/nginx.conf

@@ -66,6 +66,12 @@ http {
             access_log off;
         }
 
+        location /og-image.png {
+            root /usr/share/nginx/html;
+            expires 30d;
+            access_log off;
+        }
+
         error_page  404 /404.html;
         location = /404.html {
             root   /usr/share/nginx/html;

frontend/appflowy_web_app/server.cjs

@@ -60,7 +60,7 @@ const BASE_URL = process.env.AF_BASE_URL || 'https://beta.appflowy.cloud';
 const createServer = async (req) => {
   const timer = logRequestTimer(req);
   const reqUrl = new URL(req.url);
-  
+
   logger.info(`Request URL: ${reqUrl.pathname}`);
 
   const [
@@ -68,7 +68,7 @@ const createServer = async (req) => {
     publishName,
   ] = reqUrl.pathname.slice(1).split('/');
 
-  logger.info(`Namespace: ${namespace}, Publish Name: ${publishName}`);
+  logger.info(`Namespace: ${namespace}, Puganblish Name: ${publishName}`);
 
   if (namespace === '' || !publishName) {
     timer();
@@ -94,7 +94,7 @@ const createServer = async (req) => {
     const description = 'Write, share, and publish docs quickly on AppFlowy.\nGet started for free.';
     let title = 'AppFlowy';
     const url = 'https://appflowy.io';
-    let image = 'https://d3uafhn8yrvdfn.cloudfront.net/website/production/_next/static/media/og-image.e347bfb5.png';
+    let image = '/og-image.png';
 
     try {
       // Inject meta data into the HTML to support SEO and social sharing

frontend/appflowy_web_app/src/application/collab.type.ts

@@ -47,7 +47,7 @@ export enum AlignType {
 }
 
 export interface BlockData {
-  bg_color?: string;
+  bgColor?: string;
   font_color?: string;
   align?: AlignType;
 }

frontend/appflowy_web_app/src/components/editor/components/blocks/heading/Heading.tsx

@@ -1,3 +1,4 @@
+import { HEADER_HEIGHT } from '@/components/publish/header';
 import { getHeadingCssProperty } from './utils';
 import { EditorElementProps, HeadingNode } from '@/components/editor/editor.type';
 import React, { forwardRef, memo } from 'react';
@@ -10,7 +11,15 @@ export const Heading = memo(
     const className = `${attributes.className ?? ''} ${fontSizeCssProperty} level-${level}`;
 
     return (
-      <div {...attributes} ref={ref} id={`heading-${node.blockId}`} className={className}>
+      <div
+        {...attributes}
+        ref={ref}
+        id={`heading-${node.blockId}`}
+        style={{
+          scrollMarginTop: HEADER_HEIGHT,
+        }}
+        className={className}
+      >
         {children}
       </div>
     );

frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx

@@ -44,15 +44,10 @@ export const ImageBlock = memo(
         }}
         className={`${className || ''} image-block  relative w-full py-1 ${url ? 'cursor-pointer' : 'cursor-default'}`}
       >
-        <div ref={ref} className={'absolute  left-0 top-0 h-full w-full select-none caret-transparent'}>
+        <div ref={ref} className={'absolute left-0 top-0 h-full w-full select-none caret-transparent'}>
           {children}
         </div>
-        <div
+        <div contentEditable={false} className={`flex w-full select-none ${url ? '' : 'rounded border'} ${alignCss}`}>
-          contentEditable={false}
-          className={`flex w-full select-none ${url ? '' : 'rounded border'} ${
-            selected ? 'border-fill-list-hover' : 'border-line-divider'
-          } ${alignCss}`}
-        >
           {url ? (
             <ImageRender selected={selected} node={node} />
           ) : (

frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageEmpty.tsx

@@ -10,7 +10,7 @@ function ImageEmpty(_: { containerRef: React.RefObject<HTMLDivElement>; onEscape
     <>
       <div
         className={
-          'container-bg flex h-[48px] w-full cursor-pointer select-none items-center gap-[10px] bg-content-blue-50 px-4 text-text-caption'
+          'container-bg flex h-[48px] w-full cursor-pointer select-none items-center gap-[10px] bg-fill-list-active px-4 text-text-caption'
         }
       >
         <ImageIcon />

frontend/appflowy_web_app/src/components/editor/components/blocks/outline/Outline.tsx

@@ -23,10 +23,12 @@ export const Outline = memo(
       const element = document.getElementById(id);
 
       if (element) {
-        void smoothScrollIntoViewIfNeeded(element, {
+        void (async () => {
-          behavior: 'smooth',
+          await smoothScrollIntoViewIfNeeded(element, {
-          block: 'start',
+            behavior: 'smooth',
-        });
+            block: 'start',
+          });
+        })();
       }
     }, []);
 

frontend/appflowy_web_app/src/components/editor/components/element/Element.tsx

@@ -104,7 +104,7 @@ export const Element = memo(
       const data = (node.data as BlockData) || {};
 
       return {
-        backgroundColor: data.bg_color ? renderColor(data.bg_color) : undefined,
+        backgroundColor: data.bgColor ? renderColor(data.bgColor) : undefined,
         color: data.font_color ? renderColor(data.font_color) : undefined,
       };
     }, [node.data]);

frontend/appflowy_web_app/src/components/editor/editor.scss

@@ -235,11 +235,11 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) {
     @apply bg-transparent;
   }
 
-  &:hover {
+  //&:hover {
-    .container-bg {
+  //  .container-bg {
-      background: var(--fill-list-hover) !important;
+  //    background: var(--fill-list-hover) !important;
-    }
+  //  }
-  }
+  //}
 }
 
 [data-block-type='heading'] {

frontend/appflowy_web_app/src/components/publish/PublishView.tsx

@@ -45,7 +45,7 @@ export function PublishView({ namespace, publishName }: PublishViewProps) {
     switch (true) {
       case createHotkey(HOT_KEY_NAME.TOGGLE_SIDEBAR)(e):
         e.preventDefault();
-        setOpen((prev) => !prev);
+        // setOpen((prev) => !prev);
         break;
       default:
         break;

frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx

@@ -10,6 +10,8 @@ import { ReactComponent as Logo } from '@/assets/logo.svg';
 import MoreActions from './MoreActions';
 import { ReactComponent as SideOutlined } from '@/assets/side_outlined.svg';
 
+export const HEADER_HEIGHT = 48;
+
 export function PublishViewHeader({ onOpenDrawer, openDrawer }: { onOpenDrawer: () => void; openDrawer: boolean }) {
   const { t } = useTranslation();
   const viewMeta = usePublishContext()?.viewMeta;
@@ -57,8 +59,9 @@ export function PublishViewHeader({ onOpenDrawer, openDrawer }: { onOpenDrawer:
       style={{
         backdropFilter: 'saturate(180%) blur(16px)',
         background: 'var(--header)',
+        height: HEADER_HEIGHT,
       }}
-      className={'appflowy-top-bar sticky top-0 z-10 flex h-[48px] px-5'}
+      className={'appflowy-top-bar sticky top-0 z-10 flex px-5'}
     >
       <div className={'flex w-full items-center justify-between gap-2 overflow-hidden'}>
         {!openDrawer && (
@@ -69,6 +72,7 @@ export function PublishViewHeader({ onOpenDrawer, openDrawer }: { onOpenDrawer:
             onClose={debounceClosePopover}
           >
             <IconButton
+              className={'hidden'}
               onClick={() => {
                 setOpenPopover(false);
                 onOpenDrawer();