Add a screenshot of a basic website

[skyfallwastaken]

It would be nice to see the progress of blitz by showing it render a basic website (perhaps one of the websites on nocss.club?)

[ealmloff]

Having a few real world example demos built up to show what you can build with Blitz and screenshots of them in the readme would be a great addition!

It could also be interested to have a "goal app" implemented in Dioxus web or desktop (hacker news?) for Blitz to work towards

[nicoburns]

Unfortunately Blitz currently (or soon) implements what are considered "advanced" layout modes from the perspective of the web (Flexbox and CSS Grid) but not the "basic" ones (block/inline and table layout). And I'm also not sure what state Blitz' text rendering is in. So it might be difficult to find websites that it can render well.

I looked at Hacker News as Taffy demo. But unfortunately it uses table layout, which might make it tricky. The tables spec is... not small https://www.w3.org/TR/css-tables-3/. It would definitely be possible to recreate though. And perhaps that might be a worthwhile excercise?

[nicoburns]

I would suggest the following as the minimum viable feature set for rendering a website:

• [x] display: block (https://github.com/DioxusLabs/taffy/issues/405)
• [x] Multiline text (some minimal display: inline subset)
• [x] Minimal scrolling support (at least of the top-level viewport)

Then as part of the demo itself we'd ideally want:

• [x] Fetch webpage via URL
• [x] Parse HTML and inline CSS
• [x] Implement a subset of the browser default stylesheet (e.g. https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) as part of the demo.

Extension tasks:

• [x] Images (https://github.com/DioxusLabs/blitz/pull/24) and fetching images via URL
• [x] Actual CSS selector resolution (presumably using the selectors crate)
• [ ] Font resolution (installed fonts and web fonts)
• [ ] Click handling for links

Normalize.css (https://necolas.github.io/normalize.css/8.0.1/normalize.css) would also be a sensible target to track. Also https://css.tobyase.de

[nicoburns]

Sciter's CSS support might also be a useful point of comparison:

• https://sciter.com/developers/for-web-programmers/
• Full property list https://sciter.com/docs/content/css/cssmap.html
• Proprietary morphorm-like layout https://sciter.com/docs/flex-flow/flex-layout.htm

[nicoburns]

I've started working on Block layout in Taffy here: https://github.com/DioxusLabs/taffy/pull/474.

[nicoburns]

https://alistapart.com/ could be a possible target to aim for. It would require the ability to resolve CSS selectors / stylesheets and will exercise quite a few layout/styling paths, but it works well without JS.

[nicoburns]

https://alistapart.com/ definitely has some issues, but it is also very much recognisable...

[nicoburns]

Blitz rendering it's own README:

[nicoburns]

https://servo.org

[nicoburns]