Dex V0.2.0

A showcase of the visual toolkit implemented for Dex Pages

Dex Reader is the post reading applet part of FBR dex - where you are right now. We've put a lot of work into making the reading experience a pleasant one. I hope you have fun exploring this demo of the features we've added in V0.2.0.

Embedded Elements

Lists

Bullet point lists uses pipe and dash characters to clearly distinguish between main and sub points.

  • A main point
    • A sub-point
    • Another sub-point
  • Another main point
    • That also might contain sub-points
  • Or not

Code Blocks

They exist in

blocked

and inlined forms.

Callouts

Callouts can be used to modify the emphasis and segmentation of text.

Callouts are blocks with dropdowns

They can also include other elements,

like code blocks.
Callouts can have custom themes!

They can also start collapsed, like this one.

Block Quotes

Block quotes can be used to emphasise a direct quotation, and allow for stylistic quote attribution.

Harry

I'm ready to get back to working on hardware now. I'm not cut out to be a web dev.

Or, attribution can be left out.

Who said that?

Sidenotes & Siderefs

Sidenotes

Sidenotes are used when we want to make an aside comment Like this. . Note that these have different views, based on screen size On mobile they pop down from the top, and on desktop, they are beside the text (hence the name)..

Siderefs

Siderefs are similar to sidenotes, but for references, which also appear at the bottom of the page. These are useful for academic writing Bravice, Sora & Debo, Daba. (2024). Understanding the Power of Citations. Scientific Works. 1-4. . Siderefs are similar to sidenotes but use their own numbering system for in-text referencing and don't ever have associated accompanying text - only the marker label is associated with the reference.

Images

Images have on-hover styled borders, like those seen in block quotes and desktop style sidenotes. They also become coloured when hovering with the mouse. On mobile this is controlled by tapping on or away from the image.

FBR Café

Tables

A WIP for large tables, but basic tables are defined in a standard way and look good when kept to a small size. The justification for each column is set below the header lines with colons and dashes.

Feature Status Notes
Tables WIP Support large tables
Callouts Complete -
Lists Complete -
Code Blocks Near-complete Add syntax highlighting & line numbering

Post Formats

We write all of our content in mdx format. This allows us to write Markdown in a flexible way, making it easy to write posts and integrate customisable elements. For example, if I want to include a newsletter form I add a line in mdx, and it renders where I place it.

Post Metadata and Settings

To include metadata and deviate from default view settings, we use a YAML Frontmatter block at the top of the mdx files. Here are some of the modifiers and how they work.

tags

If tags are not declared #inline but we would still like a link to appear in the graph, we can define them here without affecting the displayed content of the post.

connections

Defines post-post edges in the graph.

desktopWidth

This post is W I D E

There are two post widths available, unset is standard width, and 'full' makes it a (near) fullscreen post. Need to be on desktop to see this effect, mobile views are the same in each case.

References

  1. Bravice, Sora & Debo, Daba. (2024). Understanding the Power of Citations. Scientific Works. 1-4.