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>

• 面霸
• 面霸 - 前端面试专题

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>

• JavaScript高频试题
• ES6高频试题
• TypeScript高频试题
• CSS高频试题
• React高频试题
• NodeJS高频试题
• React源码解析
• Vue源码解析
• Webpack相关
• vue 精选文章
• vue 高频试题

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>