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

[syl]

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 old demo the new demo and the repo.

[riking (Kane York)]

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

[syl]

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

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

[Judith (Judith Meyer)]

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

[AndreSpecker (Andre Tiago)]

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

[syl]

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.

[GokulNC]

Thanks @syl for the great plugin

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

ProCourse Static Pages

I’ve been doing freelance Discourse customization as my primary gig for almost a year at this point. And one of the most common questions I get is about static pages. “Can I just create a static sales page?” “Where’s a good place to put a FAQ without a discussion around it?” You can likely argue the validity of these questions in most scenarios. The main response being “just close the topic.” But that doesn’t cut it for most. Thus, I decided to create this plugin to make it possible. It’s pret…

[syl]

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.

[quimgil]

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.

[syl]

@quimgil

Just confirm, this functionality can be “contained” in a category, it doesn’t take over the entire forum, right?

Yes, you are right.

@quimgil

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, it sounds like something DiscPage can do.

[quimgil]

Thank you @syl!

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

[syl]

@quimgil

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).

[Erik_Manger]

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?

[syl]

Hi @Erik_Manger, your issue is described here:

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

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).

[HERKE (Jon Herke)]

@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:

[AntiMetaman]

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

[syl]

@AntiMetaman

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

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).

[syl]

@HERKE

To edit a static page , click the “pencil” button at the top right of the page

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

@HERKE

To style static pages , use the .dpg-page-content class

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.

[AntiMetaman]

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?

[HERKE (Jon Herke)]

I think your tool is working 100% correctly. The problem is my lack of knowledge on how to use it I’ll take a look at that link you provided with the .dpg-page-content

Page: This is a test page - Pages - TigerGraph

Click the Edit button. Drop-in a chunk of code. Click the Settings. Go to Customize. Drop-in chunk of code you should see a basic HTML webpage appear. Would help a super noob like me haha!

I appreciate you taking time responding to my question

I’ll keep you posted with my progress. Hopefully, I can make mine look something like yours!