Updating examples in components will trigger a correct build. But if you for example edit an .md file (e.g. decluttering.md in Lime Elements, you have to re-run npm start to be able to see the results of your changes.

clicking on a a first level panel-link which is open (active) must close it again

Also these first level links don't need to update the URL ;)

Editable examples

It woulld be really nice if the code in the examples were editable in the browser. Are there plans for implementing such feature?

links in table of contents (`SUMMARY.md`) don't work

These links don't work.

Also what is the point of having duplication of the documentations? A newer version of these content is already available in the README.md file.

Feature request: give examples anchors, to make it possible to link to a specific example

In the docs for Lime Elements, we have several components that have a lot of examples, and I regularly find myself wishing I could link straight to an example, rather than just to the docs for the component along with a sentence about scrolling down to example such-and-such.

First line of text in example files automatically becomes an H5. Better if it's left for the users to decide.

It's really har to write a nice documentation, and start a section from a h5. It will make it really hard to organize the content properly.

Either leave this up to the user and let them type wha they want; or make it a h1 or h2 by default.

/**
 * This always becomes H5
 * description text…
 * @link example.ts
*/

rename css variables for "--contrast-" as they interfere now with Lime Elements which have the same variable names but doesn't support dark mode yet

Make it possible for consumers to add their own logotype

So they either choose to put an image up there, or simply some text

Lime Elements logotype:

long `<code />` blocks break the UI

before:

this adds sideways scrolling

after:

Need visual styles for blockquote

Make these Docs-specific components, features of Kompendium

Improve progress and error feedback

1. the `dev-server-progress-bar` scrolls away

While developing, it's important to clearly see the dev-server-progress-bar, when the documentations are being built. This gives crucial clues to the consumer about whether the build is ongoing, or it has failed for example.

But since this element has a `position: absolute;`, it scrolls away with the content.

Screen.Recording.2023-09-21.at.13.26.25.mov

2. the `dev-server-modal` covers everything

When errors appear, the dialog that displays the errors covers up the entire page. Looks not so nice.

Screen.Recording.2023-09-21.at.13.46.32.mov

clicking on search results doesn't work in Safari on iOS or Mac OS

Screen.Recording.2021-12-02.at.09.28.12.mov

The "Powered by" watermark is OFF

it goes out on the right side.

_Default value_ field shows the name of the constant rather than the value of the constant

I assume there isn't really anything we can do about that, since I assume we're not parsing the code ourselves, but get these values from the docs Stencil outputs… but still, I wanted to report it just in case… It wouldn't be the first time @jgroth had pulled of some real magic 😊

Switching page won't scroll-to / start-from top of the page

If you scroll to the bottom of a page and then switch the page from navigation panel, the view will get updated but it display the bottom of the new page. You should manually scroll to top of the page.

Changes in the MD files which are NOT inside the `components` or `examples` folders do not trigger the watchers

you must run npm start again to see the changes.

Need a "Copy" button on the code side

URLs that start with the same word become all active in the navigation menu

`npm install` on macOS throws error

When running npm install for this repo on macOS, the first run gives the following output:

> [email protected] install /Users/ads/src/kompendium/node_modules/jest-haste-map/node_modules/fsevents
> node install.js

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'nan'
Require stack:
- /Users/ads/src/kompendium/node_modules/jest-haste-map/node_modules/fsevents/[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at [eval]:1:1
    at Script.runInThisContext (vm.js:132:18)
    at Object.runInThisContext (vm.js:309:38)
    at internal/process/execution.js:77:19
    at [eval]-wrapper:6:22
    at evalScript (internal/process/execution.js:76:60) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ads/src/kompendium/node_modules/jest-haste-map/node_modules/fsevents/[eval]'
  ]
}
gyp: Call to 'node -e "require('nan')"' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
gyp ERR! System Darwin 20.2.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/ads/src/kompendium/node_modules/jest-haste-map/node_modules/fsevents
gyp ERR! node -v v14.15.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

Despite this, the run does finish. After this first run, no files are changed. Running npm install again, the install passes with no errors, but updates the package-lock.json file.

Improve readability

The lines are a bit too long so it makes it harder to read the text when there is a lot of it.
Also, the font size could be a bit larger

In the generated docs, show `Optional: true/false` (or similar), when neither `!` nor `?` is specified in a prop

If we have neither ! nor ? in a prop, the docs show this:

Feature request: Hide properties marked with `@private` (on non-private components)

We have a PR in lime-elements that adds a property to a publicly documented component, but we don't really want to advertise this property, as we may change it in the future, but we need it internally for now. As seen in the screenshot below, the property has been marked as private, and we do get a little flag about that neatly rendered, and that's nice. But I'm think it would perhaps be better to just hide the documentation of that property completely?

Make the debug button available for all builds, not only for local builds

layout breaks too early and scrolling becomes a pain

It's so annoying to inspect any component, since the layout breaks into a single column and scrolling in the page becomes too hard since you will end up scrolling in code sections, unless you move the mouse pointer to the side of the page.

Additionally, as soon as the inspector opens, page's current scroll position changes, and it becomes too hard to know what elements you intended to inspect.

Screen-Recording-2022-01-19-at-13.49.26.mp4

Preferred from the PR:

.docs kompendium-markdown {
    display: block;
    width: calc(50% - 2rem);
}

search input on iOS gets double icons

Allow hiding the documentation for types by adding `@private` to the docblock

Originally posted by @adrianschmidt in Lundalogik/lime-elements#1793 (comment)

Hmm… types that are documented are probably shown regardless of whether the component we think they "belong to" is marked as private or not. But I guess there's a docblock for the type too, have you tried adding @Private to that? If that doesn't work, that seems like a good fit for feature request in Kompendium.

Added and pushed. Let's see what happens online here lundalogik.github.io/lime-elements/versions/PR-1792/#/type/DockItem

I think we should open a feature request in Kompendium for this. I'm summarising the problem a little here to have a concise comment to reference in the issue in Kompendium 😊

The @private tag is set on the interface: