JosefBredereck on migrate-to-nx-workspace
feat: move dev packages feat: update package structure (compare)
JosefBredereck on migrate-to-nx-workspace
JosefBredereck on fix-engine-config-loading
mfranzke on 1446-migrate-from-node-14-to-node-16-new-lts-support
[skip travis] chore(release): p… fix(twig engine): startup and r… [skip travis] chore(release): p… and 1 more (compare)
mfranzke on 1030-fully-support-htmltwig-suffix
[skip travis] chore(release): p… fix(twig engine): startup and r… [skip travis] chore(release): p… and 1 more (compare)
mfranzke on 1180-deprecate-pattern-parameters
[skip travis] chore(release): p… fix(twig engine): startup and r… [skip travis] chore(release): p… and 1 more (compare)
JosefBredereck on v6.0.1
JosefBredereck on dev
[skip travis] chore(release): p… (compare)
i am using the bodyClass
for theming and use that inside the pseudo-pattern json file.
now, if you list patterns and pseudo patterns that value is not set on the individual pattern containers and not even on the body (which wouldnt be good anyway).
anyone knows on how to get that running? Or is that not possible?
using the node version with twig rendering.
I raised the question probably before but now I have an issue with pattern lab. I need to run it for development locally on HTTPS. The reason I need to embed for one of my projects is a web font from a third-party provider. Sadly this does not support HTTP anymore any only HTTPS.
When I run pattern lab on a GitHub page everything works fine but not for local development. Any idea how to make use of patter lab, while still enable HTTPS? Thanks in advance.
Hi all! I am interested in using pattern lab, but can't get it to install (using npm create pattern-lab
and variations with npm mentioned in closed pattern-lab/patternlab-node#1257 and older (2018) gitter discussion ).
AfterUnhandledPromiseRejectionWarning: Error: Command failed with exit code 243: npm install @pattern-lab/edition-twig
the installation hangs at⠧ ⊙ patternlab → Installing edition: @pattern-lab/edition-twig
Node version: v14.17.6
npm version: 7.16.0
Shell: GNU bash, version 5.0.17 on Ubuntu Budgie 20.04.2 LTS
Thanks in advance!
npm create pattern-lab
, now no more error message after the wizard, but still(node:103589) [DEP0128] DeprecationWarning: Invalid 'main' field in '/home/ingo/.npm/_npx/1e487ca7ecaa91bf/node_modules/emitter-mixin/package.json' of 'y'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)
? Please specify a directory for your Pattern Lab project. (./)
Hi @SBUDoIT , I had similar problems with the installer hanging and circling around documentations.
Finally it was not the gulp, but the grunt version that finished to install.
See @mfranzke 's replies to my error report :
the installation sadly currently doesn't work on Node 16, which should be fixed with the next release of pattern lab.
So far the main workarounds would be to use Node versions equal or below 14, or follow the steps described in this issue: pattern-lab/patternlab-node#1348
npm create pattern-lab
finally works like great even with node 16 now.
Alright, I was going to create an issue on GitHub, but it said I should try here, so, I'll give this a shot.
I'm working on an older pattern lab project that a client gave to me and I'm just trying to get it to compile so I can at least migrate it over to the newer version of pattern lab. So, I can sorta get it to work, but there's a hangup in the running process. I keep getting this error (FYI - I've redacted the file paths):
Error: Missing helper: "class"
at Object.<anonymous> (~/node_modules/handlebars/dist/cjs/handlebars/helpers/helper-missing.js:19:13)
at Object.wrapper (~/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
at Object.eval [as main] (eval at createFunctionContext (~/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:11:100)
at main (~/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:32)
at ret (~/node_modules/handlebars/dist/cjs/handlebars/runtime.js:212:12)
at ret (~/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21)
at Object.renderPattern (~/node_modules/@pattern-lab/engine-handlebars/lib/engine_handlebars.js:69:28)
at Pattern.render (~/node_modules/@pattern-lab/core/src/lib/object_factory.js:210:35)
at module.exports (~/node_modules/@pattern-lab/core/src/lib/render.js:13:18)
at ~/node_modules/@pattern-lab/core/src/lib/compose.js:91:37 {
description: undefined,
fileName: undefined,
lineNumber: undefined,
endLineNumber: undefined,
number: undefined
}
Error rendering patterns
In the old project files there are some helper JS files that are in a helpers
folder (e.g. - helper-class.js
, helper-atomic.js
, helper-recursive.js
, etc.) . I tried copying them over into the newer project under the helpers
folder and that doesn't seem to do anything. So not sure if there's another npm package that needs to be installed or what. Again, this is an old project that I'm just trying to get to compile out.
Ok, I'm getting hung up on something. Couple things, actually.
I have a molecule that is called bar-dark.hbs
which looks like this:
<div class="bar_dark">
<div class="pl-page-wrapper">
<div class="pl-page-margin pad_right_lg pad_left_lg">
{{{outlet}}}
</div>
</div>
</div>
I have a bar-dark.json
file that has this:
{
"outlet": "<p>And then some boxy text. Maecenas faucibus mollis interdum.</p>"
}
So I'm not sure why when it compiles it doesn't pull in the content from the json file?
I also have an atom that is this:
<ul class="social-list">
{{# items}}
<li class="social-list--item">
<span class="social-media-icon--wrapper">
<a class="social-media-icon {{ grunticon_class }}" href="{{ href }}">
<span class="tx-icon tx-default-link">{{ name }}</span>
</a>
</span>
</li>
{{/ items}}
</ul>
But I'm also trying to wrap those around the bar-dark.hbs
content. I've tried this:
{{> molecules-bar-dark}}
<ul class="social-list">
{{# items}}
<li class="social-list--item">
<span class="social-media-icon--wrapper">
<a class="social-media-icon {{ grunticon_class }}" href="{{ href }}">
<span class="tx-icon tx-default-link">{{ name }}</span>
</a>
</span>
</li>
{{/ items}}
</ul>
{{/ molecules-bar-dark}}
But that doesn't seem to work. So I'm stumped on how to get one pattern to nest around another. Not sure if I'm missing something in the docs.
Not sure what the issue is but I've changed some of the parameters in the patternlab-config.json
file and they don't appear to be loading when I run npm run start
.
I've tried to change some of the default theme options, but it appears that they are not taking effect when patternlab starts up. It also appears that it's not loading in my helpers.js
file either. I have this for the theme in patternlab-config.json
:
"theme": {
"color": "dark",
"density": "compact",
"layout": "horizontal"
}
and this is what I have for the helpers:
"engines": {
"handlebars": {
"extend": "helpers/helpers.js"
}
}
Not sure why it's not picking up on those settings. I've also deleted the dependencyGraph.json
per the documentation just in case there was some weird caching going on, but that doesn't seem to help either.
Release v5.15.7 is live (since last week) and brings a lot of updates since our last announcement (5.15.1).
Some of the highlights are:
npm workspaces
environmentrelativeFrom
which works well, but things like pattern linking doesn't work. If I go with the defaults and use a symlink instead (source
--> ../something
, it works well, but I'd prefer to avoid that. The reason for doing this is to be able to have a "live" styleguide, i.e. use the same templates for styleguide as the actual product being built. Is there another approach I haven't seen?
As our currently used major Node version 12 reaches its end of life on 30th of April it might be important to set up a common understanding and communicate on how we would like to handle Node Major version updates, and especially on whether we always switch to either LTS or the oldest maintenance version. I would argue for the latter, as this would ensure the most common setups out there (especially that everybody on lower Node versions should update in their own best interests, regarding security, etc.).
I've as well set up a pull request to include this aspect in the documentation and am curious about your feedback either here or in the PR: pattern-lab/patternlab-node#1411
Hi Folks
I'm trying to add a new status. I've added it in the patternStateCacade, and I've added a color in the pattern-scaffolding.css file as instructed in Using Pattern States. I see the new status in the main pattern area with the correct color, but the pattern navigation pain shows a different colour. I suspect this is because the documentations suggestion to add it in the pattern-scaffolding.css, which is loaded by the main window, thus not available for the navigation. Am I missing something here or is this a bug/oversight/random feature ;) ?
Uncaught SyntaxError: Unexpected token '<' (at scripts.js:1:1)
error in the console of the patternlab localhost server - any insights would be helpful
Got an error today when I tried to add some infos to an atom:
YAMLException: expected a single document in the stream, but found more
error parsing markdown block ---
order: 2
---
title: Lorem Ipsum
---
The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images.
Further reading: [Optimizing Web Experiences for High Resolution Screens](https://bradfrost.com/blog/mobile/hi-res-optimization/)
error processing markdown for atoms-checkbox
I just added the title to the markdown-file (test.twig, test.md). Any idea how to make the MD-documentation work?
Using Patternlab with NodeJS (v8.19.2)
After upgrading to version 6.0.1 I got an error that the configurtion is not correct with the following link:
https://patternlab.io/docs/editing-the-configuration-options/#heading-engines
After comparing an existing projet to a new one I figured out the issue.
From the documentation:
"engines": {
"handlebars": {
"package": "@pattern-lab/engine-handlebars",
"extensions": [
"handlebars",
"hbs"
],
"extend": "helpers/*.js"
...
}
}
Inside the handlebars node it lists 'extensions' in a new project this is now 'fileExtensions' - not quite sure which is the correct one. I got rid of the configuration error by changing it to 'fileExtension'. Now everything was working fine. I later tried to switch it back to only 'extensions' and could not reproduce the error anymore. I wonder which is the correct configuration and which is the wrong one.
Q3: Links on the documentations are mostly broken. Especially in the examples - https://patternlab.io/resources/
Just in case you like to add a new one - you can add this: https://lab.n8d.studio/htwoo/htwoo-core/