Bug fixes, styling tweaks, SEO tags, preload data, README

README.md

@@ -1,20 +1,70 @@
-# 🗂️ Flarum Blog 
-First Flarum blog extension.
+# 📰 Flarum Blog 
+This Flarum extension will add a blog system to your forum.  
+
+If you have any feedback, let us know! Do you experience issues? You can report issues on the Flarum Forum or on [GitHub](https://github.com/v17development/flarum-blog).
 
 ## ⚠️ Flarum beta-13 only
-This extension is currently Flarum beta-13 only, beta-14 support will be added later.
+This extension is currently Flarum **beta-13 only**, beta-14 support will be added later.
 
 ## 📥 Installation
 If you like to install this extension, run the following command:
+> **⚠️ Notice:** Flarum beta-13 only
 ```
 composer require v17development/flarum-blog
 ```
 
+> **⚠️ Notice:** Flarum beta-13 only
+
 ## ♻ Updating
 Run the following command on your server to update the plugin
 ```
 composer update v17development/flarum-blog
 ```
 
+## 🦸 Features
+- Adds a 'Blog' page and article detail page to your forum
+- Uses the advantages of the `flarum-tags` extension
+- Fully integrated SEO tags using the `flarum-seo` extension
+- Add summary to an article
+- Add an image to an article
+- Highlight a post
+- Disable or allow comments by default
+- Blog posts could require a review (if set up)
+- Custom blog and review role
+- Friendly user interface
+- Set 'blog overview' as home page
+- Works with already existing discussions/articles
+- Including ghost loading
+
+## 📝 To-do:
+- Add RSS (possible)
+- Upload images (using `fof-upload`)
+
+## 🙋 Questions, feedback?
+If you have any questions related to this extension, don't hesistate and send us an email, or ask your question on our [V17 Development Slack workspace](https://join.slack.com/t/v17dev/shared_invite/zt-g6ky1fd3-RreB9UB~636jL~QjDGfZHg).
+
 ## ❤️ Sponsored by Glowing Blue
-This extension is sponsored by [Glowing Blue](https://glowingblue.com/).
+This extension is sponsored by [Glowing Blue](https://glowingblue.com/).
+
+## 🖼️ Screenshots
+### Blog overview page:
+
+[![Image from Gyazo](https://i.gyazo.com/dfbba7a46aa153d8c6905733bd9b58c0.gif)](https://gyazo.com/dfbba7a46aa153d8c6905733bd9b58c0)
+
+### Blog article:
+[![Image from Gyazo](https://i.gyazo.com/32e901c6aa4cc85144777d16756ec7b0.gif)](https://gyazo.com/32e901c6aa4cc85144777d16756ec7b0)
+
+---
+### Blog tools:
+
+[![](https://i.imgur.com/xa8izBD.png)](https://imgur.com/a/zwClPHd)
+
+---
+### Blog settings:
+
+[![](https://i.imgur.com/Iyca8AJ.png)](https://imgur.com/a/mnxRtBh)
+
+---
+### Admin settings:
+
+[![](https://i.imgur.com/0F0XvYk.png)](https://imgur.com/a/QMTn3Ud)

extend.php

@@ -13,6 +13,7 @@
 
 // Controllers
 use V17Development\FlarumBlog\Controller\BlogOverviewController;
+use V17Development\FlarumBlog\Controller\BlogItemController;
 
 // API controllers
 use V17Development\FlarumBlog\Api\Controller\CreateBlogMetaController;
@@ -32,9 +33,8 @@
         ->js(__DIR__.'/js/dist/forum.js')
         ->css(__DIR__ . '/less/Forum.less')
         ->route('/blog', 'blog.overview', BlogOverviewController::class)
-        // ->route('/blog/categories', 'blog.categories', BlogOverviewController::class)
-        // ->route('/blog/category/{category}', 'blog.category', BlogOverviewController::class)
-        ->route('/blog/{id:[\d\S]+(?:-[^/]*)?}', 'blog.post', BlogOverviewController::class)
+        ->route('/blog/category/{category}', 'blog.category', BlogOverviewController::class)
+        ->route('/blog/{id:[\d\S]+(?:-[^/]*)?}', 'blog.post', BlogItemController::class)
         // Shall we add RSS?
         // ->get('/blog/rss.xml', 'blog.rss.xml', RSS::class)
     ,

js/src/forum/components/BlogCategories.js

@@ -8,7 +8,7 @@ export default class BlogCategories extends Component {
   view() {
     return (
       <div className={"BlogCategories"}>
-        <h3>Categories</h3>
+        <h3>{app.translator.trans('v17development-flarum-blog.forum.categories')}</h3>
 
         {this.blogCategories && this.blogCategories.map(tagId => {
           const tag = app.store.getById('tags', tagId);

js/src/forum/components/BlogPostController.js

@@ -6,6 +6,7 @@ import Button from 'flarum/components/Button';
 import Dropdown from 'flarum/components/Dropdown';
 import BlogPostSettingsModal from './Modals/BlogPostSettingsModal';
 import EditPostComposer from 'flarum/components/EditPostComposer';
+import extractText from 'flarum/utils/extractText';
 import RenameArticleModal from './Modals/RenameArticleModal';
 
 export default class BlogPostController extends Component {
@@ -128,7 +129,7 @@ export default class BlogPostController extends Component {
               onclick: () => {
                 // Confirm deletion
                 if (confirm(extractText(app.translator.trans('core.forum.discussion_controls.delete_confirmation')))) {
-                  // Redirect if the current page is an knowledge base article
+                  // Redirect if the current page is an blog article
                   if (app.history.getCurrent().name === 'blogArticle') {
                     if(app.previous) {
                       app.history.back();

js/src/forum/components/Modals/BlogPostSettingsModal.js

@@ -43,7 +43,7 @@ export default class BlogPostSettingsModal extends Modal {
     items.add('summary', (
       <div className="Form-group">
         <label>Article summary:</label>
-        <textarea className="FormControl" value={this.summary()} placeholder={"Please enter a summary"} oninput={m.withAttr('value', this.summary)}/>
+        <textarea className="FormControl" style={{ maxWidth: '100%', minWidth: '100%', width: '100%', minHeight: '120px' }} value={this.summary()} placeholder={"Please enter a summary"} oninput={m.withAttr('value', this.summary)}/>
 
         <small>This summary will be visible on the blog overview page and will be used for SEO purposes.</small>
       </div>
@@ -54,6 +54,8 @@ export default class BlogPostSettingsModal extends Modal {
         <label>Article image URL:</label>
         <input type="text" className="FormControl" value={this.featuredImage()} placeholder={"https://"} oninput={m.withAttr('value', this.featuredImage)}/>
 
+        <small>Best image resolution for social media: 1200x630</small>
+
         {this.featuredImage() != "" && (
           <img src={this.featuredImage()} alt={this.props.article.title()} title={"Blog post image"} width={"100%"} style={{ marginTop: '15px' }} />
         )}

js/src/forum/pages/BlogItem.js

@@ -62,8 +62,6 @@ export default class BlogItem extends Page {
     if (article.payload && article.payload.included) {
       const articleId = article.id();
 
-      console.log(article.payload.included);
-
       includedPosts = article.payload.included
         .filter(
           (record) =>
@@ -77,8 +75,6 @@ export default class BlogItem extends Page {
         .slice(0, 20);
     }
 
-    console.log(includedPosts);
-
     this.stream = new PostStream({ discussion: article, includedPosts });
     this.stream.on('positionChanged', this.positionChanged.bind(this));
 
@@ -139,7 +135,7 @@ export default class BlogItem extends Page {
                   ))}
 
                   <div className={"Post-body"}>
-                    {!this.loading && this.article.blogMeta() && this.article.blogMeta().isPendingReview() && (
+                    {!this.loading && this.article.blogMeta() && this.article.blogMeta().isPendingReview() == true && (
                       <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>
                     )}
 

js/src/forum/pages/BlogOverview.js

@@ -1,6 +1,9 @@
 import Page from 'flarum/components/Page';
+import Button from 'flarum/components/Button';
 import humanTime from 'flarum/helpers/humanTime';
 import BlogCategories from '../components/BlogCategories';
+import BlogComposer from '../utils/BlogComposer';
+import tooltip from '../utils/tooltip';
 
 export default class BlogOverview extends Page {
   init() {
@@ -34,7 +37,7 @@ export default class BlogOverview extends Page {
     } else {
       app.store.find('discussions', {
         filter: {
-          q: 'is:blog'
+          q: `is:blog${m.route.param('slug') ? ` tag:${m.route.param('slug')}` : ''}`
         },
         include: 'user,tags,firstPost,blogMeta'
       })
@@ -59,12 +62,39 @@ export default class BlogOverview extends Page {
     m.lazyRedraw();
   }
 
+  title() {
+    if(!m.route.param('slug')) {
+      return <h2>{app.translator.trans('v17development-flarum-blog.forum.recent_posts')}</h2>;
+    }
+
+    const tag = app.store.all('tags').filter(tag => tag.slug() === m.route.param('slug'));
+
+    return (
+      <h2>
+        {tag && tag[0] && tag[0].name()}
+        <small> - <a href={app.route("blog")} config={m.route}>{app.translator.trans('v17development-flarum-blog.forum.return_to_overview')}</a></small>
+      </h2>
+    );
+  }
+
   view() {
     return (
       <div className={"FlarumBlogOverview"}>
         <div className={"container"}>
           <div className={"BlogFeatured"}>
-            <h2>Recent blog posts</h2>
+            {app.forum.attribute('canWriteBlogPosts') && (
+              <Button 
+                className={"Button FlarumBlogWrite"}
+                onclick={() => this.newArticle()}
+                icon={"fas fa-pencil"}
+                >
+                {app.translator.trans('v17development-flarum-blog.forum.compose.write_article')}
+              </Button>
+            )}
+
+            {this.title()}
+
+            <div style={{ clear: 'both' }} />
 
             <div className={"BlogFeatured-list"}>
               {/* Ghost data */}
@@ -98,6 +128,12 @@ export default class BlogOverview extends Page {
                       {article.isSticky() && (
                         <span><i className={"fas fa-thumbtack"} /></span>
                       )}
+                      {((article.blogMeta() && article.blogMeta().isPendingReview() == true) || article.isHidden()) && (
+                        <span><i className={"fas fa-eye-slash"} /></span>
+                      )}
+                      {article.blogMeta() && article.blogMeta().isPendingReview() == true && (
+                        <span title={app.translator.trans('v17development-flarum-blog.forum.review_article.pending_review')} config={tooltip.bind(this)} data-placement={"bottom"}><i className={"far fa-clock"} /> {app.translator.trans('v17development-flarum-blog.forum.review_article.pending_review_title')}</span>
+                      )}
                     </div>
 
                     <div className={"BlogFeatured-list-item-details"}>
@@ -145,7 +181,15 @@ export default class BlogOverview extends Page {
                     config={m.route}>
                     <div className={"BlogList-item-photo FlarumBlog-default-image"} style={{ backgroundImage: blogImage }}></div>
                     <div className={"BlogList-item-content"}>
-                      <h4>{article.title()}</h4>
+                      <h4>
+                        {article.title()}
+                        {((article.blogMeta() && article.blogMeta().isPendingReview() == true) || article.isHidden()) && (
+                          <i className={"fas fa-eye-slash"} />
+                        )}
+                        {article.blogMeta() && article.blogMeta().isPendingReview() == true && (
+                          <i className={"far fa-clock"} title={app.translator.trans('v17development-flarum-blog.forum.review_article.pending_review')} config={tooltip.bind(this)} />
+                        )}
+                      </h4>
                       <p>{summary}</p>
 
                       <div className={"data"}>
@@ -159,7 +203,7 @@ export default class BlogOverview extends Page {
               })}
 
               {!this.isLoading && this.posts.length === 0 && (
-                <p className={"FlarumBlog-reached-end"}>No more blog posts.</p>
+                <p className={"FlarumBlog-reached-end"}>{app.translator.trans('v17development-flarum-blog.forum.no_more_posts')}</p>
               )}
             </div>
 
@@ -171,4 +215,26 @@ export default class BlogOverview extends Page {
       </div>
     )
   }
+
+  newArticle() {
+    const component = new BlogComposer({
+        user: app.session.user
+    });
+
+    let tags = [];
+
+    app.forum.attribute('blogTags').forEach(tagId => {
+      const tag = app.store.getById('tags', tagId);
+
+      if(tags.length === 0 && !tag.isChild()) {
+        tags.push(tag);
+      }
+    });
+
+    // Update tags
+    component.tags = tags;
+
+    app.composer.load(component);
+    app.composer.show();
+  }
 }

js/src/forum/utils/BlogComposer.js

@@ -0,0 +1,17 @@
+import DiscussionComposer from 'flarum/components/DiscussionComposer';
+
+export default class BlogComposer extends DiscussionComposer {
+  onsubmit() {
+    this.loading = true;
+
+    const data = this.data();
+
+    app.store.createRecord('discussions').save(data).then(
+        article => {
+            app.composer.hide();
+            m.route(app.route('blogArticle', { id: article.id() + '-' + article.slug() }));
+        },
+        this.loaded.bind(this)
+    );
+  }
+}

js/src/forum/utils/redirector.js

@@ -43,8 +43,8 @@ export default function() {
           <div style={{ textAlign: 'center', padding: '40px 20px' }}>
             <LoadingIndicator size={"large"} />
 
-            <h2 style={{ marginTop: '40px' }}>{app.translator.trans('v17development-flarum-support.forum.utils.redirect.title')}</h2>
-            {app.translator.trans('v17development-flarum-support.forum.utils.redirect.link', {
+            <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>

js/src/forum/utils/tooltip.js

@@ -0,0 +1,3 @@
+export default function tooltip(element) {
+  $(element).tooltip();
+}

less/Forum/Overview.less

@@ -9,6 +9,10 @@
 .FlarumBlogOverview {
   padding: 30px 20px;
 
+  .FlarumBlogWrite {
+    float: right;
+  }
+
   .BlogFeatured {
     h2 {
       margin-top: 0;
@@ -54,6 +58,7 @@
           z-index: 2;
           top: 10px;
           right: 10px;
+          text-align: right;
 
           span {
             display: inline-block;
@@ -65,6 +70,7 @@
             text-transform: uppercase;
             border-radius: 4px;
             margin-left: 5px;
+            margin-bottom: 5px;
           }
         }
 
@@ -160,6 +166,8 @@
     .BlogList {
       @media screen and (min-width: 768px) {
         flex-grow: 1;
+        flex-shrink: 1;
+        width: 100%;
         margin-right: 25px;
       }
 
@@ -177,8 +185,8 @@
           display: flex;
 
           .BlogList-item-photo {
-            max-width: 250px;
-            flex-grow: 1;
+            width: 240px;
+            flex-grow: 0;
             flex-shrink: 0;
           }
 
@@ -208,6 +216,10 @@
             margin: 0 0 13px;
             font-size: 22px;
             font-weight: 400;
+
+            i {
+              margin-left: 10px;
+            }
           }
 
           p {
@@ -248,7 +260,7 @@
     // Sidebar
     .Sidebar {
       @media screen and (min-width: 768px) {
-        max-width: 300px;
+        width: 300px;
         flex-shrink: 0;
         flex-grow: 1;
       }