Merge pull request #4 from Jayby18/master

Make array attribute space-separated for better styling specificity & improved readme

README.md

@@ -12,6 +12,8 @@ Set the targetted frontmatter attributes in the settings of the plugin "Internal
 Then, adding a frontmatter key: value in a note automatically adds the key as a new attribute to the a.internal-link HTMLElements linking to this note.
 This works only if the value of the frontmatter attribute is a string, an array, a number or a boolean
 
+#### Example 1 : catch a specific value of a defined property
+
 in target.md
 ```
 ---
@@ -28,11 +30,44 @@ will result in a "supercharged" a.internal-link HTMLElement with new properties
 Therefore you can customize this type of links with custom css
 e.g.
 ```css
-a.internal-link[data-link-foo="bar"]{
+a.internal-link[data-link-foo~="bar"]{
     text-decoration: none
 }
 ```
 
+#### Example 2 : display values of front-matter attributes when hovering the link
+
+in target.md
+```
+---
+next-actions: [👥, ☎️, 🍻, say hello]
+---
+
+```
+
+in note.md when including a link to target like this:
+```
+### Some cool stuff about [[target]]
+```
+will result in a "supercharged" a.internal-link HTMLElement with new properties prefixed with `data-link-`: `<a data-href="target" href="target" class="internal-link" target="_blank" rel="noopener" data-link-next-actions="">target</a>`
+
+Therefore you can customize this type of links with custom css
+e.g.
+```css
+a.internal-link[data-link-next-actions]{
+    color: white;
+    background-color: rgb(29, 29, 129);
+    border-radius: 18px;
+    padding: 5px 15px;
+}
+
+a.internal-link[data-link-next-actions]:hover:after{
+    content: " ► "attr(data-link-next-actions)
+}
+```
+
+The link will be diplayed as a blue tag-like rounded rectangle <span style="color: white; background-color: rgb(29, 29, 129); border-radius: 18px; padding: 5px 15px;">Jim</span> and it will display "Jim ► 👥 ☎️ 🍻 say hello" when hovering the link
+
 ### Roadmap
 
 - [ ] enable translating of array in frontmatter with comma separated values in an attribute

main.ts

@@ -31,7 +31,7 @@ export default class SuperchargedLinks extends Plugin {
 					} else if (typeof value === 'boolean' || typeof value === 'number'){
 						new_props[key] = value.toString()
 					} else if (Array.isArray(value)) {
-						new_props[key] = value.join(', ')
+						new_props[key] = value.join(' ')
 					}
 				}
 			})

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "supercharged-links-obsidian",
 	"name": "Supercharged Links",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"minAppVersion": "0.12.1",
 	"description": "Adds properties to internal links with the values of target note's frontmatter attributes",
 	"author": "mdelobelle",

versions.json

@@ -1,4 +1,5 @@
 {
 	"0.0.1": "0.12.1",
-	"0.0.2": "0.12.1"
+	"0.0.2": "0.12.1",
+	"0.0.3": "0.12.1"
 }