Skip to content
This repository has been archived by the owner on Oct 31, 2024. It is now read-only.

feat: add domain to clipper #59

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add domain to clipper #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
key.pem
key.pem
**/.DS_Store
22 changes: 22 additions & 0 deletions src/lib/clip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}.`
Expand Down Expand Up @@ -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)

Expand All @@ -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, `<iframe width="560" height="315" src="${video}"
frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`)
} 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
Expand All @@ -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, ''))
Expand Down
77 changes: 72 additions & 5 deletions src/options.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand All @@ -124,9 +131,6 @@ button:hover{
text-align: left;
}

#faq dt{

}
#faq dd{
margin-left: 0px;
margin-top: 10px;
Expand Down Expand Up @@ -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;
}
45 changes: 39 additions & 6 deletions src/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,49 @@ <h2 class="subtitle">An unoffical clipper</h2>
<div class="form-group">
<label for="obsidian_note_name">Note to clip to <small>(You can specify the a folder as well, like `notes/{title}-{date}`)</small></label>
<input id="obsidian_note_name" name="obsidian_note_name" type="text" placeholder="clips/{zettel}">
<small class="form-text grey">Use {date}, {datetime}, {year}, {month}, {day}, {time}, {title} and {zettel} as placeholders </small>
<button type="button" class="collapsible">Note Name Options (click to expand)</button>
<div class="hideable-content">
<table class="placeholder-descriptions">
<tr><th class="placeholder-descriptions-header">Placeholder</th><th class="placeholder-descriptions-header">Description</th></tr>
<tr><td>&nbsp;<code>{clip}</code></td><td> The text selected on the page when the extension is clicked.</td></tr>
<tr><td>&nbsp;<code>{date}</code></td><td> The date string in format specified below.</td></tr>
<tr><td>&nbsp;<code>{datetime}</code></td><td>The datetime in format specified below.</td></tr>
<tr><td>&nbsp;<code>{year}</code></td><td>The current year, specified as an integer.</td></tr>
<tr><td>&nbsp;<code>{month}</code></td><td> The current month, specified as an integer.</td></tr>
<tr><td>&nbsp;<code>{day}</code></td><td> The current day, specified as an integer.</td></tr>
<tr><td>&nbsp;<code>{time}</code></td><td>The time string in format specified below.</td></tr>
<tr><td>&nbsp;<code>{title}</code></td><td>The title of the webpage, from the "&lt;title&gt;" HTML tag.</td></tr>
<tr><td>&nbsp;<code>{zettel}</code></td><td> The Zettelkasten id for the note.</td></tr>
<tr><td>&nbsp;<code>{url}</code></td><td>The complete URL of the page the clip is taken from.</td></tr>
<tr><td>&nbsp;<code>{domain}</code></td><td>The domain/hostname the clip is taken from.</td></tr>
</table>
</div>

<div class="form-group">
<label for="obsidian_note_format">Clipping format </label>
<label id="reset">(reset)</label>
<label for="obsidian_note_format">Default format <button class="reset" id="reset">reset config</button></label>
<textarea class="form-control" rows="6" id="obsidian_note_format" name="obsidian_note_format" type="text">> {clip}

Clipped from [{title}]({url}) at {date}.</textarea>
<small class="form-text grey">Use {clip}, {date}, {datetime}, {year}, {month}, {day}, {time}, {title}, {zettel}, {og:image} and {url} as placeholders </small>
<button type="button" class="collapsible">Note Template Options (click to expand)</button>
<div class="hideable-content">
<table class="placeholder-descriptions">
<tr><th class="placeholder-descriptions-header">Placeholder</th><th class="placeholder-descriptions-header">Description</th></tr>
<tr><td>&nbsp;<code>{clip}</code></td><td> The text selected on the page when the extension is clicked.</td></tr>
<tr><td>&nbsp;<code>{date}</code></td><td> The date string in format specified below.</td></tr>
<tr><td>&nbsp;<code>{datetime}</code></td><td>The datetime in format specified below.</td></tr>
<tr><td>&nbsp;<code>{year}</code></td><td>The current year, specified as an integer.</td></tr>
<tr><td>&nbsp;<code>{month}</code></td><td> The current month, specified as an integer.</td></tr>
<tr><td>&nbsp;<code>{day}</code></td><td> The current day, specified as an integer.</td></tr>
<tr><td>&nbsp;<code>{time}</code></td><td>The time string in format specified below.</td></tr>
<tr><td>&nbsp;<code>{zettel}</code></td><td> The Zettelkasten id for the note.</td></tr>
<tr><td>&nbsp;<code>{og:image}</code></td><td> Add an OpenGraph image to the note.</td></tr>
<tr><td>&nbsp;<code>{og:video:url}</code></td><td> Add an OpenGraph video embed to the note.</td></tr>
<tr><td>&nbsp;<code>{og:description}</code></td><td> Add the OpenGraph description from the website to the note.</td></tr>
<tr><td>&nbsp;<code>{url}</code></td><td>The complete URL of the page the clip is taken from.</td></tr>
<tr><td>&nbsp;<code>{domain}</code></td><td>The domain/hostname the clip is taken from.</td></tr>
</table>
</div>

</div>

<div class="form-group">
Expand All @@ -72,8 +105,8 @@ <h2 class="subtitle">An unoffical clipper</h2>

<div id="status"></div>

<button style="margin-bottom: 20px;" id="save">Save vault & note configuration</button>
<button id="test">Test configuration</button>
<button class="save-config" id="save">Save vault & note configuration</button>
<button class="save-config" id="test">Test configuration</button>

</main>

Expand Down
15 changes: 15 additions & 0 deletions src/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down