home page and section setup

[prairir]

What are you trying to accomplish?

making home page look nice

those are screenshots to see the progress

How are you accomplishing it?

adding graphics and features that look nice

I made features have an a tag so its clickable to link to each section. this creates an issue because facebook thought it was a good idea for all a tags to have a global colour of this weird teal. so i changed it.

What is left to do?

• make the svg colour work in both light theme and dark theme
• add card borders for the features
• add links to each section for each feature
• get css icon for feature( a friend is working on that)

Is there anything reviewers should know?

this is a work in progress and so dont merge it

• [x] Is it safe to rollback this change if anything goes wrong?

[prairir]

so i got svg themes working but its a huge hack.

i tried using react-svg https://www.npmjs.com/package/react-svg but on first render, it would throw a weird error parent node null and then render the backup. I uhh couldnt figure out why. weirdly enough on reloads it wouldnt work but any rerender would fix it. I thought memoization might fix it but apparently not so i ended up just doing this hack as a work around.

the hack works by having a lightmode svg and a darkmode svg.

why i had to do this and other solutions

Il explain why i had to do it like this rather than just using svg components like react. things that we want for this

• dynamic loading
• a css class to cover all
• not needlessly creating components

normal ways to do svgs in react is loading them in as components. this creates a few issues, it means we have to explicitly load them in at the top level so no dynamic loading. because they are all components like that, we cant really have a css class like all of that. this creates components for every image.

this leaves us with a few solutions

• what i did
• using webpack
• create a custom svg loader

for a while i was looking for a way to resolve it with webpack, there is 1 non depricated solution. using webpack asset modules to resolve inline and then let us inject the svg into the html. more info can be found https://webpack.js.org/guides/asset-modules/ . the only issue that i can find about this is that it becomes very difficult for people to contribute that.

creating a custom svg loader is not the best idea soooooo no.

another issue arises with dynamically changing the css of svgs. not all svgs are created the same, some of them are clean and simple and so let us change the css easily, some are not and get weird when you change the css.

the solution i chose is simple for most people to understand. it works well. the only 1 issue is bandwidth, it has to resend the photo which sucks.

[prairir]

here is the "finished" page

[prairir]

I added each section and a link to each section. on its base, docusaurus doesnt realllllly support this feature but I created it as a byproduct of 2 features, changing the directory that servers doc files and having multiple doc serving plugins.

so to add multiple sections i just created multiple doc plugins and pointed them at different directories. for the news letter i used a blog because that is what it will be.

for linking to each section, I used Link as a tags would be heavy and not react routery. we want this to be a single session so Link is the way to go.

as for cards for each feature, i think it would make it too busy so i didnt do it. and the GET STARTED button on the home page has to point somewhere else, im currently thinking either an FAQ or a navigation guide in a section called help in resources.