Codingfullstack

This blog is written in markdown and supports below typography.

Here is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 2

Another one. 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.

Heading 4

1. First item
2. Second item

• Nested unordered item
• Nester unordered item 2

3. Third item
4. Nested ordered item 1
5. Nested ordered item 2

Heading 5

Where are the quotes!!!

Simplify, then add lightness.
— Colin Chapman

Now, time for some links!

• GoHugo
• Hugo Themes

Heading 6

Inline code: echo "What is the meaning of life?". Who knows?    

Image shortcodes

Responsive Images

{{- < img src="cover-image" styles="border-radius:4px" shape="Fill:700x200" > -}}

{{- < img src="cover-image" styles="border-radius:4px" shape="Fill:500x100" filters="GaussianBlur:0.8|ColorBalance:200,10,10"> -}}

{{- < img src="cover-image" styles="border-radius:4px" shape="Fill:x350 topLeft q100" > -}}

{{- < img src="cover-image" styles="border-radius:4px" > -}}

Non Responsive Images

![cover-image](cover-image.jpg)

// Codeblock

var meaningOfLife = 42;
console.log('The meaning of life is: ', meaningOfLife);

Who wants some table?

Ah, enough for today, eh?

Math

$$ \frac{d}{dx}\left( \int_{0}^{x} f(u),du\right)=f(x) $$

$$ A_n = \begin{pmatrix} a_1 & a_2 & \ldots & a_n b_1 & b_2 & \ldots & b_n \end{pmatrix} $$

Graphviz

```viz-dot
  digraph g { 
  node[shape="circle" , label="", width=0.2, height=0.2]
  l1[xlabel="v\(s\)"]
  l21[xlabel="a", width=0.1, height=0.1 , style=filled]
  l22[width=0.1, height=0.3, style=filled]
  l31[xlabel="v\(s'\)"]

  l1 -> l21
  l1 -> l22
  l21 -> l31 [xlabel="r"]
  l21 -> l32
  l22 -> l33
  l22 -> l34
  }
```

  digraph g { 
  node[shape="circle" , label="", width=0.2, height=0.2]
  l1[xlabel="v\(s\)"]
  l21[xlabel="a", width=0.1, height=0.1 , style=filled]
  l22[width=0.1, height=0.3, style=filled]
  l31[xlabel="v\(s'\)"]

  l1 -> l21
  l1 -> l22
  l21 -> l31 [xlabel="r"]
  l21 -> l32
  l22 -> l33
  l22 -> l34
  }

Waveform

```wave
{ 
  "signal": [ {"name": "CLK", "wave": "p.....|..."},
            {"name":"DAT", "wave":"x.345x|=.x", "data":["A","B","C","D"]},
            {"name": "REQ", "wave": "0.1..0|1.0"},
            {},
            {"name": "ACK", "wave": "1.....|01."}
]}
```

{ 
  "signal": [ {"name": "CLK", "wave": "p.....|..."},
            {"name":"DAT", "wave":"x.345x|=.x", "data":["A","B","C","D"]},
            {"name": "REQ", "wave": "0.1..0|1.0"},
            {},
            {"name": "ACK", "wave": "1.....|01."}
]}

Chart

```chart
    {
    "type": "line",
        "data": {
            "labels": ["One", "Two", "Three", "Four", "Five", "Six"],
            "datasets": [
            {
                "label": "# of Votes",
                "data": [12, 19, 3, 5, 2, 3]
            }
            ]
        }
    }
```

    {
    "type": "line",
        "data": {
            "labels": ["One", "Two", "Three", "Four", "Five", "Six"],
            "datasets": [
            {
                "label": "# of Votes",
                "data": [12, 19, 3, 5, 2, 3]
            }
            ]
        }
    }

MSC

```msc
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```

Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!

Flowcharts

```flowchart
  st=>start: Start:>http://www.google.com[blank]
  e=>end:>http://www.google.com
  op1=>operation: My Operation
  sub1=>subroutine: My Subroutine
  cond=>condition: Yes
  or No?:>http://www.google.com
  io=>inputoutput: catch something...
  para=>parallel: parallel tasks

  st->op1->cond
  cond(yes)->io->e
  cond(no)->para
  para(path1, bottom)->sub1(right)->op1
  para(path2, top)->op1
```

  st=>start: Start:>http://www.google.com[blank]
  e=>end:>http://www.google.com
  op1=>operation: My Operation
  sub1=>subroutine: My Subroutine
  cond=>condition: Yes
  or No?:>http://www.google.com
  io=>inputoutput: catch something...
  para=>parallel: parallel tasks

  st->op1->cond
  cond(yes)->io->e
  cond(no)->para
  para(path1, bottom)->sub1(right)->op1
  para(path2, top)->op1

Asciinema casts

It is possible to embed recorded asciinema casts on the pages. The recorded casts files (*.cast ) should be located in /static/casts directory. Then, the support for it should be enabled in the page frontmatter:

---
asciinema: true
---

and they can be embedded using a dedicated shortcode. For instance, to embed /static/casts/my-fantastic-cast.cast file, use:

{{< asciinema key="my-fantastic-cast" rows="20" preload="1" >}}

Diagrams

To embed diagrams, add code block section labeled with mermaid as a language:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label