@patternlab/engine-twig now contains the twing javascript engine to support twig templates. This is a recent effort done by me. Feel free to test it and file issues when you encounter problems (https://github.com/pattern-lab/patternlab-node/issues)
Hi I'm having issues using JavaScript with Pattern Lab. I put my new header.js file into the public/js folder. Ran npm patterlab:build, but when I click on my toggle button I get an error in the console reading "03-templates-00-home.rendered.html:84 Uncaught ReferenceError: chevronToggle is not defined". In patternlab-config.json the js folder is placed in the public folder "js": "public/js". Not sure what I'm doing wrong.
@GennieCooper_twitter do you have the chance to provide a link for that ? This would heavily simplify understanding the problem.
Hi, we're trying to customise the styleguide side of our pattern lab created design system in a couple of very small ways (change the page title to start with). We've tried the uikit-workshop and uikit-bare but the page title seems to get overridden on build. We're changing the index.html inside the styleguide folder, and 00-head files.
Hi @hannah-bourke-tw,
the easiest for some simple content changes like this is to use the standard uikit-workshop „as is“ and configure the provided options within your PL installation themselves.
To change either the style guides pagetitle (<title> tags content) or the label displayed next to the logo within the style guide bar (left or top), you could do the following:
- Pagetitle: Edit the entry
"title"within the file/source/_data/data.json - Label next to the logo: Edit the entry theme.logo.text within the file
/patternlab-config.jsonfile:(…) "theme": { "color": "light", "density": "compact", "layout": "vertical", "logo": { "text": "Patternlab", (…)
Changing the files content out of https://github.com/pattern-lab/patternlab-node/tree/dev/packages/development-edition-engine-handlebars/source/_meta directly would lead to difficulties on doing updates etc., so it's better to use the variables provided in there like {{ title }}
And you've additionally even already identified correctly that the contents out of styleguide are being generated with every build, which even also leads to the previous suggestion on using the configuration options and variables provided instead.
Changing the title within the
/source/_data/data.json doesn't seem to have any effect - is there something else that needs to be changed as well?
And changing the variables within
/source/_data/data.json even also didn’t work for me either on a fresh installation - I would as well need to follow up on that later on.
Using gulp to build, recently experiencing an issue with the build hanging @ Starting 'buildPatternlab'....
/**
* Build Pattern Lab.
* @param {function} done callback function.
* @returns {undefined}
*/
function buildPatternlab(done) {
patternlab
.build({
cleanPublic: config.cleanPublic,
watch: false
})
.then(() => {
done();
});
}Curious if anyone has thoughts as to why it's hanging or perhaps guidance on increasing the verbosity of the log.
Hola. Is anyone familiar with a PL implimentation that doesn't use a templating engine?
For my use case I would love to just be able to write with php files using php vars like so:
<div class='card'>
<?= $image; ?>
<h3><?= $title; ?></h3>
<a href="<?= $permalink; ?>">
<?= $cta; ?>
</a>
</div>
Where do we add CSS rules for the styleguide that will appear consistently when viewing several patterns or an individiual pattern?
Some rules I've added to source/css/pattern-scaffolding.css work fine when viewing several patterns (eg /?p=viewall-atoms-tokens) but don't appear to load when viewing an individual pattern (eg ?p=atoms-brand-colors).
Inspecting in browser dev tools shows CSS rules (when viewing an individual pattern) from /styleguide/css/pattern-lab.css - This is in /public and does not exist in /source
2 replies
1 reply
Hi, super new to this and wondering why all the video I find use node-edition-gulp but that is archived. I don't know how to run the thing, and the documentation just says
"Watching for Source File Changes
Manually generating the Pattern Lab website after each change can be cumbersome. The Node version of Pattern Lab comes with the ability to watch files in the ./source/ directory for changes and re-generate the site automatically. The Pattern Lab website can also be automatically reloaded.."
Where do I find any documentation on how to do this without the gulp version?
21 replies
8 replies
Still trying to get something I can work with,
I have now successfully installed both the vanilla pattern lab (using npm create pattern-lab) as well as the generator starter kit (https://github.com/weareyou/generator-patternlab-starterkit), but I am still struggling to use either in a functional way.
with the vanilla version I am able to install it successfully, but still unable to get the browser sync going to actually run it, I am attempting to use commands like npm patternlab:serve, or npm run start neither of which open a browser.
with the generator version the browser opens just fine and I can play around with the patterns there. But the use of the supple framework is a little out of my league and I am having trouble simply creating and using styles with it. Are there any resources you can suggest that have information on how this works supple works within patternlab?
2 replies
Are there more examples of integrating patterns out there beyond what is on https://patternlab.io/docs/including-patterns/? I am editing a pattern lab someone else set up and having issues importing some patterns into the larger pages. Sometimes it requires a json file and sometimes not. Wondering if there's something simpler I've missed?
{{#containerLabel}}
<label>{{containerLabel}}</label>
{{/containerLabel}}
{{#dropdownMenuMultiple}}
{{>atoms-dropdown-menu-multiple}}
{{/dropdownMenuMultiple}}When trying to run vanilla install it keeps asking me for uikit-workshop, I can confirm it is in the package.json dependencies as well as in the node folder @pattern-lab/uikit-workshop. Any idea why it is not finding the package?
% patternlab serve
⊙ patternlab → serve: Serving your files …
Pattern Lab Node v5.15.0
Pattern Engine handlebars: good to go
Pattern Engine mustache: good to go
Could not find uikit with package name @pattern-lab/uikit-workshop. Did you add it to the 'dependencies' section in your 'package.json' file?
2 replies
found this (https://stackoverflow.com/questions/31032265/sass-is-not-compiling-with-patternlab-node) seems like patternlab 2.0 does not include tasks to compile scss, link to brians' comment (www.brianmuenzenmeyer.com/adding-common-gulp-tasks-to-pattern-lab-node) is broken, found it in wayback machine but the described solution requires gulp which I think is not included in this comcast build linked above. How do I get the css to work with this build (the only version of 2.0 I can successfully install)?
I've understood from reading various issues and comments here and there that the direction patternlab is going to avoid adding syntactic sugar to templating language. For example, the "shorthand syntax" in favour of using real twig namespaces. This to make the templates more portable. I've been a big advocate of using the same templates in the patternlab as in production, and we've essentially tried to reimplement the shorthand syntax whenever we needed it, so I welcome this direction.
However, the documentation (for example on including patterns) doesn't say anything about this deprecation; is that just an oversight?
2 replies
5 replies
2 replies