kayjaydee
f1d89ea532
- Add `draft: true` to frontmatter of both test-kotlin-syntax.md files
so they are excluded from all `queryCollection(...).where('draft', '=', false)`
listings (D-14).
- Articles remain accessible via direct URL (no draft filter on `.path(x).first()`),
keeping them available for internal rendering tests.
- Listings will be empty until real Hytale seed articles land in Phase 8 —
the empty state will render per D-16 ("Hytale articles coming soon" CTA).
- Body content untouched (only frontmatter +1 line each).
242 lines
4.9 KiB
Markdown
242 lines
4.9 KiB
Markdown
---
|
|
title: "Markdown Format Guide"
|
|
description: "Complete reference of all elements and components available in articles"
|
|
date: "2026-04-21"
|
|
tags: ["guide", "markdown", "mdc"]
|
|
draft: true
|
|
---
|
|
|
|
## Basic Typography
|
|
|
|
Normal paragraph with **bold**, *italic*, ~~strikethrough~~ and `inline code`.
|
|
|
|
Simple link: [killiandalcin.fr](https://killiandalcin.fr)
|
|
|
|
Blockquote:
|
|
|
|
> The best Hytale plugins are born from an obsession with details.
|
|
|
|
---
|
|
|
|
## Code Blocks
|
|
|
|
Kotlin block with syntax highlighting:
|
|
|
|
```kotlin
|
|
fun createPlugin(name: String): HytalePlugin {
|
|
return HytalePlugin.builder()
|
|
.name(name)
|
|
.version("1.0.0")
|
|
.onLoad { println("Plugin $name loaded!") }
|
|
.build()
|
|
}
|
|
```
|
|
|
|
TypeScript:
|
|
|
|
```typescript
|
|
interface PluginConfig {
|
|
name: string
|
|
version: `${number}.${number}.${number}`
|
|
enabled: boolean
|
|
}
|
|
|
|
const config: PluginConfig = {
|
|
name: 'hytale-core',
|
|
version: '1.0.0',
|
|
enabled: true,
|
|
}
|
|
```
|
|
|
|
Shell:
|
|
|
|
```bash
|
|
pnpm install @hytale/sdk
|
|
pnpm run build
|
|
docker build -t portfolio:latest .
|
|
```
|
|
|
|
---
|
|
|
|
## Images
|
|
|
|
**Full width (default):**
|
|
|
|
|
|
|
|
**Centered with fixed size and caption:**
|
|
|
|
{align="center" width="120" caption="Killian' DAL-CIN Logo"}
|
|
|
|
**Floating left:**
|
|
|
|
{align="left" caption="Float left"}
|
|
|
|
Text wrapping around the floating image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
|
|
|
|
::clear
|
|
::
|
|
|
|
**Floating right:**
|
|
|
|
{align="right" caption="Float right"}
|
|
|
|
Text wrapping around the right-floating image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
::clear
|
|
::
|
|
|
|
**Direct Tailwind classes:**
|
|
|
|
{.w-16 .mx-auto .block}
|
|
|
|
---
|
|
|
|
## Tables
|
|
|
|
| Component | Syntax | Usage |
|
|
|-----------|--------|-------|
|
|
| Alert | `::alert{type="info"}` | Colored callouts |
|
|
| Image | `{align="left"}` | Floating photos |
|
|
| Columns | `::columns{cols=2}` | Page layout |
|
|
| Details | `::details{summary="View"}` | Collapsible content |
|
|
| Video | `::video{src="..."}` | YouTube/local embed |
|
|
| Badge | `:badge[text]{color="blue"}` | Inline tags |
|
|
|
|
---
|
|
|
|
## Callouts
|
|
|
|
::alert{type="info"}
|
|
**Info** — Informational message. Supports **bold** and `inline code`.
|
|
::
|
|
|
|
::alert{type="warning"}
|
|
**Warning** — Check Nuxt 4 compatibility before installing a module.
|
|
::
|
|
|
|
::alert{type="tip"}
|
|
**Tip** — Use `pnpm` instead of `npm` for Nuxt projects (faster resolution).
|
|
::
|
|
|
|
::alert{type="danger"}
|
|
**Danger** — Never commit API keys or secrets in plain text.
|
|
::
|
|
|
|
---
|
|
|
|
## Columns
|
|
|
|
::columns{cols=2}
|
|
::div
|
|
**Column 1**
|
|
|
|
Content of the first column. Ideal for comparing two approaches, showing before/after, or listing pros and cons.
|
|
::
|
|
|
|
::div
|
|
**Column 2**
|
|
|
|
Content of the second column. Columns automatically stack on mobile.
|
|
::
|
|
::
|
|
|
|
::columns{cols=3 gap="lg"}
|
|
::div
|
|
🚀 **Fast**
|
|
|
|
Nuxt SSR generates HTML server-side.
|
|
::
|
|
|
|
::div
|
|
🔍 **SEO**
|
|
|
|
Every page is crawlable without JavaScript.
|
|
::
|
|
|
|
::div
|
|
🎨 **Flexible**
|
|
|
|
Tailwind + Nuxt UI for all your styling needs.
|
|
::
|
|
::
|
|
|
|
---
|
|
|
|
## Collapsible Content
|
|
|
|
::details{summary="View full plugin implementation"}
|
|
```kotlin
|
|
class HytalePlugin(
|
|
val name: String,
|
|
val version: String,
|
|
private val onLoad: () -> Unit,
|
|
) {
|
|
fun load() {
|
|
println("Loading plugin: $name v$version")
|
|
onLoad()
|
|
}
|
|
|
|
companion object {
|
|
fun builder() = Builder()
|
|
}
|
|
|
|
class Builder {
|
|
private var name = ""
|
|
private var version = "0.0.1"
|
|
private var onLoad: () -> Unit = {}
|
|
|
|
fun name(n: String) = apply { name = n }
|
|
fun version(v: String) = apply { version = v }
|
|
fun onLoad(fn: () -> Unit) = apply { onLoad = fn }
|
|
fun build() = HytalePlugin(name, version, onLoad)
|
|
}
|
|
}
|
|
```
|
|
::
|
|
|
|
::details{summary="Why use @nuxt/content?" open=true}
|
|
`@nuxt/content` transforms Markdown files into crawlable SSR pages. Benefits:
|
|
|
|
- **Zero CMS** — articles live in the Git repo
|
|
- **Typed** — Zod schema on every collection
|
|
- **MDC** — Vue components inside Markdown
|
|
::
|
|
|
|
---
|
|
|
|
## Inline Badges
|
|
|
|
Versions: :badge[v1.0]{color="green"} :badge[v0.9 LTS]{color="blue"} :badge[deprecated]{color="red"}
|
|
|
|
Status: :badge[stable]{color="green"} :badge[beta]{color="yellow"} :badge[wip]{color="orange"}
|
|
|
|
Technologies: :badge[Kotlin]{color="purple"} :badge[Nuxt 4]{color="green"} :badge[TypeScript]{color="blue"}
|
|
|
|
---
|
|
|
|
## Video
|
|
|
|
**YouTube:**
|
|
|
|
::video{src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="YouTube embed example"}
|
|
::
|
|
|
|
---
|
|
|
|
## Lists
|
|
|
|
Unordered list:
|
|
|
|
- First item
|
|
- Second item with `code`
|
|
- Third item with **bold**
|
|
- Nested sub-item
|
|
- Another sub-item
|
|
|
|
Ordered list:
|
|
|
|
1. Install dependencies: `pnpm install`
|
|
2. Start the dev server: `pnpm dev`
|
|
3. Build for production: `pnpm build`
|