show creator info

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
+import { isTrashPage, userPageRoot } from '../../../../lib/util/path-utils';
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import RevisionPath from '../Page/RevisionPath';
@@ -10,11 +11,13 @@ import PageContainer from '../../services/PageContainer';
 import TagLabels from '../Page/TagLabels';
 import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
+import UserPicture from '../User/UserPicture';
 
 const GrowiSubNavigation = (props) => {
   const { appContainer, pageContainer } = props;
-  const { isTrashPage } = pageContainer;
-
+  const path = pageContainer.path || '';
+  const { createdAt, creator } = pageContainer.state;
+  console.log(creator);
 
   return (
     <div className="d-flex align-items-center">
@@ -25,7 +28,7 @@ const GrowiSubNavigation = (props) => {
           <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
         </h1>
         {/* TODO hide this component at forbidden page */}
-        {!isTrashPage && <TagLabels />}
+        {!isTrashPage(path) && <TagLabels />}
       </div>
 
       {/* Header Button */}
@@ -35,6 +38,22 @@ const GrowiSubNavigation = (props) => {
       <div>
         <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
       </div>
+      <ul className="authors hidden-sm hidden-xs text-nowrap">
+        {creator != null
+        && (
+        <li>
+          <div className="d-flex align-items-center">
+            <a className="mr-2" href={userPageRoot(creator)} data-toggle="tooltip" data-placement="bottom" title={creator.name}>
+              <UserPicture user={creator} size="sm" />
+            </a>
+            <div>
+              <div>Created by <a href={creator.name}>{creator.name}</a></div>
+              <div className="text-muted">{createdAt}</div>
+            </div>
+          </div>
+        </li>
+        )}
+      </ul>
     </div>
   );
 

src/client/js/services/PageContainer.js

@@ -40,6 +40,8 @@ export default class PageContainer extends Container {
       isLiked: false,
       seenUserIds: [],
       likerUserIds: [],
+      createdAt: mainContent.getAttribute('data-page-created-at'),
+      creator: JSON.parse(mainContent.getAttribute('data-page-creator')),
 
       tags: [],
       templateTagData: mainContent.getAttribute('data-template-tags') || null,
@@ -365,13 +367,4 @@ export default class PageContainer extends Container {
 
   }
 
-  get isTrashPage() {
-    const path = this.state.path || '';
-    if (path.match(/^\/trash(\/.*)?$/)) {
-      return true;
-    }
-
-    return false;
-  }
-
 }

src/lib/util/path-utils.js

@@ -1,4 +1,9 @@
 
+/**
+ * Whether path belongs to the trash page
+ * @param {string} path
+ * @returns {boolean}
+ */
 const isTrashPage = (path) => {
   if (path.match(/^\/trash(\/.*)?$/)) {
     return true;
@@ -7,6 +12,19 @@ const isTrashPage = (path) => {
   return false;
 };
 
+/**
+ * return user path
+ * @param {Object} user
+ * @return {string}
+ */
+const userPageRoot = (user) => {
+  if (!user || !user.username) {
+    return '';
+  }
+  return `/user/${user.username}`;
+};
+
 module.exports = {
   isTrashPage,
+  userPageRoot,
 };

src/server/views/widget/page_content.html

@@ -10,6 +10,8 @@
   data-page-has-draft-on-hackmd="{% if hasDraftOnHackmd %}{{ hasDraftOnHackmd.toString() }}{% endif %}"
   data-page-is-seen="{% if page and page.isSeenUser(user) %}1{% else %}0{% endif %}"
   data-slack-channels="{{ slack|default('') }}"
+  data-page-created-at="{{ page.createdAt|datetz('Y/m/d H:i:s') }}"
+  data-page-creator="{{ page.creator|json }}"
   >
 {% else %}
 <div id="content-main" class="content-main"