Add help text to Archive.org borrowable links#634
Add help text to Archive.org borrowable links#634khemarato merged 7 commits intobuddhist-uni:mainfrom
Conversation
Add a collapsible help tip (similar to the existing WorldCat tip) for Archive.org links that are borrowables (identified by /mode/ in URL). The tip explains that the book can be borrowed for free and links to Archive.org's official borrowing guide. Fixes buddhist-uni#613 Signed-off-by: Tim Ren <[email protected]>
✅ Deploy Preview for obu ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
khemarato
left a comment
khemarato
left a comment
There was a problem hiding this comment.
Thanks for the first PR.
_includes/content_filelinks.html
Outdated
| <div class="a-link">{% if is_archive_borrow %}<details class="copyright details-reset"><summary>{% endif %}<a class="btn" {% if include.newtab %}target="_blank"{% endif %} {% include content_link_data_attributes.html content=include.content linktype="Main External URL" linkfmt=linkfmt %} href="{{ include.content.external_url }}"{% for nrh in site.data.content.noreferrerhosts %}{% if include.content.external_url contains nrh %} rel="noreferrer"{% break %}{% endif %}{% endfor %}>{{ linkbody }}</a>{% if is_archive_borrow %} | ||
| <i class="far fa-question-circle"></i> | ||
| </summary><div> | ||
| <i class="fas fa-book-reader"></i> This book is available to <strong>borrow for free</strong> on Archive.org with a free account. <a href="https://help.archive.org/help/borrowing-from-the-lending-library/" target="_blank">Learn how to borrow →</a> |
There was a problem hiding this comment.
The arrow is redundant with the ext link icon. The reader icon at the front is also redundant, I think. Let's change the text to simply "Reading this book on Archive.org may require a free account. [Learn more]"
And let's fix the link styling, keeping in mind that on the tag page, it has a white background:
There was a problem hiding this comment.
Thanks for the feedback! Updated in 8642085:
- Removed the book-reader icon and arrow
- Simplified text to: "Reading this book on Archive.org may require a free account. Learn more"
- Removed
target="_blank"from the link
Let me know if the link styling still needs further adjustment.
- Remove redundant book-reader icon and arrow from help text - Simplify wording to: "Reading this book on Archive.org may require a free account. Learn more" - Remove target="_blank" from learn more link for consistency Signed-off-by: Tim Ren <[email protected]>
khemarato
left a comment
khemarato
left a comment
There was a problem hiding this comment.
The new tab behavior was fine. I was referring to the link styling issues.
Is there a human in the loop here or am I entirely talking to an AI agent?
|
Hi @khemarato, yes I'm a real person 😄 I do use AI tools to help with coding, but I'm reviewing everything myself. Sorry for the confusion — my replies were a bit too mechanical. For the link styling issue — could you point me to the CSS file or class that controls the link color inside the |
Ensure the link is visually distinguishable on both dark and white backgrounds by adding text-decoration: underline. Signed-off-by: Tim Ren <[email protected]>
|
Got it — added Let me know if there's anything else to adjust! |
|
The main css file is here: https://github.com/buddhist-uni/buddhist-uni.github.io/blob/main/_sass/nimitta.scss Have you done web development before? You can use your browser's dev tools to inspect any page's css to see where each element is getting its style from and play around with it to see what looks better. Have fun! |
Move link underline styling from inline style to the existing .content_links .copyright div rule in content-perma.scss. Use color: inherit so the link matches surrounding text on both dark and white backgrounds. Signed-off-by: Tim Ren <[email protected]>
|
You're right, inline styles are not the way to go. I've moved the link styling into a {
text-decoration: underline;
color: inherit;
}This way the "Learn more" link inherits the surrounding text color (works on both dark and white backgrounds) and has an underline to be clearly identifiable. See 2fdbfe7. Thanks for pointing me to the CSS files! |
|
Why is the link text sans serif? |
The .content_links a rule sets sans-serif font-family globally. Override with font-family: inherit so the Learn more link matches the surrounding serif body text. Signed-off-by: Tim Ren <[email protected]>
|
Good catch! The |
|
And did you test your change by looking at the tag page as well, to see how it looks there? |
|
See the first book on this page as an example: https://deploy-preview-634--obu.netlify.app/tags/sri-lankan |
The previous fix in content-perma.scss only applied to content pages, not tag pages. Move the .copyright div a override into nimitta.scss (inside .content_links) so it applies everywhere. Revert content-perma.scss to its original state. Signed-off-by: Tim Ren <[email protected]>
|
You're right — I checked the tag page at the deploy preview and the previous fix in Moved the override into .copyright div a {
font-family: inherit;
text-decoration: underline;
color: inherit;
}Reverted |
|
Okay. Just add back in the |
Signed-off-by: Tim Ren <[email protected]>
|
Done! Added |
|
Thanks for the review and merge, @khemarato! Happy to contribute to OBU. By the way, I've been building an open-source Buddhist text platform called FoJin that aggregates 440+ sources across 30 languages — including search, parallel reading, knowledge graph, and AI Q&A. OBU is a great resource and I think FoJin could complement it nicely. If you think it might be a useful addition to OBU's tools or resources section, I'd be happy to submit a PR. Either way, glad to keep contributing here! |
|
Thanks for the PR. Perhaps send me an email (it's on the site) with a bit more about your background and what you hope to achieve and we can brainstorm some options? |
2 participants
Closes #613
Summary
Adds a collapsible help tip (matching the existing WorldCat
<details>pattern) for Archive.org borrowable links on monograph pages.Before: Archive.org borrow links show as plain buttons with no explanation.
After: A ❓ icon appears next to the link. Clicking it reveals:
How it works
archive.org+/mode/in the URL (same logic already used in the intro text)copyright details-resetCSS classes from the WorldCat tipHow to test
Visit any monograph with an Archive.org borrow link, e.g.
/content/monographs/dn_walshe. The link button should now have a ❓ that expands to show borrowing instructions.