From ffd9649a1206f84ea7bd7fb9b37efaa19ac08bc7 Mon Sep 17 00:00:00 2001 From: JP Etcheber Date: Sun, 25 Sep 2022 14:06:31 -0700 Subject: [PATCH] feat: add domain to clipper --- .gitignore | 3 +- src/lib/clip.js | 22 ++++++++++++++ src/options.css | 77 ++++++++++++++++++++++++++++++++++++++++++++---- src/options.html | 45 ++++++++++++++++++++++++---- src/options.js | 15 ++++++++++ 5 files changed, 150 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index 9ba3d1b..d6974a1 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -key.pem \ No newline at end of file +key.pem +**/.DS_Store diff --git a/src/lib/clip.js b/src/lib/clip.js index 8b067eb..2201bbf 100644 --- a/src/lib/clip.js +++ b/src/lib/clip.js @@ -4,6 +4,7 @@ export const create = async (testing=false) => { console.log("starting clipper...") let title = document.title.replace(/\//g, '') let url = window.location.href + let domain = location.hostname let defaultNoteFormat = `> {clip} // Clipped from [{title}]({url}) at {date}.` @@ -82,6 +83,7 @@ export const create = async (testing=false) => { note = note.replace(/{month}/g, month) note = note.replace(/{year}/g, year) note = note.replace(/{url}/g, url) + note = note.replace(/{domain}/g, domain) note = note.replace(/{title}/g, title) note = note.replace(/{zettel}/g, zettel) @@ -93,6 +95,25 @@ export const create = async (testing=false) => { note = note.replace(/{og:image}/g, "") } + // Clip the og:video:url if it exists + if (document.querySelector('meta[property="og:video:url"]')) { + let video = document.querySelector('meta[property="og:video:url"]').content + // video only works in the content of the note + note = note.replace(/{og:video:url}/g, ``) + } else { + note = note.replace(/{og:video:url}/g, "") + } + + if (document.querySelector('meta[property="og:description"]')) { + let desc = document.querySelector('meta[property="og:description"]').content + // video only works in the content of the note + note = note.replace(/{og:description}/g, desc) + } else { + note = note.replace(/{og:description}/g, "") + } + // replace the placeholder in the title, taking into account invalid note names and removing special // chars like \/:#^\[\]|? that result in no note being created... * " \ / < > : | ? let noteName = clippingOptions.obsidianNoteName @@ -101,6 +122,7 @@ export const create = async (testing=false) => { noteName = noteName.replace(/{month}/g, month.replace(/[\/":#^\[\]|?<>]/g, '')) noteName = noteName.replace(/{year}/g, year.replace(/[\/":#^\[\]|?<>]/g, '')) noteName = noteName.replace(/{url}/g, url.replace(/[\/":#^\[\]|?<>]/g, '')) + noteName = noteName.replace(/{domain}/g, domain.replace(/[\/":#^\[\]|?<>]/g, '')) noteName = noteName.replace(/{title}/g, title.replace(/[\/":#^\[\]|?<>]/g, '')) noteName = noteName.replace(/{zettel}/g, zettel.replace(/[\/":#^\[\]|?<>]/g, '')) noteName = noteName.replace(/{datetime}/g, datetime.replace(/[\/":#^\[\]|?<>]/g, '')) diff --git a/src/options.css b/src/options.css index 4547e27..4ac391a 100644 --- a/src/options.css +++ b/src/options.css @@ -100,13 +100,20 @@ h1 { clear: both; } -button{ +button.save-config{ margin-top: 20px; + margin-bottom: 20px; + margin-right: 5px; font-size: 22px; padding: 15px; - width: 100%; + width: 48%; border: 0px; border-radius: 3px; + float: left; +} + +button.reset{ + font-size: 20px; } button:hover{ @@ -124,9 +131,6 @@ button:hover{ text-align: left; } -#faq dt{ - -} #faq dd{ margin-left: 0px; margin-top: 10px; @@ -174,4 +178,67 @@ dt code{ margin-left:7px; font-weight:500; font-size:14px; +} + +/* Style the button that is used to open and close the collapsible content */ +button.collapsible { + background-color: #eee; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; + } + + /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ +.active, .collapsible:hover { + background-color: #ccc; + } + + /* Style the collapsible content. Note: hidden by default */ +.hideable-content { + display: none; + overflow: hidden; + text-align: left; + background-color: #d4b1d8; + } + +table.placeholder-descriptions { + background-color: #ffffff; + width: 100%; + color: #000000; + vertical-align: middle; + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + + } + +code { + font-family: Monaco, monospace; + font-size: 14px; + line-height: 100%; + background-color: rgb(247, 207, 235); + color: #710606; + letter-spacing: -0.05em; + word-break: normal; + vertical-align: middle; + } + + tr.placeholder-descriptions, td.placeholder-descriptions { + text-align: left; + color: #444; + padding: 8px; +} + +th.placeholder-descriptions-header { + text-align: left; + color: #444; + padding: 8px; +} + +tr:nth-child(even) { + background-color: #d1e2e6; } \ No newline at end of file diff --git a/src/options.html b/src/options.html index f0387b2..c4a2e9a 100644 --- a/src/options.html +++ b/src/options.html @@ -39,16 +39,49 @@

An unoffical clipper

- Use {date}, {datetime}, {year}, {month}, {day}, {time}, {title} and {zettel} as placeholders + +
+ + + + + + + + + + + + + +
PlaceholderDescription
 {clip} The text selected on the page when the extension is clicked.
 {date} The date string in format specified below.
 {datetime}The datetime in format specified below.
 {year}The current year, specified as an integer.
 {month} The current month, specified as an integer.
 {day} The current day, specified as an integer.
 {time}The time string in format specified below.
 {title}The title of the webpage, from the "<title>" HTML tag.
 {zettel} The Zettelkasten id for the note.
 {url}The complete URL of the page the clip is taken from.
 {domain}The domain/hostname the clip is taken from.
- - + - Use {clip}, {date}, {datetime}, {year}, {month}, {day}, {time}, {title}, {zettel}, {og:image} and {url} as placeholders + +
+ + + + + + + + + + + + + + + +
PlaceholderDescription
 {clip} The text selected on the page when the extension is clicked.
 {date} The date string in format specified below.
 {datetime}The datetime in format specified below.
 {year}The current year, specified as an integer.
 {month} The current month, specified as an integer.
 {day} The current day, specified as an integer.
 {time}The time string in format specified below.
 {zettel} The Zettelkasten id for the note.
 {og:image} Add an OpenGraph image to the note.
 {og:video:url} Add an OpenGraph video embed to the note.
 {og:description} Add the OpenGraph description from the website to the note.
 {url}The complete URL of the page the clip is taken from.
 {domain}The domain/hostname the clip is taken from.
+
+
@@ -72,8 +105,8 @@

An unoffical clipper

- - + + diff --git a/src/options.js b/src/options.js index ea32875..bcfc397 100644 --- a/src/options.js +++ b/src/options.js @@ -1,3 +1,18 @@ +// Collapsible lists +var coll = document.getElementsByClassName("collapsible"); +var i; + +for (i = 0; i < coll.length; i++) { + coll[i].addEventListener("click", function() { + this.classList.toggle("active"); + var content = this.nextElementSibling; + if (content.style.display === "block") { + content.style.display = "none"; + } else { + content.style.display = "block"; + } + }); +} // Saves options to chrome.storage function saveOptions() {