adding 100daysofcode R1.D1

Author: basicBrogrammer

components/ArticleTag.vue

@@ -51,4 +51,12 @@ a::before {
   color: white;
   background-color: green;
 }
+[class='100daysofcode'] {
+  background-color: #004d4d;
+  color: #ffff7d;
+}
+.elixir {
+  background-color: #4a245d;
+  color: #fff;
+}
 </style>

content/articles/round-1-day-1.md

@@ -0,0 +1,69 @@
+---
+title: Round 1 Day 1
+published: true
+description: Back to school. Back to school. Learning Elixir. 
+tags: 100daysofcode, elixir
+cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1613181428296/AE6zOKS_p.jpeg?auto=compress
+date: 2021-02-12
+---
+
+## TIL
+Currently during the 100DaysOfCode Challenge, I'm learning elixir. I'll be documenting everything I learn or build as I go. I'm starting off with learning the elixir basics at [ElixirSchool](http://elixirschool.com).
+ 
+## Basics
+- Everything is truthy except for `false` and `nil`
+- Booleans are atoms (:true, :false)
+- Modules are atoms 
+- You can access erlang libraries using atoms
+- Aka atoms are important :) 
+- Strings use double quotes
+- No modulo operator, but there are the `div` and `rem` functions.
+- Each basic type has a rank :/     
+    - number < atom < reference < function < port < pid < tuple < map < list < bistring
+    - I'll never memorize this lawl 
+- String interpolation "hello #{world}" or "hello " <> "world" ... Pretty Basic.
+
+## Collections
+- Lists
+    - Mixed types
+    - Not unique
+    - Linked List → faster to prepend than append
+        > In computer science, a linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each element points to the next. It is a data structure consisting of a collection of nodes which together represent a sequence.
+    - List concat `++/2` - cool
+    - List sub `--/2` - cool cool
+    - Head/Tail - cool cool cool
+        - By pattern matching `[head | tail] = list` #=> head is the first element. tail will be all the others
+        - `hd list` #=> returns the first element
+        - `tl list` #=> returns all elements after the first
+- Tuples
+    - Stored with a set amount of memory
+    - Access = fast; modification = slow
+    - Common for return info from function
+- Keyword lists
+    - commonly used to pass options to functions
+- Maps
+    - The Go-to key-value store
+    - Similar to ruby's hash
+    - Updating syntax is cool?
+    - useMap.put/3 to create a new key
+
+## Enum
+- Not much to go over here if you are familiar with any other languages Enum methods
+
+## Pattern Matching
+- The Holy Grail of Elixir
+- If you ask any dev what they love about elixir chances are they will mention pattern matching
+- Curveball `=` is actually a match operator similar to the equals sign in algebra :exploading-head:
+- [1| tail] = list #=> tail has not been matched so it binds to the last elements of the list
+
+## Control Structures
+
+- `if` and `unless` => straight forward
+- `case/2`
+    - Similar to `switch`(in javascript) or `case` (ruby) except it uses pattern matching
+    - `_` is a catch all like `default` in JavaScript
+- `Cond`
+    - Used for matching multiple cases similar to an `else if`
+- `With`
+    - This one is bit trickier coming from other languages
+    - Can be used to replace multiple `case` statements

content/articles/using-github-to-crosspost-to-dev-to.md

@@ -1,6 +1,7 @@
 ---
 title: Want to crosspost to dev.to? There's a GitHub action for that.
 published: true
+date: 2021-01-25
 description: When I create a new markdown article, I don't want to have to copy and paste that markdown to multiple other blog sites. So, why not let an Octokit handle this work for me with a GitHub action?
 tags: typescript, github, opensource, actions
 cover_image: https://cdn.nanalyze.com/uploads/2018/07/automation-rpa-teaser.jpg

content/articles/when-a-simple-react-context-gets-out-of-hand.md

@@ -1,11 +1,11 @@
 ---
 title: When a simple React context gets out of hand.
 published: true
+date: 2020-12-21
 description: It seemed like a good idea to start. Separate state into different "contexts". Just use `useState`. Then, `useEffect` and multiple if branches snuck in and it became a nightmare.
 tags: react, javascript, redux
 cover_image: https://content.altexsoft.com/media/2018/09/code-refactoring.jpg
 devToId: 539076
-devToSlug: when-a-simple-react-context-gets-out-of-hand-28k
 ---
 
 # TL;DR:

pages/index.vue

@@ -16,7 +16,16 @@ export default {
   watchQuery: ['tag'],
   async asyncData({ $content, params, query }) {
     const articles = await $content('articles')
-      .only(['title', 'description', 'img', 'slug', 'tags', 'cover_image'])
+      .only([
+        'title',
+        'description',
+        'img',
+        'slug',
+        'tags',
+        'cover_image',
+        'date',
+      ])
+      .sortBy('date', 'desc')
       .where({ tags: { $contains: query.tag || '' }, published: true })
       .sortBy('createdAt', 'asc')
       .fetch()