Demo page

Welcome to WaggyLabs!

WaggyLabs is Wagtail research group and/or research blog website, which features scientific publication-like page appearance, LaTeX equation, labeling, citing and referencing style, and much more.

Before proceeding, the general Wagtail User Guide can be reviewed.

A WaggyLabs-based website contains the following types of pages:

Site page. It is the general site page that may contain different types of elements (below).
Post page. This page may contain a blog post or, for example, a news post. Posts can be arranges into series. Series means that there is one main post and its subposts on the similar topic. The previos and next post links will then come from the series list. Posts can be organized by cateogries and tags.
Post List page. This is the parent page for Post pages but the same Site page. The Post List then can contain the list (with pagination) of its child Post pages, their categories and tags.

The current page

This is the demonstration Site page created during the first migrations. It shows some of the WaggyLabs blocks that may appear on a page during its creation/edits. All the blocks can be explored in the admin page editing interface. In the default install (i.e., when no WAGGYLABS_WAGTAIL_ADMIN_BASE_URL was modified), the admin interface can be accessed via the admin link.

Top menu and footer

It can be rapidly noticed that the page is missing website icon, the menu bar on top is empty, and, when page bottom is reached, the footer is also empty. Do not worry! All these parts are empty because they are fully customizable with the Wagtail admin interface.

Themes

WaggyLabs is powered by Bootstrap to present the content. Thus, it supports customization by uploading pre-made CSS files that can totally change the appearance of a website run by WaggyLabs.

Text editor

The main text editing is done using a markdown editor enhanced with easy entering TeX equations, references to figures, equations, quotes, tables and citations using standed TeX \ref and \cite commands. Equation are rendered using MathJax allowing entering any type of math.

Here is a quick example. Consider the Maxwell's equations below (Eqs \eqref{eq-M1-3}-\eqref{eq-M4-3})\cite{cite1-3,cite0-3}. In the absence of charges (i.e., the source of field is far away) and in the CGS unit system (\(1/c^2 = \mu_0 \epsilon_0\)) they read as

\begin{align}\label{eq-M1-3}& \mathbf{\nabla \cdot E} = 0 \\& \mathbf{\nabla \cdot B} = 0 \\& \mathbf{\nabla \times E} = \frac{1}{c} \frac{\partial \mathbf{B}}{\partial t} \\\label{eq-M4-3}& \mathbf{\nabla \times B} = \frac{4\pi}{c}\mathbf{j} + \frac{1}{c}\frac{\partial \mathbf{E}}{\partial t}\end{align}

The text editor also supports any types of Emojis that can be added either by Unicode code or by the aliases. Fore example, 🥑, 🥰, 😎.

Headers and table of contents

The headers created within the text editor can from the page contents. If the corresponding sidebar item is displayed on the page, the contents will be shown there and used for the page navigation. Below is the example of headers, and in right sidebar of the page, the generated list of contents can be found.

Header 2

Header 3

Header 4

List of the content items for a page

Below, we go through different content items that can be added on the any type of page in the editing interface provided by Wagtail CMS and enhanced by Waggy Labs.

Here is the list of content items:

Accordion.
Quote.
Card grid.
Picture carousel.
Content in columns.
Embedding content from other websites including video.
Standalone equation. It allows adding a caption to the equation to be displayed when the equation is opened in a separate dialog for preview.
Figure.
Listing to present code snippets.
Table in which equations and markdown content can be added to the cells.
Table as picture.

Accordion Block

We start with the Accordion block, which is used to create verically collapsible content. In WaggyLabs, its customization allows to either keep only one accordion item open as on this page, or keep opened ones always open unless they have been manually collapsed. In addition to text, various other items can be added into an accordion item including quote, picture carousel, citation, embed, equation, figure, listing, table.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Massa placerat duis ultricies lacus sed turpis tincidunt id. Lectus arcu bibendum at varius vel pharetra vel turpis. Ullamcorper dignissim cras tincidunt lobortis feugiat. Sed arcu non odio euismod lacinia at. Sed risus pretium quam vulputate dignissim. Neque sodales ut etiam sit amet nisl purus. Duis ultricies lacus sed turpis tincidunt id aliquet risus. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Amet consectetur adipiscing elit pellentesque habitant morbi. Auctor neque vitae tempus quam pellentesque nec nam. Consequat mauris nunc congue nisi vitae suscipit tellus.

Text block within Accordion block is Markdown text block, in which any type of markdown syntax can be used.

It is as well possible to give references to quotes, figures, tables, listings, equations using standard TeX style syntax and cite literaterature\cite{cite2-3}.

More than one accordion item can be selected to be expanded when the page is first loaded.

In this accordion item only two text blocks and one citation blocks are added.

class CardGridBlock(StructBlock):
    height_style = ChoiceBlock(
        choices=[
            ('', _('Choose height style')),
            ('equal', _('Equal height')),
            ('not_equal', _('Height wraps to content')),
        ],
        default='',
        label=_('Height'),
        widget=DisabledOptionSelect,
    )
    grouping_style = ChoiceBlock(
        choices=[
            ('', _('Choose grouping style')),
            ('separate', _('Separate')),
            ('grouped', _('Grouped')),
        ],
        default='',
        label=_('Grouping'),
        widget=DisabledOptionSelect,
    )
    orientation_style = ChoiceBlock(
        choices=[
            ('', _('Choose orientation')),
            ('vertical', _('Vertical')),
            ('horizontal', _('Horizontal')),
        ],
        default='',
        label=_('Orientation'),
        widget=DisabledOptionSelect,
    )
    columns = ChoiceBlock(
        choices=[
            ('', _('Choose columns')),
(1, _('1 column')),
        ] + [
            (i + 1, str(i + 1) + _(' columns')) for i in
range(1, (settings.WAGGYLABS_CARD_GRID_COLUMNS if
                      hasattr(settings, 'WAGGYLABS_CARD_GRID_COLUMNS')
                      else DEFAULT_CARD_GRID_COLUMNS))
        ],
        default='',
        label=_('Number of columns'),
    )
    cards = ListBlock(CardBlock())

    class Meta:
        icon = 'form'
        label = _('Card grid')
        template = 'waggylabs/frontend_blocks/card_grid.html'
        form_template = 'waggylabs/blocks/card_grid.html'
        label_format = _('Card grid: {cards}')

Listing present the class for WaggyLabs card grid block.

Blockquote block

This is blockquote. Its settings allow to align text differently and add the quote icon. Quote can be as well referenced\ref{quote1-3} within other text blocks and include equations.

Quote Author in Quote Source

Grid card

The next block is card grid. It can be used to display ordered items with the primary idea to create brief introduction to the research group personnel. Each card item can include photo, general information, links to other website contact information. Card grid has different styles including different number of columns, horizontal or vertical orientation of cards, grouping style. Below vertical separate cards organized in 3 colums are depicted.

Card Title 1

Card Subtitle 1

Each card in the grid can include picture, title, subtitle and text again with support of equations: \(\exp{i\pi}+1=0\). At the bottom of the card links and contact information can be added.

@twitter

Card 2

Pharetra vel turpis nunc eget lorem dolor. Condimentum id venenatis a condimentum. Rhoncus urna neque viverra justo nec ultrices dui sapien eget. Venenatis urna cursus eget nunc scelerisque viverra mauris. Lorem dolor sed viverra ipsum nunc aliquet.

Card 3

Mars Platet

Card 4

Card 4 Subtitle

Ac ut consequat semper viverra nam. Fermentum dui faucibus in ornare quam. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Porttitor lacus luctus accumsan tortor posuere ac ut consequat semper. Interdum velit laoreet id donec ultrices tincidunt.

Give me a call Example

Image carousel block

Now we switch to the picture carousel block. Its look can be found on the Bootstrap page. The settings of carousel block can be manipulated to select buttons, indicators, time to switch pictures (or not to switch them at all), switching style (slide or fade), color of text and buttons.

Columns block

Now we present the Columns block. Columns can display almost any block discussed on page. Maximum number of columns depends on the settings used to create WaggyLabs site in Python. The particular example below contain 3 columns, but 2 can be displayed as well.

Vitae tortor condimentum lacinia quis. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Nunc eget lorem dolor sed. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Consequat interdum varius sit amet mattis vulputate enim. Quis auctor elit sed vulputate mi sit amet mauris commodo. Dolor magna eget est lorem ipsum dolor sit amet consectetur\cite{cite3-3}.

Venenatis lectus magna fringilla urna porttitor rhoncus. Amet consectetur adipiscing elit duis tristique. Ut eu sem integer vitae justo eget magna. Ultricies leo integer malesuada nunc. Nisi porta lorem mollis aliquam ut. Ut morbi tincidunt augue interdum velit euismod in. Imperdiet proin fermentum leo vel. Nec nam aliquam sem et tortor consequat id porta nibh \cite{cite4-3,cite3-3}.

Button to show hidden information

Collape is the block to hide some information, which will be displayed by clicking the button. Collapse can contain any type of block except of Accordion. Testing citations\cite{cite5-3,cite2-3}.

Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Massa tincidunt dui ut ornare. Dolor sit amet consectetur adipiscing elit. Non sodales neque sodales ut etiam sit amet nisl.

Embeds, figures, tables, standalone equations

Finally here come the "usual" blocks such as embeds (Embed \ref{emb1-3}), standalone equations (Eqn. \eqref{eq-Hall-3}, captions of such equations are only displayed when it is opened in a dialog for preview), figures, and tables (Table \ref{tbl1-3}).

A great lecture by prof. Leonard Susskind about Higgs boson.

\begin{align} & E_y = B_0E_x\frac{n_1q_1\mu_1^2+n_2q_2\mu_2^2}{n_1q_1\mu_1+n_2q_2\mu_2} = \frac{B_0E_x}{\sigma_0}\left(n_1q_1\mu_1^2+n_2q_2\mu_2^2\right), \\ & j_x \approx \sigma_0 E_x,\,\text{and}\, E_y = \frac{B_0j_x}{\sigma_0^2}\left(n_1q_1\mu_1^2+n_2q_2\mu_2^2\right). \label{eq-Hall-3} \end{align}

This is starndard table where cells can contain equations and markdown text. Also column and row headers as well as cell alignment can be configured.
	Col header 1	Col header 2	Col header 3
Row header 1	\(\text{e}^{i\pi}+1=0\)	bold text	cell text
Row header 2	italic text	right aligned text	cell text
Footer of the table can include some text and equations as well.

References

(**) https://en.wikipedia.org/wiki/Maxwell%27s_equations, accessed 21.12.2022.

(**) Author A, Author B, Title, Issue, Year.

(**) Citation 3.

(**) Author C, Author D, Title 2, Issue 2, Year 2.

(**) Author R, Author T, Interesting title, new year, new volume.

class CardGridBlock(StructBlock):
    height_style = ChoiceBlock(
        choices=[
            ('', _('Choose height style')),
            ('equal', _('Equal height')),
            ('not_equal', _('Height wraps to content')),
        ],
        default='',
        label=_('Height'),
        widget=DisabledOptionSelect,
    )
    grouping_style = ChoiceBlock(
        choices=[
            ('', _('Choose grouping style')),
            ('separate', _('Separate')),
            ('grouped', _('Grouped')),
        ],
        default='',
        label=_('Grouping'),
        widget=DisabledOptionSelect,
    )
    orientation_style = ChoiceBlock(
        choices=[
            ('', _('Choose orientation')),
            ('vertical', _('Vertical')),
            ('horizontal', _('Horizontal')),
        ],
        default='',
        label=_('Orientation'),
        widget=DisabledOptionSelect,
    )
    columns = ChoiceBlock(
        choices=[
            ('', _('Choose columns')),
(1, _('1 column')),
        ] + [
            (i + 1, str(i + 1) + _(' columns')) for i in
range(1, (settings.WAGGYLABS_CARD_GRID_COLUMNS if
                      hasattr(settings, 'WAGGYLABS_CARD_GRID_COLUMNS')
                      else DEFAULT_CARD_GRID_COLUMNS))
        ],
        default='',
        label=_('Number of columns'),
    )
    cards = ListBlock(CardBlock())

    class Meta:
        icon = 'form'
        label = _('Card grid')
        template = 'waggylabs/frontend_blocks/card_grid.html'
        form_template = 'waggylabs/blocks/card_grid.html'
        label_format = _('Card grid: {cards}')