magidoc
magidoc copied to clipboard
magidoc-org
bug: unordered lists render incorrectly
Describe the bug
Currently unordered lists render by disabling the regular list item indicator and adding a custom one through a :before class, specifically:
.bx--list--unordered>.bx--list__item:before {
position: absolute;
left: -1rem;
content: "–";
}
This however created an ugly UI when rendered where the emdash is significantly higher than the text the unordered list is for as shown here:
Reproduction
Provide the following markdown to a custom page to be rendered by magidoc:
- Black: 
- Blue: 
- Brown: 
- Gray: 
- Green: 
- Pink: 
- Purple: 
- Red: 
- White: 
- Yellow: 
- Unknown: 
Logs
N.A.
System Info
System:
OS: macOS 14.2
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 1.53 GB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.10.0 - /private/var/folders/jy/w45_1th97698mzgm_nsfl35w0000gn/T/xfs-cce639d6/node
Yarn: 4.0.2 - /private/var/folders/jy/w45_1th97698mzgm_nsfl35w0000gn/T/xfs-cce639d6/yarn
npm: 10.2.3 - ~/.volta/tools/image/node/20.10.0/bin/npm
pnpm: 8.6.1 - ~/.volta/bin/pnpm
Browsers:
Safari: 17.2
Severity
Annoyance
Possibly just a fix on v-align using flexes. Can look into that when I get some time.
Actually, this is not that easy to fix. Since this is a list item: https://stackoverflow.com/questions/6219253/list-items-middle-vertically-aligned
I'm able to fix your issue, but then it completely breaks nested lists inside the markdown. Since there is no generic solution, I would suggest you implement the list yourself using raw HTML (markdown renderer supports raw HTML rendering).
This will take a little more code on your side, but since this list is a bit unique to your use-case, it makes more sense to me that the solution resides on your side.
Sorry if the solution is inconvenient, let me know if you need some help with it.
Is there a way to add a custom CSS stylesheet, or custom CSS rules that get loaded by magidoc? I can work with HTML inside the markdown, but I would then like it if I could style it as well. I'd need a custom style sheet because of the single :before pseudoselector:
HTML
<ul class="customUnorderedList">
<li class="customListItem">Black: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/323232.png" alt="Black"></li>
<li class="customListItem">Blue: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/257cff.png" alt="Blue"></li>
<li class="customListItem">Brown: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/a3501a.png" alt="Brown"></li>
<li class="customListItem">Gray: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/969696.png" alt="Gray"></li>
<li class="customListItem">Green: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/3eff4e.png" alt="Green"></li>
<li class="customListItem">Pink: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/ff65a5.png" alt="Pink"></li>
<li class="customListItem">Purple: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/a63de8.png" alt="Purple"></li>
<li class="customListItem">Red: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/ff3232.png" alt="Red"></li>
<li class="customListItem">White: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/e1e1e1.png" alt="White"></li>
<li class="customListItem">Yellow: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/fff359.png" alt="Yellow"></li>
<li class="customListItem">Unknown: <img src="https://cdn.favware.tech/img/graphql-pokemon-colours/000000.png" alt="Unknown"></li>
</ul>
CSS
.customUnorderedList {
padding: 0
}
.customListItem {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 0.2rem;
}
.customUnorderedList .customListItem:before {
content: "－";
position: relative;
}
Result
Most of this can already be achieved by inline styles, only the :before cannot.
The alternative rendering would require me to inline list-style: disc !important because the base CSS disables it then it would render like so, which is fine, but it's more beautiful if the text and image are center aligned.
Hi @favna. I think I missed the notification for your comment. Yes, there is a way to provide custom CSS see the property website.options.customStyles. I believe you should be able to achieve what you want with this.
Hi, thanks for the reply. I tried adding the config, following the example from https://github.com/magidoc-org/magidoc/blob/dc634e989c5753019c832d59fa813cd703b7f672/docs/pages/02.Cli/01.Magidoc%20Configuration.md?plain=1#L225 but when I build and preview I get the error that the stylesheet cannot be found.
yarn docs
✔ Determine tmp directories [0.0s]
✔ Select Package Manager [0.2s]
↓ Template already unzipped.
↓ Template already unzipped
✔ Install dependencies [1s]
✔ Resolving template configuration [0.0s]
✔ Load GraphQL Schema [0.0s]
✔ Write variables file [0.0s]
✖ Build template
◼ Move output
Command 'pnpm' failed with status 1 when executed in directory C:\Users\jeroe\AppData\Local\Temp\[email protected]
---- Program Output----
> @magidoc/[email protected] build C:\Users\jeroe\AppData\Local\Temp\[email protected]
> svelte-kit sync && vite build
vite v5.2.7 building SSR bundle for production...
transforming...
"GraphQLDirective", "GraphQLInterfaceType" and "GraphQLObjectType" are imported from external module "graphql" but never used in "src/lib/components/tags/TypeTag.svelte", "src/lib/components/common/text/TypeLink.svelte", "src/lib/components/tags/NullableTag.svelte", "src/lib/model.ts", "src/lib/components/tags/DirectiveTag.svelte" and "src/routes/types/[type]/+page.svelte".
✓ 2521 modules transformed.
rendering chunks...
vite v5.2.7 building for production...
transforming...
✓ 2688 modules transformed.
rendering chunks...
computing gzip size...
.svelte-kit/output/client/_app/version.json 0.03 kB │ gzip: 0.05 kB
.svelte-kit/output/client/.vite/manifest.json 10.07 kB │ gzip: 1.33 kB
.svelte-kit/output/client/_app/immutable/assets/pages.BZ7dBxQt.css 0.05 kB │ gzip: 0.07 kB
.svelte-kit/output/client/_app/immutable/assets/ArgsList.tGPHACmx.css 0.08 kB │ gzip: 0.09 kB
.svelte-kit/output/client/_app/immutable/assets/DirectiveTag.DuCFScKg.css 0.08 kB │ gzip: 0.09 kB
.svelte-kit/output/client/_app/immutable/assets/1.DDNgGNlk.css 0.13 kB │ gzip: 0.13 kB
.svelte-kit/output/client/_app/immutable/assets/FieldDetails.DpqSh-Zn.css 0.18 kB │ gzip: 0.14 kB
.svelte-kit/output/client/_app/immutable/assets/7.lLT_wvMO.css 0.29 kB │ gzip: 0.21 kB
.svelte-kit/output/client/_app/immutable/assets/ChevronDown.DFnX4Nf0.css 2.06 kB │ gzip: 0.67 kB
.svelte-kit/output/client/_app/immutable/assets/CarbonMarkdown.BDx5nu22.css 2.58 kB │ gzip: 0.81 kB
.svelte-kit/output/client/_app/immutable/assets/0.Dc85tgr_.css 755.43 kB │ gzip: 66.56 kB
.svelte-kit/output/client/_app/immutable/entry/start.BAD-48i2.js 0.07 kB │ gzip: 0.08 kB
.svelte-kit/output/client/_app/immutable/chunks/index.DFFuqHd-.js 0.17 kB │ gzip: 0.14 kB
.svelte-kit/output/client/_app/immutable/chunks/stores.BYJ6gFjV.js 0.23 kB │ gzip: 0.17 kB
.svelte-kit/output/client/_app/immutable/nodes/2.CtNBDbQJ.js 0.28 kB │ gzip: 0.23 kB
.svelte-kit/output/client/_app/immutable/chunks/control.qY42S_ji.js 0.50 kB │ gzip: 0.29 kB
.svelte-kit/output/client/_app/immutable/chunks/index.BxYrIctM.js 0.93 kB │ gzip: 0.58 kB
.svelte-kit/output/client/_app/immutable/nodes/1.018KGUBz.js 1.19 kB │ gzip: 0.73 kB
.svelte-kit/output/client/_app/immutable/nodes/5.DuSlSaY4.js 1.54 kB │ gzip: 0.86 kB
.svelte-kit/output/client/_app/immutable/nodes/4.D2YdUNlP.js 1.55 kB │ gzip: 0.86 kB
.svelte-kit/output/client/_app/immutable/nodes/6.BsDOzANE.js 1.58 kB │ gzip: 0.87 kB
.svelte-kit/output/client/_app/immutable/nodes/8.hhh_lVqI.js 1.61 kB │ gzip: 0.87 kB
.svelte-kit/output/client/_app/immutable/chunks/DirectiveTag.B2obSZBC.js 2.63 kB │ gzip: 1.33 kB
.svelte-kit/output/client/_app/immutable/chunks/prism-json.CMKj7kFV.js 2.98 kB │ gzip: 1.28 kB
.svelte-kit/output/client/_app/immutable/nodes/3.DOr8n9N7.js 3.44 kB │ gzip: 1.55 kB
.svelte-kit/output/client/_app/immutable/chunks/index.CmG16L7b.js 4.71 kB │ gzip: 2.41 kB
.svelte-kit/output/client/_app/immutable/entry/app.B29zD9A0.js 7.91 kB │ gzip: 3.07 kB
.svelte-kit/output/client/_app/immutable/chunks/scheduler.C-lJzfX6.js 9.68 kB │ gzip: 3.76 kB
.svelte-kit/output/client/_app/immutable/chunks/Button.CCIy48fN.js 12.48 kB │ gzip: 3.88 kB
.svelte-kit/output/client/_app/immutable/chunks/ArgsList.C4qiMWEG.js 14.41 kB │ gzip: 4.59 kB
.svelte-kit/output/client/_app/immutable/chunks/entry.DbrkG1V1.js 26.60 kB │ gzip: 10.51 kB
.svelte-kit/output/client/_app/immutable/chunks/ChevronDown.Cw10kide.js 34.53 kB │ gzip: 12.17 kB
.svelte-kit/output/client/_app/immutable/nodes/7._X0KLxUQ.js 49.09 kB │ gzip: 10.35 kB
.svelte-kit/output/client/_app/immutable/chunks/CarbonMarkdown.MhWIhPaU.js 85.27 kB │ gzip: 18.26 kB
.svelte-kit/output/client/_app/immutable/chunks/FieldDetails.gW3I2m25.js 155.68 kB │ gzip: 47.71 kB
.svelte-kit/output/client/_app/immutable/nodes/0.F_cdonyr.js 190.18 kB │ gzip: 53.66 kB
.svelte-kit/output/client/_app/immutable/chunks/pages.6PLErxMb.js 330.09 kB │ gzip: 102.19 kB
✓ built in 22.25s
301 / -> /introduction/welcome
node:internal/event_target:1100
process.nextTick(() => { throw err; });
^
Error: 404 /introduction/styles/custom.css (linked from /introduction/welcome)
To suppress or handle this error, implement `handleHttpError` in https://kit.svelte.dev/docs/configuration#prerender
at file:///C:/Users/jeroe/AppData/Local/Temp/[email protected]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/core/config/options.js:202:13
at file:///C:/Users/jeroe/AppData/Local/Temp/[email protected]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:65:25
at save (file:///C:/Users/jeroe/AppData/Local/Temp/[email protected]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:403:4)
at visit (file:///C:/Users/jeroe/AppData/Local/Temp/[email protected]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:236:3)
Emitted 'error' event on Worker instance at:
at [kOnErrorMessage] (node:internal/worker:326:10)
at [kOnMessage] (node:internal/worker:337:37)
at MessagePort.<anonymous> (node:internal/worker:232:57)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:826:20)
at exports.emitMessage (node:internal/per_context/messageport:23:28)
Node.js v20.11.1
ELIFECYCLE Command failed with exit code 1.
For a more detailed output, run with --stacktrace
I also tired setting an absolute path through fileURLToPath(new URL('./styles/custom.css', import.meta.url)) but while the code does build if I do that, I then get this error in the browser:
Not allowed to load local resource: file:///F:/favware/graphql-pokemon/docs/styles/custom.css
When I validate the path by running just this as a JS file then I can see that it is correct:
import { fileURLToPath } from 'node:url';
console.log(fileURLToPath(new URL('./styles/custom.css', import.meta.url)));
Here is the branch with my changes: https://github.com/favware/graphql-pokemon/pull/964
It cannot be a file path. It has to be a static asset as specified by the documentation for the field. It needs to be a web URL for it to work.