lilium-cms

Lilium CMS

Lilium is a lightning fast, web-based Content Management System (CMS) that is focussed on offering great performance while remaining featureful.

Furthermore, Lilium is build with NodeJS and react, a modern software stack that allows for quick developement and great performance.

Introduction

The Lilium V4 update was focussed on improving the user experience of its end users. This was done trough completely rewriting, from scratch, the client-side portion of the CMS. The new technologies that was used to build the interfaceis named Preact and is a toned down version of React, a technology developped and maintained by Facebook. It allows the website to feel much more like a desktop or mobile application than an actual website. Preact allowed us to make Lilium largely asynchronous effectively eliminating complete webpage refreshes

Layout

This section describes the layout of the user interface of Lilium CMS V4.

The application layout is composed of these elements:

• The darker gray bar at the top of the page is referred to as the 'Header'. It itself includes:
  • The Lilium logo on the far left. You can click the logo at any time if you want to go back to the Dashboard.
  • The number of active readers on your network only if you enabled this feature in your preferences.
  • The notifications wigdet which, when clicked, displays your notifications.
  • Your profile avatar on the far right which when clicked, pops up a menu that allows you to:
    • Access your Profile Page
    • Tweak your Settings and Preferences
    • Log Out of Lilium
• The menu with a dark gray background on the left of the page is referred to as the Left Menu. You can access any Lilium page via this menu, granted that you have the right to access said pages. You can configure this menu's behavior in your Preferences Page

Media Picker

The Media Picker is used troughout Lilium to allow you to upload and select different types of media.

Depending on the context, the Media Picker will allow you to select dirrefent types of media. For instance, if you are selecting a Profile Picture, the media picker will only allow you to select pictures. On the other hand, if you are selecting media to insert in an article, the media picker will allow you to select all the supported media types. The types of media you able to select for a given context are indicated by the tabs at the top of the media picker.

So for instance, in the case of the above screenshot you would be able to select an Upload or a Place or an Embed.

When possible, the Media Picker will try to reopen itself with the last tab you visited before closing it.

Upload Picker

The upload picker allows you select an already uploaded or to upload an image yourself. This picker is not referred to as an image picker because it leaves us leaway to support other types of uploads in the future such as videos, should the need arise.

To select an already uploaded media:

1. Find it in the uploads list and select it by clicking it.
2. Once selected, the upload will appear on the right hand side of the picker where you can modify the attributions and credits to the original creator of the upload, namely the Artist Name and the Source URL. The URL at which it is hosted is also display.
3. To select the image and close the picker, click on the Select Image button.

To upload an image from your device:

1. Click on the + icon which is located in the first card of the uploads list
2. Use your operating system's native file browser to upload a file to Lilium.
3. Your new upload will be displayed as the first upload in the uploads list and you can follow the same steps you would to embed an already uploaded media to select your newly uploaded media.

Place Picker

The Place Picker allows you to select places using the Google Maps and Google Places APIs.

To select a place:

1. Enter some information about the place you want to select in the Search Query field. As you might have guessed, searching for an establishement's name or its address usually work best.
2. Click on the place you want to embed in the search results that were returned for your query.
3. Once you selected a place from the search results, you can optionnaly add a description for it in the Description text field that appears underneath the search results.
4. To select your place and dismiss the picker, click on the Add Selected Place button.

Embed Picker

Embeds are a way to include content from other websites into Lilium. The Embed Picker allows you to select an already existing embed or create a new embed yourself.

To select an already existing embed:

1. Find it in the embeds list
2. To select the embed and dismiss the picker, click your desired embed

To create a new embed:

1. Click on the '+' icon that is displayed as the first item of theembeds list.

2. Select your Embed Type from the dropdown list

3. Paste the url of the post you want to embed in the URL field

   

4. Click on the Generate Embed button. Lilium will fetch the desired ressource from the URL you indicated.

5. Your new embed will be displayed as the first embed of the embeds list, to select it, follow the steps described to embed an already existing embed.

List of supported embed types

• Instagram Photo
• Instagram Video
• Instagram Carousel
• Facebook Post
• Facebook Video
• Youtube Video
• Vimeo Video
• Twitter Tweet
• SoundCloud Song
• Reddit Post
• HTML Code

Your Profile

Your profile page allows you to see and edit your user account information.

You may acces at any time from within Lilium by:

• Using Lys's profile command

  

• Clicking on Profile in the profile dropdown menu located at the top right corner of the page. To open the profile dropdown menu, click your profile picture.

Choosing a profile picture

To change your profile picture, click on your current profile picture that is displayed in the Profile Page. You can then use the Upload Picker to upload and choose your new profile picture.

General Profile Information

This tab is the one that is open by default when you access your profile page. It allows you to set your Full Name, Job Title and to write an Introduction Paragraph.

Contact Information

This tab allows you to set information about how your superiors may contact you. This information is not public.

Payment Information

If you are a contractor using Lilium, it is important that you visit this tab to set up your payment information. These options determine your ability to get paid via Stripe. You can select the currency in which you wish to recieve your payments.

Changing Password

The password reset page is fairly standard, it requires that you enter your current password to make sure it's really you changing your password, then enter the new password you wish to set for your account and confirm your new password to make sure you didn't make any typos while typing your new password.

A Word on Cyber Security and Password Selection

Lilium was developped using the best industry standards in terms of security and we are committed to protecting your personnal and business' data. However, it is important to realize that any authentication system is only as strong as your password. As such, it is imperative that you choose a password that cannot be guessed by people who may know details about your personnal life and that is not a common password. This helps ensures that your password is not vulnerable to Social Engineering and Dictionary Attacks. Rest assured, however, that Lilium has multiple layers of security to detect and block bruteforce attacks.

Moreover, it's always a good practice to change your password on a regular basis and to avoid using the same password for multiple platforms. This ensures that the entirety of your online accounts does not get compromised, should someone come to know your credentials for one plateform.

Mind the Phishing attacks as well! As Lilium and your business becomes better known, some people might try to clone the login page to trick you into sending your credentials to a server that is not your business'. Look for the httpscertificate in the address bar as you log into Lilium. An absent https certificate is definitely a good indicator that something is not quite right with the page you're on!

Lastly, remember that no one, not even your Lilium network administrators, can see your passwords as they are hashed in the Lilium database and any reasonnable system administrator will never ask for your password!

Two-factor Authentication

To further increase your account's security, you are strongly encouraged to set up Two-Factor Authentication. Two-Factor Authentication works by requiring that you provide a token that is specific to you that is generated using a one time secret and the current time as a seed. The code refreshes itself every 30 seconds making it effectively impossible for a potential attacker to bruteforce the code.

Setting up Two-Factor Authentication for your account, despite its apparent complexity, is extremely easy. To do so, simply follow the instructions that are already displayed in the Two-Factor Authentication tab of the profile page.

If you're interested in knowing more, you can start by reading on the TOTP Algorithm.

Badges

The badges allow you to track and possibly even flex about your progression in Lilium. The badges are displayed in your profile page. Hover over the badge to know how exactly you obtained the badge.

Settings and Preferences

Customizing Lilium is easy and can make your overall experience better. The preferences page can be accessed either from the sidebar menus, or by clicking on the user avatar at the top right portion of the screen, then customize Lilium.

Currently, the only two supported languages for the user interface are English and French.

Using the check boxes, it is possible to change the following settings :

• Lock Left Menu : The sidebar will remain visible without having to hover the mouse over it.
• Display active readers in header : Will show the total number of active visitors on the website (stats from Analytics).
• Stretch user interface : Removed the bottom gray bar to gain a few pixels in height
• Unified sidebar menu : All sidebar items will appear as a long list without sections
• Enable fullscreen article editing : Activating the fullscreen more in the publishing page will make the text editor full screen, on top of the entire interface.

The Reset all list filters will simply remove all list preferences from your account. For instance, if you filtered the list of articles by author and the list of users by username, it will remove those filters.

Lys

Quick navigation

Lys is a quick action tool which can be brought up to screen by holding down the Shift key, then pressing the space bar.

The command tool accepts a user friendly syntax, and is mostly used to navigate quickly between pages. Once Lys is visible using Shift+Space, a page name such as publishing or dashboard can be provided. Pressing the Enter or Return key will navigate to that page.

Pressing the Enter or Return key will in fact execute the first suggestion below the text box. That means if for instance pub is provided, the only suggestion should be publishing. It is possible to quickly navigate to a certain page by only providing a few letters of that page name.

Clicking on a suggestion will also navigate to the page.

Article search

Writing anything else in the text box will also trigger a search in the database.

Articles and users can be quickly accessed from Lys by simply writing a word from the title, or a portion of a user's name. In the previous example, pressing Enter would open the edit page with the Toronto Police article. However, clicking on the second item "Lilium Doe" would naviagte to that user's page for edit.

Page actions

On certain pages, additional quick actions are available. The publishing page offers a quick "Save article" function that is only available during editing.

Since the page actions are always the first suggestion, to save an article, it is possible to simply pop up Lys, and press Enter or Return.

That would be : Shift+Space, then Enter.

Hash commands

Using a # symbol as the first character of a command lets you access a few direct actions. For now, the only supported hash command is create. In the near future, multiple other commands such as edit and delete will become available.