Git Product home page Git Product logo

omnivore-app / omnivore Goto Github PK

View Code? Open in Web Editor NEW
8.9K 32.0 413.0 362.71 MB

Omnivore is a complete, open source read-it-later solution for people who like reading.

Home Page: https://omnivore.app

License: GNU Affero General Public License v3.0

Makefile 0.03% Swift 20.29% CSS 0.24% HTML 26.64% JavaScript 3.16% Shell 0.04% Dockerfile 0.14% TypeScript 31.61% PLpgSQL 13.41% Handlebars 0.01% Python 0.34% Kotlin 4.01% Nearley 0.08% EJS 0.02%
bookmarks logseq logseq-plugin productivity read-it-later reader reading

omnivore's Introduction

Omnivore

GitHub Workflow Status Discord Mastodon Follow Twitter Follow GitHub

Omnivore Logo

Omnivore is a complete, open source read-it-later solution for people who like text.

We built Omnivore because we love reading and we want it to be more social. Join us!

Every single part is fully open source! Fork it, extend it, or deploy it to your own server.

We also have a free hosted version of Omnivore at omnivore.app -- try it now!

web-screenshot-listview

Join us on Discord! ๐Ÿ’ฌ

We're building our community on Discord. Join us!

Read more about Omnivore on our blog. https://blog.omnivore.app/p/getting-started-with-omnivore

Shoutouts ๐ŸŽ‰

Omnivore takes advantage of some great open source software:

  • TypeScript - Most of our backend and frontend are written in TypeScript.
  • Next.js - Our frontend is a Next.JS app and is hosted on Vercel.
  • SWR - We do all our data fetching on the web using SWR.
  • Stitches - We use Stitches on the frontend to style our components.
  • Mozilla Readability - We use Mozilla's Readability library to make pages easier to read.
  • Swift GraphQL - We generate our GraphQL queries on iOS using Swift GraphQL.
  • Apollo GraphQL - We generate our GraphQL queries on Android using Apollo GraphQL.
  • Radix - We use Radix UI's components on our frontend.
  • And many more awesome libraries, just checkout our package files to see what we are using.

Importing Libraries

Check out our docs for information on importing your data from other apps.

How to setup local development ๐Ÿ’ป

The easiest way to get started with local development is to use docker compose up. This will start a postgres container, our web frontend, an API server, and our content fetching microservice.

Requirements for development

Omnivore is written in TypeScript and JavaScript.

  • Node -- currently we are using Node.js v18.16
  • Chromium -- see below for installation info

Running the web and API services

1. Start docker compose

git clone https://github.com/omnivore-app/omnivore
cd omnivore
docker compose up

This will start postgres, initialize the database, and start the web and api services.

2. Open the browser

Open http://localhost:3000 and confirm Omnivore is running

3. Login with the test account

During database setup docker compose creates an account [email protected], password: demo_password.

Go to http://localhost:3000/ in your browser and choose Continue with Email to login.

Frontend Development

If you want to work on just the frontend of Omnivore you can run the backend services with docker compose and the frontend locally:

docker compose up api content-fetch
cd packages/web
cp .env.template .env.local
yarn dev

You will need to configure some values in the new .env.local file. These are the values for running the web service directly on your host machine and running api and content-fetch within docker:

NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_HIGHLIGHTS_BASE_URL=http://localhost:3000
NEXT_PUBLIC_LOCAL_BASE_URL=http://localhost:3000
NEXT_PUBLIC_SERVER_BASE_URL=http://localhost:4000
NEXT_PUBLIC_LOCAL_SERVER_BASE_URL=http://localhost:4000

Running the puppeteer-parse service outside of Docker

To save pages you need to run the puppeteer-parse service.

1. Install and configure Chromium

brew install chromium --no-quarantine
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
export CHROMIUM_PATH=`which chromium`

2. Navigate to the service directory, setup your env file, and install dependencies

cd packages/puppeteer-parse
cp .env.example .env
yarn

3. Start the service

yarn start

This will start the puppeteer-parse service on port 9090.

In your browser go to http://localhost:3000/home, click the Add Link button, and enter a URL such as https://blog.omnivore.app/p/getting-started-with-omnivore.

You should see a Chromium window open and navigate to your link. When the service is done fetching your content you will see it in your library.

How to deploy to your own server

Omnivore was originally designed to be deployed on GCP and takes advantage of some of GCP's PaaS features. We are working to make Omnivore more portable so you can easily run the service on your own infrastructure. You can track progress here: #25

To deploy Omnivore on your own hardware you will need to deploy three dockerized services and configure access to a postgres service. To handle PDF documents you will need to configure access to a Google Cloud Storage bucket.

  • packages/api - the backend API service
  • packages/web - the web frontend (can easily be deployed to vercel)
  • packages/puppeteer-parse - the content fetching service (can easily be deployed as an AWS lambda or GCP Cloud Function)

Additionally, you will need to run our database migrations to initialize your database. These are dockerized and can be run with the packages/db service.

License

Omnivore and our extensions to Readability.js are under the AGPL-3.0 license.

omnivore's People

Contributors

340rahul avatar aaachen avatar cdev147 avatar consultorseovalencia avatar dependabot[bot] avatar echoriiku avatar egrajeda avatar gannonlawlor avatar gitstart avatar gitstart-omnivore avatar herealext avatar holton-jiang avatar ismailghedamsi avatar jacksonh avatar jeffbowen avatar kristol07 avatar laurentkempe avatar magsmagnoli avatar peterdavehello avatar podginator avatar prof18 avatar remychantenay avatar rupin90 avatar satindar avatar se-jaeger avatar shanemaglangit avatar sixten avatar stefanosansone avatar suravshresth avatar sywhb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

omnivore's Issues

Upgrade to apollo-server 3

We need to upgrade the API server to apollo-server 3 to remove some deprecated packages.

It looks like the main issue with this will be the @sanitize directive, but we might be able to use an OSS equivalent.

[Settings View] - Index (mobile) and left menu (desktop)

Omnivore is adding an extensible settings system for user options. Right now we do not have a temporary version of this page, but it should be located at /settings. This view will only be displayed on mobile, we will handle this in the dropdown menu, by making the settings button go to /settings/installations on desktop, and /settings on mobile.

Screen Shot 2022-03-06 at 11 02 18

Figma (use Option Three): https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=444%3A34100

Implementation notes

This task involves updating settings/installation, settings/labels, and settings/emails to display the left menu on desktop and creating a new page settings that will be displayed on mobile.

Requirements

  • Dark and light mode support
  • Add left menu to all settings pages
  • Create new page for settings on mobile
  • Update dropdown menu to link to correct page based on device

Update the snackbar on web based on latest designs

We use the react-hot-toast library for displaying toast messages in a few places in the web app. You can see its usage in the code by searching for toast.error and toast.success.

These toasts are using default UI from the library that doesn't fit our UI.

In the designs you can see we have a new UI for success UIs:

Screen Shot 2022-03-21 at 22 26 18

This can be seen in Figma here: https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=444%3A34018

We should create a new showSuccess function in utils that can be imported into components/pages and display the above Toast UI. We can then update all uses of toast.success to use the new UI.

There isn't a design for failure yet but we can use the same design but with the icon WarningCircle and a background colour #cc0000

Settings View

Omnivore is cleaning up the settings and installation views in our web app based on new designs. Most of these pages are already created but need layout and display changes. The settings view work is prioritized and split into separate issues below based on the importance of each view.

Screen Shot 2022-03-06 at 10 17 36

Figma: https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=444%3A30941

Implementation Plan

  1. Emails and Installation: The most time sensitive view is the Emails view. This can be implemented before the main index as we will link directly to it in our dropdown menu. This means we do not need to implement the side menu on the emails desktop page right away.

  2. Index After Emails, and installation are implemented we can add the side menu on the emails and installation page, and add the index page for the mobile view.

  3. Labels view

Prioritized implementation order:

Some images are not being displayed in the Axios newsletter

Here is an example image proxy URL that fails: https://proxy-demo.omnivore-image-cache.app/100%x0,sCh5EyC35VQVAZdNY4byf0b_pccwDyG5LeHsgI10LSLc/https://datawrapper.dwcdn.net/E8vUS/fallback.png

this came from my saved copy of the newsletter here: https://demo.omnivore.app/jacksonh/axios-pm-gen-z-surprise-17f0988918c

with an original URL here: https://link.axios.com/view/61eef5e5492d41078a32440cfxaw4.a1v4/df289925

it looks like the issue is the image sizing is set to "100%x0" so it does not get resized properly.

Add more reading space on iOS by making the navbar collapse on scroll

Based on design discussed on discord, lets add more readable space on iOS by collapsing the navigation bar on the reader view when the user scrolls.

  • Collapse when the user scrolls up
  • Use the reader background colour for the statusbar
  • On tap of the statusbar display the navigation bar without scrolling to top

[Settings View] - Installation

Omnivore has an installation page that helps users installed native apps (iOS and Mac) and browser extensions. The current version is available at /settings/installation. We have a temporary version of this page, but need to update to the new design / layout.

Screen Shot 2022-03-06 at 10 56 50

Figma design (Use option three): https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=444%3A34100

Implementation Notes

  • We can ignore the settings button (Navigation to Settings) information in the Figma designs
  • For mobile design use the card option in figma Apps and Extensions 2

Requirements

  • Dark and light mode
  • Desktop and mobile mode
  • Component for App installation
  • Component for Browser installation

[Settings View] - Emails

Omnivore allows users to create addresses that receive email and add it to a user's inbox. A user can create multiple email addresses. There is a temporary version of this page available at settings/emails.

Screen Shot 2022-03-06 at 10 17 36

A new design for this page has been created here:

https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=444%3A33319

Notes

The design for this view is slightly off. Visually it is correct, but the user experience is inaccurate. Email addresses are immutable. They can be created, and they can be deleted, but they can not be modified. Also, they are created by Omnivore's backend, so there should be no user input on this page.

The confirmation codes are created when a GMail address is linked with an Omnivore Inbox address. So in testing they will normally not be set.

Requirements

  • List emails
  • Display confirmation code if set on an email
  • Create an email
  • Delete an email
  • Copy an email address
  • Copy a confirmation code
  • Light and dark mode support
  • Desktop and mobile support

Auto labels

We have a few places we should automatically add a label to a link. In some cases we might want to automatically remove a label too.

The most obvious and easiest to do is a Newsletter label on links we receive via email newsletters. This would make it easy for users to filter them out.

But we could also consider some other cases like Recently Read (this could be done via another query also). If in search we added a Recently Read label it would be another nice filter,

Add email create/copy support to iOS

On iOS we need the ability to create, and copy email addresses (based on https://omnivore.app/settings/emails ) . This can be a simple tableview type layout linked to the profile page.

The two pieces of functionality on the view are a Create Email Address button which would call the createNewsletterEmail API, a list of all the existing emails (fetched with the newsletterEmails API), and the ability to copy an email address to the pasteboard (tap an address, and display a Snackbar after copying).

Axios newsletter does not show up in library

Reported by a user. I just signed up on demo so we can see their format.

some logs:

2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 headers: {
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 received: [
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'by mx0087p1iad2.sendgrid.net with SMTP id rEM6NEJjwh Mon, 24 Jan 2022 21:24:35 +0000 (UTC)',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'from pmta237-200.sailthru.com (unknown [192.64.237.200]) by mx0087p1iad2.sendgrid.net (Postfix) with ESMTP id 069588C0962 for <[email protected]>; Mon, 24 Jan 2022 21:24:35 +0000 (UTC)',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'from njmta-149.sailthru.com (173.228.155.149) by pmta237-200.sailthru.com id htsch62tq4oi for <[email protected]>; Mon, 24 Jan 2022 16:24:34 -0500 (envelope-from <[email protected]>)',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'from nj1-oddturquoise.flt (172.18.48.8) by njmta-149.sailthru.com id htsch41qqbsv for <[email protected]>; Mon, 24 Jan 2022 16:24:34 -0500 (envelope-from <[email protected]>)'
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 ],
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'dkim-signature': 'v=1; a=rsa-sha256; c=relaxed; s=sailthru; d=axios.com; h=Date:From:To:Message-ID:Subject:MIME-Version:Content-Type:List-Unsubscribe; [email protected]; bh=yRTtlQ779D4/8js3cCWBEtwu411k9z6vcWUnSXZp7zk=; b=B44kCReNtBMYsjuORWXOI7iIXpZdAvZ2WytFejnoUs3r78o3G8pA5g+sQMVUAG9gHa7Jqg/PCDGR GIcbh6HGW9XAcmX2uKfOD+lg45Qw0OnKsKxySoMVxNZdgKsEZ0KPfQFInpALCjlKLdJ2cs+ILTNU 96NpscdJHjzqxpQ9i9E=',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 date: 'Mon, 24 Jan 2022 16:24:34 -0500 (EST)',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 from: 'Mike Allen <[email protected]>',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 to: '[email protected]',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'message-id': '<[email protected]>',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 subject: 'Axios PM: Crisis on the Eastern Front',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'mime-version': '1.0',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'content-type': 'multipart/alternative; boundary="----=_Part_35505561_1026271291.1643059474872"',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 precedence: 'bulk',
Default
2022-01-24T21:24:37.139ZinboundEmailHandlerc7gx6zcmbpx6 'x-feedback-id': '7053:26472575:campaign:sailthru',

handle newsletters from https://www.beehiiv.com/

These don't include a list-url and have private domains such as milkroad.com so its hard to tell what is a newsletter vs an informational post. It looks like the best thing we might have to match on is a Read Online URL, and potentially some tracking pixels in content.

Tells us beehiiv is the newsletter platform:

<img alt="" height="auto" width="340" style="display:block;width:100%;height:auto;border:0;outline:none;text-decoration:none;" src="https://media.beehiiv.net/uploads/asset/

Tells us the message is a newsletter, not an informational post:

<a target=3D"_blank" class=3D"link" style=3D"color:#ffff=
ff;text-decoration:underline;text-decoration-color:#ffffff; " href=3D"http:=
//link.mail.beehiiv.com/ss/c/....">Read Online</=
a></div></td></tr></table><!--[if mso | IE]></td></tr></table>

Important to note that the link is not always hosted at beehiiv.com:

<a target="_blank" class="link" style="color:#222222;text-decoration:underline;text-decoration-color:#222222; " href="https://u23463625.ct.sendgrid.net/.......">Read Online</a></div></td></tr></table>

Not all GoLang Weekly newsletter content is extracted

Report from a user:

"https://golangweekly.com/leave/8b299ffecf", 
"reportComment": 
"The extracted content is incomplete.  Compare to the original: https://golangweekly.com/issues/401

The omnivore version includes the main section but omits the "Code & Tools" section."

Font size changes on web are not persisted

Steps to reproduce:

  1. Navigate to the reader
  2. Adjust the font size
  3. Navigate back to the library
  4. Go back to the reader -- note that the font size has not been changed

These should at least be saved in the personalization cookie so they are maintained per-device.

Error with confirmation code emails from Gmail

A user just testing Gmail forwarding didn't receive their code. Looking at logs (on production) we see this message:

Error: invalid confirmation email at handleConfirmation (/workspace/build/src/newsletter.js:79:15) at /workspace/build/src/index.js:110:59 at /workspace/node_modules/@sentry/serverless/dist/gcpfunction/http.js:80:16 at /workspace/node_modules/@sentry/serverless/dist/utils.js:33:20 at Object.apply (/workspace/node_modules/@sentry/serverless/dist/utils.js:51:28) at /workspace/node_modules/@google-cloud/functions-framework/build/src/invoker.js:98:17 at processTicksAndRejections (internal/process/task_queues.js:77:11)
Error: invalid confirmation email at handleConfirmation (/workspace/build/src/newsletter.js:79:15) at /workspace/build/src/index.js:110:59 at /workspace/node_modules/@sentry/serverless/dist/gcpfunction/http.js:80:16 at /workspace/node_modules/@sentry/serverless/dist/utils.js:33:20 at Object.apply (/workspace/node_modules/@sentry/serverless/dist/utils.js:51:28) at /workspace/node_modules/@google-cloud/functions-framework/build/src/invoker.js:98:17 at processTicksAndRejections (internal/process/task_queues.js:77:11)

Label Search Operations

There should be three ways of using Labels in search. We can use GitHub as a guide for each of these methods:

  • contains: label:foo -- the returned items have the specified label
  • OR: label:foo,bar,baz -- the returned items have any of the specified lablels
  • NOT -label:foo -- the returned items do not have the specified label

Add margin notes to the reader view based on new designs

Omnivore has an updated design for desktop that will display notes in the right hand margin. To create a note in Omnivore first select some text, then press the note button. A dialog will open and you can enter text. Currently that text is not visible until you click the note icon.

We would like to update the layout to display the notes in the margin on large displays:

Screen Shot 2022-03-21 at 22 43 00

The Highlight objects have an annotation?: string property. If set, the highlight has a note and it should be displayed in the margin.

Note that we will only display notes if there is enough margin space.

https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=121%3A8424

Make header avatar less distracting by adding opacity and using a less bold colour on the fallback image

A few design suggestions:

  • Set the opacity on the profile picture to 48% if there is a picture
  • Use a white background if there is no photo
  • Set opacity to 100% on hover

Design for the avatar in light and dark mode

Screen Shot 2022-02-28 at 11 54 45

Screen Shot 2022-02-28 at 11 55 49

Figma Design: https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=344%3A30092

Code for the avatar header: https://github.com/omnivore-app/omnivore/blob/f7e3a1657eb9c7af1a67bf25faf8265f75dc3d4a/packages/web/components/elements/Avatar.tsx

Implement article actions floating button and font size adjuster on web

Omnivore has a design for a floating action button for actions on an article. We'd like to implement these controls in multiple phases, starting with the button having a single action. This will give us an opportunity to test out the FAB and see if the design concept works well for us.

Note for this ticket we only implement the Phase One functionality, the additional details are to understand future requirements.

Collapsed:

Screen Shot 2022-02-28 at 13 05 45

Expanded:

Screen Shot 2022-02-28 at 13 05 32

We have seven actions available in this button but we can implement in multiple phases phases.

Phase one: Adjust font size

Phase two:

  • Adjust margin size
  • Adjust line height
  • View all highlights
  • Archive

Phase three: Edit labels

Phase four: Edit title and description

Requirements

  • Add collapsed floating action button to the reader view. Should be always visible in lower right hand portion of the reader
  • On tap, expand the view to expose action buttons (Using the set of phase 1 buttons)
  • On tap, main menu button becomes a X close button
  • Tapping the X closes the menu
  • Tooltips and larger display on hover of each action item

Screen Shot 2022-02-28 at 14 18 05

  • Implement the adjust font size control:

Screen Shot 2022-02-28 at 14 04 15

  • When the adjust font size control is open, tapping the X button should close the whole floating actions and go back to the original ... state.

Figma designs: https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=344%3A32055

Note we use Phosphor Icons and should be using:

  • DotsThree
  • X
  • Text-aa

Some code that handles adjusting font size: https://github.com/omnivore-app/omnivore/blob/main/packages/web/components/templates/article/ArticleContainer.tsx#L72 -- note there is a min size of 10 and max size of 28

Add site_name and site_icon attributes to Pages models and API

There are two properties we should add to our Pages model:

We will also want to add these to the API response so they can be displayed in the UI. Notice how the icon of the site is displayed in the library view.

Screen Shot 2022-02-24 at 11 40 37

[Settings View] - Labels

Omnivore allows users to create labels and attach them to library items. A label has a name, colour, and description , users can create labels, delete labels. They can also edit a labels color and description.

This page has a temporary version available at settings/labels

Screen Shot 2022-03-06 at 10 36 06

Figma (start at option three): https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=444%3A34097

Implementation Notes

  1. We can ignore the USES column in the design.

Requirements

  • Light and dark mode support
  • List label w/columns: Name, Description, Color, Actions
  • Edit button to enter edit mode
  • Save/Cancel buttons when in edit mode
  • Allow editing descriptions
  • Allow selecting colors from a drop down (7 colors listed)
  • Allow creating a custom color
  • Refresh button to choose a random color (from the 7 listed)

Use lower priority queue for large imports

When users import large libraries we should switch over to the low priority queue to keep performance predictable for all users.

To do this we can add a rate limit type check to the import path. In before adding to the task queue based on some heuristics we can decide to use either the normal or the low priority task queue. There is a task queue omnivore-prod-queue-low that dispatches to the cloud function at a lower rate (3 per second vs 500).

To do this we will need to create a low priority queue in the demo environment also.

As a first pass at our logic I think we can do:

5 articles added in the last minute: use low queue
default: use normal queue

You can see how we pass a priority param to the cloud task function here:

const createHttpTaskWithToken = async ({

PDFs failing to save via extension on Safari

There are a few issues with PDFs in Safari. The main one is the blob type isn't supported so we can't transfer the PDF data from the tab to the background extension context. Sending the full data in the message will fail as there is a max message size for passing data between the two.

return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      // load `document` from `cache`
      xhr.open('GET', '', true);
      // xhr.responseType = 'blob';
      xhr.responseType = 'arraybuffer';

      xhr.onload = function (e) {
        if (this.status === 200) {
          // `blob` response
          console.log('response', this.response);
          var arrayBuffer = this.response; // Note: not oReq.responseText
          var byteArray = new Uint8Array(arrayBuffer);
          console.log('sending arraybuffer', byteArray);
            // const blobUrl = URL.createObjectURL(this.response)

          resolve(byteArray);
        } else {
          reject(e);
        }

Improve support for users that want to deploy their own backened

Currently Omnivore relies on a few GCP services to run, but open source users will likely want to deploy the api, web, and content fetching (puppeteer-parse) service to another platform. We need to come up with a list of target platforms and supported deployment configurations that are realistic for users wanting to deploy a minimalistic configuration.

Some of the services we currently rely on:

  • Pubsub & Cloud Task -- task manager is used for schedule jobs such as content fetching
  • CloudStorage -- we use CloudStorage as our main blob storage for PDF files
  • Cloud Functions -- we deploy the pupeteer-parse service to a google cloud function

Other services we are using:

  • SendGrid Inbound Parse -- to receive income email and invoke a webhook (running on a GCP Cloud Function)

Update library cards based on new design

We have an improved design for the library items cards.

Screen Shot 2022-02-25 at 10 04 47

Screen Shot 2022-02-25 at 09 54 44

Main improvements:

  • reading progress bar moved to the top of the car in the grid display
  • added labels to the bottom of the card
  • new reading progress bar in the list view layout
  • change to image size
  • new icon for the MoreOptionsIcon (DotsThree from https://phosphoricons.com/ )
  • A new hover state for selected cards (hover or activated with keyboard controls)

wont do:

  • There is a new site icon on the cards in the top left corner, our backend doesn't support this feature so we will not implement it in this iteration

Validation

Match figma designs for:

  • Grid card light theme
  • Gird card dark theme
  • List card light theme
  • List card dark theme

Links

Code

Design

Update copy on share extension

Lets just have the share extension say Saved to Omnivore. I think the reason Apple had issue with the previous mac version was just because the refresh button didn't show up.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.