text: import React from 'react';
  import { Link } from 'react-router-dom';
  import ReactMarkdown from 'react-markdown';
  import raw from 'raw.macro';
  
  import Main from '../layouts/Main';
  
  // uses babel to load contents of file
  const markdown = raw('../data/about.md');
  
  const count = markdown.split(/\s+/)
    .map((s) => s.replace(/\W/g, ''))
    .filter((s) => s.length).length;
  
  // Make all hrefs react router links
  const LinkRenderer = ({ ...children }) => <Link {...children} />;
  
  const Index = () => (
    <Main
      description={'Marc Gröling&apos;s personal website.'}
    >
      <article className="post markdown" id="about">
        <header>
          <div className="title">
            <h2 data-testid="heading"><Link to="/">About me</Link></h2>
            <p>Welcome to Marc Gröling&apos;s website. This is me in {count} words.
            </p>
            <p>This is a fork of <a href="https://mldangelo.com/">Michael D&apos;Angelo&apos;s Website</a>.</p>
          </div>
        </header>
        <ReactMarkdown
          source={markdown}
          renderers={{
            Link: LinkRenderer,
          }}
          escapeHtml={false}
        />
      </article>
    </Main>
  );
  
  export default Index;
  