Im sorry if Im missing somthing basic here, Im new with Pattern Lab
@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
