Improve Elements Page

The new elements collection has a document for each element with the
code required to generate that element. The element layout parse that
code and displays both the parsed element and the code itself.

_config.yml

@@ -61,7 +61,8 @@ collections:
   projects:
     output: true
     permalink: /projects/:name
-
+  elements:
+    output: true
 
 ### Defaults for collections ###
 defaults:
@@ -70,6 +71,11 @@ defaults:
       type: "projects"
     values:
       layout: "page"
+  - scope:
+      path: ""
+      type: "elements"
+    values:
+      layout: "element"
 
 
 ### Exclude from processing ###

_elements/01-headers.html

@@ -0,0 +1,9 @@
+---
+---
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6

_elements/02-emphasis.html

@@ -0,0 +1,7 @@
+---
+---
+
+Emphasis, aka italics, with *asterisks* or _underscores_.  
+Strong emphasis, aka bold, with **asterisks** or __underscores__.  
+Combined emphasis with **asterisks and _underscores_**.  
+Strikethrough uses two tildes. ~~Scratch this.~~

_elements/03-highlight.html

@@ -0,0 +1,6 @@
+---
+---
+
+{% raw %}
+{% include elements/highlight.html text="I am highlighted text." %}
+{% endraw %}

_elements/04-blockquotes.html

@@ -0,0 +1,9 @@
+---
+---
+
+> Blockquotes are very handy in email to emulate reply text.
+> This line is part of the same quote.
+
+Quote break.
+
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

_elements/05-links.html

@@ -0,0 +1,4 @@
+---
+---
+
+[I'm a link](https://www.google.com)

_elements/06-line-breaks.html

@@ -0,0 +1,9 @@
+---
+---
+
+Here's a line for us to start with.
+
+This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
+
+This line is also a separate paragraph, but...
+This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

_elements/07-horizontal-rule.html

@@ -0,0 +1,10 @@
+---
+tips: 
+  - Three or more Underscores, Hyphens or Asterisks...
+---
+
+___
+
+---
+
+***

_elements/08-code.html

@@ -0,0 +1,9 @@
+---
+---
+
+Inline `code` has `back-ticks around` it.
+
+```
+s = "Code Block Test";
+print s;
+```

_elements/09-syntax-highlighting.html

@@ -0,0 +1,12 @@
+---
+---
+
+```javascript
+var s = "This is JavaScript syntax highlighting";
+alert(s);
+```
+
+```python
+s = "But this is Python syntax highlighting"
+print s
+```

_elements/10-github-gists.html

@@ -0,0 +1,7 @@
+---
+tips:
+  - To include a **single file** just add the file name after the **gist ID**:<br/>
+    `{% gist 3c466b... Hello%20World.java %}` or `{% gist 3c466b... hello.py %}`
+---
+
+{% gist 3c466bc3c32c4ae5c9b36d1266b913d8 %}

_elements/11-buttons.html

@@ -0,0 +1,15 @@
+---
+tips:
+  - 'To **center** your buttons, surround it with the following HTML tag:<br/>
+    `<p class="text-center"> {% include ... %} </p>`'
+  - 'Know more about buttons from
+    [Bootstrap Buttons](https://getbootstrap.com/docs/4.1/components/buttons/)'
+---
+
+{% raw %}
+{% include elements/button.html link="https://github.com" text="GitHub" style="primary" size="sm" %}
+{% include elements/button.html link="https://github.com" text="GitHub" %}
+{% include elements/button.html link="https://github.com" text="GitHub" style="outline-dark" size="lg" %}
+{% include elements/button.html link="https://github.com" text="GitHub" block=true %}
+{% endraw %}
+

_elements/12-ordered-list.html

@@ -0,0 +1,10 @@
+---
+---
+
+1. First ordered list item
+2. Another item
+   * Unordered sub-list. 
+1. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
+4. And another item.  
+   Some text that should be aligned with the above item.

_elements/13-unordered-list.html

@@ -0,0 +1,6 @@
+---
+---
+
+* Unordered list can use asterisks
+- Or minuses
++ Or pluses

_elements/14-list-group.html

@@ -0,0 +1,10 @@
+---
+---
+
+{% raw %}
+{% capture list_items %}
+Google,https://www.google.com
+GitHub,https://www.github.com
+{% endcapture %}
+{% include elements/list.html title="Websites" %}
+{% endraw %}

_elements/15-table-of-contents.html

@@ -0,0 +1,11 @@
+---
+---
+
+{% raw %}
+{% capture list_items %}
+Headers
+Emphasis
+List
+{% endcapture %}
+{% include elements/list.html title="Table of Contents" type="toc" %}
+{% endraw %}

_elements/16-images.html

@@ -0,0 +1,4 @@
+---
+---
+
+![alt text](https://bit.ly/2TOsM7B "Building Image")

_elements/17-figures.html

@@ -0,0 +1,6 @@
+---
+---
+
+{% raw %}
+{% include elements/figure.html image="https://bit.ly/2N69TKO" caption="The Ocean" %}
+{% endraw %}

_elements/18-carousel.html

@@ -0,0 +1,10 @@
+---
+---
+
+{% raw %}
+{% capture carousel_images %}
+https://bit.ly/2BBbVhc
+https://bit.ly/2DOtxXB
+{% endcapture %}
+{% include elements/carousel.html %}
+{% endraw %}

_elements/19-videos.html

@@ -0,0 +1,11 @@
+---
+tips:
+  - '**How to get a YouTube video ID?**<br/>
+    The video ID is located in the URL of the video page, right after the `v=` URL parameter.<br/>
+    In this case, the URL of the video is: `https://www.youtube.com/watch?v=aZNbUITN-mA`.<br/>
+    Therefore, the ID of the video is `aZNbUITN-mA`.'
+---
+
+{% raw %}
+{% include elements/video.html id="aZNbUITN-mA" %}
+{% endraw %}

_elements/20-tables.html

@@ -0,0 +1,8 @@
+---
+---
+
+| Left          | Center        | Right   |
+| ------------- |:-------------:| -------:|
+| col 3 is      | right-aligned | $160000 |
+| col 2 is      | centered      | $12     |
+| **Use**       | `Markdown`    | $1      |

_layouts/element.html

@@ -0,0 +1,141 @@
+{% assign page_title = page.title | slice: 2, page.title.size %}
+<h2 id="{{ page_title | slugify }}">{{ page_title }}</h2>
+
+{%- assign code = content | strip -%}
+
+{%- if code contains '{% ' -%}
+
+    {%- assign code = code | newline_to_br | split: '<br />' -%}
+
+    {%- assign start_capture = false -%}
+    {%- assign captured_text = '' -%}
+    {%- assign captured_var  = '' -%}
+    {%- assign includes      = '' | split: '' -%}
+
+    {%- for line in code -%}
+
+        {%- if line contains '{% endcapture' -%}
+            {%- assign start_capture = false -%}
+        {%- elsif start_capture == true -%}
+            {%- assign captured_text = captured_text | append: line -%}
+        {%- elsif line contains '{% capture' -%}
+            {%- assign temp = line | split: ' ' -%}
+            {%- assign captured_var  = temp[2] -%}
+            {%- assign start_capture = true -%}
+        {%- elsif line contains '{% include' -%}
+            {%- assign includes = includes | push: line -%}
+        {%- endif -%}
+
+    {%- endfor -%}
+
+    {%- assign list_items      = nil -%}
+    {%- assign carousel_images = nil -%}
+
+    {%- case captured_var -%}
+        {%- when 'list_items' -%}
+            {%- assign list_items = captured_text -%}
+        {%- when 'carousel_images' -%}
+            {%- assign carousel_images = captured_text -%}
+    {%- endcase -%}
+
+    {%- for include in includes -%}
+
+        {%- assign incl = include | strip -%}
+        {%- assign incl = incl | remove: '{% include ' -%}
+        {%- assign incl = incl | remove: ' %' | remove: '}' -%}
+        {%- assign incl = incl | replace_first: ' ', '" ' -%}
+        {%- assign temp = incl | split: '" ' -%}
+
+        {%- assign file  = temp | first -%}
+        {%- assign params = temp | shift -%}
+
+        {%- assign alt     = nil -%}
+        {%- assign block   = nil -%}
+        {%- assign caption = nil -%}
+        {%- assign id      = nil -%}
+        {%- assign image   = nil -%}
+        {%- assign link    = nil -%}
+        {%- assign size    = nil -%}
+        {%- assign style   = nil -%}
+        {%- assign title   = nil -%}
+        {%- assign text    = nil -%}
+        {%- assign type    = nil -%}
+
+        {%- for param in params -%}
+
+            {%- assign pair  = param | split: '='  -%}
+            {%- assign key   = pair[0] -%}
+            {%- assign value = pair[1] | remove: '"' -%}
+
+            {%- case key -%}
+                {%- when 'alt' -%}
+                    {%- assign alt = value -%}
+                {%- when 'block' -%}
+                    {%- assign block = value -%}
+                {%- when 'caption' -%}
+                    {%- assign caption = value -%}
+                {%- when 'id' -%}
+                    {%- assign id = value -%}
+                {%- when 'image' -%}
+                    {%- assign image = value -%}
+                {%- when 'link' -%}
+                    {%- assign link = value -%}
+                {%- when 'size' -%}
+                    {%- assign size = value -%}
+                {%- when 'style' -%}
+                    {%- assign style = value -%}
+                {%- when 'title' -%}
+                    {%- assign title = value -%}
+                {%- when 'text' -%}
+                    {%- assign text = value -%}
+                {%- when 'type' -%}
+                    {%- assign type = value -%}
+            {%- endcase -%}
+
+        {%- endfor -%}
+
+
+        {%- include {{ file }} 
+                    alt=alt
+                    block=block
+                    caption=caption
+                    id=id
+                    image=image
+                    link=link
+                    size=size
+                    style=style
+                    title=title
+                    text=text
+                    type=type
+                    -%}
+
+    {%- endfor -%}
+
+{%- else -%}
+    {{ code | markdownify }}
+{%- endif -%}
+
+<details>
+
+    <summary class="text-monospace">View Code...</summary>
+    {%- highlight liquid -%}
+    {%- if code contains 'gist.github' -%}
+        {%- assign parts = code | split: '/'  -%}
+        {%- assign id = parts[3] | split: '.' | first -%}
+        {%- assign gist = id | prepend: '{%- gist ' -%}
+        {%- assign gist = gist | append: ' %'  -%}
+        {%- assign gist = gist | append: '}'  -%}
+        {{ gist }}
+    {%- else -%}
+        {{ code }}
+    {%- endif -%}
+    {%- endhighlight -%}
+
+
+    {%- for tip in page.tips -%}
+        <blockquote>
+            {{ tip | markdownify }}
+        </blockquote>
+    {%- endfor -%}
+
+</details>

docs/elements.html

@@ -0,0 +1,27 @@
+---
+layout: page
+title: Elements
+permalink: /elements/
+weight: 4
+---
+
+<h1>Elements</h1>
+
+{% assign list_items = "" %}
+{% for element in site.elements %}
+    {% assign title = element.title | slice: 2, element.title.size %}
+    {%- capture list_items -%}
+        {{ list_items }}
+        {{ title }}
+    {%- endcapture -%}
+{% endfor %}
+{% include elements/list.html title="Table of Contents" type="toc" %}
+
+{% for element in site.elements %}
+    {{ element }}
+{% endfor %}
+
+<footer>
+    This page is <b>open source</b>. Noticed a typo?<br>
+    Or something unclear? Improve it on {% github_edit_link "GitHub" %}.
+</footer>