apply

packages/app/src/pages/share/[[...path]].page.tsx

@@ -29,6 +29,7 @@ import {
 import { useDescendantsPageListModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
+import { NextPageWithLayout } from '../_app.page';
 import {
   CommonProps, getServerSideCommonProps, generateCustomTitle, getNextI18NextConfig,
 } from '../utils/commons';
@@ -49,7 +50,7 @@ type Props = CommonProps & {
   rendererConfig: RendererConfig,
 };
 
-const SharedPage: NextPage<Props> = (props: Props) => {
+const SharedPage: NextPageWithLayout<Props> = (props: Props) => {
   useIsSearchPage(false);
   useShareLinkId(props.shareLink?._id);
   useCurrentPageId(props.shareLink?.relatedPage._id);
@@ -79,86 +80,91 @@ const SharedPage: NextPage<Props> = (props: Props) => {
         <title>{title}</title>
       </Head>
 
-      <DrawioViewerScript />
-
-      <ShareLinkLayout>
-        <div className={`dynamic-layout-root ${growiLayoutFluidClass} h-100 d-flex flex-column justify-content-between`}>
-          <header className="py-0 position-relative">
-            {isShowSharedPage && <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />}
-          </header>
-
-          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+      <div className={`dynamic-layout-root ${growiLayoutFluidClass} h-100 d-flex flex-column justify-content-between`}>
+        <header className="py-0 position-relative">
+          {isShowSharedPage && <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />}
+        </header>
+
+        <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+
+        <div className="flex-grow-1">
+          <div id="content-main" className="content-main grw-container-convertible">
+            { props.disableLinkSharing && (
+              <div className="mt-4">
+                <ForbiddenPage isLinkSharingDisabled={props.disableLinkSharing} />
+              </div>
+            )}
+
+            { (isNotFound && !props.disableLinkSharing) && (
+              <div className="container-lg">
+                <h2 className="text-muted mt-4">
+                  <i className="icon-ban" aria-hidden="true" />
+                  <span> Page is not found</span>
+                </h2>
+              </div>
+            )}
+
+            { (props.isExpired && !props.disableLinkSharing && shareLink != null) && (
+              <div className="container-lg">
+                <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
+                <h2 className="text-muted mt-4">
+                  <i className="icon-ban" aria-hidden="true" />
+                  <span> Page is expired</span>
+                </h2>
+              </div>
+            )}
+
+            {(isShowSharedPage && shareLink != null) && (
+              <>
+                <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
+                <div className="d-flex flex-column flex-lg-row-reverse">
+
+                  <div className="grw-side-contents-container">
+                    <div className="grw-side-contents-sticky-container">
+
+                      {/* Page list */}
+                      <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
+                        { shareLink.relatedPage.path != null && (
+                          <button
+                            type="button"
+                            className="btn btn-block btn-outline-secondary grw-btn-page-accessories
+                            rounded-pill d-flex justify-content-between align-items-center"
+                            onClick={() => openDescendantPageListModal(shareLink.relatedPage.path)}
+                            data-testid="pageListButton"
+                          >
+                            <div className="grw-page-accessories-control-icon">
+                              <PageListIcon />
+                            </div>
+                            {t('page_list')}
+                            <CountBadge count={shareLink.relatedPage.descendantCount} offset={1} />
+                          </button>
+                        ) }
+                      </div>
 
-          <div className="flex-grow-1">
-            <div id="content-main" className="content-main grw-container-convertible">
-              { props.disableLinkSharing && (
-                <div className="mt-4">
-                  <ForbiddenPage isLinkSharingDisabled={props.disableLinkSharing} />
-                </div>
-              )}
-
-              { (isNotFound && !props.disableLinkSharing) && (
-                <div className="container-lg">
-                  <h2 className="text-muted mt-4">
-                    <i className="icon-ban" aria-hidden="true" />
-                    <span> Page is not found</span>
-                  </h2>
-                </div>
-              )}
-
-              { (props.isExpired && !props.disableLinkSharing && shareLink != null) && (
-                <div className="container-lg">
-                  <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
-                  <h2 className="text-muted mt-4">
-                    <i className="icon-ban" aria-hidden="true" />
-                    <span> Page is expired</span>
-                  </h2>
-                </div>
-              )}
-
-              {(isShowSharedPage && shareLink != null) && (
-                <>
-                  <ShareLinkAlert expiredAt={shareLink.expiredAt} createdAt={shareLink.createdAt} />
-                  <div className="d-flex flex-column flex-lg-row-reverse">
-
-                    <div className="grw-side-contents-container">
-                      <div className="grw-side-contents-sticky-container">
-
-                        {/* Page list */}
-                        <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
-                          { shareLink.relatedPage.path != null && (
-                            <button
-                              type="button"
-                              className="btn btn-block btn-outline-secondary grw-btn-page-accessories
-                              rounded-pill d-flex justify-content-between align-items-center"
-                              onClick={() => openDescendantPageListModal(shareLink.relatedPage.path)}
-                              data-testid="pageListButton"
-                            >
-                              <div className="grw-page-accessories-control-icon">
-                                <PageListIcon />
-                              </div>
-                              {t('page_list')}
-                              <CountBadge count={shareLink.relatedPage.descendantCount} offset={1} />
-                            </button>
-                          ) }
-                        </div>
-
-                        <div className="d-none d-lg-block">
-                          <TableOfContents />
-                        </div>
+                      <div className="d-none d-lg-block">
+                        <TableOfContents />
                       </div>
                     </div>
+                  </div>
 
-                    <div className="flex-grow-1 flex-basis-0 mw-0">
-                      <Page />
-                    </div>
+                  <div className="flex-grow-1 flex-basis-0 mw-0">
+                    <Page />
                   </div>
-                </>
-              )}
-            </div>
+                </div>
+              </>
+            )}
           </div>
         </div>
-      </ShareLinkLayout>
+      </div>
+    </>
+  );
+};
+
+SharedPage.getLayout = function getLayout(page) {
+  return (
+    <>
+      <DrawioViewerScript />
+      <ShareLinkLayout>{page}</ShareLinkLayout>
     </>
   );
 };

packages/app/src/pages/trash.page.tsx

@@ -24,6 +24,7 @@ import {
   useIsSearchScopeChildrenAsDefault, useIsSearchPage, useShowPageLimitationXL, useIsGuestUser, useRendererConfig,
 } from '../stores/context';
 
+import { NextPageWithLayout } from './_app.page';
 import {
   CommonProps, getServerSideCommonProps, getNextI18NextConfig, generateCustomTitle,
 } from './utils/commons';
@@ -47,7 +48,7 @@ type Props = CommonProps & {
   rendererConfig: RendererConfig,
 };
 
-const TrashPage: NextPage<CommonProps> = (props: Props) => {
+const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
   useCurrentUser(props.currentUser ?? null);
 
   useIsSearchServiceConfigured(props.isSearchServiceConfigured);
@@ -81,26 +82,33 @@ const TrashPage: NextPage<CommonProps> = (props: Props) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <BasicLayoutWithEditorMode>
-        <div className={`dynamic-layout-root ${growiLayoutFluidClass}`}>
-          <header className="py-0 position-relative">
-            <GrowiSubNavigation
-              pagePath="/trash"
-              showDrawerToggler={isDrawerMode}
-              isGuestUser={isGuestUser}
-              isDrawerMode={isDrawerMode}
-              additionalClasses={['container-fluid']}
-            />
-          </header>
-
-          <div className="content-main grw-container-convertible mb-5 pb-5">
-            <TrashPageList />
-          </div>
-
-          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+      <div className={`dynamic-layout-root ${growiLayoutFluidClass}`}>
+        <header className="py-0 position-relative">
+          <GrowiSubNavigation
+            pagePath="/trash"
+            showDrawerToggler={isDrawerMode}
+            isGuestUser={isGuestUser}
+            isDrawerMode={isDrawerMode}
+            additionalClasses={['container-fluid']}
+          />
+        </header>
+
+        <div className="content-main grw-container-convertible mb-5 pb-5">
+          <TrashPageList />
         </div>
-      </BasicLayoutWithEditorMode>
 
+        <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+      </div>
+    </>
+  );
+};
+
+TrashPage.getLayout = function getLayout(page) {
+  return (
+    <>
+      <BasicLayoutWithEditorMode>
+        {page}
+      </BasicLayoutWithEditorMode>
       <EmptyTrashModal />
       <PutbackPageModal />
     </>