dev

WikiForum provide the forum similar to the Community Feed: A front-end structured discussion page and support wikitext!

Try it here: /demo

Installation

Quick Start

This is a quick-start guide. It allows you to load a forum with basic functions using a preset scheme (default loader + default skin).

Site-wide installation
Add this to MediaWiki:ImportJS:
dev:WikiForum/core.js
dev:WikiForum/theme/default.js
dev:WikiForum/loader/default.js
Usage
The forum will be loaded in the Forum namespace by default.

Custom loader

To be written...

Custom theme

To be written...

Tech

Nouns

parser
Functions responsible for parsing source code into WikiForum-Element.
updater
Functions responsible for adding, deleting and modifying threads.
renderer
Functions responsible for rendering elements into HTML according to theme settings.
theme
The function responsible for defining forum page HTML structure.
WikiForum-Element
An array containing the abstract structure of the forum. Provides metadata for updaters and renderers.

Structure example

Wikitext of page 

<!--
 - WikiForum Container
 - 
 - Total Forums: 1
 - Last modiflied: 2020-12-27T08:08:03.000Z
 - Last user: User4
 -
 - DO NOT EDIT DIRECTLY
 -->

<!-- start forum#1 -->
<div class="wiki-forum" data-depth-max="3" data-title="Forum Topic 1" data-page-name="Forum:Sandbox">

<!-- start thread#1 -->
<div class="forum-thread" data-time-publish="2020-12-27T08:08:00.000Z" data-user-author="User1">
  <div class="forum-content">
<!-- start content -->
I am the first thread!

Hello, WikiForum. WikiForum provide a front-end structured discussion page with JavaScript.
<!-- end content -->
  </div>
</div>
<!-- end thread#1 -->

<!-- start thread#2 -->
<div class="forum-thread" data-time-publish="2020-12-27T08:08:01.000Z" data-user-author="User2">
  <div class="forum-content">
<!-- start content -->
Oh, cool. I am the second floor~
<!-- end content -->
  </div>
  <!-- start thread#2-1 -->
  <div class="forum-thread" data-time-publish="2020-12-27T08:08:02.000Z" data-user-author="User3">
    <div class="forum-content">
<!-- start content -->
I am the reply in the second floor.
<!-- end content -->
    </div>
  </div>
  <!-- end thread#2-1 -->

</div>
<!-- end thread#2 -->

<!-- start thread#3 -->
<div class="forum-thread" data-time-publish="2020-12-27T08:08:03.000Z" data-user-author="User4">
  <div class="forum-content">
<!-- start content -->
<span style="font-size: large">And also, you can using wikitext in the forum:</span>

'''bold''' ''italic'' <del>line-through</del>

[[Link]] https://example.com

* List 1
* List 2
* List 3

 Quote block

[[File:Example.jpg|thumb|left|This is a image]]
<!-- end content -->
  </div>
</div>
<!-- end thread#3 -->

</div>
<!-- end forum#1 -->

<!-- end WikiForum -->

WikiForum-Element 

[{
  "forumid": "1",
  "meta": {
    "pageName": "Forum:Demo",
    "title": "Forum Topic 1",
    "depthMax": 3
  },
  "threads": [
    {
      "threadid": "1",
      "content": "I am the first thread!\n\nHello, WikiForum. WikiForum provide a front-end structured discussion page with JavaScript.",
      "meta": {
        "userAuthor": "User1",
        "timePublish": "2020-12-27T08:08:00.000Z"
      }
    },
    {
      "threadid": "2",
      "content": "Oh, cool. I am the second floor~",
      "meta": {
        "userAuthor": "User2",
        "timePublish": "2020-12-27T08:08:01.000Z"
      },
      "threads": [
        {
          "threadid": "2-1",
          "content": "I am the reply in the second floor.",
          "meta": {
            "userAuthor": "User3",
            "timePublish": "2020-12-27T08:08:02.000Z"
          }
        }
      ]
    },
    {
      "threadid": "3",
      "content": "<span style=\"font-size: large\">And also, you can using wikitext in the forum:</span>\n\n'''bold''' ''italic'' <del>line-through</del>\n\n[[Link]] https://example.com\n\n* List 1\n* List 2\n* List 3\n\n Quote block\n\n[[File:Example.jpg|thumb|left|This is a image]]",
      "meta": {
        "userAuthor": "User4",
        "timePublish": "2020-12-27T08:08:03.000Z"
      }
    }
  ]
}]

Tech used

Development

TIP: You need to install Git, Node.js and yarn first. 

# Clone source
git clone https://github.com/Fandom-zh/Gadget-WikiForum.git
cd Gadget-WikiForum

# Handling dependencies
yarn install

# Develop}
yarn dev # -> ./dev/
# You could run vscode liveServer at http://127.0.0.1:1005

# Production build
yarn build # -> ./public/dist/*
Text above can be found here (edit)