It has a lot of updates, thanks to @mfranzke again 😊
1 reply
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.
6 replies
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.
4 replies
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!
Deleted node_modules etc. and did a fresh start using only
npm create pattern-lab, now no more error message after the wizard, but stillthe "installing" message with the spinner keeps spinning for several minutes now.
Maybe I am just too impatient. Can't even tell if it is going to finish eventually.
5 replies
(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. (./)But then there is no 'start' target or anything useful in the directory.
1 reply
1 reply
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
It has a lot of updates, thanks to @mfranzke again 😊
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 patternsIn 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.
5 replies
3 replies
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.
2 replies
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.
3 replies
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:
- a fix for „subgroups that cannot be hidden“ (pattern-lab/patternlab-node#1368, thanks a lot to @JosefBredereck for that!)
- enabling pattern lab to work in a
npm workspacesenvironment - including additional twig syntax features (pattern-lab/patternlab-node#1367, thanks a lot to @mogsie for that !)
- providing the possibility to define the initial viewport width even for reoccurring visits (pattern-lab/patternlab-node#1386)
- some dependency updates
- as well as moving some dependencies to devDependencies, which should shrink the amount of installed dependencies on consuming pattern lab
- and some minor bugfixes
9 replies
relativeFrom 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?
8 replies
Node version 12 end of life and how we should handle the update
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
10 replies
3 replies
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 ;) ?
3 replies
1 reply
Uncaught SyntaxError: Unexpected token '<' (at scripts.js:1:1) error in the console of the patternlab localhost server - any insights would be helpful
1 reply
3 replies
4 replies
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-checkboxI 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)
1 reply
https://github.com/pattern-lab/patternlab-node/releases/tag/v6.0.0
5 replies
https://github.com/pattern-lab/patternlab-node/releases/tag/v6.0.1
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.
2 replies
Q2: Sometimes I have code documentation in my markdown files, but there are no styles configured for the web component. after adding a manual css link in there I got it working.
So I wonder now is this a general bug or is ther some configuration missing?
2 replies
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/
5 replies