https://github.com/capjamesg/hovercard.js
A script to load cards when you hover over a link in an article.
Science Score: 13.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
○.zenodo.json file
-
○DOI references
-
○Academic publication links
-
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (10.5%) to scientific vocabulary
Keywords
Repository
A script to load cards when you hover over a link in an article.
Basic Info
- Host: GitHub
- Owner: capjamesg
- License: mit-0
- Language: JavaScript
- Default Branch: main
- Homepage: https://jamesg.blog/2022/10/12/hovercards/
- Size: 341 KB
Statistics
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
- Releases: 0
Topics
Metadata Files
README.md
hovercard.js
A script to load cards when you hover over a link in an article.
Example
Getting Started
The hovercard.js script searches for all <a> tags enclosed within an <article> tag on a web page. Mouse hover and focus listeners are added to each link. When the mouse hovers over a link, hovercard.js looks for the href value of the link in a JSON object called hovercards. If the link is found in the JSON object, a hovercard is added directly below the link on the page.
When a user hovers off the link or moves focus onto another element (i.e. by using the keyboard to navigate links on the page), the hovercard will disappear.
Here are a few articles with hovercards:
- https://jamesg.blog/2023/04/02/timehop-for-blogs/
- https://jamesg.blog/2023/05/06/llms-open-source/
- https://jamesg.blog/2023/05/19/airport-pianos/
Usage
To use the hovercard script, first download a copy and upload it to your site. Then, add this code above the closing </body> tag on your web page:
html
<script src="./path/to/hovercard.js"></script>
Substitute the path of the script in the example above with the location of the script on your site.
You should add a JSON object to every page that contains a hovercard. This JSON object should use the following structure:
json
{
"https://example.com": {
"title": "Example Domain",
"description": "This domain is used for examples."
"photo": "https://example.com/example.png"
}
}
Keys in the JSON object represent links on the page to look up. The only required key value is title. If a description and/or photo are provided, these will be included in the hovercard.
License
This code for this project is placed in the public domain.
Contributors
- capjamesg
Owner
- Name: James
- Login: capjamesg
- Kind: user
- Location: Scotland
- Company: @Roboflow
- Website: jamesg.blog
- Repositories: 320
- Profile: https://github.com/capjamesg
from words, wonder.
GitHub Events
Total
Last Year
Issues and Pull Requests
Last synced: over 1 year ago
All Time
- Total issues: 1
- Total pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Total issue authors: 1
- Total pull request authors: 0
- Average comments per issue: 0.0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Top Authors
Issue Authors
- Ikun886-cxk (1)