jodie template change location of tiles

[DanArlowski]

HI!

Im deploying a site using jodie theme, and i was wondering, is there a way to "choose" where each link will be set in the main/project page? Like: about in the right lower corner, projects in left corner and instagram at the top, etc. or is it randomly generated?

Thanks!

[LekoArts]

Hi! It's not "random" 😋 but certainly also not just a list of strings.

While making this page I found this great article about partitioned CSS grids: https://v6.robweychert.com/blog/2019/03/css-grid-sophisticated-partitioning/ - I adapted the same technique in the homepage component: https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-jodie/src/components/homepage.tsx#L31-L66

So as you can see in line 31 first the pages, then the projects get added to the items array. However, due to the partitioning this will spread across the page and not necessarily stay in that order.

I chose that route as one user could only have 1 custom page, another one 10 or 20. Hardcoding pages/links would be incorrect here.

---

That's the backstory, so how could you change your site. You have multiple options:

a) Shadow the https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-jodie/src/components/homepage.tsx component and manually place GridItems - Shadowing guide: https://www.gatsbyjs.com/docs/themes/shadowing/

b) Overwrite the CSS: https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-jodie/src/styles/item-list.ts (by shadowing that file)

Since each GridItem gets a unique href and data-testid: https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-jodie/src/components/homepage.tsx#L55 You could select each item by that property and assign them to grid-template-areas: https://developer.mozilla.org/de/docs/Web/CSS/grid-template-areas

[DanArlowski]

Thanks for the quick reply. I do agree that hardcoding pages/links is incorrect as the amount might be different between each user of the template.

I do think we might want to implement a plugin to "choose" the sort of things,

i was thinking maybe in the plugin config - sort it by an array by the slug like this: ["/about","/instagram","/etc","/anotherslug"] - this will override the default mechanism, and will increase the overhead for the user by choosing - only if they want to sort the tiles on their own, of course it will ignore tiles not mentioned here.

altough i dont have any idea how to actually start implementing it, i hope you get the general idea.

again, thanks for your project. it is a great one, even if this addition is not possible.

[DanArlowski]

Instead of opening another issue, im going to add another question here if that is ok - is there a way to create a page, which will show on the navigation, but wont be in the tiles? that is - because i want to create a contact-us page, which i do not wish to be seen with a photo and take location of a portfolio tile.

sorry if that is a noob question - my knowledge in JS is a bit lacking.

Thanks!

Dan

[LekoArts]

In most cases you can achieve all necessary changes in a theme by shadowing the respective files. Also, adding additional options is also always possible. But increasing the API surface needs to be done carefully as I'll then have to maintain the new feature -- so I'll try to see how involved the change would be and if it could be use case for more than you.

[DanArlowski]

Thanks for listening,

feel free to handle the issue as you see fit :)

[LekoArts]

Hey @DanArlowski 👋 I published @lekoarts/gatsby-theme-jodie at version 1.1.0 and you can now use it like outlined here: https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-jodie#customizing-the-homepage