[frontend] Add markdown support to drip (#61)

* Add markdown support to drip. Update links across site

* update the links in the posts to be relative

data/posts/0001-scalable-dev-overview.md

@@ -56,7 +56,7 @@ We will be walking through an implementation of [MinimumCD](https://minimumcd.or
 a great resource to what it takes to implement CD and an amazing reference. A key point of understanding that it touches
 on that will be needed before we get started is [Trunk Based Development](https://trunkbaseddevelopment.com/) branching
 strategy and the usage of a single project in the repo (see [Git was not designed for
-monorepos](https://joseph.flinnlab.com/posts/git-monorepo) for more information)
+monorepos](./posts/git-monorepo) for more information)
 
 
 ## Automatic Versioning

data/posts/0003-scalable-dev-delivery.md

@@ -7,10 +7,10 @@
 In the last article, we did a deep dive on CI to prep us for the conversation about CD and how it can be implemented. 
 As [MinimumCD](https://minimumcd.org/minimumcd/) shows, CI is required to realize all of the benefits of effective CD.
 If you haven't already, give 
-[_Scalable Development Practices - CI_](https://joseph.flinnlab.com/posts/scalable-dev-integration) a read.
+[_Scalable Development Practices - CI_](./posts/scalable-dev-integration) a read.
 
 CD has come to mean two different things: Continuous Delivery and Continous Deployment. As we discussed in 
-[_Scalable Development Practices - Overview_](https://joseph.flinnlab.com/posts/scalable-dev-overview), the difference between
+[_Scalable Development Practices - Overview_](./posts/scalable-dev-overview), the difference between
 continuous delivery and continuous deployment is the number of manual steps in the pipeline from the time where a
 software engineer commits a change to the trunk branch and when it appears in Production. Here, Production can be
 defined as the end state where value is handed over to the end user. While a hosted application is what is normally

data/posts/0007-scalable-dev-edd-always-on.md

@@ -7,7 +7,7 @@
 
 Martin Fowler et al. have [a great article](https://martinfowler.com/articles/evodb.html) on how to approach database
 design in a way that enables the ability to evolve with how the corresponding code started to change with new Agile
-methodologies. In my [previous article](https://joseph.flinnlab.com/posts/scalable-dev-edd), we looked at an example of
+methodologies. In my [previous article](./posts/scalable-dev-edd), we looked at an example of
 creating tooling to assist with automating work around implementing EDD. Both articles allude to more advanced scenarios
 where additional processes are required to support EDD; one of which are environments where the application must be up
 at all times.
@@ -73,7 +73,7 @@ database-name/
     └── 0000_init_migrator.sql
 ```
 
-We used the above directory setup in the [previous article](https://joseph.flinnlab.com/posts/scalable-dev-edd).
+We used the above directory setup in the [previous article](./posts/scalable-dev-edd).
 `migrations` contain any of the migrations that will be run in step 1 of the deploy. The order they are added are
 incredibly important. When preparing for the *X.2* deploy, _Transition_ migrations that are going to be finalized must be
 added into the `migrations` directory _*BEFORE*_ their corresponding _Finalization_ migrations. After them come the

data/posts/0010-plg-support-functions.md

@@ -5,7 +5,7 @@
 
 ---
 
-In the [last PLG post](https://joseph.flinnlab.com/posts/plg-product-triad), we examined the unique roles and perspectives that each of the core groups
+In the [last PLG post](./posts/plg-product-triad), we examined the unique roles and perspectives that each of the core groups
 have: Product, Design, and Engineering Development. This post, we're going to look at how the rest of the organization
 supports the Product Led Growth. 
 

frontend/src/lib/components/HorizontalNav.svelte

@@ -32,10 +32,8 @@
 
   a {
     padding: 1em;
-  }
-
-  a:hover {
-    text-decoration: underline;
+    text-decoration: none;
+    color: #5c5955;
   }
 
   @media only screen and (max-width: 600px) {

frontend/src/routes/(site)/drip/+page.svelte

@@ -1,5 +1,8 @@
 <script>
   export let data;
+
+  import SvelteMarkdown from 'svelte-markdown';
+
   import PageTitle from "$lib/components/PageTitle.svelte";
 
   const drip = data.data.map((drop) => ({
@@ -26,7 +29,9 @@
         <b><i>{myDateFormat(drop.created_at)}</i></b>
       </div>
       <div class='dropMessage'>
-        {drop.message}
+        <SvelteMarkdown 
+          source={drop.message} 
+        />
       </div>
     </div>
   {/each}

frontend/src/routes/(site)/posts/[post]/+page.svelte

@@ -1,8 +1,9 @@
 <script>
   export let data;
 
-  import { log } from '$lib/utils/logger.js';
   import SvelteMarkdown from 'svelte-markdown';
+
+  import { log } from '$lib/utils/logger.js';
   import CodeComponent from '$lib/renderers/CodeComponent.svelte';
 
   const { title, published, body, ...rest } = data.data;

frontend/static/global.css

@@ -7,7 +7,11 @@ body {
 
 a {
   text-decoration: none;
-  color: #5c5955;
+  color: #8a8885;
+}
+
+a:hover {
+  text-decoration: underline;
 }
 
 /* fonts.css */