add markdown support

Author: vinaypuppal

package.json

@@ -33,6 +33,7 @@
     "fromnow": "^3.0.1",
     "is-mobile": "^2.0.1",
     "isomorphic-unfetch": "^3.0.0",
+    "md.js": "^0.2.6",
     "next": "^9.1.4",
     "nprogress": "^0.2.0",
     "qrcode.react": "^0.9.3",

src/components/CrowdFund/list.tsx

@@ -41,7 +41,7 @@ export const CampaignList = () => {
         return (
           <li key={item.id} className="mx-0 my-4 md:mx-4">
             <Link href="/crowdfund/[slug]" as={`/crowdfund/${item.slug}`}>
-              <a className="block p-4 px-6 bg-white shadow-lg rounded-lg" style={{ maxWidth: 360 }}>
+              <a className="block p-4 px-6 bg-white shadow-lg rounded-lg" style={{ maxWidth: 420 }}>
                 <h3 className="text-xl mb-1 font-medium text-gray-800">
                   <span className="hidden md:block">{truncateString(item.title, 30)}</span>
                   <span className="md:hidden">{item.title}</span>

src/pages/crowdfund/[slug].tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import useSWR from 'swr';
 import Link from 'next/link';
+import snarkdown from 'md.js';
+
 import { NextPageContext, NextComponentType } from 'next';
 import { SEO } from '../../components/SEO';
 import { PaymentForm } from '../../components/common/PaymentForm';
@@ -35,9 +37,9 @@ const CampaignPage: NextPage = ({ initialData, slug }) => {
         <div className="p-4 pt-0 lg:flex">
           <div className="md:mx-2 md:mr-8 lg:flex-1">
             <h1 className="text-2xl mb-2 font-medium text-gray-800">{data.title}</h1>
-            <p
+            <div
               className="text-lg mb-4 text-gray-700 leading-relaxed markdown"
-              dangerouslySetInnerHTML={{ __html: data.description }}
+              dangerouslySetInnerHTML={{ __html: snarkdown(data.description) }}
             />
             <CampaignProgress campaign={data} />
             {data.is_active && (

src/styles/index.css

@@ -21,7 +21,7 @@ body {
 .markdown > * + *,
 .markdown li + li,
 .markdown li > p + p {
-  @apply mt-6;
+  @apply mt-4;
 }
 .markdown strong {
   @apply text-black font-bold;

yarn.lock

@@ -4782,6 +4782,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+md.js@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/md.js/-/md.js-0.2.6.tgz#a2ff30c3ad4e9480bb2dbcddb238fb089a4137ef"
+  integrity sha1-ov8ww61OlIC7Lbzdsjj7CJpBN+8=
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"