Help! "Sharing" buttons do not resolve URL for my book project. Any ideas?

[equationab]

Hello,
I am building a quarto book, and nearly everything works perfectly. Great job all!

However when I add "sharing" buttons for Twitter and FB in the top Navbar, the URL is not resolving. That is, the button links to:

https://twitter.com/intent/tweet?url=|url|

When I compare it to this great site, I can see their URL is resolving in their "sharing" button in the sidebar.

https://jjallaire.github.io/visualization-curriculum/

Part on my YAML file is shown below. I assume the URL is being collected from this information, and have (blindly) tried various combinations of different info (repo-url, site-url, path-url etc.) with and without different parts, but alas without any success.

I hope someone can spot my beginner mistake (p.s. only being using quarto about 3 weeks, and have close to a final book, so this shows how great this tool is).

Many thanks in advance for any suggestions, and please message me if you need any further information that I should have added.

cheers

Al

project:
type: book

book:
repo-url: "https://mysite.com"
site-url: "https://mysite.com"
site-path: "https://mysite.com"
sharing: [twitter, facebook]

[mcanouil]

Do you have a repository with the code?
As is we can't really help you since you can't see or reproduce the issue you are having.

[equationab]

Many thanks for replying. No, currently I do not have a (public) repository. I was thinking it was most likely a very basic error on my part. If you think that I am defining "site-url" etc. correctly and therefore it "should" work, then I could try to go back to the original example which I believe has such a button. Should I post a minimal example of the YAML file and index.qmd file here? Would that be sufficient for you to replicate it? FYI, when I look at the https://jjallaire.github.io/visualization-curriculum/ HTML code I can see that the URL seems to be "pulled" from some definition of URL. It looks like this:

Twitter

But when you hover over the button , you see:
https://twitter.com/intent/tweet?url=https://jjallaire.github.io/visualization-curriculum/

My HTML skills are poor, but it seems like the URL is being pulled from somewhere, I just do not know where!

Any advice welcomed! If not, no worries...I appreciate this button isn't the most critical part of Quarto. It has just be bugging me that I cannot fix it! (I guess I could manually change every HTML file to point to the right place as a last resort). cheers Al

[mcanouil]

Take a look a the repository and try to figure out what you do differently: https://github.com/jjallaire/visualization-curriculum/.
Without access to code/configuration files, there is no way for me or others to spot the issue.

Note that to share efficiently code, as for Quarto/Rmarkdown and markdown based website, it's better to put it in code blocks define by backticks (at least three, more if you want to include code blocks) as for code in Quarto/Rmarkdown.

Note that this website was build before Quarto was officially released, so some differences are expected simply because of Quarto version.

[equationab]

Thank you for your help and suggestions...they really helped.

After some digging, I can trace what is going on, and thought I would write it up here, in case anyone has the same problem:

1. I have a Navbar included in the YAML file
2. The "sharing" icons and items within get placed in the top Navbar, rather than the sidebar (at least they do for me)
3. In "quarto-nav.js" in the "site_libs/quarto-nav" directory, around line 178 we have:

    // Fixup any sharing links that require urls
    // Append url to any sharing urls
    const sharingLinks = window.document.querySelectorAll(
      "a.sidebar-tools-main-item"
    );
    for (let i = 0; i < sharingLinks.length; i++) {
      const sharingLink = sharingLinks[i];
      const href = sharingLink.getAttribute("href");
      if (href) {
        sharingLink.setAttribute(
          "href",
          href.replace("|url|", window.location.href)
        );
      }
    }

4. So I believe the relevant line is "a.sidebar-tools-main-item". ...it is looking for anchor tags in the sidebar to then replace the URL...since my "sharing" tools are in the Navbar, it didn't work.

5. Two options to fix:
   a) Change "a.sidebar-tools-main-item" to point to anchor tags in the "sharing" area of the Navbar (I think I used "a.dropdown-item" or something similar)...that seemed to work fine...it then allows someone to share the actual HTML page.
   b) I actually just wanted to share the landing/index page for Twitter, so instead I removed the "sharing" from the YAML file, and then added a button in the Navbar with a link to it, like this:

book:
  navbar:
    right:
     - text: "Share on Twitter"
       href: "https://twitter.com/intent/tweet?url=https://www.mysite.com"

This "fires up" twitter with the right URL when clicked. I also have this in the YAML file.

  twitter-card: 
    site: "https://www.mysite.com"
    image: "media/mycoverimage.png"
    description: "A brilliant book !!"

This seems to work well, with Twitter using the image file in the Tweet.

Great to have forums like this, and hope this helps someone.

cheers Al

[mcanouil]

Could you use code blocks to format codes as I explained in my previous reply, please?

[equationab]

OK - hopefully nicer now