content: import React from 'react'
  import Helmet from 'react-helmet'
  import Layout from '../components/layout'
  import ExternalLink from '../components/external-link'
  import NewsletterForm from '../components/newsletter-form'
  import Badge from '../components/badge'
  
  const dateFormat = { weekday: 'long', month: 'long', day: 'numeric' }
  
  let posts = [
    {
      id: 23,
      title: `23. New year goals`,
      href: 'https://sid.studio/post/new-year-2019',
      description: `It's that magical time of the year where you contemplate if you wasted the entire year and start making plans for the next one.`,
      publish_on: '2019-01-04'
    },
    {
      id: 22,
      title: `22. Give names to behaviors not interactions`,
      href: 'https://sid.studio/post/name-behaviors-not-interactions',
      description: `Naming event handlers is easy, until you put all your components together. This is part 2 of series about writing component API for great developer experience.`,
      publish_on: '2018-12-28'
    },
    {
      id: 21,
      title: `21. Don't create conflicting props`,
      href: 'https://sid.studio/post/conflicting-props',
      description: `When it comes to React components, props are the API that developers consume. This is part 1 of series about writing component API for great developer experience.`,
      publish_on: '2018-12-21',
      published: true
    },
    {
      id: 20,
      title: '20. Obsession treadmill',
      href: 'https://sid.studio/post/obsession-treadmill',
      description: `I struggle with doing things passively. When I want to try something new, I get obsessed with it. It's a problem.`,
      publish_on: '2018-12-14',
      published: true
    },
    {
      id: 19,
      title: '19. Let me teach you React Hooks',
      href: 'https://sid.studio/post/react-hooks',
      description: `I teach a beginner's React workshop and this is how it usually goes`
    },
    {
      id: 18,
      title: '18. Spacing for reusable components is hard!',
      href: 'https://sid.studio/post/spacing-in-reusable-components',
      description: `When I started working on cosmos, I didn't think spacing was a big deal. Boy, was I wrong!`
    },
    {
      id: 17,
      title: '17. Standup Driven Development',
      href: 'https://sid.studio/post/standup-driven-development',
      description: `If you work for a technology company, there are high chances your team already does
    stand-ups... and you probably already hate them.`
    },
    {
      id: 16,
      title: '16. Design systems for the rest of us',
      href: 'https://sid.studio/post/design-systems-for-the-rest-of-us',
      description: `You probably don't work in a fortune 500 company with dozens of developers and designers
      working on a design system. Neither do I.`
    },
    {
      id: 15,
      title: '15. On Burnout',
      href: 'https://sid.studio/post/burnout',
      description: `Burnout is a mythical creature that sounds like excuses a lazy person would make until
      you experience it for yourself.`
    }
  ]
  
  posts = posts.map(post => {
    if (!post.publish_on || new Date() > new Date(post.publish_on)) {
      post.published = true
    }
    return post
  })
  
  const firstPublishedPost = posts.filter(post => post.published)[0]
  
  const Newsletter = () => (
    <Layout>
      <Helmet>
        <meta name="og:title" content="Sid has a newsletter about javascript and personal growth" />
        <meta name="og:url" content="https://sid.studio/newsletter" />
      </Helmet>
      <section>
        <NewsletterForm />
      </section>
      <section>
        <ul>
          {posts.map((post, index) => {
            return (
              <li key={post.id}>
                {post.published ? (
                  <React.Fragment>
                    <ExternalLink href={post.href}>{post.title}</ExternalLink>
                    {post.id === firstPublishedPost.id ? <Badge>New</Badge> : null}
                    <div className="details">{post.description}</div>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <span>{post.title}</span>
                    <Badge appearance="scheduled">Scheduled</Badge>
  
                    <div className="details">
                      Scheduled for{' '}
                      {new Date(post.publish_on).toLocaleDateString('en-US', dateFormat)}
                    </div>
                    <div className="details">{post.description}</div>
                  </React.Fragment>
                )}
              </li>
            )
          })}
  
          <li>
            <a
              href="https://buttondown.email/sid/archive/4739c5c8-0917-4bb2-a4f6-79b879ff9d27"
              target="_blank"
              rel="noopener noreferrer"
            >
              14. Taking one step back and four steps forward
            </a>
            <div className="details">
              I spent the last week with my team standing in front of whiteboards planning, here's
              what I realised.
            </div>
          </li>
          <li>
            <a
              href="https://buttondown.email/sid/archive/d896c1a2-63fc-4d00-a0c4-33d9be35afa2"
              target="_blank"
              rel="noopener noreferrer"
            >
              13. Should frontend developers learn data structures?
            </a>
            <div className="details">
              To understand how to do well in an interview, you need to put yourself in the company's
              shoes.
            </div>
          </li>
  
          <li>
            <a
              href="https://buttondown.email/sid/archive/d668fe8b-d0aa-417b-a8b6-c74badb532e3"
              target="_blank"
              rel="noopener noreferrer"
            >
              12. Rebuilding my website with Gatsby in 15 minutes
            </a>
            <div className="details">
              The fomo is real. Finally tried out Gatsby and was way easier than I expected!
            </div>
          </li>
          <li>
            <a
              href="https://buttondown.email/sid/archive/e70e54c9-cf26-4719-9b86-d29cf4132cb2"
              target="_blank"
              rel="noopener noreferrer"
            >
              11. On golden handcuffs
            </a>
            <div className="details">When you don't love your job, but love your salary</div>
          </li>
          <li>
            <a
              href="https://buttondown.email/sid/archive/3c2d3957-475c-45c0-91db-3efc41b9b111"
              target="_blank"
              rel="noopener noreferrer"
            >
              10. Generating images on the fly using puppeteer
            </a>
            <div className="details">
              We did a fun twitter sharing thing for stackstickers generating screenshots on the fly,
              here's how
            </div>
          </li>
          <li>
            <a
              href="https://buttondown.email/sid/archive/941b663f-fff5-46a6-bac9-43abde2cfb01"
              target="_blank"
              rel="noopener noreferrer"
            >
              9. Contributing to open source is overrated
            </a>
            <div className="details">
              I used to think contributing to open source is cool. It's the next step you take as a
              developer.
            </div>
          </li>
          <li>
            <a
              href="https://buttondown.email/sid/archive/4911982d-9846-4a3c-8a23-864bf98016ab"
              target="_blank"
              rel="noopener noreferrer"
            >
              8. Video games and React state
            </a>
            <div className="details">
              There is a lot we can learn from video games. Modern games render hi-def graphics based
              on heavy calculations and still run smoothly.
            </div>
          </li>
          <li>
            <a href="http://eepurl.com/dCVEU1" target="_blank" rel="noopener noreferrer">
              7. Startup or big company, where should you work?
            </a>
            <div className="details">
              Last year, I was looking for a new job and this question was stuck in my head. Should I
              join a big famous company or a small startup?
            </div>
          </li>
          <li>
            <a href="http://eepurl.com/dCd049" target="_blank" rel="noopener noreferrer">
              6. Five minute guide to React
            </a>
            <div className="details">
              If you have been hearing about React but didn't find time to get into it, that's
              perfect. Let me teach React to you. If you already use React, this is still going to be
              useful for you.
            </div>
          </li>
          <li>
            <a href="http://eepurl.com/dBQl3L" target="_blank" rel="noopener noreferrer">
              5. ️Work doesn't happen at work
            </a>
            <div className="details">
              My thoughts about the workplace have changed a lot over time. I now believe that work
              doesn't happen at work.
            </div>
          </li>
          <li>
            <a href="http://eepurl.com/dA5gCr" target="_blank" rel="noopener noreferrer">
              4. ️How do you measure your personal growth?
            </a>
            <div className="details">
              Oh man, this is a hard one. Dipti asked me a while back and I've been thinking about it
              again last week.
            </div>
          </li>
          <li>
            <a href="http://eepurl.com/dAi5er" target="_blank" rel="noopener noreferrer">
              3. How do you start a side project
            </a>
            <div className="details">
              This week's newsletter is full of practical ideas that you can apply! I'm really happy
              with how this came out
            </div>
          </li>
          <li>
            <a href="http://eepurl.com/dy6uBf" target="_blank" rel="noopener noreferrer">
              2. The best way to learn something
            </a>
            <div className="details">
              Learning for the sake of learning can be demotivating. Here's my way of learning that
              almost always works
            </div>
          </li>
          <li>
            <a href="http://eepurl.com/dyN2Cf" target="_blank" rel="noopener noreferrer">
              1. How do you decide what to work on?
            </a>
            <div className="details">Hey from Sid! Remember signing up for this? </div>
          </li>
        </ul>
      </section>
    </Layout>
  )
  export default Newsletter
  