<commit_before>/** @jsxImportSource theme-ui */

// page list

import { useQuery, gql } from '@apollo/client'
import Link from 'next/link'
import { Card, Box } from 'theme-ui'
import Loading from './loading'
import Squiggle from './squiggle'
import { isDev } from './isDev'

const QUERY = gql`
  query ($preview: Boolean, $type: String, $limit: Int) {
    pageCollection(
      preview: $preview
      where: { pageType: $type }
      limit: $limit
      order: publishDate_DESC
    ) {
      items {
        title
        pageType
        publishDate
        slug
      }
    }
  }
`

export default function PageList(props) {
  const { data, loading, error } = useQuery(QUERY, {
    variables: {
      type: props.type,
      limit: parseInt(props.limit),
      preview: isDev,
    },
  })

  if (loading) {
    return (
      <Box sx={{ width: 'fit-content', margin: '0' }}>
        <Loading />
        <Squiggle />
      </Box>
    )
  }

  if (error) {
    console.error(error)
    return null
  }

  const pageList = data.pageCollection.items

  return (
    <>
      {pageList.map(page => (
        <Link key={page.slug} href={page.slug}>
          <Card id="pageList">
            <small sx={{ mb: 3, display: 'block', width: 'fit-content' }}>
              {new Date(
                page.publishDate.replace(/-/g, '/').replace(/T.+/, ''),
              ).toLocaleDateString('en-us')}
            </small>
            <p sx={{ fontSize: [1, 2], fontWeight: 'bold', m: 0, mb: 1, p: 0 }}>
              {page.title}
            </p>
            <Squiggle squiggleWidth={8} />
          </Card>
        </Link>
      ))}
    </>
  )<commit_msg>update: page list styles<commit_after>/** @jsxImportSource theme-ui */

// page list

import { useQuery, gql } from '@apollo/client'
import Link from 'next/link'
import { Box } from 'theme-ui'
import Loading from './loading'
import Squiggle from './squiggle'
import { isDev } from './isDev'

const QUERY = gql`
  query ($preview: Boolean, $type: String, $limit: Int) {
    pageCollection(
      preview: $preview
      where: { pageType: $type }
      limit: $limit
      order: publishDate_DESC
    ) {
      items {
        title
        pageType
        publishDate
        slug
      }
    }
  }
`

export default function PageList(props) {
  const { data, loading, error } = useQuery(QUERY, {
    variables: {
      type: props.type,
      limit: parseInt(props.limit),
      preview: isDev,
    },
  })

  if (loading) {
    return (
      <Box sx={{ width: 'fit-content', margin: '0' }}>
        <Loading />
        <Squiggle />
      </Box>
    )
  }

  if (error) {
    console.error(error)
    return null
  }

  const pageList = data.pageCollection.items

  return (
    <>
      {pageList.map(page => (
        <Link key={page.slug} href={page.slug}>
          <Box
            id="pageList"
            sx={{
              width: 'fit-content',
            }}
          >
            <p sx={{ fontWeight: 'bold', m: 0, mb: 1, p: 0 }}>{page.title} </p>
            <small sx={{ fontWeight: 'normal' }}>
              Published:{' '}
              {new Date(
                page.publishDate.replace(/-/g, '/').replace(/T.+/, ''),
              ).toLocaleDateString('en-us')}
            </small>
            <Squiggle
              sx={{
                width: 'fit-content',
              }}
            />
          </Box>
        </Link>
      ))}
    </>
  )
{'fraction_non_alphanumeric': 0.15595794392523366, 'fraction_numerical': 0.0035046728971962616, 'mean_word_length': 1.7011041009463723, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4515964', 'n_tokens_mistral': 1133, 'n_tokens_neox': 1107, 'n_words': 265}