Abstract
Using the new Gitlab Pages facilitates iGEM teams to build their wiki websites using various familiar technologies. However, not all teams have sufficient web development skills. Therefore, to further reduce the difficulty of wiki website creation, we created a wiki website template based on the example website. This template will help other iGEM teams use simple Markdown to create web pages without writing complex code.
How does it work
When creating the template, we considered two basic principles
- it is simple to use
- no additional software or technology is required
Based on these two principles, we decided to work only based on the official website that uses Flask. Although it is easy to use technologies such as Hexo or Vue.js to generate web pages using Markdown, this requires downloading additional software or learning programming.
We believe that the easiest way is that people can write their wiki just by following the iGEM Gitlab Guide alone. Since we decided to use only basic Html, CSS, and JavaScript for website building, Gitlab Web IDE is enough.
Our template has three main parts. The first one is md2html.html, a page that uses the open source showdown.js to convert markdown documents into Html code. We designed easy-to-use instructions and interfaces.
The second one is article.js, a program that adds annotations to images on the bottom and generates a table of contents. These are not available on the example pages.The third one is article.css. We have written CSS styles for the common markup types in Markdown. The automatically generated Html can be presented beautifully according to this style.
In addition to the basic functionality, our template is also extensible. We rewrote Layout.html to allow teams with the ability to add additional JS libraries, such as KaTeX, to enrich the site's functions.
How to use it
First, learn Gitlab Guide. Following operations will not be more difficult than on the guide (if you know Git, you can also do the following things locally).
Then, using the Gitlab Web IDE, replace all the content in your wiki repository with the content in our template repository. You can find how to create new files or modify files in the guide.
Next, copy the text written in Markdown in the text box at the bottom of the page (you can spend a few minutes learning to use Markdown through this website ).
Click the "Convert" button to generate the Html code, and click the "Copy" button to automatically copy the Html content.
Open the page you want to modify in the Web IDE and replace the content between and with the copied content.
Note: Only ## and ### headings will generate the table of contents.
Submit the changes and after a while, the new page will be created.