Add markdown rendering

components/global-header.tsx

@@ -1,6 +1,6 @@
 import { Box, Container, Flex, Image, Link, Stack } from '@chakra-ui/react';
 
-export function Header() {
+export function GlobalHeader() {
   return (
     <Box bg='gray.900' p='20px 30px'>
       <Container maxW='container.md'>

components/icons/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29">
+    <path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"></path>
+</svg>

components/icons/github.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" role="img" viewBox="0 0 512 512" width="22px" height="20px">
+    <rect width="512" height="512" rx="15%"/>
+    <path fill="#fff"
+          d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/>
+</svg>

components/icons/link.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+    <path fill-rule="evenodd"
+          d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
+</svg>

components/icons/twitter.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29">
+    <path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path>
+</svg>

components/md-renderer/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+// @ts-ignore
+import { MDXProvider } from '@mdx-js/react';
+import MdxComponents from './mdx-components';
+
+type MdRendererType = {
+  children: React.ReactNode
+};
+
+export default function MdRenderer(props: MdRendererType) {
+  return (
+    <MDXProvider components={MdxComponents}>
+      {props.children}
+    </MDXProvider>
+  );
+};

components/md-renderer/mdx-components/a.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from '@chakra-ui/react';
+
+type EnrichedLinkProps = {
+  href: string;
+  children: React.ReactNode
+}
+
+export default function EnrichedLink(props: EnrichedLinkProps) {
+  // Is external URL or is a media URL
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
+
+  return (
+    <Link fontWeight={600} href={props.href} target={isExternalUrl ? '_blank' : '_self'}>
+      {props.children}
+    </Link>
+  );
+};

components/md-renderer/mdx-components/badge-link.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+type BadgeLinkType = {
+  target: string;
+  variant: string;
+  badgeText: string;
+  href: string;
+  children: React.ReactNode
+};
+
+export function BadgeLink(props: BadgeLinkType) {
+  const { target = '_blank', variant = 'success', badgeText, href, children } = props;
+
+  return (
+    <p className='mb-0'>
+      <a href={href} target={target}>
+        <span style={{ position: 'relative', top: '-2px' }}
+              className={`badge badge-${variant}`}>{badgeText}</span> {children}
+      </a>
+    </p>
+  );
+}

components/md-renderer/mdx-components/blockquote.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const BlockQuote = styled.blockquote`
+  padding: 16px 20px;
+  position: relative;
+  background: #e8e8e8;
+  border-radius: 5px;
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+  }
+
+  p + h4 {
+    margin-top: 15px;
+  }
+
+  p {
+    margin: 0;
+
+    & + p {
+      margin-top: 10px;
+    }
+  }
+`;
+
+export default BlockQuote;

components/md-renderer/mdx-components/heading.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import LinkIcon from 'components/icons/link.svg';
+
+const linkify = (Component: React.FunctionComponent<any>) => {
+  return function EnrichedHeading(props: { children: string }): React.ReactNode {
+    const text = props.children;
+    const id = text.toLowerCase && text
+      .toLowerCase()
+      .replace(/[^\x00-\x7F]/g, '')
+      .replace(/\s+/g, '-')
+      .replace(/[?!]/g, '');
+
+    return (
+      <Component id={id}>
+        <HeaderLink href={`#${id}`}>
+          <LinkIcon />
+        </HeaderLink>
+        {props.children}
+      </Component>
+    );
+  };
+};
+
+const HeaderLink = styled.a`
+  position: absolute;
+  top: 0;
+  left: -25px;
+  width: 25px;
+  display: none;
+  height: 100%;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+const H1 = styled.h1`
+  position: relative;
+  font-size: 42px;
+  font-weight: 700;
+  margin: 32px 0 10px !important;
+
+  &:hover ${HeaderLink} {
+    display: flex;
+  }
+`;
+
+const H2 = styled(H1).attrs({ as: 'h2' })`
+  font-size: 32px;
+`;
+
+const H3 = styled(H1).attrs({ as: 'h3' })`
+  margin: 22px 0 8px;
+  font-size: 30px;
+`;
+
+const H4 = styled(H1).attrs({ as: 'h4' })`
+  margin: 18px 0 8px;
+  font-size: 24px;
+`;
+
+const H5 = styled(H1).attrs({ as: 'h5' })`
+  margin: 14px 0 8px;
+  font-size: 18px;
+`;
+
+const H6 = styled(H1).attrs({ as: 'h6' })`
+  margin: 12px 0 8px;
+  font-size: 18px;
+`;
+
+const Headings = {
+  h1: linkify(H1),
+  h2: linkify(H2),
+  h3: linkify(H3),
+  h4: linkify(H4),
+  h5: linkify(H5),
+  h6: linkify(H6)
+};
+
+export default Headings;

components/md-renderer/mdx-components/iframe.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const IFrame = styled.iframe`
+  display: block;
+  width: 100%;
+  border: none;
+  margin: 30px auto;
+`;

components/md-renderer/mdx-components/img.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Img = styled.img`
+  max-width: 100%;
+  margin: 25px auto;
+  display: block;
+`;

components/md-renderer/mdx-components/index.js

@@ -0,0 +1,23 @@
+import P from './p';
+import Headings from './heading';
+import { Pre } from './pre';
+import BlockQuote from './blockquote';
+import { Table } from './table';
+import { IFrame } from './iframe';
+import { Img } from './img';
+import EnrichedLink from './a';
+import { BadgeLink } from './badge-link';
+
+const MdxComponents = {
+  p: P,
+  ...Headings,
+  pre: Pre,
+  blockquote: BlockQuote,
+  a: EnrichedLink,
+  table: Table,
+  iframe: IFrame,
+  img: Img,
+  BadgeLink: BadgeLink
+};
+
+export default MdxComponents;

components/md-renderer/mdx-components/p.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Text } from '@chakra-ui/react';
+
+type EnrichedTextType = {
+  children: React.ReactNode;
+}
+
+export default function EnrichedText(props: EnrichedTextType) {
+  return <Text lineHeight='27px' color='black' mb='18px'>{props.children}</Text>;
+}

components/md-renderer/mdx-components/pre.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Pre = styled.pre`
+  margin: 25px -25px 25px -25px !important;
+  padding: 20px 25px !important;
+  border-radius: 10px;
+  line-height: 1.5 !important;
+  
+  code {
+    background: transparent;
+  }
+`;

components/md-renderer/mdx-components/table.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+  border-collapse: separate;
+  width: 100%;
+  border-spacing: 0;
+  margin: 20px 0;
+
+  th {
+    color: #666;
+    font-size: 12px;
+    font-weight: 400;
+    background: #FAFAFA;
+    text-transform: uppercase;
+    height: 40px;
+    vertical-align: middle;
+    padding: 5px 10px;
+  }
+
+  td {
+    font-size: 14px;
+    padding: 10px;
+    border-bottom: 1px solid #EAEAEA;
+  }
+`;

content/guides/build-it.md

@@ -0,0 +1,69 @@
+We all have heard the mantra *"build it and they will come"* many times. Stories of people building a startup or project and seemingly stumbling upon a goldmine aren't few, but they aren't the rule. These stories are still the exception in the mass of launched projects and startups.
+
+Before the [Wright brothers](https://en.wikipedia.org/wiki/Wright_brothers) built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea to regularly board airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie [Field of Dreams](https://en.wikipedia.org/wiki/Field_of_Dreams), this and similar historic events gave birth to the idea behind it.
+
+The engineers' and inventors' dreams came true: spend time doing what you love while the success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore.
+
+
+Why doesn't "build it and they will come" work anymore?
+-------------------------------------------------------
+
+There are a few reasons working hard to make "build it and they will come" a thing of the past. This being said, it doesn't mean you can't succeed building a side-project anymore. You've just got to adjust the way you are building it.
+
+### Building got much easier
+
+As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as [Laravel](https://laravel.com/) and [Quasar Framework](https://quasar.dev/) are available for anyone to build projects on - for free.
+
+In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with less technological background.
+
+### Too much going on: information overload
+
+We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey.
+
+### Smaller Problems
+
+Besides building being easier than ever before and attention being in short supply, there is another issue making the life of makers, inventors and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher for having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed.
+
+Does sound pretty grim for inventors, developers and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers.
+
+
+How to market your project nowadays?
+------------------------------------
+
+The very first step to improving the odds of success is [idea validation](https://peterthaleikis.com/business-idea-validation/). While this sounds fairly obvious, many engineers and developers still don't validate their ideas before starting to build the MVP. The result is another stale project and wasted effort. To succeed you need to work on marketing before you start building anything. In the link mentioned before, I describe my approach to validation and collecting useful marketing information at the same time.
+
+### Build your Audience first and the project after.
+
+Build your audience before you build your project. Spend your time connecting with potential users, learn from their needs and talk about their problems. This will help you market your project later on. Audience first, project second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or [project blog](https://startupnamecheck.com/blog/how-to-start-a-small-business-blog).
+
+Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnect in our world of short attention spans.
+
+### Tool by Tool
+
+Another approach is the "Tool by Tool" approach. I've first noticed this approach being used by Shopify. The team at Shopify are providing little tools such as a [logo generator](https://hatchful.shopify.com/) and release these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time.
+
+Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects you will enhance your ranking in Google. An example for a maker following this approach is [Kamban](https://kambanthemaker.com/) with [FlatGA](https://flatga.io/). He built FlatGA as phase one of a bigger project currently in development.
+
+### Join a Maker community
+
+While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as [makerlog](https://getmakerlog.com/) or [WIP.chat](https://wip.chat) can also extend your reach. These allow you to get instant feedback, keep yourself accountable and they will enhance your reach at the same time.
+
+### Getting ready to Launch
+
+Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more and new customers. After the launch is before the launch.
+
+### Marketing Is an On-going Fight
+
+Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well, if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective, if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to market your project regularly is subscribing to a free [newsletter with small marketing opportunities](https://wheretopost.email). This way, you are regularly reminded and given bite-sized tasks to complete.
+
+
+Closing Words
+-------------
+
+I hope the article helped you to wrap your head around the idea that building side-projects alone doesn't solve any issues anymore. If you like what you've just read and want to read more, please consider subscribing to [my newsletter](https://peterthaleikis.com/newsletter). I'll send out the occasional email about interesting new articles or side-projects.
+
+
+About the author
+----------------
+
+[Peter Thaleikis](https://peterthaleikis.com/) a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company [Bring Your Own Ideas Ltd.](https://bringyourownideas.com/), he has been Lead Developer for multiple organisations.

next.config.js

@@ -15,6 +15,12 @@ let nextConfig = {
   webpack(config, options) {
     config.resolve.modules.push(path.resolve('./'));
 
+    // Transforms SVGs to components
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack']
+    });
+
     return config;
   }
 };

package.json

@@ -15,8 +15,8 @@
     "@emotion/styled": "^11.3.0",
     "@mapbox/rehype-prism": "^0.7.0",
     "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
     "@next/mdx": "^11.1.0",
+    "@svgr/webpack": "^5.5.0",
     "framer-motion": "^4.1.17",
     "next": "^11.1.0",
     "react": "17.0.2",
@@ -24,7 +24,9 @@
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
+    "@types/eslint": "7.28.0",
     "@types/react": "17.0.16",
+    "@types/react-dom": "17.0.2",
     "@types/styled-components": "^5.1.12",
     "eslint": "7.32.0",
     "eslint-config-next": "11.0.1",

pages/[roadmap]/index.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Container, SimpleGrid, Stack } from '@chakra-ui/react';
 import { DownloadIcon, EmailIcon } from '@chakra-ui/icons';
 import styled from 'styled-components';
 import Image from 'next/image';
-import { Header } from '../../components/header';
+import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';
 import { Footer } from '../../components/footer';
@@ -40,7 +40,7 @@ export default function Roadmap() {
 
   return (
     <Box bg='white' minH='100vh'>
-      <Header />
+      <GlobalHeader />
       <Box mb='60px'>
         <PageHeader
           title={'Frontend Developer'}

pages/guides/[guide].tsx

@@ -1,21 +1,26 @@
 import { Box, Container } from '@chakra-ui/react';
-import { Header } from '../../components/header';
+import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';
 import { Footer } from '../../components/footer';
 import { GuideHeader } from '../../components/guide-header';
+import MdRenderer from '../../components/md-renderer';
 
 export default function Guide() {
+  const GuideContent = require(`../../content/guides/build-it.md`).default;
+
   return (
     <Box bg='white' minH='100vh'>
-      <Header />
+      <GlobalHeader />
       <Box mb='60px'>
         <GuideHeader
           title={'Build it and they will come?'}
           subtitle={'Why “build it and they will come” alone won’t work anymore'}
         />
         <Container maxW={'container.md'} position='relative'>
-
+          <MdRenderer>
+            <GuideContent />
+          </MdRenderer>
         </Container>
       </Box>
 

pages/guides/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Container, Stack } from '@chakra-ui/react';
-import { Header } from '../../components/header';
+import { GlobalHeader } from '../../components/global-header';
 import { LinksList } from '../../components/links-list';
 import { LinksListItem } from '../../components/links-list-item';
 import { OpensourceBanner } from '../../components/opensource-banner';
@@ -11,7 +11,7 @@ import { PageHeader } from '../../components/page-header';
 export default function Guides() {
   return (
     <Box bg='white' minH='100vh'>
-      <Header />
+      <GlobalHeader />
       <Box mb='60px'>
         <PageHeader
           title={'Visual Guides'}

pages/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Container, Heading, Link, SimpleGrid, Text } from '@chakra-ui/react';
-import { Header } from '../components/header';
+import { GlobalHeader } from '../components/global-header';
 import { Footer } from '../components/footer';
 import { UpdatesBanner } from '../components/updates-banner';
 import { OpensourceBanner } from '../components/opensource-banner';
@@ -12,7 +12,7 @@ import { HomeRoadmapItem } from './roadmaps/components/home-roadmap-item';
 export default function Home() {
   return (
     <Box bg='white' minH='100vh'>
-      <Header />
+      <GlobalHeader />
       <Box>
         <Container maxW='container.md'>
           <Box py='35px'>

pages/roadmaps/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Container, SimpleGrid } from '@chakra-ui/react';
-import { Header } from '../../components/header';
+import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';
 import { Footer } from '../../components/footer';
@@ -9,7 +9,7 @@ import { RoadmapGridItem } from './components/roadmap-grid-item';
 export default function Roadmaps() {
   return (
     <Box bg='white' minH='100vh'>
-      <Header />
+      <GlobalHeader />
       <Box mb='60px'>
         <PageHeader
           title={'Developer Roadmaps'}

pages/watch/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react';
-import { Header } from '../../components/header';
+import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';
 import { Footer } from '../../components/footer';
@@ -9,7 +9,7 @@ import { PageHeader } from '../../components/page-header';
 export default function Watch() {
   return (
     <Box bg='white' minH='100vh'>
-      <Header />
+      <GlobalHeader />
       <Box mb='60px'>
         <PageHeader
           title={'Watch'}