The Trans Directory
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(flex): respect DesktopOnly and MobileOnly components (#1971)

* fix(flex): respect DesktopOnly and MobileOnly components

* Use classNames util function

* fix(ofm): allow wikilink alias to be empty (#1984)

This is in line with Obsidian's behavior.

* fix(style): Katex adding scrollbars on non-overflowing content (#1989)

* feat(i18n): Bahasa Indonesia translations (#1981)

* fix(a11y): increased content-meta text contrast (#1980)

* fix(analytics): streamline posthog script loading and event capturing (#1974)

* css: adjust color blend for search bg

* feat(links): added ofm option to style unresolved or broken links differently (#1992)

* feat: add option to disable broken wikilinks

* fix(style): update hover color for broken links and introduce new class

* feat: add "disableBrokenWikilinks" option to ObsidianFlavoredMarkdown

* chore(deps): replace `chalk` and `rimraf` with builtin functions (#1879)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore(deps): bump the production-dependencies group across 1 directory with 9 updates (#1996)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Node 22 (#1997)

* docs: showcase housekeeping

* docs: fix explorernode references (closes #1985)

* fix: tz-less date parse in local tz instead of utc (closes #1615)

* docs: added note to not forget to add https:// to the plausible-host (for #1337) (#2000)

* docs: added note to not forget to add https:// to the plausible-host (for #1337)

* Update docs/configuration.md

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Updated documentation

---------

Co-authored-by: Nizav <106657905+Ni-zav@users.noreply.github.com>
Co-authored-by: Aswanth <aswanth366@gmail.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
Co-authored-by: Keisuke ANDO <g.kei0429@gmail.com>
Co-authored-by: fl0werpowers <47599466+fl0werpowers@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Sebastian Moser <64004956+c2vi@users.noreply.github.com>

+30 -1
+9
docs/layout-components.md
··· 41 41 }) 42 42 ``` 43 43 44 + > [!note] Overriding behavior 45 + > Components inside `Flex` get an additional CSS class `flex-component` that add the `display: flex` property. If you want to override this behavior, you can add a `display` property to the component's CSS class in your custom CSS file. 46 + > 47 + > ```scss 48 + > .flex-component { 49 + > display: block; // or any other display type 50 + > } 51 + > ``` 52 + 44 53 ## `MobileOnly` Component 45 54 46 55 The `MobileOnly` component is a wrapper that makes its child component only visible on mobile devices. This is useful for creating responsive layouts where certain components should only appear on smaller screens.
+5 -1
quartz/components/Flex.tsx
··· 1 1 import { concatenateResources } from "../util/resources" 2 + import { classNames } from "../util/lang" 2 3 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" 3 4 4 5 type FlexConfig = { ··· 23 24 const gap = config.gap ?? "1rem" 24 25 25 26 return ( 26 - <div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}> 27 + <div 28 + class={classNames(props.displayClass, "flex-component")} 29 + style={`flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`} 30 + > 27 31 {config.components.map((c) => { 28 32 const grow = c.grow ? 1 : 0 29 33 const shrink = (c.shrink ?? true) ? 1 : 0
+16
quartz/styles/base.scss
··· 132 132 } 133 133 } 134 134 135 + .flex-component { 136 + display: flex; 137 + } 138 + 135 139 .desktop-only { 136 140 display: initial; 141 + &.flex-component { 142 + display: flex; 143 + } 137 144 @media all and ($mobile) { 145 + &.flex-component { 146 + display: none; 147 + } 138 148 display: none; 139 149 } 140 150 } 141 151 142 152 .mobile-only { 143 153 display: none; 154 + &.flex-component { 155 + display: none; 156 + } 144 157 @media all and ($mobile) { 158 + &.flex-component { 159 + display: flex; 160 + } 145 161 display: initial; 146 162 } 147 163 }