**[[Pub Wrap]]** represents the CSS/JS layer of the [[System]] built on top of [[Obsidian|Obsidian]]. It has been built specifically with Obsidian Core and Obsidian Publish in mind. ^about The personal drivers for this layer are the needs to: - render [[Pub Wrap#Properties|properties]] in an interactive and effective way on publish - automate and publish an indefinite number of [[Pub Wrap#Dataview|Dataview]] queries - provide [[Pub Wrap#Tables as Cards|tactile card-like]] alternatives to rendering tables - control [[Pub Wrap#Titles|page titles]] without modifying file names - hide [[Pub Wrap#Backlinks|backlinks]] and [[Pub Wrap#Graph View|graph view]] on individual pages - inject minor tweaks to Mermaid, callouts, and layout - to muck around with CSS/JS[^1] This is a [[Class]] within the [[System]]. ## General All `cssclasses` defined for a page will begin with `pws-`. All page element classes related to Pub Wrap elements will begin with `pwa-`. This is to help distinguish *'classes that are **S**ettings'* from *'classes that are JS-generated **A**rtefacts'* when navigating the CSS[^1]. This site uses the [Figtree](https://www.erikdkennedy.com/projects/figtree.html) typeface by Erik Kennedy ## Properties A page's [[Property|Properties]] (and the underlying frontmatter YAML) are not displayed in Publish by default. Within Pub Wrap, the `classes`, `states`, and `tags` properties will be rendered as a series of pills at the top of the page. - Links stored as `"[[Pub Wrap]]"` will be rendered as popoverable links like [[Pub Wrap]][^2] - <code>[[Class|classes]]</code> will be cyan pills - <code>[[State|states]]</code> will be orange pills - Tags will be rendered as normal tags like #tag - Pills will not be rendered in popover previews Refer [[Test 001|example]] of default behaviour. One or more of the following `cssclasses` can be added to a page to modify this behaviour. #### pws-properties-otherpills All other page Properties will now be rendered as a series of grey pills in `name:value` format, *except for* `description`, `cssclasses`, `cover`, `permalink`, `title`, `internal`, `group`, and `publish`. [[Test 003|Example]]. #### pws-properties-internalpills The `description`, `cssclasses`, `cover`, `permalink`, `title`, `internal`, `group`, and `publish` Properties will now also be rendered as a series of grey pills in `name:value` format. [[Test 008|Example]]. #### pws-properties-nopills No pills will be displayed. This effectively reverts what Pub Wrap does to Properties by default. This will override any other `*pills` classes. #### pws-properties-raw Expose the frontmatter YAML block. Note that Publish already does the hard work rendering it, this setting just unhides it. This works in popovers. [[Test 004|Example]]. #### pws-properties-peek Same as `pws-properties-raw`, but the block will be collapsed by default. Hovering over it (or tapping it on mobile) will unfade and expand the block. This works in popovers. [[Test 002|Example]]. ## Dataview Caching *Refer to [[Dataview Caching]] for more information* > ![[Dataview Caching#^intro]] ## Titles Publish uses the file name as both the *web page title* and the *on-page title*. Within Pub Wrap, if a page has a `title` property, it will instead use that to populate these title spots. Refer [[Test 001|example]] of default behaviour. One of the following `cssclasses` can be added to a page to modify this behaviour. #### pws-title-noproperty Titles will not be modified. This effectively reverts what Pub Wrap is doing to titles by default. #### pws-title-promote-h1 Will instead use the first `h1` found on the page, if one exists. This `h1` element will also be removed from the flow of the body. If this setting is used *and* a `h1` exists, it will take precedence over the `title` property. [[Test 002|Example]]. ## Backlinks #### pws-backlinks-hidden Hides the list of backlinks on this page in Publish. Has no additional effect if 'Show backlinks' is not enabled in Publish settings. ## Graph View #### pws-graph-hidden Hides the graph view on this page in Publish. Has no additional effect if 'Show graph view' is not enabled in Publish settings. [[Test 002|Example]]. ## Mermaid Mermaid diagrams are by default displayed at full scale and get cropped if they are too large. Within Pub Wrap, they will be scaled down to fit the width of the page. #### pws-mermaid-fullsize Mermaid diagrams are no longer scaled down, but if they are too large, they now get scroll bars instead of being cropped. #### pws-mermaid-undecorate Elements turned into links (possible by using the `internal-link` class) remain as undecorated white text (as opposed to decorated hyperlinks). ## Tables For all tables, font sizes have been scaled down slightly (80%), borders have been removed (except to separate header and body), and text overflowing from cells will be indicated by an ellipsis (...). >[!info] CSS Snippet >Refer to [[Pub Wrap Cards]] for a carved-out snippet for just this functionality. #### pws-tables-nowrap Text no longer wraps within cells. Every row will be exactly one row high, unless there are images or other rich content involved. #### pws-tables-nohead Hides the entire header (`<thead>`) of the table. #### pws-tables-equispaced Widths of all table columns are fixed to the same equal width. #### pws-tables-colwidthcap No column is allowed to exceed a width of 20rem. #### pws-tables-colwidthmin All columns are guaranteed a width of at least 8rem. #### pws-tables-title-col[1|2|3] Text in specified column is made bold and reverted to 100% original font size. Note this applies to [[#Tables as Cards]] below too. #### pws-tables-shrink-edit When editing tables in edit mode, table rows no longer infinitely stretch to the right, but instead wrap like normal text. To help navigate the row/column jumble this creates: - The background fill of the table 'rows' alternate between black and grey - The terminal (first and last) column dividers of each row have a white background - Every other column divider (up to the 8th) has a unique colour #### pws-tables-vertical-single Transposes a single-row table such that the headers are down the left-hand-side and the single row of values are on the right. Row heights are forced to a single line so that they line up. #### pws-tables-noheader Hides the header row on Dataview tables. ## Tables as Cards #### pws-tables-cards HTML tables are now rendered as a series of cards instead. Hovering over an item will give them a slight glow and scale-up. Responsive between 3 columns (default) or 1 column (narrow screens). [[Test 005|Example]]. #### pws-tables-cards-cover Cards now rendered in 'cover' style, using the image (using the first column) to fill the entire box, with the rest of the content overlaid on top. A filter is placed between the image and the text to soften the image and increase readability. Must be used in conjunction with `pws-tables-cards` and no other card style modifiers. The image reference in the table should be provided as an embed, e.g. `![[image.png]]` or `` or `embed(link(image, "150"))`. Provide empty content as first column if there is no image. [[Test 005|Example]]. #### pws-tables-cards-social Cards now rendered in 'social feed' style, featuring the image (taken from the first column) on the left with the rest of the content on the right. Must be used in conjunction with `pws-tables-cards` and no other card style modifiers. The image reference in the table should be provided as an embed, e.g. `![[image.png]]` or `` or `embed(link(image, "150"))`. Provide empty content as first column if there is no image. [[Test 005|Example]]. #### pws-tables-cards-ccg Cards are now rendered in 'collectible card game' style, with a background image with light filter (from the first column, similar to `pws-tables-cards-cover`), feature image (from second column) taking up the top half, and the rest of the content in the bottom half. Must be used in conjunction with `pws-tables-cards` and no other card style modifiers. Use in conjunction with `pws-tables-title-col3` to pop the title. Provide empty content as first column if there is no image. [[Test 005|Example]]. #### pws-tables-cards-tickler Cards are now rendered in 'tickler file' style. Each card is collapsed into a single narrow row, but will expand to reveal its contents when hovered. When collapsed, the title (second column) is given full width, and the description (third column) is given whatever space remains; no other columns are rendered. When hovered, each element / column is reverted back to normal card display (stacked atop like bricks). In both unhovered and hovered states, the image (taken from the first column) is expanded to fill the entire box, covered by a dull gradient to make the text more legible. Must be used in conjunction with `pws-tables-cards` and no other card style modifiers. The image reference in the table should be provided as an embed, e.g. `![[image.png]]` or `` or `embed(link(image, "150"))`. Provide empty content as first column if there is no image. [[Test 005|Example]]. ## Callouts Callouts under Pub Wrap by default: - Have their icon and fold vertically centred - If the title is a heading, the top and bottom margins are centred and scaled to the heading size The following key words can be inserted into the alt text of a callout (e.g. `>[!info|sideways no-icon]`) to affect styling changes: #### no-title The entire title row is hidden. Note that this includes the icon and fold arrow. Foldable callouts with this setting will not be toggleable. #### no-icon The callout icon is hidden. #### no-fold The fold icon is hidden #### sideways The callout title now runs vertically down the left-hand-side of the callout box. #### scale-150 | scale-200 The callout icon and fold are scaled and centred to 150% (`scale-150`) or 200% (`scale-200`). ## Layout and Images Embedded images will by default adhere to the document's paragraph flow. The embed can be inline-wrapped with a `span` with one or more of the following classes in order to affect one or more of the following changes. - **image** - wrapped image will get a margin - **image-boxed** - wrapped image will receive rounded border and box shadow - **image-padded** - wrapped image will receive padding (use with image-boxed when the image has low margins and we don't want to clip the corners) - **float-right** - wrapped image will float left - **float-left** - wrapped image will float right - **center-text** - text-align is set to center (horizontal centring for not just text) - **bg-whitest** - adds a white-ish background to the image (useful for e.g. svgs) - **bg-blackest** - adds a black-ish background to the image (useful for e.g. svgs) For example [[Scones]] uses `<span class="image image-boxed float-right">![[scones-01.jpg|220]]</span>` The classic `clearfix` class exists and can be attached to any element (including an empty one) to have a clean break into a new partition. ## Code Blocks #### pws-code-nowrap Stops code blocks wrapping ## Miscellaneous Miscellany #### Readable Line Length The enforced maximum readable line length `--file-line-width` is usually 700px, in Pub Wrap it has been set to 800px. Adding `pws-widescreen` to `cssclasses` will open that max up to 4000px (noting it is capped by other native classes; it will not overflow). #### Offset Popovers Popovers ('preview on hover') by default appear under the cursor, which can intercept your attempt to click the link "if you lose the race to click the link before the preview renders". Within Pub Wrap, popovers have been offset ever so slightly so there is no race. #### Seamless Transclusions Borders, boxes, and padding have been removed from transclusions in order to make their inclusion into a document 'appear' like part of the document. #### Headerless Transclusions Adding `no-h` as a word in the alt text of a transclusion (e.g. `[[my page|no-h]]`) will hide any headings within the transclusion. #### App vs Publish hidden Wrapping something in a `app-hidden` or `pub-hidden` class, or making it the alt text of a transclusion (such that it's the alt text of the wrapping span), will make the containing block hidden in-app or in-publish, respectively. ## Manifest of `pws-` cssclasses usage <span class="dataview">`$=dv.execute(dv.page("Pub Wrap (script)").script_local)`</span>![[Pub Wrap (tpdv output)#Content|no-h app-hidden]] [^1]: quick disclaimer: I am definitely not a web developer and this is just a hobbyist / curiousity work in progress for myself. Apologies in advance if I butcher any terminology or industry best practices! [^2]: the structure of my vault and other [[System]] elements play a major role in facilitating this; these methods might not be directly transferrable to other vaults. [^3]: can be the same, but not actually the same here. I have two separate properties holding two versions of the query, one for local (querying my entire vault) and one for public (querying only inside the published /common/ folder). This helps ensure I see everything on desktop, but only public files are present and linked on publish, without me having to worry about explicitly managing it so.