feat(layout): Semantic html tags #1626

vanadium23 · 2024-11-29T21:29:19Z

Implemented comment from #1588 (comment).

Move header out of beforeBody
Move center to main
Move sidebar to aside
Move Date to time
Move explorer to nav

aarnphm

first pass, but still have few items up for discussion

quartz/components/Header.tsx

quartz/components/renderPage.tsx

aarnphm

second pass. cc @saberzero1 @jackyzha0

quartz.layout.ts

quartz/components/ContentMeta.tsx

quartz/components/Explorer.tsx

aarnphm · 2024-12-01T02:14:00Z

Actually, sorry I might be wrong about section here

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

Seems like section should always followed with a heading -> p, so section for each sidebar or container doesn't make sense afaict

saberzero1 · 2024-12-01T06:37:40Z

Actually, sorry I might be wrong about section here

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

Seems like section should always followed with a heading -> p, so section for each sidebar or container doesn't make sense afaict

Sections should be used for parts of a text. Basically every part that the Table of Contents component identifies.

I also believe we should use aside for the sidebars, not section.

Additionally, we should consider the search tag for the Search component.

https://www.w3schools.com/tags/tag_search.asp

vanadium23 · 2024-12-01T19:39:36Z

@aarnphm @saberzero1 I made a breaking changes in b2423a3, are we ok with it?

aarnphm · 2024-12-01T23:08:47Z

yea, we might want to bump the version to v4.5 or sth to signify breakage

quartz.layout.ts

aarnphm · 2024-12-02T10:38:30Z

quartz/components/Search.tsx

@@ -18,7 +18,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
    const opts = { ...defaultOptions, ...userOpts }
    const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
    return (
-      <div class={classNames(displayClass, "search")}>
+      <search class={classNames(displayClass, "search")}>


I think the default container should be div, and diff search-container to tag

<search id="search-container"> <form id="search-space"> <input autocomplete="off" id="search-bar" name="search" type="text" aria-label={searchPlaceholder} placeholder={searchPlaceholder} /> </form> <output id="search-layout" data-preview={opts.enablePreview}></output> </search>

might have to update scss as well

This example demonstrates potential DOM content when dynamically including JavaScript search functionality in a web application. When search functionality is implemented entirely with JavaScript, if no form is submitted, neither a
element nor a submit is required. For semantics, the element is included to contain the search and filtering capabilities.

(c) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search#web_app_search

sg, can you then also update the search-container to section and output and form accordingly?

no, you have a js search and no form. MDN specifies for such case, that form does not required.

The element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.

From their example

<search> <label> Find and filter your query <input type="search" id="query" /> </label> <label> <input type="checkbox" id="exact-only" /> Exact matches only </label> <section> <h3>Results:</h3> <ul id="results">  </ul> <output id="no-results">  </output> </section> </search>

Ig we don't need form, but for the layout seems to align with their example

aarnphm · 2024-12-03T05:28:16Z

quartz/components/Body.tsx

@@ -4,7 +4,7 @@ import clipboardStyle from "./styles/clipboard.scss"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"

 const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
-  return <div id="quartz-body">{children}</div>
+  return <main id="quartz-body">{children}</main>


i think main should be for quartz-root, and this can be either a section or a div

No,

The content inside the
element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

So I have place it around Content.

* aside --> section * header --> header + pageHeader

* move Explorer to menu * move Search to search * move sidebars to aside

* make header above all content * make beforeBody --> pageHeader

aarnphm · 2024-12-07T17:11:42Z

quartz/components/Date.tsx

@@ -27,5 +27,5 @@ export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
 }

 export function Date({ date, locale }: Props) {
-  return <time datetime={date.toISOString()}>{formatDate(date, locale)}</time>


aarnphm · 2024-12-07T17:14:26Z

quartz/components/Search.tsx

@@ -18,7 +18,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
    const opts = { ...defaultOptions, ...userOpts }
    const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
    return (
-      <div class={classNames(displayClass, "search")}>
+      <search class={classNames(displayClass, "search")}>


The element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.

From their example

<search> <label> Find and filter your query <input type="search" id="query" /> </label> <label> <input type="checkbox" id="exact-only" /> Exact matches only </label> <section> <h3>Results:</h3> <ul id="results">  </ul> <output id="no-results">  </output> </section> </search>

Ig we don't need form, but for the layout seems to align with their example

aarnphm · 2024-12-07T17:17:08Z

quartz/components/renderPage.tsx

                <div class="popover-hint">
                  {beforeBody.map((BodyComponent) => (
                    <BodyComponent {...componentData} />
                  ))}
                </div>
              </div>
-              <Content {...componentData} />
+              <main>


let's just keep content as article as before wrapping main here is redudant.

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

The <main> HTML element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

In this case article represents the content translated from the markdown, and main encapsulate Body component

vanadium23 mentioned this pull request Nov 29, 2024

feat(layout): Navbar component #1588

Closed

aarnphm requested changes Nov 29, 2024

View reviewed changes

vanadium23 force-pushed the semantic-html-tags branch from 232944a to 1e182ab Compare November 30, 2024 20:02

aarnphm approved these changes Dec 1, 2024

View reviewed changes

quartz.layout.ts Outdated Show resolved Hide resolved

quartz/components/ContentMeta.tsx Outdated Show resolved Hide resolved

quartz/components/Explorer.tsx Outdated Show resolved Hide resolved

vanadium23 force-pushed the semantic-html-tags branch from b2423a3 to 81e943b Compare December 1, 2024 19:41

aarnphm reviewed Dec 1, 2024

View reviewed changes

quartz.layout.ts Outdated Show resolved Hide resolved

aarnphm reviewed Dec 2, 2024

View reviewed changes

aarnphm reviewed Dec 3, 2024

View reviewed changes

vanadium23 added 6 commits December 7, 2024 18:21

components: make Header as header

fc901e1

components: semantic web for main components

799c8c4

feat(layout): fix for review comments

57e6af3

* aside --> section * header --> header + pageHeader

feat(layout): better tags on components

fafdb27

* move Explorer to menu * move Search to search * move sidebars to aside

feat(layout): make header outside of center

cfcce87

* make header above all content * make beforeBody --> pageHeader

feat(layout): bring back pageHeader --> beforeBody

e525f85

vanadium23 force-pushed the semantic-html-tags branch from 4e8ee98 to e525f85 Compare December 7, 2024 15:21

feat(layout): wrap main around content

883f4e6

aarnphm requested changes Dec 7, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(layout): Semantic html tags #1626

feat(layout): Semantic html tags #1626

vanadium23 commented Nov 29, 2024

aarnphm left a comment

aarnphm left a comment

aarnphm commented Dec 1, 2024

saberzero1 commented Dec 1, 2024

vanadium23 commented Dec 1, 2024

aarnphm commented Dec 1, 2024

aarnphm Dec 2, 2024

vanadium23 Dec 2, 2024

aarnphm Dec 3, 2024

vanadium23 Dec 7, 2024

aarnphm Dec 7, 2024

aarnphm Dec 3, 2024

vanadium23 Dec 7, 2024

aarnphm Dec 7, 2024

aarnphm Dec 7, 2024

aarnphm Dec 7, 2024

feat(layout): Semantic html tags #1626

Are you sure you want to change the base?

feat(layout): Semantic html tags #1626

Conversation

vanadium23 commented Nov 29, 2024

aarnphm left a comment

Choose a reason for hiding this comment

aarnphm left a comment

Choose a reason for hiding this comment

aarnphm commented Dec 1, 2024

saberzero1 commented Dec 1, 2024

vanadium23 commented Dec 1, 2024

aarnphm commented Dec 1, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment