DiscPage: a plugin to create static pages and insert discussion balloons in the text

With DiscPage, you create static pages by adding the “Page” category to any topic.

You can then insert balloon icons, to allow users to discuss subsections of the page.

See the demo and the repo.

25 Likes

The discussion topics show up oddly in /latest - perhaps they should go in their own category, “Page Comments” or similar?

The use of structured tags is pretty neat :slight_smile:

4 Likes

Sure, you can use the discpage balloon category setting to set a category for the “balloon” discussions.

4 Likes

Amazing!!! My NGO will definitely have use for it!

4 Likes

As a second demo, here is a full website created around Discourse and DiscPage: castafiore.org

1 Like

Is there a way to show the categories/subcategories on the left?

Is there a way to show the categories/subcategories on the left?

There’s no automatic way to show categories on DiscPage static pages. However, you can add category links manually. You can then style those links to put them in a sidebar on the left (using a theme component).

P.S.: you probably know that, but remember you can access categories from the hamburger menu.

1 Like

Thanks @syl for the great plugin :slight_smile:

Can you please also explain how is this plugin different from the following plugin?

1 Like

The plugin you mention looks great. I haven’t tried it, but I’d say the differences are:

  • Page authoring is different: ProCourse provides a feature-rich backend, DiscPage only transforms a topic (so you’re limited by the usual markdown editing).
  • ProCourse doesn’t support discussion balloons within pages.
3 Likes

I have just discovered this plugin today and I am impressed! Thank you very much for your work @syl.

Just confirm, this functionality can be “contained” in a category, it doesn’t take over the entire forum, right? The (potential) idea we have in mind in our project is to write a collaborative guide using one category while retaining the rest of the forum (a plain Discourse) as is.

Yes, you are right.

Yes, it sounds like something DiscPage can do.

1 Like

Thank you @syl!

Last question (for now): :slight_smile: How does the plugin define permissions? Who can create / modify / delete these static pages?

A DiscPage static page is nothing more than a topic with a specific predefined category. Let’s call it “Page”. Consequently:

  • Static pages can be created by whoever can create topics in the Page category. You need to set the Page category permissions according to your needs. The usual case is to restrict the “Create” permission to admins, as explained here, so that only admins can create static pages.

  • Static pages can be modified/deleted by the topic author and by staff users (like any normal topic).

1 Like

Why does your plugin modify the hamburger icon? It turned it red and now I have to figure out how to overwrite the CSS back to normal. I like your plugin, but please fix this?

Hi @Erik_Manger, your issue is described here:

My hamburger menu has turned red, what should I do?

Hamburger Menu
A red hamburger menu means that DiscPage is off . This occurs:

  1. when an error has prevented DiscPage from starting (in that case, check the debug console for a DiscPage-related error), and
  2. when you manually turn DiscPage off (see below).

@syl I’m having a real hard time with these steps. Sorry, I know this is a super noob problem. BUT could you provide a simple copy-paste template? Or a short video walkthrough? Or if you walk me through this personally I’ll create a youtube video for others that are SUPER noobs.

  • To edit a static page , click the “pencil” button at the top right of the page (you can also turn DiscPage off from the hamburger menu, then edit the topic as you would do normally).
  • To style static pages , use the .dpg-page-content class. To style an individual page, use the html[data-dpg-page-id] data attribute. For example, go to Settings > Customize > Light Theme > Edit CSS/HTML and enter the following in the Common > CSS section:
1 Like

Can a static page import a js or link to one?

1 Like

A static page is rendered like a standard Discourse topic, so rules for js scripts in topics applies. I think there are several discussions about this here on meta: it implies creating a theme component and customizing it (there is also a Discourse setting to allow linking external scripts).

You might also want to check the “To customize a static page” section on this page and see this example of js in a static page (combo boxes at the top).

1 Like

Did you create a static page already? Can you see the pencil button?

Styling a static page is like styling a standard Discourse topic page: you create a theme component and customize it. There is an example here. You can also search for “Theme Components” here on meta. The .dpg-page-content class allows to create CSS rules that apply to static pages only instead of all topic pages.

On that subject, let’s say I have an api that retrieves an image given user input. In that link you sent, you have some combo boxes at the top. If the user selects something from the combo box, the js will show something based on that user input. Is that possible inside a static page?

1 Like