Skip to content

Re-work the presentation of the main page #510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 79 commits into from
Sep 9, 2020

Conversation

samueldr
Copy link
Member

@samueldr samueldr commented Sep 2, 2020

Subject of this PR: only the presentation of the index page. Any other page should see no changes, though if a regression compared to the main PR's state is found, it's a bug.

Note that the text of the main page is not subject of this PR either. I'm working on the implementation only.


TODO

  • svg-based code examples (as discussed with @garbas)
  • js solution for "full screen" code examples
  • make the examples section match the mockups

Contents TODO

  • Automatically build svgs for demos
  • A sixth demo for the examples

Sorry, something went wrong.

garbas and others added 30 commits August 21, 2020 14:27

Unverified

This user has not yet uploaded their public signing key.
* add redirects from old urls
* old manuals are now served as stable
* and unstable manuals were added
* <link rel="cannonical" url=".." /> was added not to confuse search
  engines

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
change manual location and add unstable version
This *strongly assumes* that the SVG will be available, and also assumes
that the DOM and styles are ready to embed the SVG at this location.

Additionally, yet unwritten, another component will be needed at the
location where the "pane" with the actual demo will be shown.

Finally, JavaScript will be used to make the pane show up properly when
activated.
Note that this is a manual edit of the template, for testing purposes.

This should be made a part of the demo processing tooling.
@github-actions
Copy link
Contributor

github-actions bot commented Sep 6, 2020

@samueldr
Copy link
Member Author

samueldr commented Sep 6, 2020

@garbas the SVG file template is:

It is totally expected to see a black file.

They end up being embedded as <svg /> elements in the HTML document. This helps ensure the monospace font is made available to the svg document, but less importantly to most, we control its color scheme in tandem with the asciinema screencast's color scheme!

Hopefully you can extrapolate how it works from that document, though here's some notes:

  • Spaces are preserved, so be careful in generating the SVG document
  • newlines are not preserved. New lines are <tspan> with dy= set accordingly.
  • Colours are <tspan> with the proper class, where the number matches the escape sequence number
  • There is no support for background colours as SVG doesn't support them as text properties. Implementing this would be extremely difficult without also embedding the text outlines rather than text.

Be careful when continuing to the next line; <tspan> have to be valid xml, so a colour continuing to the next line has to be closed and re-opened! I think that's the main gotcha. Note that bold text is handled as with asciinema, with the brighter colours being bolded.

It has been verified that recent iOS versions don't need that anymore.
Though only show with `-debug` body class
This can be used to better document responsive bugs by showing at which
level the user saw the issue.
This way we can ensure all usage of the component are coherent with each
other.
See, there's absolutely nothing specific to the demo panes! It's a
generic behaviour for panes.
Using a BLOCK like this is the only way we will be able to manage having
misc. contributors edit the site. No soup of DOM as an internal detail.
@samueldr
Copy link
Member Author

samueldr commented Sep 8, 2020

This is not entirely complete, there's still action points to do, but they are content action points, which are not part of the work on this PR.

@samueldr samueldr marked this pull request as ready for review September 8, 2020 03:07
This is a proposed feature, not implemented yet.
@samueldr samueldr mentioned this pull request Sep 9, 2020
2 tasks
@samueldr samueldr changed the title [WIP] Re-work the presentation of the main page Re-work the presentation of the main page Sep 9, 2020
@samueldr samueldr merged commit db91d40 into feature/2020-redesign Sep 9, 2020
@samueldr samueldr deleted the feature/2020-r/main branch September 9, 2020 00:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design About the design refresh work
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants