[WIP] Microsite

[addyosmani]

Mock:

Theme inspiration: https://material.io/design/

Current icon (need to figure out what we're actually going to use):
https://www.iconfinder.com/icons/4272271/analytics_comparison_data_icon

• Implement in Next.js
• Let's have a page include a thumbnail gallery of all the demos. That is, a CSS Grid with a medium sized screenshot of each demo that you can click through to see the original. Each thumbnail cell/div should include the name of the demo in white text below the screenshot.
• Try to fill out pages with content from our existing docs/READMEs
• Performance-wise, it's perfectly OK for this to be mostly server-side rendered. There's very little that should require client side rendering here.
• This page will be hosted at the root of adaptive-loading.web.dev, treated like an index page.
• Let's leave placeholders for the images for now. I'll send images soon.
• We should try to limit work on this to under two days. The homepage and demos area may take time to implement, but the rest will be very much copying/pasting existing markdown content.

Wdyt?

[anton-karlovskiy]

@addyosmani
I think I have understood the outline of this microsite.

As for the theming, shall we use material-ui?

[addyosmani]

I think as long as we can keep the performance of our landing page high, using Material UI sounds fine. The alternative might be looking at one of the smaller sized Material implementations.

In my view, we mostly need a Material navigation bar (could be CSS if not opting for a drawer). The rest is pretty custom. I don't think we necessarily need to use cards or FAB buttons for this page. Picturing the links just being links :)

[anton-karlovskiy]

@addyosmani
Yes, I got your points.
Using Material UI might be expensive regarding the performance.
I think we can just use Material components as many as required without installing the whole Material UI framework. Actually just with CSS, we could implement the feel and look.

[addyosmani]

👍👍👍

[addyosmani]

SVG artwork for the main image can be found attached 📦

art-svgomg.svg.zip

[anton-karlovskiy]

@addyosmani

Currently it's bootstrapped with create-next-app and necessary configuration is done including AppBar and Drawer. I was going to ask assets. :)

• Link to Glitch App
• Link to Project on Glitch

[addyosmani]

Nice! Good start :) Some quick notes:

• We might want to use SVG versions of the Material icons as we'll probably only need to pull in a few vs all of Material Icons font https://material.io/resources/icons/?style=baseline
• Image for the right-hand-side can be found here: low-data-small.png.zip
• Content-wise, it might make sense for us to include snippets from the Hooks readme so folks can easily see how to use them in the same place?

[anton-karlovskiy]

@addyosmani

Thank you for your feedback. It's just the beginning of the project for now.
Yes, I remember the svg icon usage to improve the performance, which you taught me the other day.

[addyosmani]

Hey Anton. For the purposes of priorities next week, could we focus on #86 and #83 then come back to the microsite?

[anton-karlovskiy]

Hey Anton. For the purposes of priorities next week, could we focus on #86 and #83 then come back to the microsite?

Yes, I'll proceed that way.

[anton-karlovskiy]

@addyosmani

Could you please send me a fav icon and the main icon highlighted in red?

Thanks.

[anton-karlovskiy]

@addyosmani

In the material design, Roboto font is used. What kind of font shall we use?

[addyosmani]

Fonts: I think we can safely opt for Roboto as long as we are using a safe font-display default to minimize invisible text being shown.

Could you please send me a fav icon and the main icon highlighted in red?

yes, i'll dig that up right now.

[addyosmani]

An SVG version of the icon can be found below:

iconfinder_comparison_data_analytics_4272271.svg.zip

Favicons for the page, generated with realfavicongenerator can also be found below:

favicon_package_v0.16 (1).zip

[anton-karlovskiy]

@addyosmani

Roboto font is set across the website with font-display swap.

[anton-karlovskiy]

@addyosmani

Next.js has some problem with css module importing.
They are working on it but not resolved yet.
So I just adopted the workaround for importing some css module.

Re:
vercel/next-plugins#282
vercel/next.js#5598 (comment)
vercel/next.js#5291
vercel/next.js#5598 (comment)
vercel/next.js#5264 (comment)

[anton-karlovskiy]

@addyosmani

According to Lighthouse, Roboto font was one of the potential savings in order to improve the performance.
So we've ended up using Arial for now.