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>
mondayx0
tuesdayx0
wednesdayx1
thursdayx1
fridayx0
saturdayx0
sundayx0

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>

2021

x2
j
x0
f
x0
m
x0
a
x0
m
x0
j
x0
j
x0
a
x0
s
x0
o
x0
n
x0
d

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>
React x7
GatsbyJs x4
ES6 x2
Css x1
JavaScript x2
HTML x3
CSS x2
theme-ui x3
Publishing x2
TypeScript x2
GraphQL x1
Fauna x1
Automotive x2
FinTech x1

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>

Average word count

98Words
Total words: 978

Average time to read

1Minute
Total read time: 11 mins

Highest word count

481Words
Total words: 978

<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>

2021

Word count by month
x161
j
x0
f
x0
m
x0
a
x0
m
x0
j
x0
j
x0
a
x0
s
x0
o
x0
n
x0
d