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>
| | |
|---|
| | | }) |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | > [!note] Overriding behavior |
|---|
| | | > 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. |
|---|
| | | > |
|---|
| | | > ```scss |
|---|
| | | > .flex-component { |
|---|
| | | > display: block; // or any other display type |
|---|
| | | > } |
|---|
| | | > ``` |
|---|
| | | |
|---|
| | | ## `MobileOnly` Component |
|---|
| | | |
|---|
| | | 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. |
|---|
| | |
|---|
| | | import { concatenateResources } from "../util/resources" |
|---|
| | | import { classNames } from "../util/lang" |
|---|
| | | import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" |
|---|
| | | |
|---|
| | | type FlexConfig = { |
|---|
| | |
|---|
| | | const gap = config.gap ?? "1rem" |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}> |
|---|
| | | <div |
|---|
| | | class={classNames(props.displayClass, "flex-component")} |
|---|
| | | style={`flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`} |
|---|
| | | > |
|---|
| | | {config.components.map((c) => { |
|---|
| | | const grow = c.grow ? 1 : 0 |
|---|
| | | const shrink = (c.shrink ?? true) ? 1 : 0 |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .flex-component { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .desktop-only { |
|---|
| | | display: initial; |
|---|
| | | &.flex-component { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | @media all and ($mobile) { |
|---|
| | | &.flex-component { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mobile-only { |
|---|
| | | display: none; |
|---|
| | | &.flex-component { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | @media all and ($mobile) { |
|---|
| | | &.flex-component { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | display: initial; |
|---|
| | | } |
|---|
| | | } |
|---|
