add PreviewCMSHeader

weseek · Oct 13, 2023 · 6c89a59 · 6c89a59
1 parent 506501a
commit 6c89a59
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/apps/app/src/components/PageEditor/Preview.tsx b/apps/app/src/components/PageEditor/Preview.tsx
@@ -6,6 +6,7 @@ import type { RendererOptions } from '~/interfaces/renderer-options';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
+import PreviewCMSHeader from './PreviewCMSHeader';
 
 type Props = {
   rendererOptions: RendererOptions,
@@ -31,6 +32,9 @@ const Preview = React.forwardRef((props: Props, ref: RefObject<HTMLDivElement>):
         }
       }}
     >
+      {pagePath?.startsWith('/_cms') && (
+        <PreviewCMSHeader />
+      ) }
       { markdown != null && (
         <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown}></RevisionRenderer>
       ) }

diff --git a/apps/app/src/components/PageEditor/PreviewCMSHeader.tsx b/apps/app/src/components/PageEditor/PreviewCMSHeader.tsx
@@ -0,0 +1,13 @@
+const PreviewCMSHeader = (): JSX.Element => {
+  return (
+    <div className="preview-cms-header container py-5">
+      <p className="h2 text-info">WESEEK Blog</p>
+      <p className="mt-3 mb-0">WESEEKのエンジニアブログです</p>
+    </div>
+  );
+
+};
+
+PreviewCMSHeader.displayName = 'PreviewCMSHeader';
+
+export default PreviewCMSHeader;
diff --git a/apps/app/src/styles/_editor.scss b/apps/app/src/styles/_editor.scss
@@ -244,19 +244,22 @@
    * CMS styles
    */
   .preview-cms {
-    padding-top: 200px !important;
+    padding: 0 !important;
     background-color: #f9f9f9;
-    background-image: url('../../public/images/weseek-blog-header.jpg');
-    background-repeat: no-repeat;
-    background-size: 100% 170px;
     .wiki{
-      width: 86%;
       padding: 32px;
+      margin: 32px !important;
       background-color: #fff;
       border: solid 1px #ccc;
     }
   }
 
+  .preview-cms-header {
+    background-image: url('../../public/images/weseek-blog-header.jpg');
+    background-position: center;
+    background-size: cover;
+  }
+
   // .builtin-editor .tab-pane#edit
 
   &.hackmd {