by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jul 02 08:29
    Scrum commented #221
  • Jul 02 08:18
    yangmingshan commented #221
  • Jun 22 06:22

    Scrum on milestone-0.13.1

    (compare)

  • Jun 22 06:22

    Scrum on master

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

  • Jun 22 06:22
    Scrum closed #327
  • Jun 22 06:21
    coveralls commented #327
  • Jun 22 06:20
    Scrum review_request_removed #327
  • Jun 22 06:20
    Scrum review_request_removed #327
  • Jun 22 06:20
    Scrum review_request_removed #327
  • Jun 22 06:20
    Scrum review_requested #327
  • Jun 22 06:20
    Scrum review_requested #327
  • Jun 22 06:20
    Scrum review_requested #327
  • Jun 22 06:20
    Scrum opened #327
  • Jun 22 06:19

    Scrum on milestone-0.13.1

    build: update dep dev chore(release): 0.13.1 (compare)

  • Jun 22 06:19

    Scrum on v0.13.1

    (compare)

  • Jun 22 06:13

    Scrum on ISSUE-324_fix_typings

    (compare)

  • Jun 22 06:13

    Scrum on master

    fix(types): correctly export na… Merge pull request #326 from po… (compare)

  • Jun 22 06:13
    Scrum closed #326
  • Jun 22 06:13
    Scrum closed #324
  • Jun 22 06:13
    Scrum review_request_removed #326
Mark Brouch
@markbrouch

when I do just

...
options: {
  parser: 'posthtml-pug'
}

webpack compiles without error, but I'm not able to pass any options to pug

what am I missing in my setup here?
Jitendra Vyas
@jitendravyas
Is POSTHTML project still active?
Ivan Demidov
@Scrum
@jitendravyas can you help ?
Ivan Demidov
@Scrum
Hello, if someone has @michael-ciniawsky current contacts? on which you can quickly contact him.
Jacob Bearce
@JacobDB
Looks like this room is pretty dead, but hopefully someone can help me. I'm having difficulty understanding how to use this. What I'd like to do is create a custom element like <icon use="some-icon-id" class="some-class" id="some-id" data-attr="some attr" /> that transpiles to <i class="icon some-class" id="some-id" data-attr="some attr"><svg class="icon_svg" aria-hidden="true"><use xlink:href="#some-icon-id"></use></svg></i>. Is this the right module for this, and if so, could someone point me to an example on how to achieve something like this?
Ivan Demidov
@Scrum
@JacobDB I will try to answer but a little later
Jacob Bearce
@JacobDB
@Scrum thanks, I'd appreciate it
Ivan Demidov
@Scrum
@JacobDB please do an example of what you have and what you need in the repository on github
Jonathan Neal
@jonathantneal
Would anyone from PostHTML be interested in working with me on a new version of PostHTML that could work more like PostCSS? It started as a Reshape PR, but at some point I started working from scratch. https://jonathantneal.github.io/posthtml/api/
If not, this is definitely something I want to be integrate-able with both PostHTML and Reshape as a plugin. In fact, in ways that’s more ideal. I’m just kind of lost in how vast this has become.
Ivan Demidov
@Scrum
@jonathantneal Hi, I apologize for such a late reply. I am ready to participate if it is still relevant.
Jonathan Neal
@jonathantneal
I would love to participate, yes! I did, however, mature some of the work since July 10, 2018 of last year, and I released it as its own processor.
Similarly, the creator of Reshape had expressed disinterest in investing into that project further. I took it as a sign to move on with the work I had done. I’d love to see if we could find a way to harmonize . I’m a big fan of the work of posthtml, and it is still the fastest parser by a wide margin. :)
@Scrum tagging you just in case you don’t see this, otherwise. :point_up:
Ivan Demidov
@Scrum

@jonathantneal I strongly welcome you!!!

tagging you just in case you don’t see this, otherwise. :point_up:

Thank you, could not respond earlier than now

I’d love to see if we could find a way to harmonize

where can we try to start? If possible, I would like to try to immerse myself in the ecosystem of pHTML, and then try to create a couple of plug-ins for it.

Даниил Пронин
@Grawl
hi. I want to use PostHTML to collect all image URLs from HTML to array. is there any ready to use code to do this? it's not easy as I thought: there may be <img> inside <a> and I want HREF from <a> if it's image URL (I check it by HEAD request now), and if I get HREF from <a> instead of SRC from <img> I want to skip this <img>
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?