Intro

This is a sample blog content to provide insight on how to generate a blog post in this site. All posts will be rendered from MDX files. The MDX files will have basic attributes to display the blog, without these it may cause rendering error for the blog. So draft your blogs with care.

A sample for a small MDX blog content.

---
title: "Sample Blog"
summary: "A sample reference for markdown code snippet to create blogs"
author: "aidenpearce369"
date: "12-17-2024"
tags: [tctf, blog, demo ]
---
 
## Intro
 
This is a sample blog content to provide insight on how to generate a blog post in this site. All posts will be rendered from `MDX` files.
The MDX files will have basic attributes to display the blog, without these it may cause rendering error for the blog. So draft your blogs with care.
 
 
A sample for a small MDX blog content.
 
...

The author name is not referenced anywhere, whatever name you give it will be shown as it is from the blog. Date should be in DD-MM-YYYY format only. Do not post the content below the attributes with the blog title again and do not use table of contents. We dynamically generate ToC for the blog based on the markdown headers.

Attaching Images

Always attach images which directly gets previewed with its MIME type. Do not attach any other links apart from image MIME type. Try to use imgur for attaching images, since it is readily available and requires no resource from us.

 
CONTENT ...
 
![AltTextForImage](https://i.imgur.com/L9HIOAw.png)
 
...

Using this we can render images easily in the blog. When you attach images with this format, we have light box feature to maximize the image when it is clicked.

You can also append the images via HTML format, same as vanilla markdown we can use HTML here also. If it is not properly being closed or escaped it can cause issues.

// Height is not escaped (height="400px")
<img src="https://i.imgur.com/L9HIOAw.png" height=400px />
 
// Image tag is not closed (<img />)
<img src="https://i.imgur.com/L9HIOAw.png" >
 
// Correct syntax
<img src="https://i.imgur.com/L9HIOAw.png" />

But this does not support the lightbox feature. So try to attach images with markdown itself for better quality.

Code Syntax Highlighting

There will be many instances where we need to display the code for better understanding. In such cases we can provide the maximum quality from syntax highlighting.

You can declare your code files to render it.

Your code content below in MDX file 
 
```js
console.log('hello, world')
``
 
FYI Should be closed with three backticks (\`\`\`)
Nested rendering problem that is why i used ``
 
Content goes here

The preview of the code will be like

console.log('hello, world')

Specific line can be highlighted, line numbers can be shown, code can be copied and filename also can be easily declared via this syntax.

Your code content below in MDX file 
 
 
```js filename="demo.js" {3,4} copy showLineNumbers
let a = 1;
 
console.log(a);
console.log("TCTF rocks");
await loadCTF();
`` 
 
FYI Should be closed with three backticks (\`\`\`)
Nested rendering problem that is why i used ``
 
Content goes here

The preview of the code will be like

let a = 1;
 
console.log(a);
console.log("TCTF rocks");
await loadCTF();

Views

To provide tracking purposes for each blog, we have implemented views counter to keep it in track.

Views will be updated for unique view in 5 minutes. This will be further processed for future usecases.