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

Plugin
1

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.

image
image1207×831 99.6 KB

See the old demo the new demo and the repo.

39 Likes
2

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:

5 Likes
3

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

6 Likes
4

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

6 Likes
6

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

7

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.

2 Likes
8

Thanks @syl for the great plugin :slight_smile:

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

1 Like
9

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.
4 Likes
10

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.

11

Yes, you are right.

Yes, it sounds like something DiscPage can do.

1 Like
12

Thank you @syl!

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

1 Like
13

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
14

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?

15

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

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

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

1 Like
18

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
19

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.

20

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
21

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

Page: This is a test page - Pages - TigerGraph

image
image808×219 25.7 KB

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

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

1 Like