Search result page

resource/css/_search.scss

@@ -70,5 +70,20 @@
   }
 
   .search-result-content {
+    .search-result-page {
+      > h2 {
+        font-size: 20px;
+      }
+      &:first-child > h2 {
+        margin-top: 0;
+      }
+
+      .wiki {
+        border: solid 1px #ccc;
+        padding: 16px;
+        border-radius: 3px;
+        font-size: 13px;
+      }
+    }
   }
 }

resource/css/_wiki.scss

@@ -130,8 +130,14 @@ div.body {
     }
   }
 
-  .highlighted {
-    background: #ff0;
+  em.highlighted {
+    padding: 2px;
+    margin: 0 -2px;
+    font-weight: bold;
+    font-style: normal;
+    color: #333;
+    background-color: rgba(255,255,140,0.5);
+    border-radius: 3px;
   }
 
   // {{{ table (copied from bootstrap .table

resource/js/components/Page/PageBody.js

@@ -16,12 +16,12 @@ export default class PageBody extends React.Component {
       body = this.props.page.revision.body;
     }
 
-    let parsed = '<b>hoge</b>';
+    let parsed = '<b>...</b>';
     try {
       // TODO
       marked.setOptions({
         gfm: true,
-        highlight: (code, lang, callback) => {
+        highlight: function (code, lang) {
           let result, hl;
           if (lang) {
             try {
@@ -33,7 +33,7 @@ export default class PageBody extends React.Component {
           } else {
             result = code;
           }
-          return callback(null, result);
+          return result;
         },
         tables: true,
         breaks: true,

resource/js/components/Page/PagePath.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export default class PagePath extends React.Component {
+
+  // Original Crowi.linkPath
+  /*
+  Crowi.linkPath = function(revisionPath) {
+    var $revisionPath = revisionPath || '#revision-path';
+    var $title = $($revisionPath);
+    var pathData = $('#content-main').data('path');
+
+    if (!pathData) {
+      return ;
+    }
+
+    var realPath = pathData.trim();
+    if (realPath.substr(-1, 1) == '/') {
+      realPath = realPath.substr(0, realPath.length - 1);
+    }
+
+    var path = '';
+    var pathHtml = '';
+    var splittedPath = realPath.split(/\//);
+    splittedPath.shift();
+    splittedPath.forEach(function(sub) {
+      path += '/';
+      pathHtml += ' <a href="' + path + '">/</a> ';
+      if (sub) {
+        path += sub;
+        pathHtml += '<a href="' + path + '">' + sub + '</a>';
+      }
+    });
+    if (path.substr(-1, 1) != '/') {
+      path += '/';
+      pathHtml += ' <a href="' + path + '" class="last-path">/</a>';
+    }
+    $title.html(pathHtml);
+  };
+  */
+
+  linkPath(path) {
+    return path;
+  }
+
+  render() {
+    const page = this.props.page;
+    const shortPath = this.getShortPath(page.path);
+    const pathPrefix = page.path.replace(new RegExp(shortPath + '(/)?$'), '');
+
+    return (
+      <span className="page-path">
+        {pathPrefix}<strong>{shortPath}</strong>
+      </span>
+    );
+  }
+}
+
+PagePath.propTypes = {
+  page: React.PropTypes.object.isRequired,
+};
+
+PagePath.defaultProps = {
+  page: {},
+};

resource/js/components/SearchPage.js

@@ -14,6 +14,7 @@ export default class SearchPage extends React.Component {
       location: location,
       searchingKeyword: this.props.query.q || '',
       searchedPages: [],
+      searchResultMeta: {},
       searchError: null,
     }
 
@@ -41,8 +42,12 @@ export default class SearchPage extends React.Component {
   }
 
   changeURL(keyword) {
-    if (window.history && window.history.pushState ){
-      window.history.pushState(state, 'hoge', 'x');
+    // TODO 整理する
+    if (location && location.hash) {
+      location.hash = '';
+    }
+    if (window.history && window.history.pushState){
+      history.pushState('', '', `/_search?q=${keyword}`);
     }
   }
 
@@ -67,6 +72,7 @@ export default class SearchPage extends React.Component {
         this.setState({
           searchingKeyword: keyword,
           searchedPages: res.data.data,
+          searchResultMeta: res.data.meta,
         });
       }
 
@@ -93,6 +99,7 @@ export default class SearchPage extends React.Component {
         <SearchResult
           pages={this.state.searchedPages}
           searchingKeyword={this.state.searchingKeyword}
+          searchResultMeta={this.state.searchResultMeta}
           />
       </div>
     );

resource/js/components/SearchPage/SearchResult.js

@@ -19,9 +19,12 @@ export default class SearchResult extends React.Component {
       );
     });
 
+    /*
+    UI あとで考える
+    <span className="search-result-meta">Found: {this.props.searchResultMeta.total} pages with "{this.props.searchingKeyword}"</span>
+    */
     return (
       <div className="content-main" id="content-main">
-        <span>Search {this.props.searchingKeyword}</span>
         <div className="search-result row" id="search-result">
           <div className="col-md-4 page-list search-result-list" id="search-result-list">
             <nav data-spy="affix"  data-offset-top="120">
@@ -49,5 +52,6 @@ SearchResult.propTypes = {
 SearchResult.defaultProps = {
   searchedPages: [],
   searchingKeyword: '',
+  searchResultMeta: {},
 };
 

resource/js/components/SearchPage/SearchResultList.js

@@ -15,7 +15,7 @@ export default class SearchResultList extends React.Component {
 
     this.props.searchingKeyword.split(' ').forEach((keyword) => {
       const keywordExp = new RegExp('(' + keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ')', 'ig');
-      returnBody = returnBody.replace(keyword, '<span style="highlighted">$&</span>');
+      returnBody = returnBody.replace(keywordExp, '<em class="highlighted">$&</em>');
     });
 
     //console.log(this.props.searchingKeyword, body);
@@ -28,10 +28,10 @@ export default class SearchResultList extends React.Component {
       //console.log('resultList.page.path', page.path);
       //console.log('resultList.pageBody', pageBody);
       return (
-        <div id={page._id} key={page._id}>
-          <h2>{page.path}</h2>
+        <div id={page._id} key={page._id} className="search-result-page">
+          <h2><a href={page.path}>{page.path}</a></h2>
           <div className="wiki">
-            <PageBody page={page} pageBody={pageBody} />
+            <PageBody className="hige" page={page} pageBody={pageBody} />
           </div>
         </div>
       );

webpack.config.js

@@ -31,11 +31,11 @@ module.exports = {
     ]
   },
   plugins: [
-    new webpack.DefinePlugin({
-      "process.env": {
-        NODE_ENV: process.env.NODE_ENV || "production"
-      }
-    })
+    //new webpack.DefinePlugin({
+    //  "process.env": {
+    //    NODE_ENV: process.env.NODE_ENV || "production"
+    //  }
+    //})
     //new webpack.ProvidePlugin({
     //  jQuery: "jquery",
     //  $: "jquery",