by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 23 15:17

    Scrum on master

    docs: add create to your projec… (compare)

  • Sep 22 09:05
    Scrum transferred #334
  • Sep 22 09:04
    Scrum commented #334
  • Sep 20 12:06
    frederikhors edited #334
  • Sep 20 12:06
    frederikhors opened #334
  • Sep 18 06:47
    Scrum transferred #333
  • Sep 18 06:46
    Scrum commented #333
  • Sep 17 22:12
    The-Podsiadly opened #333
  • Sep 15 11:04

    Scrum on master

    docs: remove gitter because not… (compare)

  • Aug 22 13:09

    Scrum on milestone-0.13.3

    (compare)

  • Aug 22 13:09

    Scrum on master

    build: update dep dev chore(release): 0.13.3 Merge pull request #332 from po… (compare)

  • Aug 22 13:09
    Scrum closed #332
  • Aug 22 13:08
    coveralls commented #332
  • Aug 22 13:07
    coveralls commented #332
  • Aug 22 13:06
    Scrum synchronize #332
  • Aug 22 13:06

    Scrum on milestone-0.13.3

    chore(release): 0.13.3 (compare)

  • Aug 22 13:06

    Scrum on v0.13.3

    (compare)

  • Aug 22 13:03
    Scrum review_requested #332
  • Aug 22 13:03
    Scrum review_requested #332
  • Aug 22 13:03
    Scrum review_requested #332
Ivan Demidov
@Scrum
Hi, can you write a simple example?
Даниил Пронин
@Grawl
Ivan Demidov
@Scrum
it will take me a little time
Даниил Пронин
@Grawl
I just want to take all largest images from HTML. if <img> inside <a> && href is image URL, I don't want to take <img>
because <a><img></a> is small image with link to large image
Ivan Demidov
@Scrum
Yes, I understand ))
Ivan Demidov
@Scrum
const posthtml = require('posthtml');

const htmls = [
  `<div>
    <img src="img-url" alt="">
  </div>`,
  `<div>
    <a href="link-img-url">
      <img src="img-url" alt="">
    </a>
  </div>`,
  `<div>
    <a href="link-img-url">
      <span><img src="img-url-1" alt=""><span>
      <span><img src="img-url-2" alt=""><span>
    </a>
  </div>`
];

const plugin = function () {
  return function (tree) {
    const match = tree.match;
    tree.messages.urls = [];
    match.call(tree, [{tag: 'a'}], link => {
      let hasImage = false;

      match.call(link.content, [{tag: 'img'}], img => {
        hasImage = true;
        img.attrs.processed = true;
        return img;
      });

      if (hasImage && link.attrs && link.attrs.href) {
        tree.messages.urls.push(link.attrs.href);
      }

      return link;
    });

    match.call(tree, [{tag: 'img'}], img => {
      if (img.attrs.processed) {
        delete img.attrs.processed;
        return img;
      }

      if (img.attrs && img.attrs.src) {
        tree.messages.urls.push(img.attrs.src);
      }

      return img;
    });

    return tree;
  }
}

const result = htmls.map(html => {
  const result = posthtml([plugin()]).process(html, {sync: true});
  return result.messages.urls;
});

console.dir({result});
Даниил Пронин
@Grawl
oh there is messages where I can put all the tihngs I found in tree 8-)
Ivan Demidov
@Scrum
:+1:
Alex R
@alexjsdev
hi all! i've been looking through the post-html cli docs for longer than i'd like to admit... and i don't understand what i'm doing wrong... i wrote a one off plug-in that i basically just need to run once on a collection of static files... it's not generic and it's not meant to be, so it's not a published plugin. But i can't figure out how to make post-html cli use my locally defined plugin... Any tips/tricks/links/pointers... really anything is greatly appreciated! thanks!
Ivan Demidov
@Scrum
Hi, give a link to an example where you are trying to do this.
Chris Taggart ☕️
@christaggart_twitter
Hi all! I'm using posthtml inside of the maizzle email framework and it seems like posthtml is stripping out a lot of the php even with a php directive in place? As far as I can tell it's posthtml stripping it out and not something else.

although trying to use the CLI with a php directive -- it also gets stripped out.

config.json:

{
  "output": "dist",
  "directives": [{ "name": "?php", "start": "<", "end": ">" }]
}

input.html

<div>
    <h1><?php echo $title; ?></h1>
    <p><?php echo $article; ?></p>
</div>

output.html

<div>
    <h1></h1>
    <p></p>
</div>
Ivan Demidov
@Scrum
@christaggart_twitter Hi, could you give examples and put them on the github?
Mykolas Mankevicius
@Neophen
Hey people
I've just found out about posthtml and it looks awesome
I want to try it out to see if it could achieve what i want to do
Question:

I've read the docs. but not sure how to use the cli tool.
What i want to achieve:
In my project i want to create a plugin, and run postHtml in watch mode for then i change any file in the input directory. and then run transforms and save to output file. so something like

src/
some_dir/
some_file.test.html
other_file.test.html

I want to watch changes for any fiel in src which ends with *.test.html
and output to file *.html.leex

Mykolas Mankevicius
@Neophen
But at first would just like to add a config.json for the cli witch would pick up on posthtml_plugins/posthtml-custom-plugin.js
Any help is greatly apreciated
Mykolas Mankevicius
@Neophen
Ok managed to setup the boilerplate to test out my ideas.
Mykolas Mankevicius
@Neophen
How can i change the end tag?
let's say i have <live_view /> and i want to change it to <%= live_view %>
Mykolas Mankevicius
@Neophen
Hmm ok so the parser doesn't catch self closing tags?
Ivan Demidov
@Scrum
@Neophen Hi, let me know if you still need help
Sean Moran
@trisys3
I'm starting to use PostHTML after following it for a long time, and it's great.
Is this the place to talk about the loader or would that be a different room or what?
Sean Moran
@trisys3
Well just in case, how do you use directives in the loader? Specifically, I want to allow the <?php echo $myVar; ?> syntax, and I found out the only way to do that is with directives.
John Winston
@winston0410
Hi guys, how can I create a node with postHTML? I am reading the api but I cannot find the related method
I want to create a <link> tag and add attributes to it
John Winston
@winston0410

Is using object.assign() the way to go? Like the example here:

https://posthtml.org/#/plugins/README?id=synchronous

Ivan Demidov
@Scrum
@winston0410 Hi, it will be more efficient if you create issue in project posthtml
John Winston
@winston0410
@Scrum But in github issue they said I should ask question here. Is mutation the way to go for transformation? Cannot find anything useful yet.
Ivan Demidov
@Scrum
@winston0410 That's right, at the moment it will be preferable and more effective if you create issue