jgroth / kompendium Goto Github PK
View Code? Open in Web Editor NEWDocumentation generator for Stencil components https://kompendium.dev/
License: MIT License
Documentation generator for Stencil components https://kompendium.dev/
License: MIT License
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.
It woulld be really nice if the code in the examples were editable in the browser. Are there plans for implementing such feature?
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.
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
*/
dev-server-progress-bar
scrolls awayWhile 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.
dev-server-modal
covers everythingWhen errors appear, the dialog that displays the errors covers up the entire page. Looks not so nice.
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 😊
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.
you must run npm start
again to see the changes.
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.
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?
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.
On mobile, when you open the side-bar to navigate to another page, somehow it feels more natural to just click outside of it to close it. Currently user has to click the close button.
Note the "target url" changing in the bottom left corner of the video:
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:
The docs have been published:
The interface is still visible in the docs:
Which toggles a class on tab-items
for users of Kompendium,
it's good if they know we're using https://github.com/elviswolcott/remark-admonitions and how they can improve the documentations using their syntax
In the video below, we:
Expected result: the limel-grid example should have no title.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.