---
title: "Sample"
description: "There is a glossary item in vibe coding here and clippy no simpy."
date: 2021-01-25
published: false
tags:
  - meta
template: blog-post
---


# title

## subtitle

### sub-subtitle

#### sub-sub-subtitle

##### sub-sub-sub-subtitle

###### sub-sub-sub-sub-subtitle


## Glossary

There is a glossary item in vibe coding here and clippy no simpy.

Now you don't have to manually link to how to create a virtual environment
every time you mention virtual environments in any post that needs a virtual
environment.


## Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
<span class="bg-pink-500" id="inline-tooltip">Hover me</span>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

## CodeBlock

``` python
import this

print("that")
```

## Horizontal rule

---

## Blockquote

> 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 laboris nisi ut aliquip ex ea commodo
> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
> proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## Table

| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |

## Task List

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

## Highlight

I need to highlight these ==very important words==.

## Bold

This text has **bold** text

## Italics

This text has _italic_ text

## Subscript

``` markdown
H~2~0
```

H~2~O

## Superscript

``` markdown
X^2^
```

X^2^

## Emoji

Emoji support not yet working

``` markdown
That is so funny! :joy:

:rocket:

:thumbs_up:

:grinning_face:

:fire:
```

That is so funny! :joy:

:rocket:

:thumbs_up:

:grinning_face:

:fire:

## Abbreviations

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification
is maintained by the W3C.

## Keys

++Ctrl+Alt+Del++

++Win+9++

## Mark

``` markdown
==marked==
```

==marked==

==marked== => <mark>inserted</mark>

## Containers

::: container {.bg-pink-500}
_here be dragons_

here
:::

warning

{.bg-pink-500}
::: warning
_here be dragons_
be careful
:::

more containers

:::: name
::: name
_markdown_
:::
::::

{.text-pink-900}
::::
{.bg-pink-500}
:::
container

## here

there

## there

``` python
import this
```

:::

:::
second container

I still have pink text, but no pink background
:::

::::

## carousel

{.carousel}
::::
:::
hi
:::
:::
hi
:::
:::
hi
:::
:::
hi
:::
:::
hi
:::
::::

## Admonitions

!!! note sample note

     this is a sample

???+ note sample note

     this is a sample

     it's collapsible and open

??? note sample note

     this is a sample

     it's collapsible and closed

!!! danger be careful

     this is super dang.

     ## subtitle

!!! reminder

     this is a reminder

!!! caution

     this is a caution

!!! attention

     this is a attention

!!! hint

     this is a hint

!!! error

     this is a error

!!! important

     this is a important

!!! seealso

     this is a seealso

!!! tip

     this is a tip

!!! todo

     this is a todo

!!! warning

     this is a warning

!!! settings

     this is a settings

## vsplit

``` markdown
!!! vsplit I Have two opinions

    !!! vsplit Left Opinion

        supporting arguments

        * lorem ipsum
        * ipsum dolor

        - [x] lorem ipsum
        - [ ] ipsum dolor

    !!! vsplit Right Opinion

        supporting arguments

        * lorem ipsum
        * ipsum dolor

        - [ ] lorem ipsum
        - [x] ipsum dolor
```

Here is the result of that markdown.

!!! vsplit I Have two opinions

    !!! vsplit Left Opinion

        supporting arguments

        * lorem ipsum
        * ipsum dolor

        - [x] lorem ipsum
        - [ ] ipsum dolor

    !!! vsplit Right Opinion

        supporting arguments

        * lorem ipsum
        * ipsum dolor

        - [ ] lorem ipsum
        - [x] ipsum dolor

A clean vsplit

{.clean}
!!! vsplit ""

    !!! vsplit Hello World

        Here is a hello world application written in the typer cli framework
        for cli.

    !!! vsplit ""
        ``` python
        #!/usr/bin/env -S uv run --quiet --script
        # ///
        # requires-python = ">=3.12"
        # dependencies = [
        #     "typer",
        # ]
        # ///

        import typer

        app = typer.Typer()

        @app.command()
        def hello(name: str = "World"):
            """Prints a greeting message."""
            typer.echo(f"Hello, {name}!")

        if __name__ == "__main__":
            app()
        ```

## html in md

html without the markdown atrribute will not be parsed as markdown

!!! vsplit ""

    !!! vsplit ""
        ``` markdown
        <div>
        # markdown in html

        This is not markdown
        </div>
        ```

    !!! vsplit ""
        <div>
        # markdown in html

        This is not markdown
        </div>

If you give an html tag the `markdown="1"` attribute, the markdown will be
parsed and rendered as html inside of that tag.

!!! vsplit ""
    !!! vsplit ""
        ``` markdown
        <div markdown="1">

        # markdown in html

        This is a *Markdown* Paragraph.

        </div>
        ```

    !!! vsplit ""
        <div markdown="1">

        # markdown in html

        This is a *Markdown* Paragraph.

        </div>

## mermaid diagrams

```mermaid
---
config:
layout: elk
look: handDrawn
theme: dark
---
flowchart TD
    A[Raw Water Intake] --> B[Screening]
    B --> C[Coagulation & Flocculation]
    C --> D[Sedimentation/Clarification]
    D --> E[Filtration]
    E --> F[Disinfection]
    F --> G[Storage/Distribution]
```

```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

```mermaid
---
config:
  layout: elk
  look: handDrawn
  theme: dark
---

graph TD
  A[\Replenish Value Add stock/] --->C
  B(Order product with Value Add) --->C
  C{Frequent process?} --->|Yes|D
  C --->|No|F
  D{New template?} --->|Yes|E
  D --->|No|G
  E(Create work order template) --->G
  F(Create work order) --->H
  G(Copy template to work order) --->I
  H(Add materials to work order processes) --->J
  I(Adjust material quantities) --->J
  J(Monitor work orders) --->K
  K{Material quantities in stock?} --->|No|L
  K --->|Yes|M
  L(Procure materials) --->M
  M(Change status to In Progress) --->N
  N{External Vendor to perform step?} --->|Yes|O
  N --->|No|P
  O(Add vendor costs) --->Q
  P[\Perform work order step/] --->R
  Q([Ship materials to Vendor]) --->S --->X
  R{Additional processing required?} --->|Yes|N
  R--->|No|T
  S[\Perform work order step/] --->U
  T(Receive final stock) --->V
  U(Receive product from vendor) --->W
  V(Ship product on order) --->Y
  W{Partial quantity received?} --->|Yes|X
  W --->|No|Z
  X[Create work order backorder] ---> J
  Y(Change status to complete) --->AA
  Z(Pay vendor invoice) --->R
  AA([Finish])
```

gitgraph

```mermaid

gitGraph:
    commit "Ashish"
    branch newbranch
    checkout newbranch
    commit id:"1111"
    commit tag:"test"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit
```

```mermaid

gitGraph:
    commit "new stuff"
    branch make-server-feature
    checkout make-server-feature
    commit "go"
    commit tag:"test"
    commit
    commit
    commit
    rebase
    checkout main
    commit type: HIGHLIGHT
    commit
    merge make-server-feature
    commit

```

```mermaid
mindmap
  #python
    uv
    pip
    ipython
      jupyter
      jupyterlab


```

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

The journey

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
      Play with cat: 10: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

```mermaid
---
config:
  layout: elk
  look: handDrawn
  theme: dark
---
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
```

```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

```

```` markdown
``` mermaid
architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```
````

```mermaid
architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db


```

## can it vsplit

!!! vsplit ""
    !!! vsplit ""
        ```` markdown
        ``` mermaid
        architecture-beta
            group api[logos:aws-lambda](API)

            service db(logos:aws-aurora)[Database] in api
            service disk1(logos:aws-glacier)[Storage] in api
            service disk2(logos:aws-s3)[Storage] in api
            service server(logos:aws-ec2)[Server] in api

            db:L -- R:server
            disk1:T -- B:server
            disk2:T -- B:db
        ```
        ````

    !!! vsplit ""
        ``` mermaid
        architecture-beta
            group api(logos:aws-lambda)[API]

            service db(logos:aws-aurora)[Database] in api
            service disk1(logos:aws-glacier)[Storage] in api
            service disk2(logos:aws-s3)[Storage] in api
            service server(logos:aws-ec2)[Server] in api

            db:L -- R:server
            disk1:T -- B:server
        ```

version {{ version }}

<wa-tooltip  for="inline-tooltip" trigger='manual' id='inline-tooltip-tooltip'>
    <div class='bg-black rounded-xl border-2 border-pink-500 max-h-96 overflow-y-scroll'>
        <a href='/glossary/vibe-coding' class="bg-pink-500 text-white uppercase mx-4" style='color:white'>Vibe Coding</a>
        <div  hx-get='/glossary/vibe-coding/partial' hx-trigger='load' hx-swap='outerHTML'></div>
    </div>
</wa-tooltip>

<script>
  const tooltip = document.getElementById('inline-tooltip-tooltip');
  const anchor  = document.getElementById('inline-tooltip');

  let overAnchor = false;
  let overTip    = false;
  let closeTimer = null;

  function openTip() {
    clearTimeout(closeTimer);
    tooltip.open = true;
  }
  function scheduleClose(delay = 200) {
    clearTimeout(closeTimer);
    closeTimer = setTimeout(() => {
      if (!overAnchor && !overTip) tooltip.open = false;
    }, delay);
  }

  // Anchor hover intent
  anchor.addEventListener('pointerenter', () => {
    overAnchor = true;
    openTip();
  });
  anchor.addEventListener('pointerleave', () => {
    overAnchor = false;
    // give the user time to move into the tooltip
    scheduleClose(200);
  });

  // Tooltip hover intent
  tooltip.addEventListener('pointerenter', () => {
    overTip = true;
    openTip();
  });
  tooltip.addEventListener('pointerleave', () => {
    overTip = false;
    scheduleClose(100);
  });

  // Optional: open on focus, close on blur/Escape for a11y
  anchor.addEventListener('focusin', openTip);
  anchor.addEventListener('focusout', () => scheduleClose(100));
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') tooltip.open = false;
  });
</script>