Astro docsite migration

[ff2400t]

This is based on the issue #3. Everything is functioning as you would expect, I have split all the sections of the site into their own components. All Styles are still in the main style sheet as i wanted to get an approval before moving them to their component scope. Also the Code examples were breaking Astro so I had to use the Prism component which is an inbuilt component in astro

[argyleink]

ooooo! awesome @abhijeetChawla, i'll do my best to review and get to this asap 🙂

[argyleink]

had to use the Prism component

this remains a huge reason to use astro imo! compile time transformation instead of client side. no more page loading layout shift when trying this astro build, makes me happy!

---

thank you! ❤️

i like what you've done with the folder structure. it's good to see astro on top of vite and able to reach up directories too, like you did in styles/index.css, that didnt used to be the case!

permission to move styles over to their relevant components 👍🏻
this is a great start!

I just merged some styles of yours a second ago, dont forget to include those in this 🙂

[ff2400t]

Moving styles to the relevant component is done. Something to note here is that astro scopes the styles in component by default which I have disabled by using the global attribute. The main reasons for this is that astro doesn't seem to understand the @nest and this breaks a lot of styles.

[argyleink]

Moving styles to the relevant component is done. Something to note here is that astro scopes the styles in component by default which I have disabled by using the global attribute. The main reasons for this is that astro doesn't seem to understand the @nest and this breaks a lot of styles.

v25 of Astro is supposed to have fixed exactly for @nest use cases!

[argyleink]

i'll pull down and check the nesting syntax soon! i havent forgotten about this great PR 🙂

[argyleink]

tried out v1.0.0-beta.2 tonight and this project. feels like waiting to launch of their v1 version is a good idea. the astro errors looked like minor nits and syntax changes in the framework. i'm starting to think that global styles is ok, the html is much cleaner looking and it's not like the project is struggling with leaky styles.

bundle comparisons

well, this section didnt go as planned. vite seems to be much smaller. astro isnt bundling and minifying js?

vite dist/:

💀 dist (pr/209) ✗ ls -la
-rw-r--r--   1 obey  staff  129304 Apr  5 21:05 index.html
-rw-r--r--   1 obey  staff  52104 Apr  5 21:05 assets/index.93bcba05.css
-rw-r--r--   1 obey  staff   3243 Apr  5 21:05 assets/index.d3498f1e.js

astro dist/:

-rw-r--r--   1 obey  staff  200138 Apr  5 21:05 index.html
-rw-r--r--   1 obey  staff     103 Apr  5 21:05 index.js
-rw-r--r--   1 obey  staff  88740 Apr  5 21:05 assets/asset.992d76ee.css
-rw-r--r--   1 obey  staff  1051 Apr  5 21:05 js/animations.js
-rw-r--r--   1 obey  staff   607 Apr  5 21:05 js/easing.js
-rw-r--r--   1 obey  staff  1553 Apr  5 21:05 js/scrollspy.js
-rw-r--r--   1 obey  staff  1406 Apr  5 21:05 js/slider.js

[argyleink]

i see, the js files need to be in src/ and not public/.

[argyleink]

hey! revisiting this! Astro 1.0 is out and we're ready to start investing in this migration and we'd really love to build on top of this work 🙂 are you still down to help out and continue hacking this Astro PR?

we were just investigating why the CSS nearly doubled and we discovered that index.css is loading the original site styles on top of the global style tags in each component. we're thinking that this site can benefit from components for the markup and in a next phase we'll move the styles to css modules with astro. aka, i think we should pull all the style tags from components and just lean on the index.css stylesheet.

that plus the JS bundling needing to happen, this is overall really close! we want to keep working with you and build on top of the work you've done. lookin forward to more chats and we'll share additional details as we find them too.

[argyleink]

closing due to so much time passing