render page path with multiline

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -7,11 +7,17 @@ import { isTrashPage } from '@commons/util/path-utils';
 
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
+
+import PagePath from '../../models/PagePath';
+import LinkedPagePath from '../../models/LinkedPagePath';
+import PagePathHierarchicalLink from '../PageList/PagePathHierarchicalLink';
+
 import RevisionPath from '../Page/RevisionPath';
 import PageContainer from '../../services/PageContainer';
 import TagLabels from '../Page/TagLabels';
 import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
+
 import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
 
@@ -25,10 +31,19 @@ const GrowiSubNavigation = (props) => {
   const isPageNotFound = pageId == null;
   const isPageInTrash = isTrashPage(path);
 
+  const pagePathModel = new PagePath(pageContainer.state.path, false, true);
+  const linkedPagePathFormer = new LinkedPagePath(pagePathModel.former);
+  const renderFormerLink = () => (
+    <>
+      { !pagePathModel.isRoot && <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} /> }
+    </>
+  );
+
   // Display only the RevisionPath
   if (isPageNotFound || isPageForbidden || isPageInTrash) {
     return (
-      <div className="d-flex align-items-center px-3 py-3 grw-subnavbar">
+      <div className="px-3 py-3 grw-subnavbar">
+        { renderFormerLink() }
         <h1 className="m-0">
           <RevisionPath
             pageId={pageId}
@@ -58,6 +73,7 @@ const GrowiSubNavigation = (props) => {
 
       {/* Page Path */}
       <div>
+        { renderFormerLink() }
         <h1 className="m-0">
           <RevisionPath pageId={pageId} pagePath={pageContainer.state.path} />
         </h1>

src/client/js/components/Page/RevisionPath.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
+import PagePath from '../../models/PagePath';
 import LinkedPagePath from '../../models/LinkedPagePath';
 import PagePathHierarchicalLink from '../PageList/PagePathHierarchicalLink';
 
@@ -16,24 +17,24 @@ const RevisionPath = (props) => {
   };
 
   const {
-    pagePath, pageId, isPageInTrash, isPageForbidden,
+    pageId, isPageInTrash, isPageForbidden,
   } = props;
 
-  const linkedPagePath = new LinkedPagePath(pagePath);
+  const pagePathModel = new PagePath(props.pagePath, false, true);
+  const linkedPagePathLatter = new LinkedPagePath(pagePathModel.latter);
 
   return (
-    <span className="d-flex align-items-center flex-wrap">
-
-      <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />
-
-      <CopyDropdown pagePath={pagePath} pageId={pageId} buttonStyle={buttonStyle} />
-
-      { !isPageInTrash && !isPageForbidden && (
-        <a href="#edit" className="d-block d-edit-none text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
-          <i className="icon-note" />
-        </a>
-      ) }
-    </span>
+    <>
+      <span className="d-flex align-items-center flex-wrap">
+        <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={pagePathModel.isRoot ? undefined : pagePathModel.former} />
+        <CopyDropdown pagePath={props.pagePath} pageId={pageId} buttonStyle={buttonStyle} />
+        { !isPageInTrash && !isPageForbidden && (
+          <a href="#edit" className="d-block d-edit-none text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
+            <i className="icon-note" />
+          </a>
+        ) }
+      </span>
+    </>
   );
 };
 

src/client/js/components/PageList/PagePathHierarchicalLink.jsx

@@ -1,13 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import urljoin from 'url-join';
+
 import LinkedPagePath from '../../models/LinkedPagePath';
 
 
 const PagePathHierarchicalLink = (props) => {
-  const { linkedPagePath } = props;
+  const { linkedPagePath, basePath } = props;
 
+  // render root element
   if (linkedPagePath.isRoot) {
+    if (basePath != null) {
+      return null;
+    }
+
     return props.isPageInTrash
       ? (
         <>
@@ -31,25 +38,29 @@ const PagePathHierarchicalLink = (props) => {
 
   const isParentExists = linkedPagePath.parent != null;
   const isParentRoot = isParentExists && linkedPagePath.parent.isRoot;
+  const isSeparatorRequired = isParentExists && !isParentRoot;
+
+  const href = encodeURI(urljoin(basePath || '', linkedPagePath.href));
+
   return (
     <>
       { isParentExists && (
-        <>
-          <PagePathHierarchicalLink linkedPagePath={linkedPagePath.parent} />
-          { !isParentRoot && (
-            <span className="separator">/</span>
-          ) }
-        </>
+        <PagePathHierarchicalLink linkedPagePath={linkedPagePath.parent} basePath={basePath} />
+      ) }
+      { isSeparatorRequired && (
+        <span className="separator">/</span>
       ) }
 
-      <a className="page-segment" href={encodeURI(linkedPagePath.href)}>{linkedPagePath.pathName}</a>
+      <a className="page-segment" href={href}>{linkedPagePath.pathName}</a>
     </>
   );
 };
 
 PagePathHierarchicalLink.propTypes = {
   linkedPagePath: PropTypes.instanceOf(LinkedPagePath).isRequired,
-  isPageInTrash: PropTypes.bool,
+  basePath: PropTypes.string,
+
+  isPageInTrash: PropTypes.bool, // TODO: omit
 };
 
 export default PagePathHierarchicalLink;

src/client/styles/scss/_subnav.scss

@@ -75,11 +75,11 @@ header.grw-header {
   h1 {
     @include variable-font-size(28px);
     line-height: 1.1em;
+  }
 
-    .separator {
-      margin-right: 0.2em;
-      margin-left: 0.2em;
-    }
+  .separator {
+    margin-right: 0.2em;
+    margin-left: 0.2em;
   }
 
   ul.authors {