markdowndata with an object with the filenames [src/posts/post1.md => post1] of all markdown files as keys, and assign their frontmatter (=metadata) to it:.use((files, metalsmith, done) {
const path = require('path');
const metadata = metalsmith.metadata();
metadata.markdowndata = {};
function filename(filepath) { return path.basename(filepath, '.md'); }
Object.keys(files)
.filter(key => key.endsWith('.md'))
.forEach(key => {
const filemetadata = Object.assign({}, files[key]);
delete filemetadata.contents;
delete filemetadata.stats;
metadata.markdowndata[filename(key)] = filemetadata;
});
});
done();
});
- What is the relationship between this metalsmith community and SegmentIO?
- I can imagine contributing to documentation (as I figure things out myself!) Should I just submit PRs?
- Where are the metalsmith.io source-files held?
:tada: Great news @webketje ! Thanks so much for taking the initiative on this :pray: Keep us posted and let us know if/how we can meaningfully help.
(I just found the DevRant post I guess you and @BurgundyIsAPublicEnemy were talking about: https://devrant.com/rants/2935556/metalsmith-is-an-older-but-still-awesome-nodejs-static-site-generator-due-to-met )
markdown>discover-partials>permalinks>layouts pipeline and I have issues:- my
.hbsfiles are compiled, but they stay.hbs, nothing renames them to expected.html, while.mdfiles are compiled and renamed properly - I can't use partials in entry
.hbsfiles, only in layouts. In entry files, all partials stay{{>partial}}(not compiled) - how do you generate canonical canonical/og:url meta values? I'm doing
{{#if isHome}}{{siteUrl}}{{else}}{{siteUrl}}/{{path}}{{/if}}, wheresiteUrlis meta value with my domain, andisHomeis set in the.hbsfile responsible for generating homepage to true, but it feels like there should be a better way?
.source()only accepts a single path which doesn't even support glob it seems, and declaring everyting that shouldn't be read by metalsmith with .ignore() is waaay too much (js/ts/sass/svg/ico/manifests, ...).currently I'm adding my own plugin that clears everything that isn't hbs/md from files object, but this is just not very user friendly
- you need to use metalsmith-rename after the transform, ex. for my own:
.use(rename([[/\.md$/, '.html']])). - this can be done with metalsmith-handlebars-x (is compatible with metalsmith-layouts, but haven't tested with in-place as you can have your own handlebars markdown helper
{{#markdown}}) - haven't run into this issue, but I usually define a
nav.ymldata file with objects for each top-level page with a label & url key ({ label: 'Home', url: '' }). The output is iindeed{{ siteUrl }}/{{ path }}, but I don't need theisHomevariable. - For running metalsmith on parts of the
.source()directory, you could use metalsmith-branch.
It's a half a decade old issue with 3 PR'd fixes and no merges that completely breaks my build :(
date to generate permalinks
2021-05-22-0.0.0.md (a release notes for versin 0.0.0 of something), it is transpiled from markdown to 2021-05-22-0.0.0, and then it looks at .0, assumes it's an extension it doesn't have any transformer for, leaves it be, without appending .html at the end
.html permalinks ignores it as well
npm i --save git+https://github.com/arccoza/metalsmith-permalinks which includes the date fix. I don't use the in-place plugin, I've had similar issues as you before.
file.path values are going to be pointing to source .jade files, so using them in hrefs is going to produce invalid URLs. this is because in-place and layouts plugins don't touch this value at all. collections sets it, and than permalinks overwrites it, and everything that uses it in between is producing incorrect outputs. and you need this value during render time to make pagination work
the only option is to just write my own plugins
I hope I'm blind and I've missed something obvious, because as it seems it's either write my own plugins, or migrate to a different static site generator, wasting a lot of time either way
'Wasting' -> taking
Kevin has already explained, that the metalsmith community is at a difficult stage, with no active maintainers who have direct access to the repo.
I'm using metalsmith too, and it's an uneasy relationship. But that's. Just how it is rn 🤷♂️
@darsain I haven't used pagination myself. You will eventually get there tweaking the order of the plugins. For my current website, you can see I put layouts after permalinks: https://github.com/webketje/webketje.github.io/blob/gh-pages/index.js#L95, I did that for the same reason you mentioned, you just have to target *.html files then.
Metalsmith follows Linux ecosystem philosophy (compare with writing a one-line bash script for repetitive tasks). Unlike with other generators/ build tools, creating a custom plugin is so trivial that it is meant to be common to create your own plugin e.g., this plugin I came up with in 5min will dump a log of global metadata every time it is executed:
var iteration = 1;
module.exports = function metadataDumperInit(logName) {
return function metadataDumper(files, metalsmith, next) {
var logPath = 'logs/' + (iteration++) + '_' + logName + '.json';
files[logPath] = { contents: Buffer.from(JSON.stringify(metalsmith.metadata(), null, 2)) };
next();
};
};
// usage: .use(metadataDump('after-collections'))
* metalsmith-correct-html
* metalsmith-exiftool
* metalsmith-mangle-names
* metalsmith-mat2
* metalsmith-minify-avif
* metalsmith-minify-css
* metalsmith-minify-css-attributes
* metalsmith-minify-gif
* metalsmith-minify-html
* metalsmith-minify-jpeg
* metalsmith-minify-js
* metalsmith-minify-png
* metalsmith-minify-svg
* metalsmith-minify-tags
* metalsmith-minify-webp
* metalsmith-mogrify
* metalsmith-remove-unused-classes
* metalsmith-remove-unused-css
* metalsmith-remove-unused-ids
* metalsmith-scss
* metalsmith-select
* metalsmith-subset-font
* metalsmith-ts@chowderman that's impressive, thank you for sharing!
metalsmith-ts is a really good idea.
A lot of these plugins seem to be duplicates of existing plugins though. What compelling reason was there to publish metalsmith-minify-html when there is the established metalsmith-html-minifier? Why not create pull requests to those repositories instead of reinventing the wheel? Similarly, all of minify-png/jpeg/gif/webp can already be done by the single, established metalsmith-imagemin.
Putting a plugin on the NPM registry is a serious thing as it is almost irreversible.
My concern is that these new plugins have no tests & no coding style rules whereas the existing alternatives do, and putting them on the NPM registry at this stage, all at the same time, is premature, or confusing (in case of duplicate functionality). Will you be able and/or willing to maintain the plugins & NPM updates for 20 plugins? Should you agree with this reasoning for (at least some of) your plugins, there is an option to unpublish the packages from NPM within 72h.
You may completely disregard this opinion, but since you were asking for it, here it is :)
You can publish anything on NPM, but the official metalsmith plugin registry will be stricter in accepting new plugins.
I'll try to publish some extra guidelines about those soon (tests, NPM, duplicate functionality)
<cite class="news">...</cite> HTML elements, but the plugin is a Mediawiki PHP extension. You could make a metalsmith plugin using cheerio but a better idea would be to just load a JS file and do an XHR request on the front-end & retrieve the linked page's <meta description> or <h1> title. Here's one such library that you could use for the popup: https://atomiks.github.io/tippyjs/
Need some help here.
My user has updated Node.js to the latest version on a Mac.
And updated also the packages for the Metalsmith generator.
This process went well!
But when rendering the static site with metalsmith the output is suddenly disastrous.
The used metalsmith-html-minifier, throws away a lot of " (double quotes) from the HTML tags. Not all, but a lot. Like "<meta name=apple-mobile-web-app-status-bar-style content=black>". The attribute values, are quoteless.
I disabled the minifier, so we could go on.
But the SASS compilation does also a strange thing with copying/creating the compiled stylesheet. I'm not sure it's even a SASS problem. But the generated/compiled file, contains a SPACE at the beginning of the filename. Resulting in a filename " style.css" ("[SPACE]style.css"), never to be located by the webpage, no styling at all.
In the metalsmith-sass node-module I see generated file data used like "scss\style.scss" and "css\style.css".
I see a BACKSLASH s, which could be interpreted as a SPACE, as seen by regular expressions.
Which could be the INSERTION of a space in front of the filename. But that would also mean, when '\s' leads to a space. A filename "[SPACE]tyle.css". But that doesn't happen also. Only a new file " styles.css", with a SPACE in front.
It's a mystery. I must say, the metalsmith project worked a couple of years, without any problems. But now with the node_modules upgrade, everything clashes.
Any ideas?
Hi @FedPete ,
I'd need to run your setup to get a full picture of what is causing your issues. Do you have a repo on Github? Have you tried setting DEBUG=metalsmith-* for clues? It's normal that minifier strips quote attributes (it's a minifier after all, quotes are bytes, and it's still valid HTML). If you don't like this behavior, see https://github.com/whymarrh/metalsmith-html-minifier#options and set removeAttributeQuotes: false, you don't need to disable it.
I've used metalsmith-sass for almost every metalsmith project I've done and never experienced this. One thing that could be the issue: if you use the permalinks plugin, and your SCSS file accidentally has a NUL or other invisible character in its filename, some slug function may convert it to a space before the sass plugin runs. Try renaming the file (Ctrl + A -> remove all chars, and rewrite it)
Thanks you for the quick resonse.
'strip quotes' never knew that one. I'm more following HTML standards ... attribute values must use quotes. But it seams a browser accepts this. It's smart, but why do we have standards? ;) So I learned something.
So as I understand the real problem is this SASS file copy thingy. When I examined this, I saw the missing quotes, so I thought that was the real problem. But now unrelated.
As I understand the process, SASS converts ./scss/style.scss into ./scr/scss/style.css. Then the file is copied to ./build/css folder and deleted on the 'scr'. So, who does this copy? SASS or Metalsmith?
Your hint on a invisible character is something I will investigate. Because it all started when the user renamed the source file, for unknown reason. and due to corona I need to work remotely. I'll keep this thread updated.
metalsmith-sass, I had a brief look at the source, it works like this:- Metalsmith reads the SCSS files in memory
- metalsmith-sass transforms the contents of SCSS files into CSS, it only deletes partial SCSS files (prefixed with _) because they are imported automatically by SASS
- The output path is built by joining metalsmith.destination(), metalsmith-sass option 'outputDir', and name of the file.
So if you have astyle.scssfile anywhere insrc:
the file will be outputted tometalsmith .source('src') .destination('dist') .use(sass({ outputDir: 'assets/css' })./dist/assets/css/style.css
I got this message when tried to run this command
npm install --save-dev metalsmith metalsmith-markdown metalsmith-layouts jstransformer-handlebars
2 replies