import React from 'react'
import { Link, graphql } from "gatsby";
import Helmet from 'react-helmet'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRss } from '@fortawesome/free-solid-svg-icons'

import Layout from '../components/Layout/Layout.js';
import Emoji from '../components/Emoji';
import Alert from '../components/Alert';
import ArticleHeader from '../components/ArticleHeader';
import ExternalLink from '../components/ExternalLink';

const IndexPage = (props) => (
  <Layout>
    <Helmet title='Home'>
      <meta name="description" content="Welcome to my website" />
    </Helmet>

    <p><Emoji n="Live long" e='🖖' /> Hello and welcome. I'm a tech lead/enthusiast based in Wales, UK. My main interests are indie and open-source projects, web and mobile technologies, serverless, IoT and automation.</p>

    <Alert colour='green'
      title={<span><Emoji e='💯' n='100!'/> 100 Days to Offload</span>}
    >
      <p>I'm taking part in the <ExternalLink href="https://100daystooffload.com/">100 Days to Offload challenge</ExternalLink> in 2021.</p>
      <p><Link to='/blog/2021/01/29/100-days-to-offload'>Read more about it</Link> and <Link to='/tags/100daystooffload'>see what I've written so far</Link> for this challenge.</p>
    </Alert>

    <h3>Quick background</h3>
    <p><Emoji e='💡' n='Lightbulb'/> Since 2016 I have been Chief Technology Officer at enterprise SaaS company <ExternalLink href="https://simplydo.co.uk">Simply Do Ideas</ExternalLink>. Before this I was a software engineer at <ExternalLink href="https://www.chaserhq.com">Chaser</ExternalLink>.</p>
    <p><Emoji e='🎓' n='Graduation cap'/> I completed <Link to="/research#phd">my PhD</Link> at <ExternalLink href="http://cardiff.ac.uk">Cardiff University</ExternalLink>'s School of <ExternalLink href="http://www.cardiff.ac.uk/computer-science">Computer Science &amp; Informatics</ExternalLink> in 2015.</p>
    <p><Emoji e='🤓' n='Geek'/> I worked on the IBM-led UK MoD and US Army Research Labs coalition <ExternalLink href="https://en.wikipedia.org/wiki/NIS-ITA">ITA project</ExternalLink> as a postdoctoral research associate.</p>
    <p><Emoji e='👨‍🏫' n='Teacher'/> I lectured the Advanced Computer Science MSc module <i><ExternalLink href="https://github.com/willwebberley/CMT111">Web &amp; Social Computing</ExternalLink></i> and the Computer Science BSc module <i><ExternalLink href="https://github.com/willwebberley/CM2101">Human-Computer Interaction</ExternalLink></i>.</p>
    
    <h3>What's on this website?</h3>
    <p><Emoji n="Blogging" e='📝' /> I write about technology and things I find interesting on <Link to='/blog'>my blog</Link> <small>(<FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>RSS feeds</Link> available)</small>.</p>
    <p><Emoji n='Notes' e='📔' /> I maintain a collection of <Link to='/notes'>notes</Link> <small>(Recently updated: <Link to='/notes/plain-text-accounting'>Plain Text Accounting</Link>).</small></p>
    <p><Emoji e='🚀' n='Rocket ship'/> I publish additional content on my geminispace at <a href="gemini://wilw.capsule.town">gemini://wilw.capsule.town</a> <small>(see <Link to='/blog/2021/01/20/project-gemini'>this post</Link> for help with opening this link)</small>.</p>
    <p><Emoji n="Research" e='👨‍💻' /> Some of my research publications are <Link to='/research'>available here</Link>.</p>
    <p><Emoji e='📦' n='Package'/> I work on and maintain a number of <Link to='/projects'>projects</Link>.</p>
    <p><Emoji n='Plant' e='🪴'  /> <Link to='/this'>Find out more</Link> about this website and its purpose.</p>

    <h3>How to contact me</h3>
    <p> You can follow me on
      Mastodon (<Emoji e='📣' n='Loudspeaker'/> <ExternalLink href="https://fosstodon.org/@wilw">@wilw@fosstodon.org</ExternalLink>)
      and Pixelfed (<Emoji e='🖼️' n='Painting'/> <ExternalLink href="https://pixelfed.social/@wilw">@wilw@pixelfed.social</ExternalLink>).
    </p>
    <p>You can also get in touch on Matrix (<ExternalLink href="https://matrix.to/#/@wilw:matrix.wilw.dev">@wilw:matrix.wilw.dev</ExternalLink>) and Telegram (<ExternalLink href="https://t.me/wilw88">@wilw88</ExternalLink>).</p>

    <h3>Recent posts</h3>
    {props.data.recentPosts.edges
      .map(({ node }) => node.fields.slug.indexOf('blog') > -1 ? <ArticleHeader key={node.fields.slug} post={node} /> : null)}
    <p><Link to='/blog'>See more</Link></p>
  </Layout>
)

export const query = graphql`
  query RecentPostsQuery {
     recentPosts: allMarkdownRemark(
        sort: {fields: [fileAbsolutePath], order: DESC},
        limit: 3,
        filter: { fields: { slug: { regex: "/blog/" } } }
      ){
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date
            tags
            description
          }
          excerpt
          fields {
            slug
          }
        }
      }
    }
  }
`;

export default IndexPage
