spacing on splash page

[rouzbeh84]

extends PR #980:

I'm sure this is already known but the bug is happening because the left side is having its title put in a p tag whereas the right side is right before its equivalent p tag :(. This seems to resolve the issue for now but the markup should be parsed properly.

[skipjack]

@rouzbeh84 does this resolve #1559?

[rouzbeh84]

It does but I didn’t know if #980 was also doing other things so didn’t wanna close it out automatically. 👍🏽

[skipjack]

@rouzbeh84 tested this out with npm run build-test and unfortunately that change doesn't fix it in production:

I think the issue is that specificity is broken between development and production builds. Looking into a more stable fix now.

[skipjack]

This seems to resolve the issue for now but the markup should be parsed properly.

To this point, yeah this is definitely one of many indications that our markdown utility has problems. This is one thing we definitely need to address in infrastructure work from #1525. Luckily, that's one thing we actually have an agree upon plan for (webpack-contrib/webpack-defaults#73). Now the trick is just finding the time to make that move.

[skipjack]

I'm actually seeing some bigger discrepancies between dev and prod with markdown parsing which is odd because it should be going through the exact same process each time:

dev

prod

I know it's a little hard to tell but the pre tags are actually being rendered completely outside the homepage__right divs in prod.

[skipjack]

Ok added a hacky fix that isn't pretty but works:

As for a plan going forward, I think we should do this:

• Freeze any new site features.
• Be careful even with fixes as these can lead to unintended issues.
• Continue content work/restructuring carefully.
• Start really cleaning up the infrastructure of this site and hitting the things mentioned in Dev - General Updates and Fixes #1525.

And on the last point, maybe we can put the move to remark to the top of that list. I've already created a remark-loader we can use as a starting point and I bet @wooorm would help advise us through that move so we can do it in a clean way without resorting to the similar hacks that got us into trouble with marked.

cc @pierreneter @jeremenichelli

[rouzbeh84]

they look good to me. quite an imaginative fix but it is what it is 😜 . i know you cc'd a couple other folks so i'll let them approve.

[skipjack]

they look good to me. quite an imaginative fix but it is what it is 😜 .

Haha yeah, I just really don't feel like debugging the markdown.js utility any more than I already have and any tweaks there could mean breaking other stuff throughout the rest of the site. A better fix would be just moving this markup to the Splash.jsx component itself but then we lose out on syntax highlighting 😢 .

If somebody has a better idea, I'm all ears but I'd rather just fix this, push the last few open content tickets forward and then start digging into the root of these problems, starting with the port from marked to remark.

i know you cc'd a couple other folks so i'll let them approve.

Just cc'd them more for a heads up on the plan part of it. Once this passes I'll "Squash & Merge" but if you or anyone else comes up with a cleaner fix I'd be happy to revert.

[rouzbeh84]

Haha yeah, I just really don't feel like debugging the markdown.js utility any more than I already have and any tweaks there could mean breaking other stuff throughout the rest of the site.

@skipjack Ah i think my comment didn't get posted proper. Thought I mentioned a dev named @jescalan who demo'd reshape at an event I organize out here in LA which is similar to remark but its html centered vs markdown and has a rich plugin ecosystem as well (plugins)

this is otherwise good to go then, approving now.

edit: just kidding, forgot this was my PR and I can't do such wizardry haha

[wooorm]

@rouzbeh84 remark is connected to rehype too through unifiedjs.