Update v0.1.3

js/package.json

@@ -9,7 +9,7 @@
     "start": "webpack --mode development --watch"
   },
   "devDependencies": {
-    "webpack": "^4.43.0",
+    "webpack": "^4.45.0",
     "webpack-cli": "^3.3.12"
   }
 }

js/src/forum/compat.js

@@ -0,0 +1,10 @@
+import { compat } from '@flarum/core/forum';
+import BlogAuthor from './components/BlogItemSidebar/BlogAuthor';
+import BlogItemSidebar from './components/BlogItemSidebar/BlogItemSidebar';
+
+export default () => {
+  Object.assign(compat, {
+    "v17development/blog/components/BlogItemSidebar": BlogItemSidebar,
+    "v17development/blog/components/BlogAuthor": BlogAuthor
+  })
+};

js/src/forum/components/BlogItemSidebar/BlogAuthor.js

@@ -0,0 +1,40 @@
+import Component from 'flarum/Component';
+import ItemList from 'flarum/utils/ItemList';
+import listItems from 'flarum/helpers/listItems';
+import avatar from 'flarum/helpers/avatar';
+
+export default class BlogAuthor extends Component {  
+  view() {
+    return (
+      <div className={"FlarumBlog-Article-Author"}>
+        <div className={`FlarumBlog-Article-Author-background ${this.props.loading ? 'FlarumBlog-Author-Ghost' : ''}`} style={{ backgroundColor: this.props.article && this.props.article.user() ? this.props.article && this.props.article.user().color() : null }} />
+
+        <div className={"FlarumBlog-Article-Author-Avatar"}>{this.props.article && this.props.article.user() ? avatar(this.props.article.user()) : <span className={"Avatar FlarumBlog-Author-Ghost"} />}</div>
+
+        {this.props.article && this.props.article.user() && (
+          <div className={"FlarumBlog-Article-Author-Info"}>
+            <span className={"FlarumBlog-Article-Author-Name"}>{this.props.article.user().displayName()}</span>
+            <p className={"FlarumBlog-Article-Author-Bio"}>{this.props.article.user().bio && this.props.article.user().bio()}</p>
+
+            <ul className={"FlarumBlog-Article-Author-Extended"}>
+              {listItems(this.items().toArray())}
+            </ul>
+          </div>
+        )}
+
+        {this.props.loading && (
+          <div>
+            <span className={"FlarumBlog-Article-Author-Name FlarumBlog-Author-Ghost"}>&nbsp;</span>
+            <p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
+            <p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
+            <p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  items() {
+    return new ItemList();
+  }
+}

js/src/forum/components/BlogItemSidebar/BlogItemSidebar.js

@@ -0,0 +1,27 @@
+import Component from 'flarum/Component';
+import ItemList from 'flarum/utils/ItemList';
+import listItems from 'flarum/helpers/listItems';
+import BlogAuthor from './BlogAuthor';
+import BlogCategories from '../BlogCategories';
+
+export default class BlogItemSidebar extends Component {
+  view() {
+    return (
+      <div className={"FlarumBlog-Article-Sidebar"}>
+        <ul>
+          {listItems(this.items().toArray())}
+        </ul>
+      </div>
+    )
+  }
+
+  items() {
+    const itemlist = new ItemList();
+
+    itemlist.add("author", BlogAuthor.component(this.props), 0);
+
+    itemlist.add("categories", BlogCategories.component(this.props), 0);
+
+    return itemlist;
+  }
+}

js/src/forum/index.js

@@ -6,6 +6,8 @@ import BlogOverview from "./pages/BlogOverview";
 import redirector from "./utils/redirector";
 import BlogMeta from "../common/Models/BlogMeta";
 import extendTagOverview from "./utils/extendTagOverview";
+import discussionRouting from "./utils/discussionRouting";
+import compat from "./compat";
 
 // Register Flarum Blog
 app.initializers.add('v17development-flarum-blog', app => {
@@ -25,4 +27,9 @@ app.initializers.add('v17development-flarum-blog', app => {
   // Extend tag overview.
   // Hide tags which are used as blog category
   extendTagOverview();
-});
+
+  // Make that blog articles have a blog route and not a discussion route
+  discussionRouting();
+});
+
+compat();

js/src/forum/pages/BlogComposer.js

@@ -0,0 +1,47 @@
+import ComposerBody from 'flarum/components/ComposerBody';
+import Button from 'flarum/components/Button';
+import {extend} from 'flarum/extend';
+
+export default class ArticleComposer extends ComposerBody {
+  init() {
+    super.init();
+
+    this.previewContent = false;
+  }
+
+  // Render
+  render() {
+    const hasContent = (this.content() && this.content() !== "");
+
+    return (
+      <div className={"Flarum-Support-ArticleComposer"}>
+        <div className={"Flarum-Support-ArticleComposer-tabs"}>
+          <Button className={!this.previewContent && "AricleComposerButtonSelected"} onclick={() => this.previewContent = false}>{app.translator.trans('v17development-flarum-support.forum.composer.write')}</Button>
+          <Button className={this.previewContent && "AricleComposerButtonSelected"} onclick={() => this.previewContent = true}>{app.translator.trans('v17development-flarum-support.forum.composer.view')}</Button>
+        </div>
+
+        <div className={"Composer Flarum-Support-ComposeArticle-body"}>
+          {this.previewContent ? (
+            <div className={"Flarum-Support-ArticleComposer-preview"} config={hasContent && this.configPreview.bind(this)}>
+              {!hasContent && (
+                app.translator.trans('v17development-flarum-support.forum.composer.nothing_to_preview')
+              )}
+            </div>
+          ) : this.view()}
+        </div>
+      </div>
+    )
+  }
+
+  // Initialize preview content
+  configPreview(element) {
+    s9e.TextFormatter.preview(this.content() || '', element);
+  }
+
+  // Submit trigger
+  onsubmit() {
+    if(this.props.onsubmit) {
+      this.props.onsubmit();
+    }
+  }
+}

js/src/forum/pages/BlogItem.js

@@ -1,10 +1,10 @@
 import Page from 'flarum/components/Page';
-import avatar from 'flarum/helpers/avatar';
 import Button from 'flarum/components/Button';
+import CommentPost from 'flarum/components/CommentPost';
 import ReplyComposer from 'flarum/components/ReplyComposer';
 import PostStream from 'flarum/components/PostStream';
-import BlogCategories from '../components/BlogCategories';
 import BlogPostController from '../components/BlogPostController';
+import BlogItemSidebar from '../components/BlogItemSidebar/BlogItemSidebar';
 
 export default class BlogItem extends Page {
   init() {
@@ -90,6 +90,21 @@ export default class BlogItem extends Page {
     return (
       <div className={"FlarumBlogItem"}>
         <div className={"container"}>
+          <div className={"FlarumBlog-ToolButtons"}>
+            <Button 
+              className={"Button"}
+              onclick={() => {
+                if(app.previous && app.previous.props.routeName === "blog") {
+                  app.history.back();
+                }else{
+                  m.route(app.route("blog"));
+                }
+              }}
+              icon={"fas fa-angle-left"}
+              >
+              {app.translator.trans('v17development-flarum-blog.forum.return_to_overview')}
+            </Button>
+          </div>
           <div className={"FlarumBlog-Article"}>
             <div className={"FlarumBlog-Article-Container"}>
               <div className={"FlarumBlog-Article-Content"}>
@@ -132,14 +147,13 @@ export default class BlogItem extends Page {
                     </div>
                   ))}
 
-                  <div className={"Post-body"}>
-                    {!this.loading && this.article.blogMeta() && this.article.blogMeta().isPendingReview() == true && (
+                  {!this.loading && this.article.blogMeta() && this.article.blogMeta().isPendingReview() == true && (
+                    <div className={"Post"}>
                       <blockquote class="uncited" style={{ fontSize: '16px' }}><div><span className={"far fa-clock"} style={{ marginRight: '5px' }} /> {app.translator.trans('v17development-flarum-blog.forum.review_article.pending_review')}</div></blockquote>
-                    )}
-
-                    {!this.loading && articlePost && m.trust(articlePost.contentHtml())}
+                    </div>
+                  )}
 
-                  </div>
+                  {!this.loading && articlePost && <CommentPost post={articlePost} />}
                 </div>
               </div>
 
@@ -156,31 +170,7 @@ export default class BlogItem extends Page {
               </div>
             </div>
 
-            <div className={"FlarumBlog-Article-Author"}>
-              <div className={"FlarumBlog-Article-Author-Info"}>
-                <div className={`FlarumBlog-Article-Author-background ${this.loading ? 'FlarumBlog-Author-Ghost' : ''}`} style={{ backgroundColor: this.article && this.article.user() ? this.article && this.article.user().color() : null }} />
-
-                <div className={"FlarumBlog-Article-Author-Avatar"}>{this.article && this.article.user() ? avatar(this.article.user()) : <span className={"Avatar FlarumBlog-Author-Ghost"} />}</div>
-
-                {this.article && this.article.user() && (
-                  <div style={{ padding: '0 20px 20px' }}>
-                    <span className={"FlarumBlog-Article-Author-Name"}>{this.article.user().displayName()}</span>
-                    <p className={"FlarumBlog-Article-Author-Bio"}>{this.article.user().bio()}</p>
-                  </div>
-                )}
-
-                {this.loading && (
-                  <div>
-                    <span className={"FlarumBlog-Article-Author-Name FlarumBlog-Author-Ghost"}>&nbsp;</span>
-                    <p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
-                    <p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
-                    <p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
-                  </div>
-                )}
-              </div>
-
-              <BlogCategories />
-            </div>
+            <BlogItemSidebar article={this.article} loading={this.loading} />
           </div>
         </div>
       </div>

js/src/forum/pages/BlogOverview.js

@@ -38,7 +38,8 @@ export default class BlogOverview extends Page {
       app.store.find('discussions', {
         filter: {
           q: `is:blog${m.route.param('slug') ? ` tag:${m.route.param('slug')}` : ''}`
-        }
+        },
+        sort: '-createdAt'
       })
         .then(this.show.bind(this))
         .catch(() => {
@@ -234,7 +235,7 @@ export default class BlogOverview extends Page {
     app.forum.attribute('blogTags').forEach(tagId => {
       const tag = app.store.getById('tags', tagId);
 
-      if(tags.length === 0 && !tag.isChild()) {
+      if(tag && tags.length === 0 && !tag.isChild()) {
         tags.push(tag);
       }
     });

js/src/forum/utils/discussionRouting.js

@@ -0,0 +1,45 @@
+export default function () {
+  // Save the original function before we override it
+  const original_discussion_route = app.route.discussion;
+
+  /**
+   * Generate a URL to a discussion OR a Blog Article.
+   *
+   * CORE_CODE_OVERRIDE: This overrides the standard function from flarum/core.
+   * The code is inspired from js/src/forum/routes.js and now handles different types of discussions.
+   * It will try to keep the original function executed if the discussion being
+   * processed isn't a blog article.
+   *
+   * @param {Discussion} discussion
+   * @param {Integer} [near]
+   * @return {String}
+   */
+  app.route.discussion = (discussion, near) => {
+    const discussionRedirectEnabled =
+      app.forum.attribute('blogRedirectsEnabled') === 'both' ||
+      app.forum.attribute('blogRedirectsEnabled') === 'discussions_only';
+    let shouldRedirect = false;
+    if (discussionRedirectEnabled && discussion.tags().length > 0) {
+      const blogTags = app.forum.attribute('blogTags');
+
+      const foundTags = discussion.tags().filter((tag) => {
+        return (
+          blogTags.indexOf(tag.id()) >= 0 ||
+          (tag.parent() && blogTags.indexOf(tag.parent().id()) >= 0)
+        );
+      });
+
+      if (foundTags.length > 0) {
+        shouldRedirect = true;
+      }
+    }
+    if (shouldRedirect) {
+      const slug = discussion.slug();
+      return app.route('blogArticle', {
+        id: discussion.id() + (slug.trim() ? '-' + slug : ''),
+      });
+    } else {
+      return original_discussion_route(discussion, near);
+    }
+  };
+}

js/src/forum/utils/redirector.js

@@ -1,6 +1,5 @@
 import IndexPage from 'flarum/components/IndexPage';
 import DiscussionPage from 'flarum/components/DiscussionPage';
-import LoadingIndicator from 'flarum/components/LoadingIndicator';
 import { extend, override } from 'flarum/extend';
 
 export default function() {
@@ -21,37 +20,27 @@ export default function() {
   });
 
   // Redirect discussion to blog article
-  override(DiscussionPage.prototype, 'view', function(original) {
+  override(DiscussionPage.prototype, 'show', function(original, discussion) {
     const discussionRedirectEnabled = app.forum.attribute('blogRedirectsEnabled') === 'both' || app.forum.attribute('blogRedirectsEnabled') === 'discussions_only';
-    if(discussionRedirectEnabled && this.discussion && this.discussion && this.discussion.tags().length > 0) {
+    if(discussionRedirectEnabled && discussion && discussion && discussion.tags().length > 0) {
       const blogTags = app.forum.attribute('blogTags');
 
-      const foundTags = this.discussion.tags().filter(tag => {
+      const foundTags = discussion.tags().filter(tag => {
         return blogTags.indexOf(tag.id()) >= 0 ||  (tag.parent() && blogTags.indexOf(tag.parent().id()) >= 0)
       });
 
       // Only redirect if the discussion has blog tags
-      if(foundTags.length > 0) {
-        // Redirect to discussion
+      if (foundTags.length > 0) {
+        // Redirect to blog article
         const url = app.route('blogArticle', {
-          id: `${this.discussion.id()}-${this.discussion.slug()}`
+          id: `${discussion.id()}-${discussion.slug()}`
         });
 
-        document.location.href = url;
-
-        return (
-          <div style={{ textAlign: 'center', padding: '40px 20px' }}>
-            <LoadingIndicator size={"large"} />
-
-            <h2 style={{ marginTop: '40px' }}>{app.translator.trans('v17development-flarum-blog.forum.utils.redirect.title')}</h2>
-            {app.translator.trans('v17development-flarum-blog.forum.utils.redirect.link', {
-              a: <a href={url} />
-            })}
-          </div>
-        );
+        // Setting the 3rd argument to true replaces the current state in the browser history, that way the browser back button works as expected.
+        m.route(url, null, true);
       }
+    } else {
+      return original();
     }
-
-    return original();
   });
 }