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.

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
Bravice, Sora & Debo, Daba. (2024). Understanding the Power of Citations. Scientific Works. 1-4.