Skip to content
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

[Crum/Flashcards] Organize the HTML #233

Open
pishoyg opened this issue Sep 6, 2024 · 2 comments
Open

[Crum/Flashcards] Organize the HTML #233

pishoyg opened this issue Sep 6, 2024 · 2 comments
Labels
dev Why: Developer experience
Milestone

Comments

@pishoyg
Copy link
Owner

pishoyg commented Sep 6, 2024

Assign IDs and classes more extensively. Use more appropriate tags.

@pishoyg pishoyg added the dev Why: Developer experience label Sep 6, 2024
@pishoyg pishoyg added this to the platform milestone Sep 6, 2024
pishoyg added a commit that referenced this issue Sep 6, 2024
Also change the full entry to a division instead of a span.
pishoyg added a commit that referenced this issue Sep 6, 2024
We split the page into sections represented by `<div>` tags. This will
make the HTML prettier (tidy handle `<div>` tags intelligently). It will
also come in handy in the future when we want to extract specific
sections from the HTML, as we want to do in #229.

Notice that the use of `<div>` tags makes a lot of `<br>` tags
idempotent, so we remove them.
pishoyg added a commit that referenced this issue Sep 6, 2024
This will make it possible to produce cleaner search text for Xooxle.

Similar classes were added to the main HTML in
907c378. They should've been added to
the derivations table in that commit.
We should perhaps centralize our HTML generation.
pishoyg added a commit that referenced this issue Sep 6, 2024
Pick up new HTML classes and IDs.
pishoyg added a commit that referenced this issue Sep 6, 2024
Pick up an enriched HTML structure.
@pishoyg
Copy link
Owner Author

pishoyg commented Sep 7, 2024

This has an open TODO. We should implement it.

Other than that, the request is too vague, and it has no immediately visible benefit. So let's close it and revisit the HTML structure when a specific need for that arises.
Read about HTML best practices and apply them, then close when the status is satisfactory.

pishoyg added a commit that referenced this issue Sep 8, 2024
This existed, but was mistakenly removed in
f9c7165, perhaps under the assumption
that the use of `<div>` tags would render the line breaks unnecessary.
It's necessary to have two line breaks, not just one, when the images
are absent; in order for the horizontal line to avoid conflict with the
"dictionary" division.
@pishoyg pishoyg added this to coptic Sep 11, 2024
@pishoyg
Copy link
Owner Author

pishoyg commented Oct 3, 2024

We would like to expand the Tidy config to the following:

add-meta-charset: yes
add-xml-decl: yes
break-before-br: yes
clean: yes
enclose-block-text: yes
enclose-text: yes
escape-cdata: yes
indent-cdata: yes
indent-spaces: 2
indent: yes
join-classes: yes
logical-emphasis: yes
priority-attributes: id,name,class
punctuation-wrap: yes
quiet: yes
sort-attributes: alpha
strict-tags-attributes: yes
tidy-mark: no
vertical-space: yes
wrap: 80
write-back: yes

NOTE: The Tidy config was set up as part of #213.
NOTE: We also thought of indent-attributes: yes, but we will likely abandon it.

pishoyg added a commit that referenced this issue Oct 5, 2024
pishoyg added a commit that referenced this issue Nov 1, 2024
This will make it possible to extract this element on its own, which
we intend to do for Xooxle.
pishoyg added a commit that referenced this issue Nov 1, 2024
The `word` class is now essential for highlighting.
pishoyg added a commit that referenced this issue Nov 1, 2024
The `word` class is now essential for highlighting.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dev Why: Developer experience
Projects
Status: No status
Development

No branches or pull requests

1 participant