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.

Sign up for GitHub

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

Jump to bottom

Add story title and tags as data attributes to the editor HTML #1440

Open
3 tasks done
david-donachie opened this issue Aug 21, 2023 · 9 comments
Open
3 tasks done

Add story title and tags as data attributes to the editor HTML #1440

david-donachie opened this issue Aug 21, 2023 · 9 comments
Labels
enhancement New feature or request P3 (could) Annoying bugs that have workarounds, Interesting ideas

Comments

@david-donachie
Copy link

Is your feature request related to a problem? Please describe.

The new user.css file allows the author to add custom styling to their Twine installation, but these styles are applied to all stories, and there is nothing in the current document html structure that would allow styles to be scoped to a particular story.

If the current story title, and tags, were added as data attributes in the editor HTML structure, ideally on the <html> element, then it would be possible to write scoped CSS for particular stories.

Describe the solution you'd like.

Add a data-story-title attribute to the <html> or <body> element of the editor, containing the current story title.

Add a data-story-tags attribute to the same element with a list of the story tags.

Describe alternatives you've considered.

An obvious alternative is multiple user.css files, one for each story/tag ... this would probably get quickly out of hand.

Another option would be to allow editor-customising CSS to be stored in the stories themselves, but this would be a much more extreme solution.

Additional context on this suggestion.

No response

Presubmission checklist

  • I am interested in working on code that would implement this feature request. (This is not required to submit a suggestion.)
  • I have done a search and believe that an issue does not already exist for this idea in the GitHub repository.
  • I have read and agree to abide by this project's Code of Conduct.
@david-donachie david-donachie added the enhancement New feature or request label Aug 21, 2023
@klembot
Copy link
Owner

klembot commented Aug 22, 2023

Could you explain a little bit how you would use this feature in practice?

@david-donachie
Copy link
Author

Could you explain a little bit how you would use this feature in practice?

To write rules such as html[data-tags~=whatever] to override tag colours for specific stories, specifically style passages with certain tags (which might have meaning in some formats/stories but not others), or even change the overall story colour scheme for a certain story.

@klembot
Copy link
Owner

klembot commented Aug 26, 2023

Since you mention having interest in implementing this:

  • I think any data attributes should not be on the main HTML tag but on the root element StoryEditView renders
  • It would be ideal if this was done in a flexible way as opposed to hard coding attributes, so that if additional things are added to stories, we don’t have to do any additional work to keep this up to date
  • Documentation would need to be added explaining how an end user would make use of this

@klembot klembot added the P3 (could) Annoying bugs that have workarounds, Interesting ideas label Aug 26, 2023
@david-donachie
Copy link
Author

It would be ideal if this was done in a flexible way as opposed to hard coding attributes, so that if additional things are added to stories, we don’t have to do any additional work to keep this up to date

Not sure what you mean. Do you mean that you'd want to make a data attribute out of every attribute of the story object, presumably excluding story.passages and story.tagColors?

@klembot
Copy link
Owner

klembot commented Sep 4, 2023

Not necessarily every attribute. What I mean is something like this:

  1. Define the attributes to add to HTML somewhere.
  2. For every attribute to add to HTML:
    1. If it's a string, do this.
    2. If if's an array of strings (e.g. the tags), do something else.
    3. If it's a number, convert it to a string probably.

Other thing I forgot to mention is that it would be ideal if it was implemented as a hook, mainly to keep the complexity of StoryEditView down. I refactored out as much as I could into individual hooks because the component source code was getting really long.

@rubynguyen1510
Copy link
Contributor

Hello! I wonder if this issue has been assigned to anyone. If not, my friend and I are interested in working on code that would implement this feature request.

@klembot
Copy link
Owner

klembot commented Feb 5, 2024

No one has done any work on this to my knowledge, but let's resolve things over on #1493 before you do work here.

@KlausMikhaelson
Copy link

Hey @klembot was wondering if someone's working on it and if not then would be interested for the same!
I see that the issue that you mentioned above has been fixed so I believe there is no blocker for this one ?

@david-donachie
Copy link
Author

I have not done any work on it so far, so feel free @KlausMikhaelson

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request P3 (could) Annoying bugs that have workarounds, Interesting ideas
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@klembot @david-donachie @rubynguyen1510 @KlausMikhaelson