pangolinjs / core Goto Github PK

Integrate some sort of tool that allows taking screenshots and annotating them for easier bug or feature request reporting.

This is inspired by GitLab's Visual Review feature.

The head CSS links and scripts are generated in a very simple manner which worked when there were only a few files. Since the introduction of the modern build, this approach became a bit unwieldy.

Scripts that are loaded with type="module" aren’t affected by the defer attribute. The W3 Validator even says it’s invalid HTML.

Current scenario:

• Application uses users location (which is only allowed from secure location, which includes localhost)
• Dev server is run through træfik reverse proxy with a different host name as localhost so I need to use HTTPS.
• The websocket url is always ws://, but it should be wss:// if the page is served via HTTPS.
• To support ws:// and wss:// at the same time, we need a different port for wss:// (like http and https uses different ports). træfik would handle this, so the websocker server might still only listen on port 3001, but the port in the browser needs to be different.

Currently the styleguide only supports the very minimum for documentation (a title and a short description). An expansion to a full blown markdown “textarea” would be interesting.

The configuration directive devServer in pangolin.config.js suggest, that this would be used by the webpack dev server, but it obviously is not.

Please allow this by e.g. using all settings from store.state.config.devServer as default and override the necessary settings like in dev.js ll. 60 - 71. This way it would be possible to set something like disableHostCheck or `allowedHosts' in the project settings, which I need, because the dev server is accessible through a local development proxy.

Somehow the fancy webpackbar is still enabled during GitLab CI.

Due to some changes in webpack the warning is shown. It goes away, when I uncomment the line config = require(path.join(context, 'pangolin.config.js')) in get-config.js.

It's about time to implement a unit testing framework for styleguide project authors to use. The choice will be permanent for this major version (v3.x), so it should be a wise one :)

Based on research by Harry Roberts (https://csswizardry.com/2018/11/css-and-network-performance/), asynchronous JavaScript should be referenced before any blocking CSS.

This has to be corrected in these files:

• https://github.com/pangolinjs/core/blob/master/lib/nunjucks/generate-preview-head.js
• https://github.com/pangolinjs/core/blob/master/ui/templates/base.njk

Coloring in the console can be achieved by a small helper function library like saurabhdaware/projectman@413355b.

The dev socket for auto-reload isn't disabled for the dev build. This hasn't been a problem until the recently introduced dev server proxy.

Solution: Disable socket in dev build.

The default config is a long list of if statements, which is very hard to read. A real default config object would be nice. This may be achievable with something like https://github.com/TehShrike/deepmerge.

11ty introduced relative paths for Nunjucks: 11ty/eleventy@4e0eddf#diff-466c0bd9f535df3ab417f301360293b9

This is a long-lasting issue I have with the current Nunjucks implementation.

Previous styleguide versions had a preview build mode which generated prototypes without the styleguide CSS and JavaScript.

Use webpack to handle CSS url()s and assets.

Re-integrate icon toolchain from styleguide v3 but with more options:

• Copy loose files (Already handled by copy plugin)
• Create SVG sprite
• Create icon font (Icon fonts are considered bad practice and shouldn't be used anymore)

The licensing should be made clear:

• Pangolin is MPL
• Pangolin UI is MIT
• Output in dist or dev is whatever someone wants

I just found out, that an invalid .stylelintrc.json causes the dev task to hang. No error is printed, it just hangs. Invalid means in this case a missing comma, at the end of a line. When starting the build task the following error is printed out, which actually somehow points in the right direction.

(node:27) UnhandledPromiseRejectionWarning: JSONError: JSON Error in /build/frontend/.stylelintrc.json:
Unexpected string in JSON at position 796 while parsing '{	"extends": "stylelint-config-sass-gui'
    at module.exports (/build/frontend/node_modules/cosmiconfig/node_modules/parse-json/index.js:26:19)
    at loadJson (/build/frontend/node_modules/cosmiconfig/dist/loaders.js:14:12)
    at Explorer.loadFileContent (/build/frontend/node_modules/cosmiconfig/dist/createExplorer.js:226:12)
    at Promise.resolve.then (/build/frontend/node_modules/cosmiconfig/dist/createExplorer.js:248:21)
    at <anonymous>
(node:27) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:27) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Done in 9.72s.

The command is run inside a docker container with NodeJS v8.11.3 and Yarn 1.6.0.

A JS error is thrown, when opening the index prototype on localhost:8080, and the frontend is optically broken.

Version: 4.6.0-beta.1
Command: yarn dev
Error message from browser console: Uncaught ReferenceError: webpackJsonp is not defined

Use the reference Sass implementation dart-sass (https://github.com/sass/dart-sass) instead of node-sass.

require works with non-JS assets like PNG files. Unfortunately the returned file path is not very usable at all.

Investigate!

babel-preset-env looks at the .browserslistrc and only transpiles ES6 to ES5 that actually needs transpilation: https://github.com/babel/babel-preset-env

babili is a next generation JavaScript minifier that can minify ES6: https://github.com/babel/babili

With PostCSS a config file can be used to add CSS transformation modules on a per project basis: https://github.com/postcss/gulp-postcss

Simplify section code copy process by including a copy button: http://prismjs.com/plugins/copy-to-clipboard/

Hi, I opened a similar ticket an hour ago, but now the issue I get is similar but different

Now the installation runs until the end, however when I try to create a project in the end I still get:

npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm ERR! Cannot read property 'match' of undefined

Due to a hardcoded localhost value for the listening interface of the webpack dev server, it is not possible to run the dev server inside a docker container and expose the port to the host.

The problem could be easily fixed by changing dev.js line 55 to server.listen(serverPort, '0.0.0.0', () => { to make the dev server listen on all interfaces. The websocket server is already listening on all interfaces.

Some options for ESLint or stylelint are only available via a CLI flag. The current solution doesn’t pass options to the linter.

Implement custom Nunjucks filters and tags through a config file in the project's config folder.

The current implementation for resetting component documentation styles isn't that bad (all: initial). But it doesn't make these elements immune to all styling from the author stylesheet.

Iframes are a possible solution, but they are a hassle for sizing. Instead the Shadow DOM looks like a very good alternative. Browser support isn't quite there, but a polyfill is available.

• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
• https://www.smashingmagazine.com/2017/07/documenting-components-markdown-shadow-dom/
• https://github.com/webcomponents/shadydom
• https://github.com/WebComponents/webcomponentsjs

Test all branding options and fix those which are not applied properly.

Please output any exception that might be thrown when requiring pangolin.config.js in get-config.js ll. 17 - 21. This will make it easier to find issues with an invalid configuration.

The separation of HTML/Nunjucks and webpack isn't that great. There are a few possibilities to resolve this:

• https://github.com/jantimon/html-webpack-plugin
• https://github.com/at0g/nunjucks-loader
• https://github.com/itgalaxy/nunjucks-webpack-plugin

Also possible: Write a custom loader/plugin for Nunjucks handling in webpack.

The table width is limited by the same 35em as the default typography. But tables should be allowed to grow bigger.

The custom section block for component docs works but requires too much boilerplate work. Evaluate alternatives. A great way seems to be Markdown combined with some extensions, as found in https://vuepress.vuejs.org/guide/markdown.html.

When having an umlaut in the filename the next character is converted to uppercase. The regex currently used should be extended or replaced to accommodate this case.

Add universal front-matter to pages and component docs for meta information like the title. This should make it easier to get meaningful information for global templates like the navigation thing.

The next major release of webpack (v4) includes a lot of performance optimization. It's pretty much essential to upgrade to this version.

The hash-link beside the component headings and the footer-link CSS inherit styles from the author stylesheet. Add all: initial to reset all styles.

Possible solutions:

• https://github.com/DevExpress/testcafe

Replace the old Front End Styleguide branding with the new and shiny Pangolin.

Finally GitHub introduced real CI/CD 🎉

Let's switch to the new YAML syntax which is a lot nicer than the weird predecessor.

Docs: https://developer.github.com/actions/

Currently the dev server quits rather forced by hitting Ctrl + C. A graceful quit like the one used by docker-compose might be worth exploring.

We already have a separate CLI package and noone should install this one globally. For easier maintenance, the CLI part of this package should be stripped down to only the necessary commands for standalone execution.

webpack-chain is a great project by Mozilla which allows modification of the webpack config. It's a lot more advanced than a simple merging of two configs.

This allows direct modification of loader and plugin configuration on a project level.

Add a file watcher to component config files <component>.json and regenerate file tree.

If require points to a PNG file, the modern build fails due to missing loaders.

For images in CSS the file-loader ist missing: https://github.com/webpack-contrib/file-loader

Add full logo to component page's footer. A small link to this styleguide repository may be a good idea as well :)

The UI is more like a proof of concept than something usable. It lacks the following:

• Load sidebar and page data from JSON files with AJAX
• Fuzzy search components (simple search comparable to the old v4 search)
• Collapsible tree (similar to an editor or file manager sidebar)
• Conservative space management (the components should be the focus, not the chrome around them)
• Use Vuetify and especially their treeview

The framework of choice is Vue.js.