I got page transitions to work yay!
But also lazy loading is still janky and a lot of the times doesnāt work properly which ends up making the website glitch out. Not so great 
Performance on the transitions is also kinda slow. Not really sure how to deal with that.
Transitions are only slow when run in dev mode. In production it works fine.
Weird way itās slow is that it will begin to transition, then stop, and then if you click it will move a couple of keyframes. So you have to kinda keep clicking over and over again to get it to finish. I imagine this has to do with some kind of disconnect between the animation state and React understanding when to update the DOM?
That sounds bad. 
Is there any way we can reproduce it to know if it is a bug?.
Can you share some of your code? I donāt know where the problem could be but we can still try to help you. Maybe it is related to the event handlers you are using for the transition. 
Iām not entirely sure but Iām pretty sure this issue was fixed once I passed the <FeaturedImage/> component a height prop (which I figured to do from looking at some updates that had been done to mars-theme. ) Once a height is preset for the images they pop in correctly. I think the issue was simply that if the image wasnāt there, space wasnāt given, and without space given you couldnāt scroll down far enough to trigger the lazyloader.
Also the issue with performance seems to have been fixed once I refactored that app loading to look more like the changes that had been made to mars-theme.
If you want to see my theme progress though you can check here: https://github.com/jcklpe/desert-jackalope
So I actually just tried it on a different machine but found that now itās having trouble again with the loading in pictures. Iām not sure why. 
Pretty sure these are the same versions of the theme I was working on.
Hereās a link to a test server: https://hire-me.jackalope.tech/
Are you using Google Chrome? I mean, there was a bug with Chromeās native lazy loading, forcing images to have a height property in order to work as expected. Is it possible that the problem you experienced was that? Do you have the same browser version in both machines?
Itās looking awesome, by the way. 
Uhm, looking into your code I see the <FeaturedImage> component has a relative height of 100% of the parentās height, which is the <Absolute> component that you are using in index.js. But, that component hasnāt got any height and that can cause problems too , so I think you should set a specific height for the <FeaturedImage> component.
Iāll take a closer look at the code later, in case there are other little things that could be fixed.
Try that and keep telling us about your progress. Cheers!
Hmm unfortunately that doesnāt seem to be fixing the image not popping in issue:
Thats with the image css set to 300px.
Iāve been testing in my local environment and I canāt reproduce the error. Uhm. Have you noticed if it happens in certain circumstances? Or it happens randomly instead?
BTW, you could share the output of the npx frontity info command (executed in your frontity project), in case the bug was related to a specific environment or something. This is my output:
## System:
- OS: macOS Mojave 10.14.6
- CPU: (4) x64 Intel(R) Core(TM) i3-6100 CPU @ 3.70GHz
- Memory: 56.64 MB / 8.00 GB
- Shell: 3.2.57 - /bin/bash
## Binaries:
- Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
- npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
## Browsers:
- Chrome: 78.0.3904.108
- Firefox: Not Found
- Safari: 12.1.2
## npmPackages:
- @frontity/core: ^1.4.0 => 1.4.0
- @frontity/html2react: ^1.1.14 => 1.1.14
- @frontity/tiny-router: ^1.0.17 => 1.0.17
- @frontity/wp-source: ^1.4.2 => 1.4.2
- desert-jackalope: file:packages/desert-jackalope => 1.3.0
- frontity: ^1.4.2 => 1.4.2
## npmGlobalPackages:
- frontity: Not Found
- npx: Not Found
Also, in case you are using Google Chrome, could you check what values are set in chrome://flags for the lazy loading flags?
Iām back to doing some work on this project.
Right now Iām taking what I can observe from the Chakra theme and using that to try and adjust my theme to have defaults that can also be overriden by the frontity.settings.js file.
I added the following to state:
state: {
// State is where the packages store their default settings and other
// relevant state. It is scoped to the "theme" namespace.
theme: {
menu: [],
isBlog: false,
colors: {
primary: {
default: "#2657eb",
heavy: "#1f38c5"
}
}
}
},
The isBlog is simply a mode that tells whether or not the website should be presented as a blog (which means that it presents author name and date information on posts and eventually will have very different styling for the archive page)
Iām having a bit more trouble getting the color stuff to work.
Chakra passes itās primary colors etc down as props but I think thatās messy looking and Iād prefer to pass stuff from state to a variable that gets set as a CSS variable.
So I currently have this:
const primaryColor= "green";
const globalStyles = css`
:root {
--primary-heavy: #1f38c5;
--primary: ${primaryColor};
--snappy: cubic-bezier(0.075, 0.82, 0.165, 1);
--heavy-snap: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
}
And that works. But I want to pass the const primaryColor from the state but Iām not sure how to connect the two?
Instead of const primaryColor = "green" I need to use const primaryColor = state.theme.colors.primary.default but thatās not working.
I know this is probably a super basic problem but this is a good example of how Iām still learning how the whole declarative aspect of React works.
When I try setting const primaryColor = state.theme.colors.primary.default I get a āstate doesnāt existā error.
I feel like that must be because the theme javascript object in src/index.js must not be getting passed to it. So do I need to import it or something?
Why does it work though when I use {isBlog && <dateComponent/>} though? Components get passed the state via the arrow function in the src/components/index.js but Iām not sure how to pull the state into that file without using the arrow function so that it can be accessed via the styled-components stuff?
Any suggestions?
Okay so I tried setting it like this:
const primaryColor = frontity.state.theme.colors.primary.default;
Iām using npx frontity dev and it works! I see the color change from the test "const primaryColor = āgreenā; to the proper setting which is blue.
But, if I refresh it breaks. Thatāsā¦ weird.
Yeahā¦ IDK whatās up with this. I can get colors to work by making a file called ātheme.jsā and putting an object in it that contains the necessary information
import { colors } from "../theme.js";
const primaryColor = colors.primary.default;
But I canāt get it to work by just directly referencing the stuff in the src/index.js file:
import desertJackalope from "../index";
const primaryColor = desertJackalope.state.theme.colors.primary.default;
Which is just a javascript object just like theme.jsā¦ so whatās the deal? Is this something specific to Frontity Iām missing?
Also manā¦ I really need a better way to handle the component styling than just the emotion styled components way of doing things because itās getting really dense and while styled components can do a lot of stuff that SCSS canāt do, vscode (even with the styled component extension) doesnāt properly lint or display nested css stuff and it makes complex styling kind of hard to follow.
Iāve found a partial solution to the component styling issue. I have started taking different parts and putting them in a separate js file and then importing them into the larger Article style component. this doesnāt fix the issues I have with vscode not properly linting or syntax hilighting the css. It seems that as long as emotion styled components doesnāt allow for the importing of scss files that this will simply be the way things have to be. Not a fan of that approach but it is what it is.
Hey, have you tried the vscode-styled-components extension for VSCode? I was using it and I found it useful. Itās just syntax highlighting for styled-components but it seems to work well with Frontity.
Yes, I am. The syntax highlighting is pretty good but itās not perfect and stuff like bracket folding doesnāt work, and I have additional extensions like Bracket Pair Colorizer that obviously havenāt adapted to address the niche use case of styled components CSS-in-JS.
as the CSS becomes more deeply nested it gets hard to track without these functionalities. This is not the fault of Frontity or the emotion team at all. I just wish there was a way to do things via SCSS, though I understand why thatās a technical hurdle for both projects, and is perhaps not in line with their larger dev philosophy.