Blockquote
A quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.
Demo
The Analytical Engine weaves algebraic patterns just as the Jacquard loom weaves flowers and leaves.
The most dangerous phrase in the language is, "we've always done it this way."
Ship the smallest thing that teaches you something.
A quote with no one named.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/blockquote.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/blockquote.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/blockquote.qwe
view BlockquoteDemo() = <div.demo-stack> <Blockquote author="Ada Lovelace" source="Notes on the Analytical Engine, 1843" id="blockquote-demo-ada"> The Analytical Engine weaves algebraic patterns just as the Jacquard loom weaves flowers and leaves. </Blockquote> <Blockquote variant="marks" author="Grace Hopper" source="Interview" href="https://en.wikipedia.org/wiki/Grace_Hopper" id="blockquote-demo-grace"> <p>The most dangerous phrase in the language is, "we've always done it this way."</p> </Blockquote> <Blockquote variant="plain" size="lg" author="Someone on the team" id="blockquote-demo-plain"> Ship the smallest thing that teaches you something. </Blockquote> <Blockquote id="blockquote-demo-bare">A quote with no one named.</Blockquote> </div>Source
ui/blockquote.qwe
// Blockquote: a quotation with the person who said it and where, as a <figure>// with a <blockquote> and a <figcaption>, so screen readers know what it is.//// <Blockquote author="Ada Lovelace">The Analytical Engine weaves algebraic patterns.</Blockquote>// <Blockquote author="Grace Hopper" source="Interview, 1986" href="https://example.com/hopper">// <p>The most dangerous phrase in the language is, we've always done it this way.</p>// </Blockquote>//// children: the quote; text, or paragraphs. author: who said it. source: where// (a book, a talk, a page); it is a <cite>, and a link when href is given, which// is also the blockquote's cite attribute.// variant: "bar" (default: a bar at the left), "marks" (a large opening quote mark)// or "plain". size: "md" (default) or "lg". id: the figure's id.import ui/theme.qwe use ui_clslet blockquote_css = css`.ui-bq { margin: 0; font: 16px/1.6 var(--ui-font); color: var(--ui-fg); }.ui-bq blockquote { margin: 0; overflow-wrap: anywhere; }.ui-bq blockquote > :first-child { margin-top: 0; }.ui-bq blockquote > :last-child { margin-bottom: 0; }.ui-bq-bar blockquote { padding: 2px 0 2px 16px; border-left: 3px solid var(--ui-accent); }.ui-bq-bar .ui-bq-by { padding-left: 19px; }.ui-bq-marks { position: relative; padding-left: 36px; }.ui-bq-marks::before { content: "“"; position: absolute; top: -.1em; left: 0; font-size: 3.2em; line-height: 1; font-family: Georgia, "Times New Roman", serif; color: var(--ui-accent); opacity: .7; }.ui-bq-plain blockquote { font-style: italic; }.ui-bq-lg { font-size: 19px; line-height: 1.5; }.ui-bq-by { margin: 8px 0 0; font-size: 14px; color: var(--ui-muted); }.ui-bq-by::before { content: "— "; }.ui-bq-by cite { font-style: normal; }.ui-bq-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }.ui-bq-by a:hover { color: var(--ui-accent); }.ui-bq-by a:focus-visible { outline: none; border-radius: 3px; box-shadow: var(--ui-focus); }`view Blockquote(author: str? = null, source: str? = null, href: str? = null, variant: str = "bar", size: str = "md", id: str? = null, class: str? = null, children) { style global blockquote_css <figure class={ui_cls(["ui-bq", `ui-bq-${variant}`, size != "md" && `ui-bq-${size}`, class])} id={id}> <blockquote cite={href}>{children}</blockquote> {(author != null || source != null) && <figcaption.ui-bq-by> {author} {author != null && source != null && ", "} {source != null && <cite>{href != null ? <a href={href}>{source}</a> : source}</cite>} </figcaption>} </figure>}Related
DropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloadsFootnoteA numbered footnote mark in the text and the list of notes at the end, each linking to the other.6 views · 6 downloadsLeadA lede paragraph, larger and lighter than the body text, in two sizes and three alignments.7 views · 8 downloadsMarkdownViewA small Markdown subset (headings, emphasis, links, lists, code, quotes) rendered safely as markup, in Quillo, with no HTML let through.4 views · 9 downloadsProseStyles for a block of article HTML (from markdown() or by hand): headings, lists, links, quotes, code, tables.6 views · 5 downloadsPullquoteA line lifted from an article, set large beside the column with the text flowing around it, or across it.5 views · 6 downloads
Thread
Thread 0 posts
On Blockquote: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.