Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support inline <span> components in markdown #348

Closed
goblinfactory opened this issue Sep 10, 2024 · 7 comments
Closed

Support inline <span> components in markdown #348

goblinfactory opened this issue Sep 10, 2024 · 7 comments
Labels
docs improvement new feature New feature or request nuemark Related to nuemark package

Comments

@goblinfactory
Copy link
Contributor

goblinfactory commented Sep 10, 2024

Is your feature request or improvement related to a problem?

I wanted to create a pill component as follows; somewhat psuedo

<div @name="pill" class="pill">
    <slot/>
</div>

I also tried

<div @name="pill" class="pill">
    {text}
</div>

and was unable to use it in markdown;

[pill]
    text: my pill

Both options gives me runtime error in chrome console

mount.js:18 Uncaught (in promise) TypeError: Failed to resolve module specifier ''
    at importAll (mount.js:18:21)
    at mountAll (mount.js:26:30)
    at patch (hotreload.js:53:9)
    at async sse.onmessage (hotreload.js:84:7)

The documentation does not explain how to create a component. There are some vague notes on constructors. But no worked examples.

Solution you'd like

  1. I'd like the vagueness in the documentation around building components to be removed by providing a full worked example of some small simple component. Both how to create the component, and how to use it.

update: it's possible there is a different bug causing the "failed to resolve module specifier" which might mean the current docs are sufficient. (I can't tell while I'm getting this error since I dont know what I dont know.)

  1. I'd like to be able to able to create "inline" <span> components for items like "pills". (css styled rounded end tags)
  2. I'd want to be able to invoke the components inline in markdown for easier testing and more flexibility using both html syntax as well as markdown sytnax as follows
This is my inline [pill hello!] and also <pill text="hello"/>!
@goblinfactory goblinfactory added improvement new feature New feature or request labels Sep 10, 2024
@goblinfactory goblinfactory changed the title Support inline components in markdown Support inline <span> components in markdown Sep 10, 2024
@nobkd
Copy link
Collaborator

nobkd commented Sep 10, 2024

  1. Agreed
  2. and 3.: Partial duplicate of Inline components #187

I will check, if I can get at least the non-inline variant to work.

@nobkd nobkd added docs nuemark Related to nuemark package labels Sep 10, 2024
@goblinfactory
Copy link
Contributor Author

@nobkd I'm still checking but I think the Failed to resolve module specifier is happening on a brand new nue create codebase without modifications; which may have led me totally down this rabbit hole. If I was able to get components working I'm fairly certain I would have been able to provide a much more coherant suggestion of improvement to documentation, with some simple getting started exercises that can be done with nue from scratch.

@goblinfactory
Copy link
Contributor Author

goblinfactory commented Sep 10, 2024

I've created a new bug report for the failed to resolve error;
#349
When that's resolved, this may or may not still be an issue.

@tipiirai
Copy link
Contributor

I started working on this, but then remembered how complex and unfriendly Marked API is. Doing this later. I have a custom Markdown parser implementation forming in my mind

@tipiirai
Copy link
Contributor

Ended up doing a custom Markdown parser/renderer that is easier to work with than Marked. Likely faster too. It's a bit of a work, but there are so many benefits to do this in-house (beyond the NIH syndrome) that will benefit Nue in the long run.

@nobkd

This comment was marked as outdated.

@nobkd
Copy link
Collaborator

nobkd commented Nov 3, 2024

Should work with dev branch.

Though I'm not sure, if inline [.class] would result in <p>inline <span class="class"></span></p> or in <div class="class"></div></p>
Probably it would be best to have it span for inline- and div for block-syntsx

@nobkd nobkd closed this as completed Nov 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs improvement new feature New feature or request nuemark Related to nuemark package
Projects
None yet
Development

No branches or pull requests

3 participants