gatsby-theme-terminal

gatsby-theme-terminal has some of it's own components, and below is how you use them.

SiteMetaData

The <SiteMetaData /> component returns all fields specified by siteMetadata in gatsby-config.js

<SiteMetaData>
  {(siteMetadata) => {
    const { name, description } = siteMetadata
    return (
      <ul>
        <li>{name}</li>
        <li>{description}</li>
      </ul>
    )
  }}
</SiteMetaData>

• gatsby-theme-terminal
• A zero component Gatsby theme for developers

SourceList

By default the source list returns all .mdx found from the directories defined in gatsby-config.js. You can also use the filter prop with this component eg: <SourceList filter='posts' />

NOTE: the filter source must be one from your gatsby-config.js

<SourceList>
  {(source) => (
    <ul>
      {source.map((edge, index) => {
        const {
          frontmatter: { title },
        } = edge.node
        return <li key={index}>{title}</li>
      })}
    </ul>
  )}
</SourceList>

• Local Image Post
• Remote Image Post
• Post 1
• Project 1
• Post 5
• Project 3
• Post 3
• A Pinned Post
• Post 2
• Project 2

SourceDays

By default source days returns an accumulated count and percent of all frontmatter date fields grouped by year. You can also use the filter prop with this component eg: <SourceDays filter='posts' />

NOTE: the filter source must be one from your gatsby-config.js

<SourceDays>
  {(sourceDays) => {
    const currentYear = sourceDays[sourceDays.length - 1]
    return (
      <Box>
        {currentYear
          .sort((a, b) => a.number - b.number)
          .map((day, index) => {
            const { name, count, percent } = day
            return (
              <Flex
                key={index}
                sx={{
                  backgroundColor: 'surface',
                  flexDirection: 'column',
                  mb: 2,
                  position: 'relative',
                }}
              >
                <Box
                  sx={{
                    backgroundColor: 'primary',
                    height: '100%',
                    position: 'absolute',
                    width: `${percent}%`,
                  }}
                />
                <Box
                  sx={{
                    position: 'relative',
                    display: 'flex',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text sx={{ textTransform: 'capitalize', pl: 2 }}>{name}</Text>
                  <Text sx={{ pr: 2 }}>{`x${count}`}</Text>
                </Box>
              </Flex>
            )
          })}
      </Box>
    )
  }}
</SourceDays>

SourceMonths

By default source months returns an accumulated count and percent of all frontmatter date fields grouped by year. You can also use the filter prop with this component eg: <SourceMonths filter='posts' />

NOTE: the filter source must be one from your gatsby-config.js

<SourceMonths>
  {(sourceMonths) => {
    const currentYear = sourceMonths[sourceMonths.length - 1]
    return (
      <Box sx={{ backgroundColor: 'surface', p: 3 }}>
        <Heading variant="styles.h4">{currentYear[0].year}</Heading>
        <Box sx={{ display: 'flex', flex: '1 1 auto', height: 300 }}>
          <Flex sx={{ flexWrap: 'wrap', width: '100%' }}>
            {currentYear.map((month, index) => {
              const { initial, count, percent } = month
              return (
                <Box
                  key={index}
                  sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'flex-end',
                    pl: 1,
                    pr: 1,
                    width: `${100 / currentYear.length}%`,
                  }}
                >
                  <Text
                    sx={{
                      textAlign: 'center',
                    }}
                  >
                    {`x${count}`}
                  </Text>
                  <Box
                    sx={{
                      backgroundColor: 'primary',
                      height: `${percent}%`,
                      p: 1,
                    }}
                  />
                  <Text
                    sx={{
                      textTransform: 'uppercase',
                      textAlign: 'center',
                    }}
                  >
                    {initial}
                  </Text>
                </Box>
              )
            })}
          </Flex>
        </Box>
      </Box>
    )
  }}
</SourceMonths>

SourceTags

By default source tags returns all tags found in the .mdx sourced from the directories defined in `gatsby-config.js.

You can also use the filter prop with this component eg: <SourceTags filter='posts' />

NOTE: the filter source must be one from your `gatsby-config.js``

<SourceTags>
  {source => (
    <Flex
    sx={{flexDirection: 'column'}}
    >
      {
        source.map((tag, index) => {
          const {name, count, percent} = tag
          return (<Box  key={index}>
            {`${name}  x${count}`}
            <Box mb={2}  bg='muted' sx={{width: `${percent}%`, height: 4}} />
          </Box>
        })
      }
    </Flex>
  )}
</SourceTags>

embeddedImages

Using a frontmatter field called embeddedImages you can define a list of locally sourced images to embed in the .mdx body.

NOTE: this method won't work for .mdx sourced from src/pages

---
title: Post 1
embeddedImages:
  - markus-spiske-FXFz-sW0uwo-unsplash.jpg
---

You can then use the <EmbeddedImage /> component like this in your .mdx.

The image1 object key refers to the position in the embeddedImages list in frontmatter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi

<EmbeddedImage src={props.embedded.image1} />

SourceWords

By default source words returns a word count for all words found in the .mdx sourced from the directories defined in `gatsby-config.js.

You can also use the filter prop with this component eg: <SourceTags filter='posts' />

NOTE: the filter source must be one from your `gatsby-config.js``

<SourceWords>
  {(source) => {
    const { wordCountTotal, wordCountAverage, wordCountHighest, wordCountLowest, timeToReadTotal, timeToReadAverage } =
      source
    return (
      <Box
        sx={{
          display: 'flex',
          flex: '1 1 auto',
          flexDirection: 'column',
          mb: 3,
          px: 2,
          width: ['100%', '50%', '33.333333333%'],
        }}
      >
        <Flex
          sx={{
            alignItems: 'center',
            backgroundColor: 'surface',
            flex: '1 1 auto',
            flexDirection: 'column',
            justifyContent: 'center',
            p: 3,
            position: 'relative',
          }}
        >
          <Heading as="h4" variant="styles.h4">
            Average word count
          </Heading>
          <Donut sx={{ mx: 3, mb: 2 }} value={wordCountAverage / wordCountTotal} />
          <Box sx={{ position: 'absolute' }}>
            <Text
              sx={{
                textAlign: 'center',
                color: 'primary',
                fontSize: '22px',
                fontWeight: 'bold',
                lineHeight: '1',
              }}
            >
              {wordCountAverage}
            </Text>
            <Text sx={{ textAlign: 'center', color: 'primary', lineHeight: '1' }}>Words</Text>
          </Box>
          <Text sx={{ textAlign: 'center' }}>{`Total words: ${wordCountTotal}`}</Text>
        </Flex>
      </Box>
    )
  }}
</SourceWords>

<SourceWords>
  {(sourceWords) => {
    const currentYear = sourceWords.wordCountByMonth[sourceWords.wordCountByMonth.length - 1]
    return (
      <Box sx={{ backgroundColor: 'surface', p: 3 }}>
        <Flex>
          <Heading variant="styles.h4" sx={{ mr: 2 }}>
            {currentYear[0].year}
          </Heading>
          <Text>Word count by month</Text>
        </Flex>
        <Box sx={{ display: 'flex', flex: '1 1 auto', height: 300 }}>
          <Flex sx={{ flexWrap: 'wrap', width: '100%' }}>
            {currentYear.map((month, index) => {
              const { initial, words } = month
              return (
                <Box
                  key={index}
                  sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'flex-end',
                    pl: 1,
                    pr: 1,
                    width: `${100 / currentYear.length}%`,
                  }}
                >
                  <Text
                    sx={{
                      textAlign: 'center',
                    }}
                  >
                    {`x${words}`}
                  </Text>
                  <Box
                    sx={{
                      backgroundColor: 'primary',
                      height: `${words}%`,
                      p: 1,
                    }}
                  />
                  <Text
                    sx={{
                      textTransform: 'uppercase',
                      textAlign: 'center',
                    }}
                  >
                    {initial}
                  </Text>
                </Box>
              )
            })}
          </Flex>
        </Box>
      </Box>
    )
  }}
</SourceWords>