search

datopian / datahub

🌀 Rapidly build rich data portals using a modern frontend framework
https://datahub.io/opensource
MIT License
2.17k stars 322 forks source link

Obsidian-style foldable callout syntax (e.g. "![Info]- Title") #1060

Closed marcchehab closed 3 months ago

marcchehab commented 5 months ago

This adds Obsidian-style foldable callout syntax, as described here: https://help.obsidian.md/Editing+and+formatting/Callouts#Foldable+callouts

Please note that I tested this in my customized Flowershow, so maybe the CSS I added for the padding isn't what you need!

Kind regards from Zurich!

Marc

changeset-bot[bot] commented 5 months ago

⚠️ No Changeset found

Latest commit: 710da32225843b8367bc7b776c31549a11ed84c1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel[bot] commented 5 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
portaljs-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 22, 2024 4:03pm
5 Ignored Deployments | Name | Status | Preview | Comments | Updated (UTC) | | :--- | :----- | :------ | :------- | :------ | | **portaljs-alan-turing** | ⬜️ Ignored ([Inspect](https://vercel.com/datopian1/portaljs-alan-turing/CKsdKC4mMxAoqQeybgvu5j9gfKFL)) | [Visit Preview](https://portaljs-alan-turing-git-fork-marcchehab-main-datopian1.vercel.app) | | Jan 22, 2024 4:03pm | | **portaljs-ckan** | ⬜️ Ignored ([Inspect](https://vercel.com/datopian1/portaljs-ckan/7c93G3P7xZm58sdstadYgLfosJhA)) | [Visit Preview](https://portaljs-ckan-git-fork-marcchehab-main-datopian1.vercel.app) | | Jan 22, 2024 4:03pm | | **portaljs-git-example** | ⬜️ Ignored ([Inspect](https://vercel.com/datopian1/portaljs-git-example/2DLCB9Zy4tseo5GTsWSAg7Dv6rgW)) | [Visit Preview](https://portaljs-git-example-git-fork-marcchehab-main-datopian1.vercel.app) | | Jan 22, 2024 4:03pm | | **portaljs-learn** | ⬜️ Ignored ([Inspect](https://vercel.com/datopian1/portaljs-learn/Ea25P9grixG2iEGrJ2GXP6xRycJD)) | [Visit Preview](https://portaljs-learn-git-fork-marcchehab-main-datopian1.vercel.app) | | Jan 22, 2024 4:03pm | | **site-portaljs** | ⬜️ Ignored ([Inspect](https://vercel.com/datopian1/site-portaljs/4NGQxH71tv2x79YbrJ6WG5DnFm5a)) | [Visit Preview](https://site-portaljs-git-fork-marcchehab-main-datopian1.vercel.app) | | Jan 22, 2024 4:03pm |
vercel[bot] commented 5 months ago

@marcchehab is attempting to deploy a commit to the Datopian Team on Vercel.

A member of the Team first needs to authorize it.

mohamedsalem401 commented 5 months ago

@marcchehab The PR is great! and it works, but a few adjustments are needed:

  1. Move the Callout component to the remark-callouts package, specifically in src\lib\Callout.tsx.
  2. Export it in src\index.ts with a statement like export Callout from "./lib/Callout.tsx";.

To update the site folder, follow these steps:

  1. Remove the changes for this folder in this PR
  2. After merging the PR, the remark-callouts package will be updated in npm.
  3. After this we can open a new PR, import the Callout component from the @portaljs/remark-callouts and use it in the site.
marcchehab commented 5 months ago

Lovely thanks @mohamedsalem401 ! I'll follow your lead!

marcchehab commented 5 months ago

@mohamedsalem401 Now this PR solely adds to packages/remark-callouts. I hope my way of reverting MDXPage.tsx in site manually is ok.

I was running into issues because I'm using jsx so I added "jsx": jsx-react to the compiler options in packages/remark-callouts. works fine on my end.

marcchehab commented 4 months ago

Any update on this?

Today working on it I noticed one general limitation (not this PR, the callout code generally): If the title includes other elements, e.g. bold text, inline code, etc., it breaks the title. The issue is the assumption that the first child contains the title.

I'm working on a fix, but better in a new PR.

Update: Got it fixed.

marcchehab commented 4 months ago

Dear @olayway ! Great to get to know you, so far I only read your code 🙂 I think it must be that the color isn't visible in light mode, right? If so, I now added: border-color: var(--tw-prose-body); . Let's see how it is on your end. Here on Windows I checked it on Brave/Chrome and Firefox.

marcchehab commented 3 months ago

I erroneously submitted this PR from my main branch, so now my fork is blocked. I'll close the PR and maybe resubmit from a branch if you're interested.