Thank you for your interest in contributing to RetroReversing! This guide explains some of the formatting guidelines and features you can use to make the posts on the page more engaging.
The following are the main principles of the site and can help decide not only how to write the posts but also if content is applicable to this site or would be better suited to a different wiki.
The target audience for the site are technically literate readers who likely already know how to program with modern programming languages but may be beginners when it comes to reverse engineering or programming in older languages and environments such as DOS. Bear this in mind when writing posts and try to reference any sources to back up claims.
The content of the site focuses on the development process and technology of video games from the 1980s until around 2010, with reverse engineering as a core aspect of the site, being the cornerstone of digital archaeology.
This can include:
We don’t want to duplicate the content of other sites; we aim to contribute to them where possible. We specifically focus on the more technical aspects of retro game development - there may be a better home for certain content.
Although there are exceptions to these rules, the kind of content we aim to avoid on this site includes:
Please try to link out to other sites that have high-quality information on a particular topic rather than rewriting the same content here. Content on this site should either link together sources from multiple places on the web into a cohesive article or include content not available elsewhere online.
However, please provide at least a brief description of the page you are linking to and its content before the reference so readers understand the relevance. The page here should still form a cohesive narrative even without the reader following the external links. If an external page is critical, tell the user to read it before continuing.
We want to avoid spreading misinformation as much as possible, which can be tricky when researching old software tools since there can be conflicting information. Please reference sources so readers can verify whether the information is correct. You may use Wikipedia as a source but only as a last resort if no other websites have the information.
Posts are written in GitHub Flavored Markdown but also support additional Jekyll includes that can be used for more advanced components.
For the writing style, think of each article as a technical handbook with references, not a blog post. Some general rules are below:
When copying and pasting between programs, ASCII/UTF characters can sometimes change. We try to maintain consistent characters:
-
and never —
(em dash).Lists improve readability when used appropriately but should not be overused. We mainly use unordered lists (Markdown: *
); only use ordered lists (Markdown: -
) if there is a specific reason to do so.
We have a preferred format for lists where each list item has a short bold part followed by a dash (-) and more information:
First we have a short sentence introducing the list:
* **Item title in bold** - More information about the item
However, if the list is too long (e.g. more than 10 items), use a Markdown table instead. The site supports searching within Markdown tables, which is not useful for short lists but ideal for long ones.
Rows in Markdown tables do not need to start or end with ‘ | ’ as Markdown handles this automatically. |
---
) when starting a new major section.*
for all unordered lists.eax, 0x00
).We use the footnote Markdown format for references. If it’s a link, ensure it’s a valid Markdown link so it’s clickable:
[^1]: [Reference Name](https://...)
You don’t need to reference posts from RetroReversing.com. Instead, just link to the relevant page using the handy include (the permalink must match the post exactly or it will not display):
<!-- To use this: include link-to-other-post.html post=/permlink-->
<div class="linkToOtherPost">
</div>
For code that could be useful to run interactively in the browser, provide the example in TypeScript. Otherwise, use Python for any scripts intended to run locally.
Keep code examples in the standard Markdown format, using backticks with the language name to apply syntax highlighting.
The last thing we want is for our pages to be boring or a chore to read. We are writing about games so it should be fun and visual! This section lists components you can use to ensure posts are not giant walls of text.
When a section is about a specific video game, try to find an image of the box art (e.g. from MobyGames) and use the format below to make it more visually appealing. It includes a link to MobyGames for more information when clicking the caption:
## Section related to a Game
<figure>
<img src="https://www.mobygames.com/images/covers/l/84474-k-c-munchkin-odyssey-2-front-cover.jpg" alt="K.C. Munchkin! Odyssey 2 Cover">
<figcaption>
<a href="https://www.mobygames.com/game/27443/kc-munchkin/">K.C. Munchkin! (1981) - Odyssey 2</a>
</figcaption>
</figure>
Text for the section...
This saves hosting all the images in this Git repository and links back to MobyGames, whose bandwidth we are using for the images.
This section is for lower level details about how some of the features on the site work.
To improve performance, this site uses a custom JavaScript-based lazy loading system for images. Lazy loading ensures that images are only loaded when they are about to enter the viewport, reducing initial page load time.
<img>
element with the class lazy-load
and a data-image-full
attribute will be lazy loaded.src
attribute is set dynamically by JavaScript when the image is about to come into view.public/js/main.js
(See the lazyLoad()
and isInView()
functions.)<img class="lazy-load" data-image-full="/images/highres.jpg" alt="Description">
src
if desired, or leave it blank.src
to the value of data-image-full
._includes/home-card.html
)_includes/link-to-other-post.html
, _includes/link-to-other-site.html
)_includes/placeholder-post-image.html
)categories/misc/Books.md
)lazy-load
class.data-image-full
attribute is set to a valid image URL.public/js/main.js
is being loaded and there are no JS errors in the console.The site uses a jQuery-based lightbox plugin (public/js/lightbox.js
) to display images in a modal overlay with optional gallery navigation.
<a>
tag with a data-lightbox
attribute will trigger the lightbox when clicked.postImage
are automatically wrapped in such a link by a script in _includes/footer.html
.gallery
value in their data-lightbox
attribute are grouped together for navigation.Automatic (for post images):
<img class="postImage" src="/images/example.jpg" alt="Example">
Manual (for custom galleries):
<a href="/images/photo1.jpg" data-lightbox='{"gallery": "holiday2024"}'>
<img src="/images/thumb1.jpg" alt="Photo 1">
</a>
<a href="/images/photo2.jpg" data-lightbox='{"gallery": "holiday2024"}'>
<img src="/images/thumb2.jpg" alt="Photo 2">
</a>
public/js/lightbox.js
_includes/footer.html
public/js/lightbox.js
are loaded.data-lightbox
.gallery
value in their data-lightbox
attribute.If you encounter issues with either feature, start by checking the relevant files listed above. For further help, open an issue or contact the maintainers.