Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Ferruccio Aceves
    @SrAceves
    Hello
    Is there a plugin that extracts metadata from all *.md files -- frontmatter, heading tags -- and makes it available globally?
    Kevin Van Lierde
    @webketje
    @SrAceves There is no plugin that provides the markdown-heading-to-metadata feature. However you can easily make the frontmatter of each .md file available to global metadata with a custom plugin,eg. the plugin below will create a metadata key 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();
    });
    scalingapps
    @scalingapps
    I truly love Metalsmith in combination with Fastify to create static sites. I have been playing with Nuxt and similar frameworks, but to in my opinion they are trying to do too much. If you just need a fully static site generator, using Metalsmith seems to be the best and more straight forward options. I would like to see it grow more and have more support from the community. How can I help spread the word?
    Kevin Van Lierde
    @webketje
    Did you know? The first version of the VueJS CLI tool used metalsmith to generate component templates! https://github.com/vuejs/vue-cli/tree/v2#user-content-metalsmith
    Doug Webb
    @DougInAMug_gitlab
    Hello metalsmith-on-gitter! Still using metalsmith for two personal project :thumbsup: I think the Metalsmith project is great, but I do sometimes struggle as someone who isn't a professional developer. Some questions:
    • 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?
    Vikram Chhapwale
    @BurgundyIsAPublicEnemy
    Hello Metalsmith. Totally new to Gitter, but I got introduced to this project by someone on DevRant and now I am here. Someone mentioned they wanted to do a collaboration, so I am ready to get busy.
    Doug Webb
    @DougInAMug_gitlab
    Hey @BurgundyIsAPublicEnemy I just joined this gitter as I started working on some metalsmith project again. It looks like we're only 16 here, whereas there are 1,038 people on main Slack channel. However, Slack is quieter than here, and people have been encourage to migrate to Gitter.
    Kevin Van Lierde
    @webketje
    @DougInAMug_gitlab @BurgundyIsAPublicEnemy The person on DevRant was me :). I'll try to address some of your questions. Segment no longer actively maintains metalsmith and seeks to transfer the rights to another legal entity. We've been in contact with Segment for about 6mo. and we are fleshing out the details for ownership and copyright transfers & migrations, but getting all stakeholders' agreement takes a lot of time and that is the reason development has stalled on the main repository.
    Kevin Van Lierde
    @webketje
    @DougInAMug_gitlab There is no relationship between this Gitter and Segment (except some of the metalsmith ex-contributors are in as members) As for the metalsmith.io code you can find it at https://github.com/metalsmith/metalsmith.io, you can definitely submit PR's though I will eventually rewrite/ restructure the website when all the administrative hassle is over.
    Doug Webb
    @DougInAMug_gitlab

    :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 )

    darsain
    @darsain
    Hi, need help :( I'm using markdown>discover-partials>permalinks>layouts pipeline and I have issues:
    1. my .hbs files are compiled, but they stay .hbs, nothing renames them to expected .html, while .md files are compiled and renamed properly
    2. I can't use partials in entry .hbs files, only in layouts. In entry files, all partials stay {{>partial}} (not compiled)
    3. how do you generate canonical canonical/og:url meta values? I'm doing {{#if isHome}}{{siteUrl}}{{else}}{{siteUrl}}/{{path}}{{/if}}, where siteUrl is meta value with my domain, and isHome is set in the .hbs file responsible for generating homepage to true, but it feels like there should be a better way?
    Doug Webb
    @DougInAMug_gitlab

    Hey @darsain is your code anywhere inspectable?

    It seems you're not using metalsmith-inplace... as far as I understand, metalsmith-layoutswill insert parsed markdown into a template, but not fully convert a template file.

    darsain
    @darsain
    thx, I've switched markdown for in-place and after finding the right plugin order all seems to work now for both md and hbs files
    Doug
    @douginamug:matrix.org
    [m]
    Good to hear! I still don't fully understand my own build order 🙈
    darsain
    @darsain
    does metalsmith have a whitelist config? I want it to process only hbs/md files, but the .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
    Doug
    @douginamug:matrix.org
    [m]
    I'm also interested in that! I have some .md files in a source subdirectory that I do not want to be parsed as markdown... Currently I label them as .html which is not nice semantics :(
    Kevin Van Lierde
    @webketje
    @darsain also have a look at my own plugin metalsmith-handlebars-x, it is well-documented and does a more complete integration of handlebars. To your questions:
    1. you need to use metalsmith-rename after the transform, ex. for my own: .use(rename([[/\.md$/, '.html']])).
    2. 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}})
    3. haven't run into this issue, but I usually define a nav.yml data 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 the isHome variable.
    4. For running metalsmith on parts of the .source() directory, you could use metalsmith-branch.
    darsain
    @darsain
    Any advice how to work around segmentio/metalsmith-permalinks#48 ?
    It's a half a decade old issue with 3 PR'd fixes and no merges that completely breaks my build :(
    permalinks plugin errors out when you try using date to generate permalinks
    darsain
    @darsain
    oh, even though the readme documents that date should be a format string, it actually expects a function to format the date
    darsain
    @darsain
    another issue. I think this one is related to inplace plugin. if I have a filename like 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
    and I don't know how to fix that. in-place has no options that would help with this
    and because its not .html permalinks ignores it as well
    darsain
    @darsain
    I've transitioned to naming it 2021-05-22-0_0_0.md but I don't like it :/
    Kevin Van Lierde
    @webketje
    @darsain, I am waiting on Segment to transfer the rights for their repositories so I can address these issues. In the meanwhile you can use 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.
    darsain
    @darsain
    how do you use permalinks with pagination? because the chain goes pagination>in-place/layout>permalinks, and it's the in-place/layout stage where links to paginated articles are rendered, using the un-permalinked path
    it's A depends on B which depends on A problem
    darsain
    @darsain
    I don't understand how can even the metalsmith-pagination plugin's readme example work? at render time, all 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
    after a couple hours of tinkering, I don't see an easy fix for this
    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
    Doug
    @douginamug:matrix.org
    [m]

    '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
    @darsain
    so this is not a solved problem? :( none before me used pagination with permalinks?
    Kevin Van Lierde
    @webketje

    @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'))
    Kevin Van Lierde
    @webketje
    That being said, I definitely see a good reason to add a feature to permalinks that does not change the extension to .html, that would feel more natural in targeting the matching extensions in layouts
    Kevin Van Lierde
    @webketje

    Just letting everyone know: Metalsmith plugin registry has its own page!

    chowderman
    @chowderman
    Hello metalsmith folks! Been having a good experience using metalsmith, the simplicity and flexibility is excellent and makes it very usable for multiple use cases. I ended up making a little over 20 plugins for a few features I wanted, and just uploaded all of them to NPM and the plugins.json file today. Please let me know what you all think, and thanks for the great work on this framework
    Here are the NPM packages for all of the plugins I added:
    * 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
    about half of them are focused on minification and some of the code is based on my other project for making bundled minified HTML filed (which can be found at: https://github.com/chowderman/hyperfiler)
    Kevin Van Lierde
    @webketje

    @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)

    russurquhart1
    @russurquhart1
    Hi All! I am new to the room, but have been working at a company for almost two years where we are using Metalsmith. One of the other writers was wondering if there was a plugin that would allow a rollover or a pop up dialog, when someone hovered or a link or a piece of text? I kind of want the rest of the writers to understand the flexibility of Metalsmith. Any help is appreciated!
    Kevin Van Lierde
    @webketje
    @russurquhart1 do you mean like Wikipedia does, previewing a short description with a featured image? Wikipedia uses <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/
    Pieter
    @FedPete

    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?

    Kevin Van Lierde
    @webketje

    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)

    Pieter
    @FedPete

    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.

    Pieter
    @FedPete
    When I run the users code npm/metalsmith/sass code version on my machine, everything works fine. No space in front of the CSS file name. It's something Mac specific.
    Kevin Van Lierde
    @webketje
    @FedPete Glad I could help! Regarding metalsmith-sass, I had a brief look at the source, it works like this:
    1. Metalsmith reads the SCSS files in memory
    2. 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
    3. The output path is built by joining metalsmith.destination(), metalsmith-sass option 'outputDir', and name of the file.
      So if you have a style.scssfile anywhere in src:
      metalsmith
      .source('src')
      .destination('dist')
      .use(sass({ outputDir:  'assets/css' })
      the file will be outputted to ./dist/assets/css/style.css
    Pieter
    @FedPete

    Problem solved!

    'ls' command shows "style.css", but 'ls style.css' gives file not found.
    I removed the file and provided a new one for the user.
    Al things back to normal.
    But i've no clue what kind of strange item was stored in the filename.

    Ğąme Ǿver!
    @gameo7er:tchncs.de
    [m]

    I got this message when tried to run this command

    npm install --save-dev metalsmith metalsmith-markdown metalsmith-layouts jstransformer-handlebars

    2 replies