Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(gatsby-theme-emilia): Make avatar configurable #78

Merged
merged 6 commits into from
Sep 10, 2019
Merged

fix(gatsby-theme-emilia): Make avatar configurable #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b417c14
moved avatar to example
LekoArts Sep 10, 2019
ab3abd5
updated READMEs
LekoArts Sep 10, 2019
05a1414
add assetsPath and default to note
LekoArts Sep 10, 2019
7f65841
move note
LekoArts Sep 10, 2019
b26a965
remove unnecessary filesystem entry
LekoArts Sep 10, 2019
d3b77f4
remove sourceInstaceName filter
LekoArts Sep 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions examples/emilia/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,10 @@ The frontmatter alone is enough, if you'd like to add additional content you can

Create a file at `src/@lekoarts/gatsby-theme-emilia/texts/about-me.mdx` to edit the text.

### Changing the avatar

Place an image with the name `avatar` inside the folder `content/assets` (or your custom `assetsPath` which you defined for the theme).

### Change your `static` folder

The `static` folder contains the icons, social media images and robots.txt. Don't forget to change these files, too!
Expand Down
0 ...gatsby-theme-emilia/src/assets/avatar.png → examples/emilia/content/assets/avatar.png
View file
Open in desktop
File renamed without changes
1 change: 1 addition & 0 deletions themes/gatsby-theme-emilia-core/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ npm install @lekoarts/gatsby-theme-emilia-core
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `basePath` | `/` | Root url for the theme |
| `projectsPath` | `content/projects` | Location of projects |
| `assetsPath` | `content/assets` | Location of assets (such as the avatar in the header) |
| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) |
| `name` | `LekoArts` | The name displayed as the title on the homepage, and the link to the homepage (top left corner) |
| `location` | `Germany` | Shown below the title |
Expand Down
7 changes: 7 additions & 0 deletions themes/gatsby-theme-emilia-core/gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@ module.exports = themeOptions => {
path: options.projectsPath,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: options.assetsPath,
path: options.assetsPath,
},
},
mdx && {
resolve: `gatsby-plugin-mdx`,
options: {},
Expand Down
2 changes: 2 additions & 0 deletions themes/gatsby-theme-emilia-core/gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ exports.sourceNodes = (
{ title: `Instagram`, href: `https://www.instagram.com/lekoarts.de/` },
],
showThemeAuthor = true,
assetsPath = `content/assets`,
}
) => {
const { createNode } = actions
Expand All @@ -166,6 +167,7 @@ exports.sourceNodes = (
location,
socialMedia,
showThemeAuthor,
assetsPath,
}

createNode({
Expand Down
2 changes: 2 additions & 0 deletions themes/gatsby-theme-emilia-core/utils/default-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
module.exports = themeOptions => {
const basePath = themeOptions.basePath || `/`
const projectsPath = themeOptions.projectsPath || `content/projects`
const assetsPath = themeOptions.projectsPath || `content/assets`

return {
basePath,
projectsPath,
assetsPath,
}
}
5 changes: 5 additions & 0 deletions themes/gatsby-theme-emilia/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ gatsby new emilia LekoArts/gatsby-starter-portfolio-emilia
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `basePath` | `/` | Root url for the theme |
| `projectsPath` | `content/projects` | Location of projects |
| `assetsPath` | `content/assets` | Location of assets (such as the avatar in the header) |
| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) |
| `name` | `LekoArts` | The name displayed as the title on the homepage, and the link to the homepage (top left corner) |
| `location` | `Germany` | Shown below the title |
Expand Down Expand Up @@ -156,6 +157,10 @@ The frontmatter alone is enough, if you'd like to add additional content you can

Create a file at `src/@lekoarts/gatsby-theme-emilia/texts/about-me.mdx` to edit the text.

#### Changing the avatar

Place an image with the name `avatar` inside the folder `content/assets` (or your custom `assetsPath` which you defined for the theme).

## 🌟 Supporting me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on [Twitter](https://twitter.com/lekoarts_de) and share the project with me.
Expand Down
7 changes: 0 additions & 7 deletions themes/gatsby-theme-emilia/gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,6 @@ module.exports = options => ({
resolve: `@lekoarts/gatsby-theme-emilia-core`,
options,
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `assets`,
path: `${__dirname}/src/assets`,
},
},
`gatsby-plugin-react-helmet`,
`gatsby-plugin-typescript`,
`gatsby-plugin-emotion`,
Expand Down
6 changes: 4 additions & 2 deletions themes/gatsby-theme-emilia/src/components/header-project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const HeaderProject = ({ title, areas, description, date }: Props) => {
const { name } = useEmiliaConfig()
const avatar = useStaticQuery(graphql`
query {
file(sourceInstanceName: { eq: "assets" }, name: { eq: "avatar" }) {
file(name: { eq: "avatar" }) {
childImageSharp {
fixed(width: 40, height: 40, quality: 100) {
...GatsbyImageSharpFixed_withWebp
Expand Down Expand Up @@ -73,7 +73,9 @@ const HeaderProject = ({ title, areas, description, date }: Props) => {
mx: 2,
}}
>
<Img fixed={avatar.file.childImageSharp.fixed} />
{avatar && avatar.file && avatar.file.childImageSharp && (
<Img fixed={avatar.file.childImageSharp.fixed} />
)}
</div>
<span sx={{ fontWeight: `medium` }}>{name}</span>
</Link>
Expand Down
26 changes: 22 additions & 4 deletions themes/gatsby-theme-emilia/src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import Location from "../assets/location"
import SocialMediaList from "./social-media-list"

const Header = () => {
const { name, location } = useEmiliaConfig()
const { name, location, assetsPath } = useEmiliaConfig()
const avatar = useStaticQuery(graphql`
query {
file(sourceInstanceName: { eq: "assets" }, name: { eq: "avatar" }) {
file(name: { eq: "avatar" }) {
childImageSharp {
fixed(width: 140, height: 140, quality: 100) {
...GatsbyImageSharpFixed_withWebp
Expand Down Expand Up @@ -49,13 +49,31 @@ const Header = () => {
width: [`100px`, `140px`],
display: `inline-block`,
boxShadow: `lg`,
"> div": {
"> div:not([data-placeholder='true'])": {
height: [`100px !important`, `140px !important`],
width: [`100px !important`, `140px !important`],
},
}}
>
<Img fixed={avatar.file.childImageSharp.fixed} />
{avatar && avatar.file && avatar.file.childImageSharp ? (
<Img fixed={avatar.file.childImageSharp.fixed} />
) : (
<div
sx={{
fontSize: 0,
position: `absolute`,
top: 0,
left: 0,
width: `100% !important`,
right: 0,
p: 3,
backgroundColor: `red.2`,
}}
data-placeholder="true"
>
Place an image with the name "avatar" inside the directory "{assetsPath}"
</div>
)}
</div>
</animated.div>
<animated.div style={fadeUpProps}>
Expand Down
2 changes: 2 additions & 0 deletions themes/gatsby-theme-emilia/src/hooks/use-emilia-config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type Props = {
title: string
}[]
showThemeAuthor: boolean
assetsPath: string
}
}

Expand All @@ -23,6 +24,7 @@ const useEmiliaConfig = () => {
title
}
showThemeAuthor
assetsPath
}
}
`)
Expand Down