blogger-peer-review / quotebacks Goto Github PK

Quote the web

JavaScript 94.81% HTML 0.73% SCSS 4.45%

quotebacks's Introduction

Quotebacks

Quote the web — install Chrome extension

Grab quotes from any page using cmd+shift+s (on Windows: ctrl+shift+S). Then grab the embed link to produce a live HTML citation like this:

You can paste the embed code into any HTML page. It looks just like this.

<blockquote class="quoteback" data-title="Open Transclude for Networked Writing" data-author="Toby Shorin" cite="http://subpixel.space/entries/open-transclude/">
The web is still a very young medium, and it has been influenced more than anything else by print media design. <strong>There is so much more that can be done with text on a screen than is being done today.</strong> Citations, drawing, chat, speech-to-text. There are opportunities everywhere, and the bar is low! If we are serious about unlocking the value of knowledge we should consider how to improve every part of the knowledge production stack, and that includes reading. As <a href="http://beautiful-company.com/i/printed-matter-website" target="_blank" rel="noopener">Laurel Schwulst says</a>: “Imaginative functionality is important, even if it’s only a trace of what was, as it’s still a sketch for a more ideal world.”
<footer>Toby Shorin<cite><a href="http://subpixel.space/entries/open-transclude/">http://subpixel.space/entries/open-transclude/</a></cite></footer>
</blockquote><script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"></script>

Quotes are saved locally in your Chrome storage.

Download our chrome extension here: https://chrome.google.com/webstore/detail/quotebacks-quote-the-web/makakhdegdcmmbbhepafcghpdkbemach

Made by Tom Critchlow and Toby Shorin. DM us on Twitter or email us at [email protected] or [email protected] with any questions or bug reports!

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

quotebacks's People

Contributors

Stargazers

Watchers

quotebacks's Issues

Request: remove colon from file name

Hello,
I'm unable to clone the project on Windows (or even download and extract the zip) because of this file

https://github.com/Blogger-Peer-Review/quotebacks/blob/master/styles/scss:styles.css

which contains a colon in it's filename.
Since colons are prohibited in filenames in Windows, git acts a little oddly.

Can you rename it?
Thanks

keyboard shortcut for saving quotes

Hi. I'd really like to use this extension, but the default keyboard shortcut (⌘+Shift+S) engages my zotero extension. Any way to change/set a different keyboard shortcut?

Thanks!

James

feature request: add "copy image" in the standard Quotebacks window

Hi,
when I click ctrl+shift+s and I need to copy image of that quote, I must open the "All quotes" tab and then click on "copy image".

It would be great to "copy image" immediately available.

Thank you

Embedded in Ghost: Page does not load

I pasted the Quotebacks code into the header of my Ghost theme, and the page simply loaded as a white screen. When I removed it, the page loaded fine.

Mark text fragments

Hello,

Chrome has a new feature which allows highlighting certain parts of the content.

Like this:
https://sometimesright.com/2020/04/25/blogging-vs-twitter/#:~:text=To%20me,quantity

It would be more user friendly to add the parts int he URL.

edit: they are called text fragments: https://twitter.com/david_bokan/status/1267902225281622020

Incorrect key shortcut glyphs on Windows

There's no ⌘ key on Windows, alas

What is the "standard"?

The https://quotebacks.net page describes Quotebacks as three things:

A web-native citation standard and quoting UX pattern

A tiny library, quoteback.js, that converts HTML <blockquote> tags into elegant interactive webcomponents

A browser extension to create quoteback components and store any quotes you save to publish later.

Which is all great! But, I don't personally need (3). And, because I'm styling quotes on my site with a particular design, I don't need the effects of (2).

I'd still like to support the Quoteback standard and pattern though, which I guess would be specific parts of the markup that quoteback.js generates. However, I can't see anything that specifies exactly what the "standard" or "pattern" is.

So, if I'm generating all the HTML myself, what would I need to include for my quotes to be compatible? What's a minimal acceptable standard-qualifying set of markup? Or maybe I've misunderstood and the only way to be compatible is to include quoteback.js?

(I don't mean to dismiss the value of (2) and (3) by the way – I love the whole idea, I'm just stuck in my ways!)

Not pulling the full URL?

Hey hey, I'm surprised by this one since it's worked on 99% of the 10+ snippets I've saved, so I'm guessing it's something to do with the original source's website. BUT, a snippet I clip truncates the URL of the sources to the TLD, not the actual slug. Can't figure out why so thought I'd share with ya.

https://www.tolerance.org/magazine/ally-or-accomplice-the-language-of-activism

clip something on that page and, for me, when I click "go to text" it'll take me to the main .org site instead of the actual article.

Thanks for making this! Loving the tiny uses I've been experimenting with thus far.

consider switching position of author and article title in embed

first of all: i really love this tool, thank you all for making this ✨

i wanted to request/suggest a small design change that could help highlight the author of a piece (whose words are actually being quoted). The screenshots below show what i mean:

I did this manually myself in the code by switching the values of data-author and data-title. I also realized that the library didn't pick up the author's name itself so i added that manually myself. Code changes are summarized in the block below:

<blockquote 
  class="quoteback" darkmode="" 
-  data-title="Zombiescapes%3A%20Africa's%20Megacity%20Addiction"
+  data-author="Zombiescapes: Africa's Megacity Addiction" 
-  data-author="@republicjournal" 
+  data-title="Dafe Opotu for @republicjournal" 
  cite="https://republic.com.ng/june-july-2019/african-mega-city-addiction/">
  More fundamentally, however, the central promise of Eko Atlantic—that it is possible to ‘start over’ and build an exclusive city within a city—is flawed. The high property values clearly illustrate the class of urban resident the new city hopes to attract. But these urban elites require a huge number of service workers; drivers, cooks, street sweepers, recharge card sellers, barbers, construction workers, mechanics and more to sustain their lifestyles. In cities, everyone wants to live where the jobs are and where the economic buzz is greatest. Even if the urban poor of Lagos are priced out from the fancy new developments of Eko Atlantic, they will find their way to informal settlements and abandoned properties. Based on the share of Lagosians who can realistically afford to live in Eko Atlantic, many of the residential buildings are likely to be empty anyway. Even Victoria Island, Ikoyi and Banana Island already have vacancy rates as high as <a href="https://www.bloomberg.com/news/articles/2018-05-29/eko-atlantic-city-eyes-2023-finish-as-nigeria-economy-rebounds" target="_blank" rel="noopener">30 per cent</a> in their wealthier areas.
  <footer>@republicjournal<cite> <a href="https://republic.com.ng/june-july-2019/african-mega-city-addiction/">https://republic.com.ng/june-july-2019/african-mega-city-addiction/</a></cite></footer>
</blockquote>
<script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"></script>

this might be a peculiar request given that:

i'm quoting from a publication and not an individual's blog
it would probably be complicated since a random quote in an article could be from an interviewee and not the author's words

so lmk if this is out of scope or would be worth considering in some form. i've also got some questions about adding custom CSS to this but i'll leave that for another issue.

Not working in Vivaldi

Great extension idea. However, I've installed it in Vivaldi, my favorite chrome browser and even after changing shortcut and then back to shift-command-s, I cannot get it to work. Any help?

Express the quoteback as structured, linked data

It would be wonderful if quoteback expressed the quotation in a structured, machine-readable form, such that other entities on the web could understand the idea of the quotation.

A number of semantic markup technologies spring to mind for enabling this:

We could embed a block of JSON-LD
We could add microdata tags
We could add RDFa tags

A number of existing schemas spring to mind for how to express the quote:

Trying to lazy-load quoteback.js

I am trying to implement a plugin for Gatsby that would allow me to lazy-load quoteback.js if (and only if) there is a Quoteback quote in a certain blog post or page.

For that, it's important to be able to lazy-load the script and invoke the loading function in a fully async way.

This would be very easy with a simple change in

quotebacks/quoteback.js

Line 4 in 30f3451

document.addEventListener("DOMContentLoaded", function(){

Instead of loading Quotebacks just once (on DOMContentLoaded) expose the function under window.quotebacks.widgets.load, and then let plugin developers call it whenever they want (presumably when there's a page change). That would imitate the behavior of Twitter's renderer script for inline tweets, which is the closest equivalent of Quotebacks that I could think for. You can also still call that function on DOMContentLoaded by default, but leave window.quotebacks.widgets.load as a way for async page loads to work. Would love to see this implemented! Then I can make the Gatsby plugin more elegant, it's a bit hacky now.

Privacy Policy

I can't find Privacy Policy for Chrome or Firefox Extension. Could you please add it?

Is there any way to make a quoteback link to a book passage?

E.g. it would link to the relevant passage in Kindle / Google Books?

Export to Org

I'm heavily invested in Emacs' org mode ecosystem for tracking information, using tools like Logseq and org-roam to do so. It would be great to be able to export quotes to org so that I can integrate them with these services!

Alt+S keyboard shortcut needs changing for Firefox

Using Firefox on Windows, Alt+S just opens the History menu and doesn't copy the quoteback text.
Using the right-click mouse menu to copy the quote works fine.
Will there be a way to change the shortcut combination for the extension please?

[mac extension] Key remapping or alternative usage

⌘+shift+s doesn't work. It might be being swallowed by some other key mappings on my system or another extension or something

Can't install chrome extension

https://chrome.google.com/webstore/detail/quotebacks-quote-the-web/makakhdegdcmmbbhepafcghpdkbemach

I get the error "There was a problem"
If I click on more info I get "Invalid manifest"

Dark mode

Haven't played with quotebacks yet, but how does it handles dark mode?

Update @14:36:

I got to play with it, it doesn't handle dark mode. Can modal support for it be added using prefers-color-scheme on css?

feature request: automatically highlight comment field in extension

when I press the hotkey to create a Quoteback
then I should see my cursor automatically placed in the comment field so that I can make a comment without clicking

Question: Why does each quote need a link to the script?

I'm trying to create a WordPress plugin to make installing backquotes easier but find out that I remove the link to the script on the individual quotes, only the first quoteback gets properly styled, any subsequent one misses the styles and gets the default style for blockquotes. It appears that if the first quotation on a page has the script (regardless of where it points to local or remote) the other quotations will work fine

Enable Switching to Darkmode based on website template

i want this quote box to adapt to my template and i use a switch to dark mode or light mode button on my site. i want the quote container to adapt to that also.
I really want the container to switch to dark mode when the nightmode button on my site is toogled or triggered
here is code for the night mode button

Dark/Light

i alread tried to build a modification but i still couldnt get it
here is my fist js implementation attempt

i even tried using css

this is how nightmode is triggered on my site tho

would be glad if you could attend to me
thanks for your attention
im waiting for your;response

Editing title and author not working in Firefox

Thanks for this awesome project and bringing it to Firefox! I'm having an issue where in Firefox selecting text and triggering the quoteback function, the edit buttons for the citation's title and author aren't working, thus preventing changing them.

quotes should have a field for a signature using a public key

the web is dynamic, and the truth of prior versions is sometimes contested.

it would be useful to be able to attach a dated signature into the quote in order to document the historical truth of the prior state.

example: notable person T says something extreme. Blogger B puts quote Q on their blog, and B signs Q using their public signature. By itself this does nothing, but multiple parties using their public keys to quote and sign the same quote provides strong evidence of T's position at some later point.

Feature Request: Firefox Extension

As a project that supports open software and the indieweb, could we get the extension ported to Firefox?

CTRL+shift+s does not work

Hi,
I'm using 83.0.4103.106 in Win10 and if I select a text and click on CTRL+shift+s nothing happens.

Thank you

Support for code highlighting in markdown output

Expected behaviors:

When saving a snippet of text which includes a code block or preformatted text, the 'copy markdown' feature should preserve that formatting.

Actual behavior:
I do not get preformatted text surround by backticks. (I have not tested on code blocks yet)

To reproduce:

select the samples I've provided below
save as a quote back
click 'copy markdown'
paste the output.

Sample 1:
Here is some preformatted text

Sample 2:
Here is a code block:

function codeBlock() {console.log("I am some code"}

Annotating PDFs viewed in a browser

Hi there,

Thank you for making quotebacks - I'm a big fan of the idea, and I now use it daily!

I wanted to ask if you'd accept a PR for allowing quotebacks to be able to refer to PDFs as well, as I fin myself using quotebacks a lot when online, but I find myself wishing I had a way to use a similar approach for when I read PDFs.

I got into the habit of reading PDFs in a browser, largely because the browser plugin for hypothes.is let me link to specific sections of a PDF .

It does this because PDFs have a 'fingerprint' that hypothesis uses instead of relying on just the url (you can't use the url if you're reading a local pdf, for example).

After looking over the quoteback exports, I've noticed that url is used as a key in the export format, and when I try to make a quotebook with a PDF that isn't online, I get an error like so in the console:

Warning: Invalid absolute docBaseUrl: "file:///Users/chrisadams/Downloads/w28472.pdf".

Would you accept a PR, that checks if a document being viewed is a PDF, and being viewed using a file:/// protocol, and uses this PDF fingerprint instead of a url?

What this enables

This would make it really easy to collect quotebacks for PDFs in a browser, for use in an all kinds of workflows, and allow folks to compare their own comments and notes, the way you can right now, with regular old urls.

If you had a way to follow lookup a PDF fingerprint to a publicly visible instance of that PDF say… it was served online at some public service, to allow rendering a PDF in browser, then you'd be able to do 'deep' links into PDFs the way you do can do 'deep' links into HTML.

The hypothes.is service does something like this with sharable links, but it occurs to me that browsers would be able to do this with just the text mentioned in a quoteback, and a way to refer to the original source.

If it helps, below is an example of what I'm thinking about this eventually enabling - follow my link to the tweet to see a demonstration of a deep link to a text in a publicly hosted PDF.

https://twitter.com/mrchrisadams/status/1356259712912732162