The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Integration Test 1

TL;DR

Everything here is made from Neopolitan files and templates. No JavaScript is involved except that which is added directly inside the content itself (which you'll see below).

This TL;DR is part of the test. It's at the bottom of the source file but moved the top by the template. Any section can be moved to any place the same way.

TODO: Pull subtitle into page object

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6

Link Tests

Inline Tag Tests

NOTE: The "This:" part of the examples aren't working properly. They're still in progress. When done, they'll show the source code instead of the rendered code.

Image Test

a black and white self portrait taken in a convex mirror in a hotel room. I'm standing on the bed leaning towards it in the reflection. Small spokes fan out from the round part of the mirror like thing fan blades.

This is a caption for the image

There's also alt text in it

This Is An H2

This it the content directly below the h2 that is split across multiple lines in the source content.

And a second paragraph below it.

Basic List Test

List w/ Custom Title, ID, Preface, and CSS Strikethrough

This Is A Custom Title For The List
This is a preface for a list this is more text for the preface of the list
Inline CSS For The Strikethrough Above
#strike_list_target li:nth-child(1) > p {
  text-decoration: line-through;
}

Basic Notes Test

Notes

Note With Custom Title Test

This Is A Notes Custom Title

Alternate Template Test

This `-- p`` uses a `-- template:``

attribute to call a different template

that centers the text

Nested Section Test

HOTEL: This Is The Section Title Attribute

This starts a `-- section/`` that has a nested `-- div/`` in it. Inside that are three individual `-- div`` sections that are arranged into a grid by the parent class

JULIETTE: This is a red div

KILO: This is a green div

LIMA: This is a blue div

This is the content after the parent div wrapper is closed

And this is the content of the ending `-- /section``

Inline CSS Test

CSS For The Above Nested Divs
This CSS comes directly from the content file and gets embedded into the head of the document on rendering
.nested_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.nested_wrapper div:nth-child(1) {
    color: red;
}

.nested_wrapper div:nth-child(2) {
    color: green;
}

.nested_wrapper div:nth-child(3) {
    color: blue;
}
This is a checklist

HTML (show-below example)

HTML
This HTML (and script) is from directly inside the content file. It gets embedded into the page as is, and then a syntax highlighted version of the code is output below it
<div class="example center">
  <div id="p5_output"></div>
</div>

<script>
let rad = 20
let xpos, ypos
let xspeed = 2.8
let yspeed = 2.2
let xdirection = 1
let ydirection = 1

function setup() {
  var canvas = createCanvas(300, 100)
  canvas.parent('p5_output')
  noStroke()
  frameRate(30)
  ellipseMode(RADIUS)
  xpos = width / 2
  ypos = height / 2
}

function draw() {
  background(101)
  xpos = xpos + xspeed * xdirection
  ypos = ypos + yspeed * ydirection
  if (xpos > width - rad || xpos < rad) {
    xdirection *= -1
  }
  if (ypos > height - rad || ypos < rad) {
    ydirection *= -1
  }
  ellipse(xpos, ypos, rad, rad)
}

</script>

Blockquote Test

Thinking About Blockquotes

This is a block quote

with a couple of styled paragraphs in it

-- Some Author
   (Some place)
Script ID Target Example

This is a p with an `id`` on it. The color gets updated randomly by the script below

Script Id Target Code
const letters = [
  "3", "5", "7", "9", "a", "c", "e"
]

const hc = () => Math.floor(Math.random() * letters.length)
const clr = () => {
  return `#${hc()}${hc()}${hc()}`
}

document.addEventListener("DOMContentLoaded", () => {
    const id_example = document.getElementById("id_example")
    const intervalHolder = setInterval(() => {
        id_example.style.color = clr()
    }, 4000)
})
Code
const thingThing = () => {
    const thing = "This is a test of syntax highlighting"
}
Code
fn main() {
    let text = r#"
And this it to make sure code highlighting
works for different languages
and with a example results below"#;
    println!(text);
}
Results
And this it to make sure code highlighting
works for different languages
and with a example results below
CSS
.green {
    color: green;
}

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Integration Test 1

TODO: Get this to show up: This is the first paragraph
in the content file directly after the title before
any other sections are defined. 



-- h1

This is an H1

-- h2

This is an H2

-- h3

This is an H3

-- h4

This is an H4

-- h5

This is an H5

-- h6

This is an H6


-- h2

Link Tests

-- list

- Basic Link:

<<link|example.com|https://www.example.com/>>

- Internal Link To Id Page

<<ilink|Links (with urls)|2ba2pzhp>>

- Internal Link To Page With Path Via Id

<<ilink|Home Page|2ba2pzhp>>

- Link with inline class added

<<link|example.com|https://www.example.com/|class: green>>

- Link with inline strong and em span

<<em|<<strong|<<link|example.com|https://www.example.com/>>>>>>



-- h2

Inline Tag Tests

-- list
-- preface: NOTE: The "This:" part of the examples aren't
-- preface: working properly. They're still in progress. When done, 
-- preface: they'll show the source code instead of the rendered code. 


- <<strong|Single Inline Span:>>

This: `Lorem ipsum <<strong|augue enim>> lobortis``

Renders this: Lorem ipsum <<strong|augue enim>> lobortis

- <<strong|Nested Inline Spans:>>

This: `Lorem ipsum <<strong|<<strike|fringilla ante>>>> felis``

Renders this: Lorem ipsum <<strong|<<strike|fringilla ante>>>> felis

- <<strong|Adding Attributes:>>

This: `Lorem ipsum <<span|lacinia pretium|class: green>> congue``

Lorem ipsum <<span|lacinia pretium|class: green>> congue


-- h2

Image Test

-- image
-- selfie-in-mirror-spikes-aws-2022-0420-1218-0448
-- class: photo
-- alt: a black and white self portrait taken in 
-- alt: a convex mirror in a hotel room. I'm standing
-- alt: on the bed leaning towards it in the reflection. 
-- alt: Small spokes fan out from the round part of the 
-- alt: mirror like thing fan blades. 

This is a caption for the image

There's also alt text in it

-- h2

This Is An H2

This it the content directly below the h2
that is split across multiple lines in
the source content.

And a second paragraph below it.


-- h2

Basic List Test

-- list

- Lorem ipsum aliquam enim, at tincidunt leo 
mauris eget ipsum.

- Phasellus dictum, nulla et sollicitudin porttitor. 
Integer suscipit, erat non ullamcorper porttitor, 
augue felis aliquet tortor, non elementum eros massa 
vel est.

Lectus elit viverra ipsum, vitae iaculis diam nulla sit 
amet nibh.

- Mauris consectetur felis laoreet, bibendum dolor vel, 
porttitor augue.

Nam eget nisi in enim fringilla sodales imperdiet tincidunt 
eros. Praesent justo ex, vestibulum vitae velit ut, consequat pretium risus.


-- h2

List w/ Custom Title, ID, Preface, and CSS Strikethrough

-- list
-- id: strike_list_target
-- title: This Is A Custom Title For The List
-- preface: This is a preface for a list
-- preface: this is more text for the preface of the 
-- preface: list

- Lorem ipsum lacinia lacus at libero laoreet commodo

- Cras viverra lectus quis dui efficitur suscipit


-- css
-- title: Inline CSS For The Strikethrough Above
-- template: show

#strike_list_target li:nth-child(1) > p {
  text-decoration: line-through;
}


-- h2

Basic Notes Test

-- notes

- papa

- echo 

- whiskey 

- bravo

-- h2

Note With Custom Title Test

-- notes
-- title: This Is A Notes Custom Title

- foxtrot 

- sierra

- kilo

- victor




-- h2

Alternate Template Test

-- p
-- template: centered

This `-- p`` uses a `-- template:`` 

attribute to call a different template

that centers the text

-- h2

Nested Section Test

-- section/
-- title: HOTEL: This Is The Section Title Attribute

This starts a `-- section/`` that has a 
nested `-- div/`` in it. Inside that are three
individual `-- div`` sections that are arranged
into a grid by the parent class

-- div/
-- class: nested_wrapper

-- div

JULIETTE: This is a <<em|red>> div

-- div

KILO: This is a green div

-- div

LIMA: This is a blue div

-- /div

This is the content after the parent div
wrapper is closed

-- /section

And this is the content of the ending
`-- /section``

-- h2

Inline CSS Test

-- css
-- template: show
-- title: CSS For The Above Nested Divs
-- preface: This CSS comes directly from the content
-- preface: file and gets embedded into the head
-- preface: of the document on rendering

.nested_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.nested_wrapper div:nth-child(1) {
    color: red;
}

.nested_wrapper div:nth-child(2) {
    color: green;
}

.nested_wrapper div:nth-child(3) {
    color: blue;
}


-- checklist
-- title: This is a checklist

[] the

[x] quick

[] brown 

[] fox


-- head

<script src="/_assets/p5/p5.min.js"></script>


-- h2

HTML (show-below example)

-- html
-- template: show-below
-- preface: This HTML (and script) is from directly inside
-- preface: the content file. It gets embedded into the page
-- preface: as is, and then a syntax highlighted version
-- preface: of the code is output below it

<div class="example center">
  <div id="p5_output"></div>
</div>

<script>
let rad = 20
let xpos, ypos
let xspeed = 2.8
let yspeed = 2.2
let xdirection = 1
let ydirection = 1

function setup() {
  var canvas = createCanvas(300, 100)
  canvas.parent('p5_output')
  noStroke()
  frameRate(30)
  ellipseMode(RADIUS)
  xpos = width / 2
  ypos = height / 2
}

function draw() {
  background(101)
  xpos = xpos + xspeed * xdirection
  ypos = ypos + yspeed * ydirection
  if (xpos > width - rad || xpos < rad) {
    xdirection *= -1
  }
  if (ypos > height - rad || ypos < rad) {
    ydirection *= -1
  }
  ellipse(xpos, ypos, rad, rad)
}

</script>


-- h2

Blockquote Test

-- blockquote
-- by: Some Author
-- title: Thinking About Blockquotes
-- url: https://www.example.com
-- source: Some place

This is a block quote

with a couple of <<em|styled paragraphs|class: green>> in it



-- p
-- id: id_example
-- title: Script ID Target Example

This is a p with an `id`` on it. The 
color gets updated randomly by the 
script below


-- script
-- template: show
-- title: Script Id Target Code

const letters = [
  "3", "5", "7", "9", "a", "c", "e"
]

const hc = () => Math.floor(Math.random() * letters.length)
const clr = () => {
  return `#${hc()}${hc()}${hc()}`
}

document.addEventListener("DOMContentLoaded", () => {
    const id_example = document.getElementById("id_example")
    const intervalHolder = setInterval(() => {
        id_example.style.color = clr()
    }, 4000)
})


-- code
-- javascript

const thingThing = () => {
    const thing = "This is a test of syntax highlighting"
}

-- code
-- rust

fn main() {
    let text = r#"
And this it to make sure code highlighting
works for different languages
and with a example results below"#;
    println!(text);
}

-- results/

And this it to make sure code highlighting
works for different languages
and with a example results below

-- /results




-- css
-- template: show
-- subtitle: /some/file/path

.green {
    color: green;
}


-- tldr/

Everything here is made from Neopolitan files
and templates. No JavaScript is involved
except that which is added directly inside the 
content itself (which you'll see below). 

This TL;DR is part of the test. It's at the bottom
of the source file but moved the top by the template. Any 
section can be moved to any place the same way.

-- /tldr

-- metadata
-- date: 2024-01-19 00:55:49
-- id: 2ba2pzhp
-- type: integration
-- status: published