show date

resource/locales/ja/translation.json

@@ -244,7 +244,7 @@
       "unlinked": "このページへのリダイレクトは削除されました。",
       "restricted": "このページの閲覧は制限されています",
       "stale": "このページは最終更新日から{{count}}年以上が経過しています。",
-      "expiration": "このシェアリンクの有効期限は <strong>%s</strong> です。"
+      "expiration": "このシェアリンクの有効期限は <strong>{{expiration}}</strong> です。"
     }
   },
   "page_edit": {

src/client/js/bootstrap.jsx

@@ -7,6 +7,7 @@ import SearchTop from './components/Navbar/SearchTop';
 import NavbarToggler from './components/Navbar/NavbarToggler';
 import PersonalDropdown from './components/Navbar/PersonalDropdown';
 import Sidebar from './components/Sidebar';
+import ShareLinkAlert from './components/Page/ShareLinkAlert';
 import StaffCredit from './components/StaffCredit/StaffCredit';
 
 import AppContainer from './services/AppContainer';
@@ -51,6 +52,8 @@ const componentMappings = {
 
   'grw-sidebar-wrapper': <Sidebar />,
 
+  'share-link-alert': <ShareLinkAlert />,
+
   'staff-credit': <StaffCredit />,
 };
 

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+const ShareLinkAlert = (props) => {
+  const { t } = props;
+  const shareContent = document.getElementById('is-shared-page');
+  const expiration = shareContent.getAttribute('data-expiration');
+
+  return (
+    <p className="alert alert-pink py-3 px-4">
+      <i className="icon-fw icon-link"></i>
+      {/* eslint-disable-next-line react/no-danger */}
+      <span dangerouslySetInnerHTML={{ __html: t('page_page.notice.expiration', { expiration }) }} />
+    </p>
+  );
+};
+
+
+ShareLinkAlert.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(ShareLinkAlert);

src/server/views/layout-growi/shared_page.html

@@ -14,9 +14,9 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="row" id="is-shared-page">
+  <div class="row" id="is-shared-page" data-expiration="{{ expiration|datetz('Y/m/d H:i:s')}}">
     <div class="col grw-page-content-container">
-      {% include '../widget/share-link-notice.html' %}
+     <div id="share-link-alert"></div>
 
       {% include '../widget/page_content.html' %}
       {# force remove #revision-toc from #content_main of parent #}

src/server/views/layout-kibela/shared_page.html

@@ -14,9 +14,9 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="row" id="is-shared-page">
+  <div class="row" id="is-shared-page" data-expiration="{{ expiration|datetz('Y/m/d H:i:s')}}">
     <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
-      {% include '../widget/share-link-notice.html' %}
+      <div id="share-link-alert"></div>
 
       {% include '../widget/page_content.html' %}
       {# force remove #revision-toc from #content_main of parent #}

src/server/views/widget/share-link-notice.html

@@ -1,3 +0,0 @@
-<p class="alert alert-pink py-3 px-4">
-    <i class="icon-fw icon-link"></i>{{ t('page_page.notice.expiration', expiration|date('Y-m-d H:i:s')) }}
-</p>