feat: implement markdown to html converter.

app/assets/javascripts/pages.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.

app/assets/stylesheets/components/_markdown.scss

@@ -0,0 +1,17 @@
+#preview, #editor {
+  margin: 20px auto;
+  max-width: 600px;
+}
+
+#preview {
+  margin-top: 100px;
+  min-height: 100px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 6px 12px;
+  text-align: left;
+}
+
+#preview img {
+  max-width: 100%;
+}

app/assets/stylesheets/pages.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the pages controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/controllers/pages_controller.rb

@@ -0,0 +1,5 @@
+class PagesController < ApplicationController
+  def about
+
+  end
+end

app/helpers/pages_helper.rb

@@ -0,0 +1,2 @@
+module PagesHelper
+end

app/javascript/packs/application.js

@@ -1 +1,5 @@
 import 'bootstrap';
+
+import { initMarked } from '../plugins/init_marked';
+
+initMarked();

app/javascript/plugins/init_marked.js

@@ -0,0 +1,15 @@
+import marked from 'marked';
+
+const initMarked = () => {
+  const textarea = document.getElementById('editor');
+  const preview = document.getElementById('preview');
+
+  if (textarea && preview) {
+    textarea.addEventListener('keyup', (event) => {
+      const html = marked(textarea.value);
+      preview.innerHTML = html;
+    });
+  }
+};
+
+export { initMarked };

app/views/pages/about.html.erb

@@ -0,0 +1,14 @@
+<div class="container">
+  <h1 class='text-center'>
+    Markdown => Text
+  </h1>
+  <div class="row">
+    <div class="col-12">
+      <h4>
+        Use the input box below to convert markdown to html 😎
+      </h4>
+      <textarea class="form-control" id="editor" rows="6"></textarea>
+      <div id="preview"></div>
+    </div>
+  </div>
+</div>

config/routes.rb

@@ -5,4 +5,6 @@
       patch "mark"
     end
   end
+
+  get "/about", to: "pages#about", as: :about
 end

package.json

@@ -5,6 +5,7 @@
     "@rails/webpacker": "^4.0.7",
     "bootstrap": "^4.3.1",
     "jquery": "^3.4.1",
+    "marked": "^0.6.3",
     "popper.js": "^1.15.0"
   },
   "devDependencies": {

sociology-programming.md

@@ -0,0 +1,29 @@
+## const Sociology = (student) => { return bootcamp teacher; }.
+---
+Back in 2015 I was studying Urban Sociology in Amsterdam. Two months into the year each student had to choose the subject for his or her final thesis. Because I never went abroad during my bachelor or my master, the project group with the location of study being Shenzhen appealed a lot to me.
+
+Wait what? Shenzhen 🤨, _“what the hell is Shenzhen”_ you might be thinking, this was my first thought at the time as well. Well, Shenzhen is a city in southern China that is home to between 10 and 15 million inhabitants, it borders Hong Kong 🇭🇰 and is one of the many populous areas in the Pearl River Delta. Other Delta notables include Guangzhou and Macau.
+
+I think it would serve us well to have a good understanding of this city before continuing, so let’s have a brief look at its history. In 1979 the **visionary leader Deng Xiaoping** made a bold step towards **market-oriented reforms** and planned to execute a **capitalist experiment.** A central point to his capitalist experiment was the plan to develop several ***Special Economic Zones.*** These zones were to be considered **training grounds for local talent**, but also to experiment with possible **future economic management systems**. Over the course of three phases, construction, restructuring and re-engineering, the Shenzhen Special economic zone was built up next to Hong Kong.
+
+Where previously there were small fishing communities totaling an inhabitant’s figure of around 300,000, there now lays an **Asian Megacity** boasting head offices of **Tencent, Huawei** and the factories of **Foxconn** (Yes, those are the lovely people that manufacture your beloved Apple products). All this happened in the over the course of just 35 years.
+
+Hopefully we now have a better idea of what a **miracle of Chinese state structured** planning Shenzhen is.
+
+Let’s continue.
+
+After being introduced to this thesis subject I was sold, my mind was set on visiting Shenzhen. I was accepted to the project group and had to start thinking about my final research question. **Having never been to China**, one of the things that puzzled me was the fact that the **perception of this country I had in my mind**, formed by popular movies and western media, **was not aligned with the way Shenzhen was introduced to me**. I started wondering what made this city special, and more specifically, what made it so attractive for young Chinese people to move there.
+
+After a few months of preparation, it was **time to do some fieldwork**. So on we went, an interdisciplinary group of 18 students on a 7-week trip to Shenzhen. In between the Bajou and Tsingtao’s I managed to do ***24 interviews and a focus group*** with young Chinese entrepreneurial urbanites. Their businesses ranged from importing wine 🍷, to running a company that produced LEGO-style do it yourself robot building blocks🤖, from being a professional wine taster, to developing an interactive TV remote control.
+
+I spoke with a very diverse set of human beings and every single one of them was completely different than the media-based assumptions I had about Chinese young people. I expected them to be rigid, hard working people that value the state above personal experience.  ___Everything for the collective, Assimilate; We are the Borg.___ On the contrary, they were passionate 🔥, driven, and had a capitalistic mindset which seemed unrivalled by my friends from the western-European cultures I grew up in at large.
+
+Now don’t get me wrong, I’m not trying to put a subjective valuation on capitalism, implying that it’s a good thing by default. However, the way my respondents __embraced and lived by the capitalist economic model__ as opposed to their __communist heritage__ almost made me believe it is an inherently good thing.
+
+So there I was, making my way through the urban jungle called Shenzhen, going __from skyscraper to hardware marketplace to winery__, coming out of each interview even more baffled and inspired than the last. Their passion, vast domain specific knowledge, life experiences, and the fact that most of them were __active in the technological scene__ creating hardware and or software made me feel like ___I was missing out on where the magic was happening___. This became most apparent when interviewing an entrepreneur who was enrolled in the Shenzhen Haxlr8r program; a hardware startup incubator. After the interview I had a few minutes to look around the incubator. There were __young people__ on every desk of the incubator. Each of them __talking, building, creating, discussing and pitching__ their products in a virtuous manner.  I knew there and then that I wanted/_needed_ to __learn how to code__.👨🏽‍💻
+
+Fast forward a few months later. After finishing my thesis and graduating from my Master in Sociology the things I saw in Shenzhen, the people I met there, and the culture I tasted lingered in my subconscious. ___Because of this toe that got dipped in the Shenzhen tech-pool, working as a Sociologist did not seem interesting anymore.___ But how could I ever make my entry into this landscape without any soft- or hardware knowledge?
+
+Without a clear future plan I kept on working in the same bar I was working in throughout my study. Inspired by my interviews I started a small social enterprise with some friends. Whilst working on this project part-time and part-time in the bar, the stars ✨ and the moon 🌝aligned and I was handed the ___life changing opportunity___ to participate in a ___programming bootcamp___. I did not hesitate and embraced this chance wholeheartedly. I would learn later that this __bootcamp__ would not only train me to acquire the __necessary skill-set__ to make my first steps into the tech-scene, but after gaining some experience as a developer, they would also __offer me the opportunity to work for them as a teacher__ and increase my programming skills exponentially.
+
+So there you have it, the story of how my ___Sociology degree___ led me __to__ become a programming ___bootcamp teacher.___

yarn.lock

@@ -3925,6 +3925,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.3.tgz#79babad78af638ba4d522a9e715cdfdd2429e946"
+  integrity sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"