USER MANUAL

Introduction

Welcome to W, this manual is here to help you get the best of this tool.

If it's you're first time using it, you should learn how to create your first page.

If you already know the basics, you may want to check the references :

Discover how to navigate.
Get to know the structure of a page to edit meta content.
Learn more about the URL based commands you can type in the address bar.
Master the render engine to release the full potential of W.

Create your first page

This 4 steps tutorial will introduce you to the basic W moves.

Add a new page

The first thing you have to do before creating a page is to choose an address for this page. Each page have a unique address that identify it, it is the page id. You can use the address bar of your web browser to directly access, edit or delete a page.

You can type anything in your address bar (after your W installation root). If it is an already exisiting page_id, you will access a page. Otherwise, you will arrive to an empty space waiting to be filled.

Once you've typed an address and found nothing, if you are connected, you now have the opportunity to create a page at this address.

There is two ways to do this :

Graphicaly, by clicking the "create" button
Using the address bar, by typing /add just after the address

There it is ! Congratulation, you've created your first page using W.

Edit your page content

Now you should be in front of the edit interface of your page. If you check the address bar, you will now see /edit written after your page address.

You can type a few words in the main text area. Once you're happy with what you wrote, it's time to save your work : click on the update button in the top left corner. You can use the shortcut CTRL + S too if you prefer. After you've done this, you sould have notice that the asterix * next to your page_id have left, it's the sign that saving was sucesfull.

Let's come back to the page reading view to see the result of our editing. There are different approaches for doing so :

By removing the /edit command after your page address
Pressing the "display" button (next to "update"), or using CTRL + D shortcut.

The first method will use the same tab while the second will create a new one, wich is usefull if you want to keep your edit interface open to come back quickly.

You should now see something that look like what you've typed.

Create a hyperlink

The markdown synthax, this is a formating standard well known accross the web. It's main goal is to be a intermediate between an easy to read prose text, and the internet standard tag language, the HTML. One of the main interest of Markdown, is it is ability to be mixed with HTML. That way, people can type more easily basic text, and switch to HTML at any time, to achieve a more complex layout. You can use the official Markdonw synthax with W alongside with HTML to build your pages.

Official website describing Markdown synthax

One of the most interesting things to do when you use internet publishing, is to create HYPERLINKS. W encourage you creating those links between pages using a very light synthax. There are multiple ways to do it.

Using classic HTML : <a href="<page_id>">click here</a>
Using Markdown : [click here](<page_id>)
Using W quick synthax : [<page_id>]

All those methods will create a link pointing to the <page_id> you've given.

Those kind of links are called internal links beccause they stay inside of your domain. To set a link outside of your website, simply remplace <page_id> by the website adress you whant to target (ex : https://w-cms.top), but this won't work with the third method as it is'nt a W page.

Insert images

When adding an image to a page, you can either use an already web-hosted image, wich is a bit dangerous, or host yourself the image using W's media interface.

Markdown synthax for inserting an image :

![<alt_comment>](<image_address>)

It's the equivalent of HTML (More info about <img> tag on MDN) :

<img src="<image_address>" alt="<alt_comment>">

If your image is already hosted, just use it's URL address for <image_address>. Otherwise, access W's media interface using the top bar menu, just after "home", or by typing <your-W-url>/!media.

Once you're here, you'll have to first choose, using the navigation panel on the left, or create a folder, by selecting File > New Folder in the menu.

When you've selected the folder you prefer for hosting your image, it's time for uploading it using File > Upload. Browse you computer or drag n' drop files onto the "Choose Files" button, then click "Upload". Note that you can upload multiple files at once !

Now you should see your files appearing in the table. W will remove whitespaces and special characters of your medias to avoid synthax problems.

To add the image on your page, the simplest method is to copy the Makdown generated code on the right side.

For bigger files transfer, you can always use FTP or SSH connections to add, delete, move files by accessing the /media directory of your W installation folder

Discover the differents interfaces of W.

Home

The Home interface is the main view of your project. You can access it only when you're connected. All the pages of your database are listed here.

The readers and invite editors can't access this interface.

In the home menu super editors and above can :

File : Import pages as JSON file. (usefull for transfering pages from a W instance to another).
Edit : Apply changes, render, or delete multiple pages at once.
Filters : Use your filtering options to generate a automatic menu you can later include in a page.
Bookmarks : Create some bookmarks to save your filtering options as presets.
Display : Set columns to be shown (user based) and tag colors.

Deep Search Bar

The Deep Search bar help you to look for words or regular expressions in your pages.

By default, searching only look in title, description and contents (markdown elements), but the "other" checkbox will allow you to look up in css, javascript and BODY contents.

Unlike the filterings options below, searches can't be saved or used for page lists.

Options

The option panel contains multiples options for sorting and filtering your pages database.

Just select the options you want and press "Fitler". Use the "Reset" button to come back to the default settings. W will keep the settings for the SESSION time.

This panel is also usefull to set up a page list to include the same list of page you've filtered in any page.

list view

The table is composed of meta datas and actions links that are :

EDIT, READ, DELETE and DOWNLOAD, they are equivalent to pages commands. Don't hesitate to open edit or read links in a new tab, to keep the Home view open.

To edit columns you want to see, use the menu>Display submenu.

map view

The map give you an overview of your website, showing you links between pages.

By default orphans pages are hidden, but you can ajust settings to fit your needs.

left click on a page to read it
right click to edit it

Edition

The edition interface is accessible when typing /edit after an existing page_id in the address bar. Or from the home, by clicking on the pencil button.

Invite editors and editors users can only access edition of pages where they are listed as author.

The Edition view is composed of a main content edition area, surounded by two lateral panels that you can deploy or hide.

left panel

This is the

Meta infos : edit title, description and more infos about your page.
Templating
Advanced
Help : a quick synthax reference for markdown and W synthax

contents area

Each tab allow you to edit a different type of content :

main, nav, aside

Note that the MAIN tab is the default opened tab, this is meant to be the most spontaneous place to store information when you are using W in note taking style.

right panel

Media manager

When you need to use images, sound or videos in your pages, or any other type of files, you can use the media manager to host them before including them in your pages.

Invite editors don't have access to this place.

The media menu allow you to do more powerfull function like moving medias or delete folders it is only accessible by super editors and above.

file : to import new files, create or delete directories
edit : to edit selected items
filter : to export filter settings as medialist
Bookmarks : Create some bookmarks to save your filtering options as presets.

Explorer

The explorer allow you to navigate between differents directories. It will show you the amount of files in every folder.

Media Filters

By ajusting filters, you can

Admin

User manager

Bookmarks

Bookmarks can be created as shortcuts to quickly jump to a specified view.

There are two kinds of bookmarks :

Home bookmarks
Media bookmars

Each one is doing the same thing : saving a specific filter setting and allow you to access it in one click.

After ajusting home options, or media filters, select the bookmark menu (in the home menu or media menu), add a name and a symbol, this will add a new bookmark in the main top bar !

Page Editing

Synthax

Markdown

Daring Fireballs Official reference of Markdown Synthax
Michel Fortin's Markdown extra The library used in W.

W specific synthax

url auto link

When you use an address starting with http:// or https://, W will automaitcaly create a link pointing to a new tab.

<a href="<url>" target="_blank" class="external"><url></a>

Note that the .external class have been added.

Quick links

[<page_id>]

Will generate :

<a href="<page_id>" title="PAGE_DESCRIPTION" class="internal">PAGE_TITLE</a>

Where PAGE_DESCRIPTION and PAGE_TITLE are the page_id's meta infos.

Note that the .internal class have been added to the a html link, allowing you to differenciate internal link styling from .external.

Inclusions

Basic inclusions

Title inclusion

%TITLE%

This will include the page title.

Description inclusion

%DESCRIPTION%

This will include the page description.

Date inclusion

%DATE%

%CONNECT%

This will include a connection form, redirecting to the actual page.

%CONNECT?dir=<page_id>%

This will include a connection form, redirecting to a specified page. Where <page_id> is the ID of the page.

Summary

%SUMMARY%

This will include a summary based on the page headers titles.

%SUMMARY?min=<min>&max=<max>&element=<element>%

Where <min> and <max> are integers beetwen 1 to 6.

You can set <min> and <max> values to filters beetwen <h*> and <h*> headlines to take care of.

You can specify an element to target with the element parameter. The summary will only refer to this element headlines.

Page list

Sometimes, when you want to add links to a lot of pages, it can be way to long. This tool is here to help you generate list of links automatically.

It use the same logic as the page filter.

When you are in the home view, ajust the filters using the options panel to achieve the page selection you desire. Then select "filters" in the menu, choose options you prefer and hit "generate". You can now copy and paste the code obtainded that way in one of the elements of a page.

Display options are :

title : display the title of the page
description : display the description of the page.
thumbnail : display the thumnail of the page.
date : display the date of the page.
time : display the time of the page.

Generate :

<ul class="pagelist">
    <li><a href="ID">TITLE</a> DESCRIPTION DATE TIME ... </li>
    ....
</ul>

styling

Some .class and #id are generated to optimize styling.

.public, .private, not_published are used to define the privacity level of pages.

.current_page is used to highlight the current page.

#<pageid> is set to each item to allow selective styling.

Media list

Just like page lists, media list are used to generate a list of media based on filters.

BODY Content insertion

The BODY tab allow you to create more complex canvas for your pages.

It use only HTML.

Element inclusion

The main purpose of BODY, is to display Markdown elements of your page.

%<element>%

Where <element> can be MAIN, HEADER, ASIDE, NAV or FOOTER. This will invoke the selected element into your page's BODY.

External Element inclusion

Simple usage

%<element>?id=<page_id>%

Just specify the ID of the page elements you want to include.

concatenate elements

You can even concatenate differents pages elements, using + symbol separating pages IDs. All contents of differents pages elements will be concatenated inside one element.

%<element>?id=<page1_id>+<page2_id>+*%

Where * is the page ID of the rendered page.

Rendering options

Autolink

%<element>?autolink=<level>%

Where <level> is an integer. By default autolink=0.

Autolink will transform each word containing a minimum of <level> letter(s), into internal links.

Markdown disable

%<element>?mardown=(0|1)%

Activate or desactivate markdonw parser in called <element>. By default, Markdown is set to 1.

Header ID

%<element>?headerid=<x>-<y>%

By default, HTML #id are generated for every <h1> to <h6> headings. You can specify a range of headers outside which no ID will be added.

You can also set headerid=0 to totaly disable ID generation for this element.

Templating

There is no particular template document, each page can be used as a template. There is 3 types of templating in W :

BODY template

This will call the BODY of another page.

CSS template

CSS template allow you to link another page's stylesheet to your page.

Options are :

Reccursive template

If templated page is already templating another page, this will add it to the stylesheet links. If you don't want this reccursivity, uncheck the option.

This option is checked by default.

External CSS

If templated page is using external stylesheet, this will include them as well.

This option is checked by default.

Favicon

Use this option if you want to use templated page favicon.

Javascript template

References

Page structure

Technicaly, each page is stored as a JSON object in yout fatabase folder.

A page consist of meta informations and contents.

Meta infos

Page ID

The unique identifier of a page. It can only contain lowercases characters from a-z, numbers 0-9, underscore _ and hyphen -. Normaly W will take care of cleaning your pages's ID, by lowering uppercases, removing some accents, and remplacing special characters or spaces with hyphens.

Page title

The page title is also very important. It's like the official name of a page. It will be displayed in the browser tab of your page.

Description

The description will be used by web search engines when they display lists of pages. This is also usefull for social media sharing.

Tag

Tags are very powerfull to help you organize your pages. As in W, there is no hierarchy between pages, this is the only tool to create groups of pages.

Tags can be set in the left panel of the editor interface using comma to separate tags, or by using the multi edit tool in the Home menu bar > Edit.

Date & time

Date and Time are just a

By default, page's date and time are the same as creation date and time.

Datemodif

You can't edit manualy this date. It's just the last time the page has been edited.

Thumbnail

The thumbnail have two use cases :

When you share a link to a page on a social network
When you generate a list of page and activated the thumbail option.

level : 0

Reader

level : 1

Invite Editor

level : 2

Invite Editors are the lowest editor status possible. They can only access the Edition interface. They can't create page but only edit page when listed as author.