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

Overview

Omnivore

GitHub Workflow Status Discord 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!

  • Highlighting, notes, search, and sharing
  • Full keyboard navigation
  • Automatically saves your place in long articles
  • Add articles via email (with substack support!)
  • PDF support
  • Web app written in node and typescript
  • Native iOS app
  • Progressive web app for Android users
  • Browser extensions for Chrome, Safari, Firefox, and Edge
  • Tagging (coming soon!)
  • Offline support (coming soon!)

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!

omnivore-readme-screenshot

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.
  • Radix - We use Raxix UI's components on our frontend.
  • And many more awesome libraries, just checkout our package files to see what we are using.

Importing Libraries

If you have a library you'd like to import, @davidohlin has created a tool that imports a list of CSV URLs: omnivore-import

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 nodejs v14.18
  • 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. Create a test account

Omnivore uses social login, but for testing there is an email + password option.

Go to http://localhost:3000/email-registration in your browser.

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.local .env
yarn dev

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: https://github.com/omnivore-app/omnivore/issues/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.

Comments
  • Search - Recent Searches

    Search - Recent Searches

    Video reference

    https://www.awesomescreenshot.com/video/11319930?key=1906ddc480c5bbe6c3017ab4ca251fc8

    - Here is how local storage currently looks like, keeping it simple on how we save key/values, can be updated if needed for search recent history

    Screen Shot 2022-09-26 at 7 31 50 AM

    Tasks ------------------------

    • [x] Adding packages (trial) - Downshift and recent searches , trial ended and only Downshift was needed. Cleared up
    • [x] Local storage - Define key/value object
    • [x] CSS - Dropdown outline and buttons alignment
    • [x] searching on a new item should set item in local storage
    • [x] on Focus of Search Input field - Open the dropdown (Menu Props) one letter to be entered at least
    • [x] on Blur - Close the dropdown
    • [x] Define opening Menu Props (recent search dropdown object)
    • [x] Populate Initial items in the Menu Props from Local Storage
    • [x] figure out highlighted index
    • [x] Menu Props Display - Focus on CSS - REMAINING - Adding Icons and some polishing
    • [x] clicking on X should remove item from recent search (basically remove item from local storage)
    • [x] test edge scenarios with Downshift (recent search update items)
    • [x] ClearSelection Method from Downshift NOT WORKING YET when trying to clear the Search input field - This is working now
    code/ready for review 
    opened by rupin90 15
  • #895 - Improve table used on the /settings/api page

    #895 - Improve table used on the /settings/api page

    Here is the behavior of the Table on different screen sizes. Finally was able to lay out the CSS. Somehow it wasn't as straight forward as I thought. Leveraged NPM package - https://github.com/coston/react-super-responsive-table

    Remaining Items:-

    • [X] - border and background CSS for the table rows
    • [X] - Any feedback

    https://user-images.githubusercontent.com/107437442/180309832-dcfebc78-6ffd-40fe-b609-c8729df81711.mp4

    opened by rupin90 15
  • [OMN-189] : Settings View - Emails

    [OMN-189] : Settings View - Emails

    Spec Checklist

    • [ ] Are Api endpoints ready and properly documented ?
    • [x] Does the figma design fit the ticket description ?
    • [x] Added video describing your plan of action ?

    Description

    This is part of the base issue Settings View

    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.

    image

    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.

    [ ] 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

    Loom

    loom video

    House Keeping

    • [x] Added video describing your plan of action ?
    • [x] Added Loom video ?
    • [x] Is Deployment Link passing ?
    • [x] Have you assinged PR to yourself ?
    • [x] Is Github action passing ?
    • [x] Updated the appropriate tag ?

    Ticket link (if applicable)

    How has this been tested?

    Types of changes

    • [ ] Bug fix
    • [ ] New feature
    • [ ] Refactor
    • [x] Others

    Checklist:

    • [x] I have test my code on different browsers and devices to make sure it is cross-browser compatible (both desktop and mobile).
    • [ ] I have confirmed the payload for integrated API matches params on API docs
    • [x] I have confirmed design matches Spec specified on Figma.

    Remarks

    • [x] I added a new package to achieve this task.
    • [x] I have updated package.json
    code/ready for review 
    opened by gitstart-omnivore 15
  • Menu Component Start

    Menu Component Start

    Have leveraged a different library that fits our requirements - https://github.com/azouaoui-med/react-pro-sidebar

    • [X] Menu is up with the basic Menu Items
    • [X] Story Book for Menu
    • [X] Dynamic Items for Menu
    • [x] CSS work for the menu theme/background

    All the items of this PR are completed. This is PR ready. I have removed some code in the homefeedContainer.tsx file because now the functionality is supported through Menu and Address bar URL. Here is the specific code that was removed - https://github.com/omnivore-app/omnivore/pull/1031/commits/f0d4c6fd7ffec0e74b70ed7fe305653f6ebc7234

    I just have separate commit in case we need to add this back.

    opened by rupin90 13
  • Improve labels coloring and displaying in dark mode

    Improve labels coloring and displaying in dark mode

    Labels should be readable regardless of the color and of the theme. In this screenshot, it appears that, for example, that blue labels are not well readable in dark mode.

    Screen Shot 2022-06-29 at 10 01 08 AM

    Web Development 
    opened by xplosionmind 12
  • Android share doesn't seem to work 404

    Android share doesn't seem to work 404

    https://www.nytimes.com/2022/06/26/opinion/justice-alito-reproductive-justice-constitution-abortion.html

    I have pwa installed on my phone. I tried to share url with omnivore and this is what I see

    Screenshot_20220626-141334.png

    If this is normal behavior then maybe update the page to say something else

    opened by trashhalo 12
  • [Omn-190] - [Settings View] - Labels

    [Omn-190] - [Settings View] - Labels

    Spec Checklist

    • [ ] Are Api endpoints ready and properly documented ?
    • [ ] Does the figma design fit the ticket description ?
    • [ ] Added video describing your plan of action ?

    Description

    This is part of the base issue Settings View

    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

    House Keeping

    • [ ] Added video describing your plan of action ?
    • [ ] Added Loom video ?
    • [ ] Is Deployment Link passing ?
    • [x] Have you assinged PR to yourself ?
    • [ ] Is Github action passing ?
    • [x] Updated the appropriate tag ?

    Ticket link (if applicable)

    Task Link

    How has this been tested?

    Types of changes

    • [ ] Bug fix
    • [x] New feature
    • [ ] Refactor
    • [ ] Others

    Checklist:

    • [ ] I have test my code on different browsers and devices to make sure it is cross-browser compatible (both desktop and mobile).
    • [ ] I have confirmed the payload for integrated API matches params on API docs
    • [ ] I have confirmed design matches Spec specified on Figma.

    Language translation

    • [ ] Did you udpate/add a new text node ?
    • [ ] I have updated language mapping JSOn in locale

    Remarks

    • [x] I added a new package to achieve this task.
    • [x] I have updated package.json
    code/ready for review 
    opened by gitstart-omnivore 12
  • [Omn-192] - Settings View(Installation)

    [Omn-192] - Settings View(Installation)

    Spec Checklist

    • [ ] Does the figma design fit the ticket description ?
    • [ ] Are Api endpoints ready and properly documented ?
    • [x] Added video describing your plan of action ?

    Description

    • 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.
    • Added the tooltip and the select component.

    House Keeping

    • [x] Added video describing your plan of action ?
    • [x] Added Loom video ?
    • [ ] Is Deployment Link passing ?
    • [x] Have you assinged PR to yourself ?
    • [x] Is Github action passing ?
    • [x] Updated the appropriate tag ?

    Ticket link (if applicable)

    Task Link

    How has this been tested?

    I have checked it on multiple screen size

    Types of changes

    • [ ] Bug fix
    • [ ] New feature
    • [x] Refactor
    • [ ] Others

    Checklist:

    • [ ] I have test my code on different browsers and devices to make sure it is cross-browser compatible (both desktop and mobile).
    • [ ] I have confirmed the payload for integrated API matches params on API docs
    • [x] I have confirmed design matches Spec specified on Figma.

    Language translation

    • [ ] Did you udpate/add a new text node ?
    • [ ] I have updated language mapping JSOn in locale

    Remarks

    • [x] I added a new package to achieve this task.
    • [x] I have updated package.json
    code/ready for review 
    opened by gitstart-omnivore 12
  • [Omn-382] - Updated landing page

    [Omn-382] - Updated landing page

    Spec Checklist

    • [x] Does the figma design fit the ticket description ?

    Description

    Based on Figma design here we have an updated landing page. This page should be built as /landing for now.

    Figma designs:

    -- Desktop: https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=287%3A31514 -- Mobile: https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=287%3A34213

    Desktop:

    Screen Shot 2022-04-04 at 22 21 38

    Mobile:

    Screen Shot 2022-04-04 at 22 21 51

    Note how the design is divided into sections:

    Simply reader-friendly Make it your own A better way to share Discover new content We will want to be able to enable/disable some of these sections, so they should be treated as separate pieces as we build.

    #382

    House Keeping

    • [x] Added Loom video ?
    • [ ] Is Deployment Link passing ?
    • [x] Have you assinged PR to yourself ?
    • [ ] Is Github action passing ?
    • [x] Updated the appropriate tag ?

    Ticket link (if applicable)

    Task Link

    How has this been tested?

    Go to "localhost:3000/landing" page.

    Types of changes

    • [ ] Bug fix
    • [x] New feature
    • [ ] Refactor
    • [ ] Others

    Checklist:

    • [x] I have confirmed design matches Spec specified on Figma.

    Loom Video

    https://www.loom.com/share/5c3f51dc22174eff8e6b390c3600032e

    code/ready for review 
    opened by gitstart-omnivore 11
  • Feat/dragndrop

    Feat/dragndrop

    This is still in progress

    • [x] user can drop any file on the library page. (I do have temporary code that shows the name of the file being dropped right on the page)
    • [x] File upload APIs
    • [x] Dragndrop UI
    • [x] File upload progressbar
    opened by rupin90 10
  • [OMN-SB]: Setup storybook

    [OMN-SB]: Setup storybook

    Description

    This PR implements setting up Storybook.

    To run storybook locally:

    1. Run cd packages/web
    2. Install storybook and other dependencies: run yarn install
    3. Run yarn storybook to start storybook on port 6006
    4. Go to http://localhost:6006, you should see storybook running

    House Keeping

    • [x] Is Deployment Link passing ?
    • [x] Have you assinged PR to yourself ?
    • [x] Is Github action passing ?
    • [x] Updated the appropriate tag ?

    Ticket link (if applicable)

    Types of changes

    • [ ] Bug fix
    • [x] New feature
    • [ ] Refactor
    • [ ] Others

    Remarks

    • [x] I added a new package to achieve this task.
    • [x] I have updated package.json
    code/ready for review 
    opened by gitstart-omnivore 10
  • Shareable link that will import highlights and notes

    Shareable link that will import highlights and notes

    I often will want to share the annotations I have made to an article with my peers so that they can quickly see what I saw valuable about an article.

    Being able to let someone import notes and highlights would let you be able to "pass the paper" around so that they could send you back their notes that they have. A simple feature that would help start a networking effect of people using omnivore (ie. needing to signup to view someone's notes).

    It would be nice for there to be an unauthed view to see this information, but I figure that could potentially be problematic legally to essentially be rehosting content from omnivore.app.

    There is #409 for generating an rss feed for sharing, but being able to do this for a single link is pretty useful.

    opened by breadchris 0
  • [Enhancement] Handle multiple PDF attachments on emails

    [Enhancement] Handle multiple PDF attachments on emails

    A user sent more than one PDF attachment in a single email to their inbox, but only one was added. We should support multiple PDF attachments if possible.

    API Newsletters 
    opened by jacksonh 0
  • [Enhancement] Contrast color on login page - UI - Android App

    [Enhancement] Contrast color on login page - UI - Android App

    Hi,

    I'm using the Android App of Omnivore and I've note that the font color need more contrast

    It's really hard to read pale blue font on a light yellow background

    Is it possible to use a black or dark grey font color instead ?

    Screenshot_20221217-104558_Omnivore.jpg

    opened by AntheaLiles 2
An open source movie library platform for viewing movie info and saving movies for later.

GoodWatch An open source movie library platform for viewing movie info and saving movies for later. How to get started? Fork and clone the repo. Then

null 13 Apr 28, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Updog is an open-source social media webapp intended to allow everyday people to share their thoughts in a welcoming community.

SE701-Updog Updog is an open-source social media webapp intended to allow everyday people to share their thoughts in a welcoming community. This proje

SE 701 Team 2 UoA 14 Apr 18, 2022
Hacktoberfest is Digital ocean's annual event that encourages people to contribute to open source throughout October.

Hactoberfest 2022 For contributions to web-based projects for Hacktoberfest 2022, please use this public repository. This is React application make su

GDSC AIT Pune 5 Oct 10, 2022
DiscordJs13-handler is the solution for all the discord.js developper who want a complete handler for slash commands

DiscordJs13-handler is the solution for all the discord.js developper who want a complete handler for slash commands

null 9 Jul 2, 2022
Read without losing the plot. Well Read helps you organize your notes about books you're reading, so you're never lost when starting a new volume.

Well Read Well Read is a website for tracking your reading of long book series. I made this to track how many pages I read in a session and to better

null 3 Dec 15, 2022
An online library for adding and removing a different number of books from a user collection, keeping track of the books you've read and the one's you are yet to read

Awesmoe Books A Website demo for our project of book store, The website has ability of adding and removing you books from yor library, Thats reflects

zieeco 11 Jul 8, 2022
⚡️ A collection of open-source solution templates to integrate within Buildable Flows.

Buildable ⚡️ Buildable is an instant backend tool that makes a software developer’s day more delightful. We’re helping engineers breeze through featur

Buildable 161 Dec 15, 2022
The SheetJS Community Edition offers battle-tested open-source solution

The SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.

SheetJS 32k Dec 29, 2022
GraphErr is an open-source error handling library for GraphQL implementations in Deno. It's a lightweight solution that provides developers with descriptive error messages, reducing ambiguity and improving debugging.

GraphErr Descriptive GraphQL error handling for Deno/Oak servers. Features Provides additional context to GraphQL's native error messaging for faster

OSLabs Beta 35 Nov 1, 2022
An open source, self-hosted, and entirely free solution to social media management.

An open source, self-hosted, and entirely free solution to social media management. Status ?? In Development ?? Shoutify is currently early in the dev

TechSquidTV 202 Dec 22, 2022
Let's table this object till a later date

tabling npm add tabling makes objects lazy Commit a getter's result for one-time evaluation. ⚙️ Install npm add tabling ?? Usage import { tabling } fr

Marais Rossouw 2 Mar 19, 2022
Queue is a node.js package to create background jobs in topic-based RabbitMQ exchanges and process them later.

Queue PLG Works Queue helps with managing subscription and publish critical events using RabbitMQ. All events are published through RabbitMQ, using to

PLG Works 23 Sep 21, 2022
A Minimalist to do list website where user can add, remove and edit multiple tasks and All the changes user makes in his to do list is saved in browser local storage so that it can be accessed later.

Testing for Add Remove function in To Do List App Jest framework is used for testing. Created (addremove.test.js) for a file containing the add item a

Krishna Prasad Acharya 8 Aug 15, 2022
In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

 Hassan Momanyi 10 Nov 25, 2022
e-ONG, an authorial project, whose objective is to help ONGs to find people who need help or would like to help them

This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: npm start Runs the app in the developmen

Lucas Lima 2 Nov 11, 2022