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

Add a button for call to action and noticeable links #1654

Open
choldgraf opened this issue Nov 19, 2024 · 1 comment · May be fixed by jupyter-book/myst-theme#521 or #1773
Open

Add a button for call to action and noticeable links #1654

choldgraf opened this issue Nov 19, 2024 · 1 comment · May be fixed by jupyter-book/myst-theme#521 or #1773
Assignees
Labels
enhancement New feature or request

Comments

@choldgraf
Copy link
Collaborator

Sometimes it's useful for authors to put a button on a page to draw more attention to it. For example, a "Get started" button on a documentation landing page, or a "Donate" button to direct users to a donation page.

Currently the closest thing you can get is manually defining an HTML element like:

<a href="/start">
  <div style="border-radius: 1em; background-color: #e07330; width: 8em; height: 3em; margin: .5em auto; color: white;">
  Get started
  </div>
</a>

However this has a few shortcomings:

  • It is verbose and depends on enough CSS knowledge to hand-write the rules.
  • style works with <div> but not with <a> so you can't style the text inside the button.

It would be much easier if we either:

  1. Supported native button syntax, like:

    :::{button} Button text
    :style: some ways to style the button, center it, etc
    :::
    
  2. Fixed Load tailwind CSS classes when they are used within directives and page content #1617 so that you could style the <div> as you wished with classes from tailwind (and make this work for <a> as well)

@choldgraf choldgraf added the enhancement New feature or request label Nov 19, 2024
@choldgraf choldgraf moved this to Needed for stable release in Jupyter Book MVP Nov 19, 2024
choldgraf added a commit to jupyter-book/jupyter-book that referenced this issue Nov 19, 2024
This adds a tutorial for creating basic plugins with Jupyter Book. It
covers creating and registering plugins, creating a directive, and
creating a transform.

It also cleans up some navigation and adds two how-tos related to
plugins.

This is a result of some self-learning I had to do in creating some
plugins for my website, so hopefully this makes things easier to learn
for future readers!

### Follow ups

A few things I opened along the way:

- jupyter-book/mystmd#1651
- jupyter-book/mystmd#1649
- jupyter-book/mystmd#1652
- jupyter-book/mystmd#1654
- jupyter-book/mystmd#1655

---------

Co-authored-by: Angus Hollands <[email protected]>
@choldgraf choldgraf moved this from Needed for stable release to In Progress in Jupyter Book MVP Jan 22, 2025
@choldgraf
Copy link
Collaborator Author

We discussed this in the Jupyter Book team meeting today. There are two PRs that implement this:

The main complexity that we'd run into was expressing buttons as a {role} but without the ability to define classes etc.

I believe that we decided to just move forward with an MVP approach, to add functionality to support xref links via the button link, and to leave things like styling etc to future improvements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: In Progress
Development

Successfully merging a pull request may close this issue.

2 participants