Components - Docus

discourse
dcs
commuity-forum
docus

#1

Our sidebar sync’s our platform with our Discourse forum, with the aim of minimizing friction between the two until they operate as one smooth side. Discourse handling the community building, communications, admin functions, and backend of the entire platform.

Components page in Github

Plugin In Discourse settings you’ll find a plugin called: dcs-discourse-plugin. This is where the default category is set.

Adding icon to open Discourse into any page
Add this at the top of the page:
import DCSBalloon from '/imports/client/ui/components/DCSBalloon/index.js'

Add this to position the icon:
<DCSBalloon title="Insert title" subtitle="Insert subtitle" balloonId="bal" display="inline"/>

Icon Options
Can be removed:title="Insert title" and subtitle="Insert subtitle"
You cannot leave the titles blank as this will fail title=" " and subtitle=""

Display Options:inline or block

BalloonId Options:

  • Balloon “bal”
  • Photos “pho”
  • Videos “vid”
  • Wall/Chat “wal”
  • User Experiences “exp”
  • Report “rep”

Additionally you can follow them with a number, for example:
<DCSBalloon balloonId="bal4" display="block"/>
This needs to be a whole number, and cannot be anything other than a number (‘2a’ or ‘a’ won’t work)

Direct link to icons: https://github.com/focallocal/fl-maps/tree/master/public/images
(updating these will change all live icons currently in use)

The sidebar logo can also be edited there: https://github.com/focallocal/fl-maps/blob/master/public/images/dcs-logo.png

The homepage for the forum can be edited for each individual branch. Its set here


Components Directory
#2

@syl @PJSmooth I created as much documentation as i’m able to do for this. I’m sure you’ll both want to add to this.

Syl we created a way to define categories based on url. There is one setting in the plugin settings which is currently set to ‘hidden’ for focallocal.org. We/you created a way to define a different category for Brighter Tomorrow Map, which defaults to the Brighter Tomorrow Map category in fl-sleeper. I can’t remember where that is (which is why we need to build this documentation).

Can you remember?


#3

I’m not sure what this ‘hidden’ thing is. Would you please send me a screenshot?

As far as I can tell, there is only one setting in the plugin, dcs discourse plugin category, which allows to specify a category for any Docuss post. So right now there is no way to set different categories for two different web apps using the same Discourse instance.


#4

@syl ‘Hidden’ is just a category we set up which doesn’t show on the forum homepage feed. Right now we have two category default’s, one for focallocal.org, and one for brightertomorrowmap.com.

You already helped set up the different one for brightertomrrowmap, where it would recognise the url and switch to a different default - and that function is working great. I can’t remember where that is in the code though (and should have recorded it at the time)


#5

I understand the confusion now. There are 2 different things:

  1. The category of posts created by users. You can specify only one category per Discourse instance, for all Docuss-related posts (see above).
  2. The Discourse landing page when using Docuss, i.e. the page you return to when you leave a Docuss balloon. The landing page is the original URL used when first connecting to the Docuss plugin (see here). You can specify a category page if you want (this is what you did for BTM here) or any other Discourse page.

#6

@syl

  1. i’d prefer to have a specific one for the whitepaper page, but that does’t sound possible so i’ll work with it.
  2. that 2nd link is the one i was referring to. i’ll add it into the documentation. Is it possible to override that on a certain page?

#7

What do you have in mind? The landing page is where you end up when you leave a balloon. For example:

  1. Click a balloon -> this opens the right panel on a certain Discourse tag
  2. Click anywhere else -> this closes the right panel
  3. Click the green sidebar -> this opens the right panel on the landing page I was mentioning.

#8

yes. this is how the Brightertomorrowmap is functioning at the moment. Essentially it’s like enabling a conditional homepage in a specific section, which will be very useful in the future. Even better if we could set the default category for posts in that page too.

That enables Docus to be compartmentalised and serve different sections, while users can still easily navigate to the forum homepage anytime desired


#9

I’m about to release the next version of Docuss. The main difference with the previous one (the one you’re using) is that, instead of having Discourse in an iframe within your app, your app is placed in an iframe within Discourse. This has profound implications on many levels. I will soon release a demo, so that you can see how it looks like.

I’m bringing this now because the new version supports per-balloon categories (among other improvements).


#10

Ok, that’s interesting/exciting


#11

Is that likely to break any aspects of our site? And would we need to change our forum to a new directory?


#12

Will that affect the excellent work Arty did on building Docus in React?


#13

Also we need to build the ability for members to join a discourse group from a page on the map (enabling community hashtagging)

The question is, can we open Docus and auto press the join group button for the user who clicked the button?

That would then extend further to bringing in more functionality. we’d have a mechanism to interact with Discourse elements on the main site to smooth the border between the two

What are your thoughts on feasibility? Presumably that’s something one of the react devs would need to work closely with you to accomplish.


#14

@syl @PJSmooth i noticed a small bug. Visit the page below, then click on the 1st balloon and everything works fine. click on the topic i’ve posted, and the focallocal side loads a different ‘undefined’ page.

https://focallocal.org/whitepaper


#15

@PJSmooth, there is one piece missing in what you did with the whitepaper page. The issue can be better explained if you do the following:

  1. Go to the “hidden” category page on the forum.
  2. Locate the post “Welcome to the Public Happiness Movement Whitepaper”.

This post corresponds to a Docuss balloon of the whitepaper page. If you click on it, it will open in Discourse (on the right). But at the same time, we need the Meteor app to notice what has just happened and to route to the corresponding Meteor page (which will be displayed on the left).

This last part is missing. Hence the “undefined” page displayed on the left instead of the whitepaper page.

The code for this is located here. The onTagOrTopic() function is called whenever the Discourse page has changed to a Docuss tag or topic. In there, the Meteor app must deduce, from the Docuss tag, which Meteor page to go to. This is what Meteor.call("Events.getEventId") is supposed to do, but right now it supports the Page page only (which, on the database side, is called Events).

So you will need to find a way to store, within the tag, whether the balloon is from the Page page or the whitepaper page. Then you will need to route the meteor app accordingly. The final code might look like this:

dcs.onTagOrTopic((tag, topicId) => {
   if (isFromTheWhitepaperPage(tag)) { // Function to be designed
    changeHistory({
      pathname: "/whitepaper",
      params: { r: "1", b: tag.substring(...), t: topicId || null },
      push: false
    });
  else {          
    Meteor.call("Events.getEventId", { discourseTag: tag }, (err, res) => {
      if (err) {
        console.log("Events.getEventId Error:", err);
      } else {
        this.triggeredByDiscourse = true;
        changeHistory({
          pathname: "/page/" + res,
          params: { r: "1", b: tag.substring(...), t: topicId || null },
          push: false
        });
      }
    });
  }
});

#16

@syl when do you plan to release the new version?


#17

@AndyatFocallocal, I plan to release it before April 20th.


#18

@AndyatFocallocal, please have a look at the new Docuss project page, where you can access the Mustacchio demo. Please don’t forward this to anyone; I still have a lot of polishing and bug fixing to do.


#19

I agree, that does look a lot smoother. Well done buddy :sunglasses:

I think it’ll make integrating new discourse features far easier too. What would we need to do to change from what we’re using now?

Also, I particularly enjoyed your mock up diagram


#20

:slight_smile:

What would we need to do to change from what we’re using now?

The first thing would be to think about your navbars and menus. With the new system, Discourse becomes your main website. How does it fit with your current design? Can you remove all your page headers without losing some features? Or can those features be placed in a customized Discourse header? Better be cautious here.

The second thing would be to change the way your app uses the Docuss lib. I can do the root work and Arty might need to adapt part of what he did.

One thing the demo doesn’t show is the “multiple websites” feature: you can have multiple websites in the same Discourse instance, with dynamic change of the logo and menu. I will add a demo for this next week.