:{#metadata title="Testing 1 2 3" banner="blue-and-white-planet-display.jpg" } # Test page This is just a test page so I can check if anything breaks when I update the code / CSS. Mainly based on the [djot syntax reference](https://htmlpreview.github.io/?https://github.com/jgm/djot/blob/master/doc/syntax.html). ## TOC Macro :{#toc} ## Block Syntax --- ## Paragraph This is a paragraph of text ## Block Quote > This is a block quote. > > 1. with a > 2. list in it. ## Lists - Bullet item 1 - Bullet item 2 - Indented bullet item 1 - Indented bullet item 2 - Bullet item 3 {% djot break %} 1. Decimal item 1 2. Decimal item 2 1. Indented decimal item 1 2. Indented decimal item 2 3. Decimal item 3 {% djot break %} a. Alpha item 1 b. Alpha item 2 a. Indented alpha item 1 b. Indented alpha item 2 c. Alpha item 3 {% djot break %} i. Roman lower item 1 i. Roman lower item 2 i. Indented roman lower item 1 i. Indented roman lower item 2 i. Roman lower item 3 {% djot break %} I. Roman upper item 1 I. Roman upper item 2 I. Indented roman upper item 1 I. Indented roman upper item 2 I. Roman upper item 3 {% djot break %} - [ ] Task item 1 - [x] Task item 2 - [ ] Indented task item 1 - [X] Indented task item 2 - [ ] Task item 3 {% djot break %} : orange A citrus fruit. : Hip part of the human anatomy to be cool an angled obstacle skateboarders use to perform tricks ## Code Block ``` This should be raw text with no title or line numbers. | Name | Type | Params ----------------------------------- 0 | model | Fontogen | 73.7 M ----------------------------------- 73.7 M Trainable params 0 Non-trainable params 73.7 M Total params 294.728 Total estimated model params size (MB) ``` {title="" lineno=122 hl_lines="1,3"} ```python # Starts at line 122, no title, highlights lines 122 and 124. def generate_html(self): result = [] current_node = self.html_tree_root result = self.generate_html_helper(result, current_node, -1) return '\n'.join(result) ``` {lineno=0 title="Not Python"} ```python # No line numbers, has the title "Not Python" def generate_html(self): result = [] current_node = self.html_tree_root result = self.generate_html_helper(result, current_node, -1) return '\n'.join(result) result = self.generate_html_helper(result, current_node, -1)result = self.generate_html_helper(result, current_node, -1)result = self.generate_html_helper(result, current_node, -1)result = self.generate_html_helper(result, current_node, -1)result = self.generate_html_helper(result, current_node, -1) ``` ````lua -- Has line numbers and an automatic title ---------------------------------------------------- -- 1. Variables and flow control. ---------------------------------------------------- num = 42 -- Numbers can be integer or floating point. s = 'walternate' -- Immutable strings like Python. t = "double-quotes are also fine" u = [[ Double brackets start and end multi-line strings.]] t = nil -- Undefines t; Lua has garbage collection. -- Blocks are denoted with keywords like do/end: while num < 50 do num = num + 1 -- No ++ or += type operators. end -- If clauses: if num > 40 then print('over 40') elseif s ~= 'walternate' then -- ~= is not equals. -- Equality check is == like Python; ok for strs. io.write('not over 40\n') -- Defaults to stdout. else -- Variables are global by default. thisIsGlobal = 5 -- Camel case is common. -- How to make a variable local: local line = io.read() -- Reads next stdin line. -- String concatenation uses the .. operator: print('Winter is coming, ' .. line) end ```` ## Thematic Break --- ## Raw Block ```=html

emphasized text

strong emphasis

``` ## Special Divs :::: note Highlights information that users should take into account, even when skimming. :::: :::: tip Optional information to help a user be more successful. :::: :::: important Crucial information necessary for users to succeed. :::: :::: warning Critical content demanding immediate user attention due to potential risks. :::: :::: caution Negative potential consequences of an action. :::: :::: caution Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy. Crazy? I was crazy once. They locked me in a room. A rubber room filled with rats. And rats make me crazy... :::: ## Tables | | Software / Hardware | | --------------- | -------------------------------------------------------- | | **OS** | TrueNAS Scale | | **Chassis** | TerraMaster D5-300 5-Bay DAS
MeLE Mini PC Quieter2Q | | **Motherboard** | ASRock J3455B-ITX | | **CPU** | Intel Celeron Quad-Core Processor J4125 | | **RAM** | 8GB | | **Networking** | Gigabit Ethernet | | **Storage** | OS: 256GB internal flash
==4x 8TB CMR HDD== | ^ This is the caption. It can contain _inline formatting_ and can extend over multiple lines, provided they are indented relative to the `^`. ## Link [My link text](http://example.com) ## Reference link [I am a reference link][google] [google]: https://google.com ## Footnote Here's the reference.[^foo] [^foo]: This is a note with two paragraphs. Second paragraph. > a block quote in the note. ## Heading links See the [Heading links][]. ## Image ![Profile](/images/profile.png){style="width: 30rem"} ## Autolink ## Verbatim This `text` contains verbatim text. ## Bold / Italic _I am italic_ and *I am bold*. ## Highlighting This is {=highlighted text=}. ## Super/subscript H~2~O and djot^TM^ ## Insert/delete My boss is {-mean-}{+nice+}. ## Smart punctuation "Hello," said the spider. "'Shelob' is my name." 57--33 oxen---and no sheep... ## Math Einstein derived $`e=mc^2`. Pythagoras proved $$` x^n + y^n = z^n ` ## Line break This is a soft break and this is a hard\ break. ## Comment Foo bar {% This is a comment, spanning multiple lines %} baz. ## Symbols My reaction is :+1: :smiley:. ## Raw Inline This is ``{=html}. ## Span It can be helpful to [read the manual]{.big .red}. ## Custom --- Most of the above are supported by djot, but the below are only supported by this SSG. ## Index List {.index-list} - {=Highlighted text=} First item - No highlights Second item ## Mermaid ```mermaid graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] ``` ## Tabs ::: tabset ### One Thing Sentences. {.active} ### Context Other sentences. ::: ## Side by Side Content ::: side-by-side This paragraph is on the left. This paragraph is on the right. :::