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>
  • Post 1
  • Post 2
  • Post 0
  • Post 3
  • Project 1
  • Project 3
  • 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.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>
monday
x1
tuesday
x1
wednesday
x0
thursday
x0
friday
x2
saturday
x0
sunday
x0

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>

2020

x1
j
x3
f
x0
m
x0
a
x0
m
x0
j
x0
j
x0
a
x0
s
x0
o
x0
n
x0
d

TagList

By default the tag list 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: <TagList filter='posts' />

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

<TagList>
{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>
)}
</TagList>
JavaScript x1
React x4
GatsbyJs x3
HTML x2
CSS x1
theme-ui x2
ES6 x2
Css x1
Publishing x2
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} />