Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: og image

Browse Source
This commit is contained in:
Kilu 2024-07-01 12:53:25 +08:00
parent 03a068eb0b
commit 2bf83df2b3
12 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/appflowy_web_app/nginx.conf
View File

@ -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;

BIN
frontend/appflowy_web_app/public/og-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

6
frontend/appflowy_web_app/server.cjs
View File

@ -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

2
frontend/appflowy_web_app/src/application/collab.type.ts
View File

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

11
frontend/appflowy_web_app/src/components/editor/components/blocks/heading/Heading.tsx
View File

@ -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>
);

9
frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx
View File

@ -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
contentEditable={false}
className={`flex w-full select-none ${url ? '' : 'rounded border'} ${
selected ? 'border-fill-list-hover' : 'border-line-divider'
} ${alignCss}`}
>
<div contentEditable={false} className={`flex w-full select-none ${url ? '' : 'rounded border'} ${alignCss}`}>
{url ? (
<ImageRender selected={selected} node={node} />
) : (

2
frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageEmpty.tsx
View File

@ -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 />

10
frontend/appflowy_web_app/src/components/editor/components/blocks/outline/Outline.tsx
View File

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

2
frontend/appflowy_web_app/src/components/editor/components/element/Element.tsx
View File

@ -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]);

10
frontend/appflowy_web_app/src/components/editor/editor.scss
View File

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

2
frontend/appflowy_web_app/src/components/publish/PublishView.tsx
View File

@ -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;

6
frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
View File

@ -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();