The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision | Your text | ||
Line 1: | Line 1: | ||
''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.'' | ''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 ''' | 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 | 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. | ||
--- | --- | ||
These are the templates used for the new essays page. They all have their own /style.css sheet. | |||
== Essays_homepage == | == Essays_homepage == | ||
Only used to call a CSS stylesheet. 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. | |||
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. | 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 <nowiki><span class=”essay-small”> | 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”> to 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 container that contains the data on the infobox_essay template, managed from that template). See infobox_essay section for more info. | |||
Finally, this template also does something very important: it brings back the ''display'' property of ''' | |||
The template doesn’t do anything by itself otherwise, it only calls the stylesheet. | The template doesn’t do anything by itself otherwise, it only calls the stylesheet. | ||
== Infobox_essay == | == Infobox_essay == | ||
This is the big | This is the big one which must be included at the top of every essay. | ||
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 | 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. | ||
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. | 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 "last update" mention is wrapped in a span class 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 this data from whichever page it appears on, not from the essay itself. This is sort of a workaround until we find something better. | ||
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. | 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 | 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. | ||
== Essay_lastupdate == | == 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. | 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. | ||
What it does is create a list of the 7 most recently updated essays (that is, an edit was committed). You can change that 7 count to anything else in the template by editing '''count = 7''' in the DPL code. | |||
Essay_lastupdate is built in a div container called lastupdate-container. The only reason we need this div is to apply the CSS (gray background, padding, etc). | |||
It also contains a stylesheet at /style.css that styles the container (currently gray background with rounded corners and some padding). The reason we need to apply the styling to the template itself and not from the Essays_homepage template is because of the padding, so that it moves the content away from the box properly. | |||
== Essay_categories == | == Essay_categories == | ||
Line 116: | Line 48: | ||
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. | 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. | ||
Also uses a div container in the template to apply the CSS to it. | |||
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. | 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. | ||
== Essay_authors == | == Essay_authors == | ||
The essay_authors template | The essay_authors template works exactly like the categories template, just with authors instead. Not much else to say. | ||
== 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 <nowiki><div>s are simply templates. They don’t necessarily need 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 | 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 appear before the feed in the HTML code). If you changed ''reverse-row'' to ''row'', the sidebar would appear on the left. | ||
This is controlled by simply changing the width of the two flex boxes: '''essays-list''' (the feed of all essays in their full format) and '''essays-sidebar''' (the container for sidebar items). | |||
The | The setup is otherwise pretty simple with HTML. There’s an overall container called '''essays-page''', which contains the sidebar and its nested individual items ('''essay-sidebar-item'''), and then the essays-list which is created with DPL code. | ||
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. | |||
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. | |||
Those items, in their template page, have their own stylesheet however. For coherence purposes, all sidebar items should have the same CSS. | |||
There is no pagination; all essays ever published will be included in the main feed. I’m looking at making pages with DPL though. | There is no pagination; all essays ever published will be included in the main feed. I’m looking at making pages with DPL though. | ||
Line 152: | Line 82: | ||
<blockquote><nowiki><dpl></nowiki> | <blockquote><nowiki><dpl></nowiki> | ||
namespace=Essay | |||
mode=unordered | mode=unordered | ||
Line 158: | Line 88: | ||
includesubpages=false | includesubpages=false | ||
ordermethod= firstedit | ordermethod=firstedit | ||
order=descending | order=descending | ||
Line 165: | Line 95: | ||
<nowiki></dpl></nowiki></blockquote> | <nowiki></dpl></nowiki></blockquote> | ||
Line 175: | Line 104: | ||
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. | 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. | 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 | 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. | 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. | ||
Line 202: | Line 127: | ||
== Adding more sidebar items == | == 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. | 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’s super easy, just make a template for them (and DPL allows some cool stuff so we can use that as well), add the /style.css subpage, copy the styling from any other sidebar item into it, transclude that template on the homepage in the '''.essays-sidebar''' div (and into a child '''essays-sidebar-item''' of course). Don’t forget to close your divs and do this from the source editor, the visual editor will break everything. | ||
It’s super easy | |||
== Future stuff == | == Future stuff == | ||
Random future stuff that I want to fix or implement on that page. | Random future stuff that I want to fix or implement on that page. | ||
* | * fix image display. Right now it centers the image vertically and horizontally. Image width is 100% because on citizen skin you can change the page width, so I don't want to use absolute pixel numbers. For the library we set them as float:left and this allows us to specify a top: and left: position to center them correctly, but their size (height and width) is fixed in the library no matter on desktop or mobile. | ||
* Remove CSS from the sidebar item templates and put it in Essays_homepage instead, so that they instantly look coherent. | |||
* Add more sidebar items if we can find any. | * Add more sidebar items if we can find any. | ||