Merge pull request #15 from WalsGit/better-third-party-extensions-sup…

…port

Better third party extensions support

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.1.0] - 2024-11-22
+### Added
+- NEW FEATURE: Support for `v17development/flarum-blog` extension
+- NEW Option to chose to use the blog's images (post featured image and blog default's image) for blog post cards
+- NEW Option to chose to use blog posts' summary as preview text for blog post cards
+- A donation link
+
+### Changed
+- Options for 3rd party extensions will only be enabled if said extensions are installed and activated.
+- Text & description associated with 3rd party extensions options
+
+### Fixed
+- Views won't throw error when `show views` option is activated but the relevant extension isn't installed and activated.
+
 ## [1.0.4] - 2024-11-16
 ### Added
 - Support & discuss URLs

README.md

@@ -14,6 +14,8 @@ On the ``index page`` (all discussions), if a discussion has multiple tags with
 ```
 Also it changes how the setting to distinguish between read & unread discussion cards work: now the read discussions are filtred with a grayscale instead of the unread ones.
 
+As of version `1.1.0` added support for `v17development/flarum-blog` extension. If activated, you can set to use the blog's extension images for blog posts' cards and/or their article summary as preview text on the cards.
+
 ![Discussion Cards](https://i.postimg.cc/FsxNPWYk/flarum-ext-discussioncards-1.png)
 
 ### Notes
@@ -44,3 +46,4 @@ php flarum cache:clear
 - [Packagist](https://packagist.org/packages/walsgit/flarum-discussion-cards)
 - [GitHub](https://github.com/walsgit/flarum-discussion-cards)
 - [Discuss](https://discuss.flarum.org/d/36343-flarum-discussion-cards)
+- [Donate](https://walsgit.github.io/Donations/)

composer.json

@@ -10,6 +10,12 @@
             "homepage": "https://discuss.flarum.org/u/Walid"
         }
     ],
+    "funding": [
+        {
+            "type": "website",
+            "url": "https://walsgit.github.io/Donations/"
+        }
+    ],
     "require": {
         "flarum/core": "^1.0",
         "flarum/tags": "^1.0"

extend.php

@@ -40,7 +40,9 @@
         ->serializeToForum('walsgitDiscussionCardsShowReplies', 'walsgit_discussion_cards_showReplies')
         ->serializeToForum('walsgitDiscussionCardsShowBadges', 'walsgit_discussion_cards_showBadges')
         ->serializeToForum('walsgitDiscussionCardsMarkReadCards', 'walsgit_discussion_cards_markReadCards')
-        ->serializeToForum('walsgitDiscussionCardsShowViews', 'walsgit_discussion_cards_showViews'),
+        ->serializeToForum('walsgitDiscussionCardsShowViews', 'walsgit_discussion_cards_showViews')
+        ->serializeToForum('walsgitDiscussionCardsUseBlogImages', 'walsgit_discussion_cards_useBlogImages')
+        ->serializeToForum('walsgitDiscussionCardsUseBlogSummary', 'walsgit_discussion_cards_useBlogSummary'),
 
         (new Extend\ApiSerializer(TagSerializer::class))
         ->attribute('walsgitDiscussionCardsTagDefaultImage', function ($serializer, $model) {

js/src/admin/components/Settings.js

@@ -1,9 +1,26 @@
 import app from "flarum/admin/app";
 import ExtensionPage from "flarum/admin/components/ExtensionPage";
 import UploadImageButton from 'flarum/admin/components/UploadImageButton';
+import isExtensionInstalled from "../helpers/isExtensionInstalled";
+import isExtensionActive from "../helpers/isExtensionActive";
+import icon from "flarum/common/helpers/icon";
 
 export default class Settings extends ExtensionPage {
 	content() {
+		/* Supported third party extensions' info */
+		const viewsExtension = {
+			id: 'flarumite-simple-discussion-views',
+			name: 'Flarumite Simple Discussion Views',
+			url: 'https://flarum.org/extension/flarumite/simple-discussion-views',
+		};
+		const blogExtension = {
+			id: 'v17development-blog',
+			name: 'Flarum Blog',
+			url: 'https://flarum.org/extension/v17development/flarum-blog',
+		};
+
+		const warningIcon = icon("fas fa-exclamation-triangle");
+
 		return (
 			<div className="DiscussionCardsSettings">
 				<div className="container">
@@ -119,12 +136,55 @@ export default class Settings extends ExtensionPage {
 							{app.translator.trans("walsgit_discussion_cards.admin.settings.general.otherOptions_info")}
 						</p>
 						<div className="Section">
-							<h4>If <a href="https://flarum.org/extension/flarumite/simple-discussion-views" target="_blank" rel="noopener noreferrer">Flarumite Simple Discussion Views</a> is installed & activated</h4>
+							<h4>
+								{app.translator.trans("walsgit_discussion_cards.admin.settings.general.showViews_title_start")}
+								<a href={viewsExtension.url} target="_blank" rel="noopener noreferrer">{viewsExtension.name}</a>
+								{app.translator.trans("walsgit_discussion_cards.admin.settings.general.showViews_title_end")}
+							</h4>
+							<div className="helpText">
+								<em>
+									{!isExtensionInstalled(viewsExtension.id) 
+									? + app.translator.trans("walsgit_discussion_cards.admin.settings.general.viewsExtension_notInstalled", {icon: warningIcon}) : 
+									!isExtensionActive(viewsExtension.id) 
+									? app.translator.trans("walsgit_discussion_cards.admin.settings.general.viewsExtension_notActivated", {icon: warningIcon}) :
+									''}
+								</em>
+							</div>
 							{this.buildSettingComponent({
 								type: "switch",
 								setting: "walsgit_discussion_cards_showViews",
 								label: app.translator.trans("walsgit_discussion_cards.admin.settings.general.showViews_label"),
 								help: app.translator.trans("walsgit_discussion_cards.admin.settings.general.showViews_help"),
+								disabled: isExtensionActive(viewsExtension.id) ? false : true,
+							})}
+							<hr></hr>
+							<h4>
+								{app.translator.trans("walsgit_discussion_cards.admin.settings.general.blogExtension_title_start")}
+								<a href={blogExtension.url} target="_blank" rel="noopener noreferrer">{blogExtension.name}</a>
+								{app.translator.trans("walsgit_discussion_cards.admin.settings.general.blogExtension_title_end")}
+							</h4>
+							<div className="helpText">
+								<em>
+									{!isExtensionInstalled(blogExtension.id) 
+									? + app.translator.trans("walsgit_discussion_cards.admin.settings.general.blogExtension_notInstalled", {icon: warningIcon}) : 
+									!isExtensionActive(blogExtension.id) 
+									? app.translator.trans("walsgit_discussion_cards.admin.settings.general.blogExtension_notActivated", {icon: warningIcon}) :
+									''}
+								</em>
+							</div>
+							{this.buildSettingComponent({
+								type: "switch",
+								setting: "walsgit_discussion_cards_useBlogImages",
+								label: app.translator.trans("walsgit_discussion_cards.admin.settings.general.useBlogImages_label"),
+								help: app.translator.trans("walsgit_discussion_cards.admin.settings.general.useBlogImages_help"),
+								disabled: isExtensionActive(blogExtension.id) ? false : true,
+							})}
+							{this.buildSettingComponent({
+								type: "switch",
+								setting: "walsgit_discussion_cards_useBlogSummary",
+								label: app.translator.trans("walsgit_discussion_cards.admin.settings.general.useBlogSummary_label"),
+								help: app.translator.trans("walsgit_discussion_cards.admin.settings.general.useBlogSummary_help"),
+								disabled: isExtensionActive(blogExtension.id) ? false : true,
 							})}
 						</div>
 						{this.submitButton()}

js/src/admin/helpers/isExtensionActive.js

@@ -0,0 +1,6 @@
+export default function isExtensionActive(extensionName) {
+    if (app.data.settings.extensions_enabled.includes(extensionName)) {
+        return true;
+    }
+    return false;
+}

js/src/admin/helpers/isExtensionInstalled.js

@@ -0,0 +1,6 @@
+export default function isExtensionInstalled(extensionName) {
+    if (app.data.extensions.hasOwnProperty(extensionName)) {
+        return true;
+    }
+    return false;
+}

js/src/forum/components/CardItem.js

@@ -11,6 +11,7 @@ import Link from "flarum/common/components/Link";
 import { truncate } from "flarum/common/utils/string";
 import LastReplies from "./LastReplies";
 import compareTags from "../helpers/compareTags";
+import isValideImageUrl from "../helpers/isValideImageUrl";
 
 export default class cardItem extends Component {
 	oninit(vnode) {
@@ -28,6 +29,24 @@ export default class cardItem extends Component {
 				settings[newKey] = app.forum.data.attributes[key];
 			}
 		}
+
+		/* Getting & setting relevant info for 3rd party Flarum Blog extension support */
+		const blogActivated = app.forum.data.attributes.hasOwnProperty('blogTags');
+		const blogSettings = {};
+		const postIsBlogType = discussion.data.relationships.hasOwnProperty('blogMeta');
+		const blogPost = {}
+		if(blogActivated) {
+			blogSettings.tags = app.forum.attribute('blogTags');
+			blogSettings.defaultImage = app.forum.attribute('blogDefaultImage');
+
+			if(postIsBlogType) {
+				const blogPostsData = discussion.store.data.blogMeta[discussion.data.relationships.blogMeta.data.id];
+				if(isValideImageUrl(blogPostsData.attribute('featuredImage'))) {
+					blogPost.featuredImage = blogPostsData.attribute('featuredImage');					
+				}
+			}
+		}
+
 		const isTagPage = m.route.get().split('?')[0].startsWith('/t/');
 		let tagId;
 		if (isTagPage) {
@@ -36,14 +55,20 @@ export default class cardItem extends Component {
 			const tag = app.store.all('tags').find(t => t.id() === tagId);
 			const tagSettings = tag ? JSON.parse(tag.data.attributes.walsgitDiscussionCardsTagSettings || '{}') : {};
 			const tagImage = tag ? tag.data.attributes.walsgitDiscussionCardsTagDefaultImage : null;
+
 			tagSettings.defaultImage = tagImage;
+			/* In case Flarum Blog Extension and useBlogImage are activated  */
+			if(blogActivated && Number(settings.useBlogImages) === 1 && blogSettings.tags.includes(tagId)) {
+				tagSettings.defaultImage = postIsBlogType && blogPost.featuredImage && isValideImageUrl(blogPost.featuredImage) ? blogPost.featuredImage : blogSettings.defaultImage;
+			}
 
 			for (const key in tagSettings) {
 				if (settings.hasOwnProperty(key) && tagSettings[key] !== settings[key] && tagSettings[key] !== null) {
 					settings[key] = tagSettings[key];
 				}
 			}
 		}
+
 		/* On the IndexPage (all discussions) checks which default image to show based on tag priority */
 		const isIndexPage = m.route.get().split('?')[0] === '/';
 		if (isIndexPage) {
@@ -53,10 +78,16 @@ export default class cardItem extends Component {
 				const isChild = tags[key].isChild();
 				const parent = tags[key].data.hasOwnProperty('relationships') && tags[key].parent() ? tags[key].parent()['data'].id : null;
 				const position = tags[key].position();
-				const tagCustomImg = tags[key].attribute('walsgitDiscussionCardsTagDefaultImage');
+
+				let tagCustomImg = tags[key].attribute('walsgitDiscussionCardsTagDefaultImage');
+				/* In case Flarum Blog Extension and useBlogImage are activated  */
+				if(blogActivated && Number(settings.useBlogImages) === 1 && blogSettings.tags.includes(tagId)) {
+					tagCustomImg = postIsBlogType && blogPost.featuredImage && isValideImageUrl(blogPost.featuredImage) ? blogPost.featuredImage : blogSettings.defaultImage;
+				}
+
 				const currentTag = { id: tagId, isChild, parent, position, tagCustomImg }
 				let priorityTag = null;
-				if (!settings.allowedTags.includes(tagId) || tagCustomImg === null) continue;
+				if (!settings.allowedTags.includes(tagId) || tagCustomImg === null) continue;					
 
 				if (priorityTag === null || compareTags(currentTag, priorityTag) < 0) {
 					priorityTag = { id: tagId, isChild, parent, position, tagCustomImg };
@@ -69,7 +100,7 @@ export default class cardItem extends Component {
 		const attrs = {};
 		attrs.className =
 			"wrapImg" + (Number(settings.showAuthor) === 1 ? " After" : "");
-		const image = getPostImage(discussion.firstPost(), settings.defaultImage);
+		const image = getPostImage(discussion.firstPost(), settings.defaultImage, postIsBlogType);
 		const media = image ? (
 			<img
 				src={image}
@@ -116,15 +147,20 @@ export default class cardItem extends Component {
 						: ""}
 
 					<div {...attrs}>
-						{Number(settings.showViews) === 1 &&
-						!isNaN(discussion.views()) ? (
-							<div className="imageLabel discussionViews">
-								{icon("fas fa-eye", { className: "labelIcon" })}
-								{discussion.views()}
-							</div>
-						) : (
-							""
+						{discussion.data.attributes.hasOwnProperty('views') && (
+							<>
+								{Number(settings.showViews) === 1 &&
+								!isNaN(discussion.views()) ? (
+									<div className="imageLabel discussionViews">
+										{icon("fas fa-eye", { className: "labelIcon" })}
+										{discussion.views()}
+									</div>
+								) : (
+									""
+								)}
+							</>
 						)}
+
 						{media}
 
 						{Number(settings.showAuthor) === 1 ? (
@@ -149,10 +185,10 @@ export default class cardItem extends Component {
 					</div>
 					{Number(settings.previewText) === 1 && discussion.firstPost() ? (
 						<div className="previewPost">
-							{truncate(
-								discussion.firstPost().contentPlain(),
-								150
-							)}
+							{blogActivated && Number(settings.useBlogSummary) === 1 && discussion.data.relationships.hasOwnProperty('blogMeta') && discussion.blogMeta().summary() !== ''
+								? truncate(discussion.blogMeta().summary(), 150)
+								: truncate(discussion.firstPost().contentPlain(), 150)
+							}
 						</div>
 					) : (
 						""