Editing Comrade:CriticalResist/sandbox/Essays documentation

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 '''Soft Refresh'''.

I’m unsure how much 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:

 

 

* [[Module:Number of works]] which was made for the library to pull the number of pages (or "works") in a given category page, transcluded in Essays_numberofworks so that it can work with DPL on the author sidebar item.

 

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.

 

 

 

 

That's the only difference, I've updated the dpl codes below to reflect this.  

 

 

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.

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 <nowiki><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.</nowiki>

 

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.

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 <nowiki>{{DISPLAYTITLE}}</nowiki>. DisplayTitle is included in the template directly. I've also added a <nowiki>{{{name}}}</nowiki> 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.

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 <u>appears</u> 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).

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).

The code:<blockquote><nowiki><dpl></nowiki>

 

 

 

 

 

 

 

userdateformat = Y-m-d format = ,\n* <span class="essay-small">%DATE%</span>, <span class="lastupdate-title">[[%PAGE%|%TITLE%]]</span>,

 

</ dpl></blockquote>What it does is create a list of the 7 most recently updated essays (that is, when an edit was committed) **as long as they are in the Essays category**. 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 57 (60-3 to account for the ellipses the code adds) 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 <nowiki><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.</nowiki>

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 (''to the category''), meaning if you publish a new essay (or happen to remove one from the category, basically updating the category page in any way), you'll get bumped to the top.

The module from just above is used here as well.

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 <nowiki><div> are simply templates. They don’t necessarily needed to be templates, but I like that everything is in its own self-contained area.</nowiki>

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.

category=Essays

ordermethod= firstedit,pagetouched

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. You can go really deep with the include property, I recommend looking it up on the documentation.

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 <nowiki><div> container though. Again I recommend just copying the code from Essay_lastupdate and repurposing it.</nowiki>

* 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.