text: import { getSortedPosts } from '../lib/posts'
  import Layout from '../components/Layout'
  import List from '../components/List'
  import PostItem from '../components/items/PostItem'
  
  const Journal = props => {
      const _template = {
          warning: props.posts.length === 0 && 'No posts published yet.',
          posts: props.posts.map((postData, index) => (
              <PostItem key={index} data={postData} />
          )),
      }
      return (
          <Layout>
              <Layout.Head>
                  <meta name="robots" content="none"></meta>
                  <link
                      rel="canonical"
                      href="https://denniseum.com/journal"
                  ></link>
              </Layout.Head>
              <Layout.Title>Journal</Layout.Title>
              <Layout.Content>
                  <p className="text-xl sm:text-2xl">
                      This is a collection of my thoughts and ideas. These are
                      rough drafts of my thinking.
                  </p>
                  <div className="mt-4 md:mt-6">
                      <span className="text-xl sm:text-2xl">
                          {_template.warning}
                      </span>
                      <List>
                          <div className="grid sm:grid-cols-2">
                              {_template.posts}
                          </div>
                      </List>
                  </div>
              </Layout.Content>
          </Layout>
      )
  }
  
  const getStaticProps = () => {
      const posts = getSortedPosts()
      return {
          props: {
              posts,
          },
      }
  }
  
  export default Journal
  export { getStaticProps }
  