Comrade:CriticalResist/sandbox/Essays documentation

If you’re looking at how to use the new essays page, refer to the user guide. This is the technical documentation for maintenance purposes.

This page relies heavily on DPL3 (Dynamic Page List 3), documentation here: https://help.fandom.com/wiki/Extension:DPL3/Manual. DPL has a 1 day cache and will not update before then. To force it to update, go to the essays homepage and in the menu click on Hard Refresh.

I’m unsure how many resources DPL needs to make the page, I can only hope the server supports the load once we start getting a lot of essays.

---

This new essays page relies heavily on simple templates as well as DPL. The templates used are the following ones at this time:

We also use one module (Module:Reading time) to estimate a reading time. It can be invoked on any page though.

While each template has its own stylesheet, we really only use the ones associated with Essays_homepage and Infobox_essay (found at /style.css). On MediaWiki, once a stylesheet is called on a page (through a template for example), it will apply to everything it can on that page. By selectively declaring properties in either essays_homepage or infobox_essay, we can control what appears (and how) on the new essays page (called the essays feed) AND on individual essay pages (one such example: Essay:A nutrition and fitness guide) as well.

This documentation goes through each template and the module one by one.

Essays_homepage

The nesting logic of the essays feed is as follows (named after classes):

ESSAYS-PAGE
- essays-sidebar
  - essays-sidebar-item
    - X-container (lastupdate ; categories ; authors -- set in each individual item template)
- essays-list (main feed that contains all essays in big format)
  - .infobox-essay
    - and then everything in the infobox template (title, image, excerpt, etc)

Essays_homepage, the template, is only invoked on the new essays page to do CSS. The template by itself only calls its stylesheet at /style.css.

Notably it removes the list styling that DPL creates by default, preventing the bullet points from appearing. DPL code for the main feed is explained in its own section.

This template also sets up the flex-boxes (you create the divs in HTML but then set them up as flex in CSS) that make the whole essays homepage work properly on mobile and desktop.

Essays_homepage also contains a specific CSS declaration: .essay-small and .essay-big. These classes only do one thing: make text a bit smaller or a bit bigger. This makes it easy to just add <span class=”essay-small”> inside other templates (such as Essay_lastupdate) for aesthetics reasons. But it only works IF essays_homepage is called. That is to say, these classes are used in other templates but will not show up as working if Essays_homepage, the template, is not called into the page where those other templates are called.

This template is also where we set the styling of each sidebar-item directly. To do that, we simply target .essays-sidebar-item > div (the first div immediately nested inside .essays-sidebar-item). This means if you create a template to spice up the sidebar a bit, you only have to add it inside <div class="essays-sidebar-item"> (and in the proper nest obviously) and it will look like the others. It makes working on all sidebars at once much easier.

Finally, this template also does something very important: it brings back the display property of .infobox-essay (which is the div that transcludes the infobox_essay template). See infobox_essay section for more info.

The template doesn’t do anything by itself otherwise, it only calls the stylesheet.

There is one CSS declaration that's in MediaWiki:Citizen.css, at the very bottom: .essay-sidebar-item background-color. This is because Citizen has a dark mode and uses color variables to control light and dark mode. Thus the new essays feed is compatible with Citizen dark mode.

Infobox_essay

This is the big template that must be included somewhere in every essay. It doesn't have to be at the very top for the content to be transcluded.

First, it changes the display title of the essay to remove the namespace mention using {{DISPLAYTITLE}}. DisplayTitle is included in the template directly. I've also added a {{{name}}} parameter that essentially allows us to name essays however we want without touching the URL (aka permalink). The name parameter works pretty simply with an #if condition: if the parameter name is filled, then use that. Otherwise, use the title parameter.

Then it uses different parameters to essentially create a blog list feed with a picture, title, author, publication date, and excerpt. All of these fields are filled in manually.

The "last update" mention is wrapped in a span called .update-disappear. This class is only acted on in the Essays_homepage template, all it does is make the mention of the last update disappear on the essays home page. The reason for this is because we use the REVISIONTIMESTAMP magic word which pulls the date of the last edit from whichever page it appears on, not from the essay itself. If REVISIONTIMESTAMP appears on the essays feed page when it's transcluded, it will pull data from that page. So I just hid it for now until we find a solution.

(The difference between span and div: spans stay inline, divs are blocks. This means divs will break the line and go to the next and span will not).

Infobox_essay also contains .essay-big and .essay-small because, since the template is originally transcluded on individual essay pages, it will not call .essay-small from Essays_homepage. This is important to note: on MediaWiki, custom (template) CSS will apply on any element that is in the HTML on the page, no matter if it's native to the page or called by another template.

The reason for this is so that the whole infobox is not displayed on individual essay pages, but only on the essay homepage. It is display:none; on the individual essay page, but then with the use of !important, it is brought back to visibility on the essay homepage (!important essentially overrides all other rules).

Finally, I recently added a reading time estimate. This works through the Module:Reading time and it can be used on any page! This module works super simply, but I'm unsure of server load if we spread it on more pages. It just counts the number of words in a given page, then using two estimates for words per minute (which are set in the module itself) we can run some simple math to give an estimate in increments of 5 minute.

Essay_lastupdate

This template is filled in automatically with DPL, and does not need to be changed. It creates its own container which might not be necessary but if it’s not broken, don’t fix it.

The code:

<dpl>
namespace = Essay
ordermethod = lastedit
order = descending
mode = userformat
count = 7
listseparators = \n
addeditdate=true
titlemaxlength=60
userdateformat = Y-m-d format = ,\n* %DATE%, %TITLE%,
</ dpl>

What it does is create a list of the 7 most recently updated essays (that is, when an edit was committed). You can change that 7 count to anything else in the template by editing count = 7 in the DPL code.

titlemaxlength sets how many characters can appear in the title variable before we truncate it with ... I picked 60 so that it still looks good on desktop (about 2 full lines of text), but we can change it at any time.

Notably we also order by last edit (ordermethod), meaning the most recently updated essay will be pushed to the top of the list.

%DATE%, %TITLE% etc are variables that can be used in dpl, see the documentation.

---

Essay_lastupdate is built in a div container called lastupdate-container. All sidebar items should be inside their own <div> container made from their template directly. Well, just look at this template's code and copy and paste for any new template you want to make.

Essay_categories

This is a manually filled in template. Like Essay_lastupdate, it calls its own stylesheet that contains exactly the same code.

The reason I had the stylesheets separated for each sidebar item is so that we can style them differently, for example using a different background-color.

Categories are added into the template manually. I suggest they all contain the mention (essays) at the end, e.g. “World news (essays)” to differentiate it from a wiki category that could be called world news too.

The code is otherwise pretty straightforward, it just repeats for every category with the names and links changed. I also reused the library module Number of works to count how many pages are in the category.

I chose to keep the Essay_categories manual instead of pulling it from DPL for two reasons: one, it kinda reduces the server load (again I don't know how many resources it takes to generate all this DPL code). and 2, it prevents people from creating categories and creating chaos. I totally expect that with time, some editors might not take the time to check if a category already exists and create their own duplicate. By adding categories manually, they can be

Essay_authors

The essay_authors template also uses DPL. It's pretty simple to use it as a user and it pretty much tells you all you need to know about it, just refer to the user guide section: ProleWiki:User guide#Adding author category.

DPL pulls the contents of the category "Essays by author", simple as that. So you just need to add your author category (Essays by X) to that parent category. I provide the full code to also spice up your author category, since this is the category people will actually visit (Essays by author is really just sort of a holding or container category so that we can use DPL).

So that everyone is equal, I made it so that the authors list is ordered by last update, meaning if you publish a new essay, you'll get bumped to the top. I think this can be useful for readers to kinda help them find editors they like (or just new content).

Homepage setup

So by the way, you can use some HTML in MediaWiki and that’s exactly how we set up the new essays page. It’s just divs, maybe spans (to apply CSS to only portions of text), and that’s about it. For this reason, you need to edit the page in the source editor as visual will remove the closing tags. Inside the <div> are simply templates. They don’t necessarily needed to be templates, but I like that everything is in its own self-contained area.

The new essays homepage is set up with nested flex boxes.

The flex go in a row direction on mobile, and a reverse-row on desktop, which is why the sidebar appears on top of the essays feed on mobile but to the right on desktop view (the sidebar boxes also appear before the feed in the HTML code). If you changed reverse-row to row, the sidebar would appear on the left. Likewise if you changed the direction on mobile the sidebar would appear after the feed, at the bottom. It's all pretty flexible and can be easily changed all from Essays_homepage/style.css at any time.

Flex is applied in CSS in the parent element, and only the first-level children elements will be flexed. This is why we need to use nested flex boxes. That is to say, the parent is flex, the child is flex too, etc.

Sidebar items are made using templates and those get transcluded into a div called essay-sidebar-item so that they inherit the proper CSS from Essays_homepage template.

There is no pagination; all essays ever published will be included in the main feed. I’m looking at making pages with DPL though.

DPL code for main feed

DPL simply creates automated, curated outputs of Wiki pages. It doesn’t necessarily create a list format like with bullet points or numbers, but by default it creates an <ul> list (bullet points).

For the main feed, the one that contains all essays (containing the template), the code is really easy once explained (you will find this code in the essay homepage directly):

<dpl>
namespace=Essay
mode=unordered
includesubpages=false
ordermethod=firstedit
order=descending
include={Infobox essay}
</dpl>

<dpl> tags are needed to mark the code between them as DPL. Namespace= is the namespace we want to grab from. We can also add category= to grab from one (or more IIRC) categories. We can combine both or just one either one.

Mode= uses ordered for a numbered list, unordered for a bullet list, or userformat. Userformat allows you to specify a format= parameter and essentially code whatever output format you like. See DPL documentation for more information.

includesubpages= is self-explanatory, we don’t include /subpages.

ordermethod= is how the output will be sorted. Firstedit means that it will list the output by first edit made, i.e. page creation. Lastedit is the last edit made (used for Latest Updates). There’s several other ordering methods available.

order=ascending or descending to sort the list one way or the other.

include= this is the important one. Include allows you to include something specific with your output, pulled from the page. In this case we pull the content of the infobox_essay template.

This code together creates a bullet-point list ordered from most recent to oldest essay and pulls the infobox essay template under each bullet point.

But there are no bullet points on the essay page. They do exist, they are just set to display:none; in the Essays_homepage template!

With more display:none; trickery, we are able to make only the infobox template appear on the essays homepage, and we are able to select specifically which parameters we want to appear on an essay page. For example, we keep the image, author and publication date, but we remove the title and excerpt because it’s only a duplicate of what’s already on the essay page. This simply works by targeting display:none; properties on Template:essays_homepage and on Template:infobox_essay (infobox_essay makes them disappear, and essays_homepage makes them reappear with an !important clause in the CSS, which overrides all other rules on the element).

Adding more sidebar items

We can also have as many sidebar items as we want, the sidebar will just get longer than the essays feed if we have too many. It can also be a pain on mobile as currently you can't collapse the sidebar items.

It’s super easy to add a sidebar item though, just make a template for them (and DPL allows some cool stuff so we can use that as well), transclude that template on the essays feed in the .essays-sidebar div (and into a child essays-sidebar-item of course).

You need to put your entire template into a <div> container though. Again I recommend just copying the code from Essay_lastupdate and repurposing it.

Future stuff

Random future stuff that I want to fix or implement on that page.

Still work on image layout (especially because some get cut off), on both the feed and individual pages separately, but the problem is I know people are going to upload images without checking the aspect ratio (I do it all the time) and it needs to look good in both views AND mobile and desktop too. Could use max-height to cap the height for images that are too big.
Add more sidebar items if we can find any.
Make it so we can collapse sidebar items for mobile users (probably need JS due to MW HTML restrictions)
make the table of contents available (tried a few things already but it just doesn't get pulled by DPL on the feed page)
remove the "Essays by " mention in author sidebar item. Possible with DPL but then number of works doesn't work.