Code Monkey home page Code Monkey logo

troddit's Introduction

Troddit

An alternative front end web client for Reddit

Live at troddit.com

Screenshots

Flexible column viewing.

Shown browsing a multi-reddit. Subreddits pane and options menu open. columns_options

Classic rows view

classicrows_light

with inline media expansion and custom reddit video player

lightmode_row_open

Open posts with comments to the side and use arrows for navigation

post_open

Search for subreddits, users, and posts.

Shown in single column mode with wide UI disabled. Sort options menu is open. search_narrow

Fully responsive, downloadable as PWA

responsive_troddit

Features

  • Secure logins with Reddit to enable voting, commenting, managing your subreddits and multireddits (aka feeds), and access to your personal front page.
  • 'Offline mode' to follow subreddits and manage multis locally without login. Autogenerates a personal front page.
    • Visit your subreddits multi and copy the multireddit link. Replace 'reddit' with 'troddit' in the URL and then use the 'Join All' option to quickly follow all subs locally.
  • Search Reddit for posts or subreddits quickly with auto-complete.
  • Filter posts by type (Images, Video/GIFs, Links, Self)
  • View posts in single column, custom multi-column with a grid-masonry layout, or a simple row mode. All with infinite-scrolling.
  • Choose your card style: Original for full post text in card, Compact to exclude post text, or Media to hide all text and card padding.
  • Gallery view: Click on a post and navigate through the feed with on screen buttons or your arrow keys. Shows the post content as well as its comments from Reddit. Smart portrait mode to automatically arrange vertical photos and videos side by side with comments.
  • Hover mouse over Reddit videos to play. Enable to Autoplay option to play videos automatically when entering the viewport. Enable the Audio option to play sound on hover as well.
  • Responsive desktop and mobile layouts.
  • PWA to download to your computer or phone.
  • Docker support

Developing

Clone the repo and install all packages with npm or yarn. Then to run development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

To contribute create a branch and submit a PR!

Environment Variables

To use login functionality the following environment variables need to be defined in a .env.local file placed in the root directory:

CLIENT_ID=<ID of your Reddit app>
CLIENT_SECRET=<Secret from your Reddit app>
REDDIT_REDIRECT=<YOUR DOMAIN/api/auth/callback/reddit>
NEXTAUTH_SECRET=<See https://next-auth.js.org/configuration/options#secret>
NEXTAUTH_URL=http://localhost:3000
SIGNING_PRIVATE_KEY=<See https://next-auth.js.org/v3/warnings, Generate with $jose newkey -s 256 -t oct -a HS512>

To create a Reddit app visit https://old.reddit.com/prefs/apps/. The redirect uri should match the REDDIT_REDIRECT variable.

Docker

To Deploy the Docker Image

docker pull bsyed/troddit
docker run -d --name troddit -p 3000:3000 bsyed/troddit

To Build the Image Yourself

By default, the Docker will expose port 3000, so change this within the Dockerfile if necessary. When ready, simply use the Dockerfile to build the image.

Clone and navigate to the repository

git clone https://github.com/burhan-syed/troddit
cd troddit

To build the image and run container

docker-compose up

Or to just build

docker build . -t troddit

This will create the troddit image and pull in the necessary dependencies. To run:

docker run -p 3000:3000 troddit

Support

If you like the project feel free to share and leave a star. If you're feeling generous you can support me on Ko-fi.

ko-fi

troddit's People

Contributors

burhan-syed avatar c-oreills avatar dependabot[bot] avatar elijahpepe avatar jvt038 avatar schklom 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

troddit's Issues

Use the same blur system as reddit

So reddit will keep blur the picture when the blur mode is on
you only see them if you clicked at the post
and after you leave the post, i want it so that the blur will still avaliable and not gone

Server error There is a problem with the server configuration. Check the server logs for more information.

I've got troddit set up on my own server. I works fine until I login. I've created the secret and still get this error.

[next-auth][error][NO_SECRET]

https://next-auth.js.org/errors#no_secret Please define a secret in production. MissingSecret [MissingSecretError]: Please define a secret in production.

at assertConfig (/app/node_modules/next-auth/core/lib/assert.js:42:12)

at NextAuthHandler (/app/node_modules/next-auth/core/index.js:70:52)

at processTicksAndRejections (node:internal/process/task_queues:96:5)

at async NextAuthNextHandler (/app/node_modules/next-auth/next/index.js:23:19)

at async /app/node_modules/next-auth/next/index.js:59:32

at async Object.apiResolver (/app/node_modules/next/dist/server/api-utils/node.js:182:9)

at async NextNodeServer.runApi (/app/node_modules/next/dist/server/next-server.js:386:9)

at async Object.fn (/app/node_modules/next/dist/server/base-server.js:488:37)

at async Router.execute (/app/node_modules/next/dist/server/router.js:228:32)

at async NextNodeServer.run (/app/node_modules/next/dist/server/base-server.js:600:29) {

code: 'NO_SECRET'

[Suggestion] Embed photos in text posts + Open new tab for links

Currently, if there's a link to a photo in a text post (like for example, the preview.redd.it domain, they're only shown as links, and you have to click them to view the photo. I think a nice improvement would be to embed the photos, so that you can view them while reading the post.

Another issue that I wanted to bring up is that if you click on the link to open the photo, if opens in the same tab, so you have to go back to go back to the post, although I think it'd be more convenient if clicked links opened in a new tab instead, since usually you want to keep the post open to read any comments and such.

[Bug] First mouse click ignored

I noticed while using Troddit that when you load a thread directly from the URL, the first mouse click is ignored (doesn't let you collapse a comment or copy text), but after you do that first click, everything works as expected. That's probably not the expected behavior (and it's also a little annoying), so I just wanted to notate it here ๐Ÿ‘๐Ÿป

As a bonus, here's the code I put together as a workaround ๐Ÿ˜‚
setTimeout(function() {

var simulateMouseEvent = function(element, eventName, coordX, coordY) {
  element.dispatchEvent(new MouseEvent(eventName, {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: coordX,
    clientY: coordY,
    button: 0
  }));
};

var theButton = document.getElementsByClassName("md\:ml-4")[0];

var box = theButton.getBoundingClientRect(),
        coordX = box.left + (box.right - box.left) / 2,
        coordY = box.top + (box.bottom - box.top) / 2;

    window.onload = simulateMouseEvent (theButton, "mousedown", coordX, coordY);
    window.onload = simulateMouseEvent (theButton, "mouseup", coordX, coordY);
    window.onload = simulateMouseEvent (theButton, "click", coordX, coordY);
}, 2000);

[Feature] Archived Post Notice

Currently, Troddit doesn't show if a post has been archived, so if you try to upvote it, the upvote will be removed after about a second or so. I think it would be good to have a notice at the top of the post saying that it's currently archived, just to let people know that upvotes won't be counted, and so as to not waste time trying to.

To make it even better, if the post is archived it'd be good to hide the upvote/downvote buttons, and the reply button, since they're not going to be usable anyway ๐Ÿ‘๐Ÿป

Horizontal Scroll on troddit.com/best

Hello, on troddit.com the page loads nicely and there is no horizontal scroll:
image

But on different sort options (e.g. best, new, top, hot) the page seems to load slightly too wide, so a horizontal scroll bar is added at the bottom:
image

Clicking on posts and viewing subreddits does not cause this issue (e.g. troddit.com/r/formula1/best), it only happens on troddit.com/best, troddit.com/hot, troddit.com/rising, etc.

I am on chrome version 103.0.5060.114 (Official Build) (64-bit)

Troddit is very slow to load subreddits if you follow a lot of users and subreddits

Troddit is very slow to load subreddits if you are a power user who follows a lot of users, subreddits and multireddits.

It has something to do with loading the sidebar and fetching every subreddit, user, and multireddit I'm subscribed to, upon EVERY page load.

Because of this, I cannot follow or unfollow any subreddits until the loading has finished.
I've had to use an adblock extension to block this URL in a regex (regular expressions) format.

www\.reddit.com\/user\/[a-z0-9]*\/about\.json\?aw_json=1

See this video for details.

And guess what? The website STILL works if I have that blocked.

[Suggestion] Consistent video volume between videos.

Currently, when going between videos, the volume defaults to 50%.
Ideally, there would be a setting to set the default volume, or have the volume dynamically change based on the volume of the video that is currently being played.

Images load into incorrect post

Love the work... hands down best reddit front end..

I am seeing a recent issue where the image is incorrect for the post in the feed.
I am not sure how else I can help at this time other than say that it is only a very recent thing and that i can supply an image of what I am talking about

image

.env.local

Where do I have to put the .env.local when running troddit in docker, I get "server error" when trying to login.

Menu gets hidden when search bar is clicked on mobile

Since a few days, on both the latest versions of Firefox and Chrome on Android, Troddit's hamburger menu hides after clicking on the search input.
Most of the time the keyboard does open and searching is possible, but without being able to see what is typed.

BTW. Love Troddit, I appreciate your work!

Add option to collapse/hide link preview images in card/media views

Feature request: As is, link posts display the preview image for the link at the same size as direct image posts. While the preview can be helpful to see, it's almost never necessary for it to be a full-size image, and I personally think it ends up being a waste of space most of the time. The standard Reddit web client does not show link preview images at all.

It would be nice to have an option to either collapse the link previews or hide them entirely in the card views (without needing to resort to the "classic rows" style).

Support favorited subreddits

Feature request: it would be really nice for subreddits I have favorited to be pinned above all my other subscriptions in the subreddit dropdown pane.

Accessibility: Fill upvote / downvote icons

Hey, loving this! I've totally replaced reddit.com with this!

One thing I'm noticing is that the site can use a few accessibility improvements (I'm a product design so forgive me, but I can't help but notice these things). As such, one of the most basic things anyone will do is upvote/downvote, relying solely on color to indicate that the button has been clicked is a major accessibility issue (consider color blind, or people hard of vision).

Markdown escaping issue

When I post in troddit with markdown, something like:

Hello `world`

It ends up really borked in reddit:

Hello \`world\`

And the formatting looks really messed up for me then. I'm guessing troddit is escaping the input but reddit isn't removing the slashes? Maybe not escaping would solve the issue?

[Bug] All deleted users incorrectly tagged as OP

Currently in Troddit, if the OP of a post has deleted their account, then any deleted accounts in the comments will also have 'OP' next to their name, since it thinks they're the OP because of having the same "username". Troddit should recognize that it's most likely not the OP, and not have the 'OP' label on those comments since it can't reliably know who the OP actually was.

Feature Request

Personally I liked Troddit more than Libreddit. I would like to see the following features to be implemented on Troddit.

  1. Need docker image immediately to deploy it easily.
  2. Need a local account option to save subscribed sub-reddits and Troddit will display posts only from subscribed sub-reddits. I don't want to login reddit.

Firefox blocks traffic from Reddit

Having enabled Enhanced Tracking Protection in Firefox, all requests from Reddit is blocked.

Turning protection off lets traffic come through.

Network tab show the requests as "Tracking".

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './src/forEach' is not defined by "exports" in /app/node_modules/ramda/package.json

I just updated about 30 minutes ago after having my docker working just fine for weeks, with taking in all updates.
My last update was yesterday afternoon prior to now.

I am getting 502 errors for some reason.
Nothing else has changed.

I had a look in the logs and see this fairly often.

Node.js v18.4.0
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './src/forEach' is not defined by "exports" in /app/node_modules/ramda/package.json
at new NodeError (node:internal/errors:388:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
at packageExportsResolve (node:internal/modules/esm/resolve:719:3)
at resolveExports (node:internal/modules/cjs/loader:488:36)
at Module._findPath (node:internal/modules/cjs/loader:528:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:932:27)
at mod._resolveFilename (/app/node_modules/next/dist/build/webpack/require-hook.js:183:28)
at Module._load (node:internal/modules/cjs/loader:787:27)
at Module.require (node:internal/modules/cjs/loader:1012:19)
at require (node:internal/modules/cjs/helpers:102:18) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
node:internal/errors:477
ErrorCaptureStackTrace(err);
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './src/forEach' is not defined by "exports" in /app/node_modules/ramda/package.json
at new NodeError (node:internal/errors:388:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
at packageExportsResolve (node:internal/modules/esm/resolve:719:3)
at resolveExports (node:internal/modules/cjs/loader:488:36)
at Module._findPath (node:internal/modules/cjs/loader:528:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:932:27)
at mod._resolveFilename (/app/node_modules/next/dist/build/webpack/require-hook.js:183:28)
at Module._load (node:internal/modules/cjs/loader:787:27)
at Module.require (node:internal/modules/cjs/loader:1012:19)
at require (node:internal/modules/cjs/helpers:102:18) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Is it possible something has been missed in the lastest bunch of updates?

[Reddit Login] Invalid Client ID

I have been trying to login to reddit to be able to have a bit more functionality.

I keep getting the error page


bad request (reddit.com)

you sent an invalid request
โ€” invalid client id.

I have tried desktop firefox, mobile firefox, mobile bromite

View inbox of my profile

A nice feature to have is to view inbox messages / notifications and such.
Perhaps add this to the to-do list?

Support for creating posts?

Hi,
I'm currently testing Troddit, and I like it so far.
Only thing that misses, is the ability to create text, video, photo, and just normal posts.
Or perhaps I've missed it somewhere in the UI?

View comments

Hi,
When I visit an user's profile page, then I can't view their comments, and when I visit my own page, I can't see my own comments either. This applies for my posted comments, my up- and downvoted comments, and my saved comments.

I know it's still in early stage, but I would like this enhancement to be added.

Feature request - Pagination and Local account

I am requesting 2 new features.

  1. Enable Pagination - So that the user can set the number of maximum post per page. (e.g. 20, 30, 40)

  2. Local Account - All the locally subscribed reddit should be stored in a local account from which the subreddits list can be exported in OMPL format. There should be a feature to import the OMPL file containing the list of subreddits.

Support keyword filtering

Feature request: it would be handy to be able to filter posts based on content, instead of just from subreddits or users.

For example, on r/buildapcsales, a user would be able to create a [Monitor] filter. This would prevent them from seeing any posts with the [Monitor] tag in the title.

To take the idea further, perhaps flair-based filtering could also be introduced? Though it seems to me that text-based filtering is a more urgent first step.

Sound if gfycat videos?

Gfycat videos are played without sound and without an option to turn the sound on when the there is sound on gfycat itself

Navigation\scroll bug

I quite often get the bug with the scroll when my scroll position changes without any actions and the posts I used to have on my screen go a couple of scroll below or above my new position. Have no idea how to reproduce it but I've encountered this bug almost every day for the past couple of weeks

[Feature] Upvote Ratio

I noticed that Troddit doesn't show the upvote ratio for posts, and thought it would be pretty useful information to have since it's good for gauging the quality of a post at quick glance. I'm not sure if the reddit API offers a way to get it, but I know that you can get it pretty easily from the .json response for a post (from the thing named "upvote_ratio"), like so https://www.reddit.com/r/funny/comments/uzoina/them_kanye_boots_just_keep_getting_bigger/.json

Just thought this would be pretty nice information to have alongside the posts, maybe to the left of the reply button?

Give option to not load tweets.

Sometime the tweets load later and move the page as they load which i don't like. Other option can be to make them same length box and load the same height box , so that the content don't move.

Download button left of the reply button

Hi,
I have another feature request: A button to download images / videos (mostly videos, but images would be useful too, instead of having to click 'save image as'.
Something like this:
image

[Suggestion] Clicking on title should take you to linked site

Currently, if you click the title of a post it takes you to the reddit thread. Since I use Troddit exclusively for all of my desktop reddit needs, it's pretty useless at the moment, and I think it would be a lot more useful if the title sent you to the linked site instead. You can still go to the reddit thread with the button on the bottom right of the post, so it's not like you're removing the option for anyone either, but I just feel that it's more natural to click the link and be taken to the content.

[Bug] Upvote button only registers on bottom half

Currently if you try to upvote a post, there's a tendency to miss because the top half of the upvote button doesn't count when clicking, so then you have to move the mouse down and then click again, which is pretty annoying. I don't think this was happening before, so I think it might've been introduced with a recent update.

Here's a video showing what I mean:

msedge_2022-06-04_08-51-16.mp4

[Bug] Clicking link in comment collapses it

When you try to click a link in a comment, it does open the link in a new tab, but it also collapses the comment as well. That's probably not the intended behavior, so just wanted to log it here ๐Ÿ‘๐Ÿป

Don't replace reddit links with troddit.com, but with custom domain

I've noticed that all the links to reddit.com are being changed to troddit.com
I would prefer to change the links to the current domain. So if I host my own troddit instance on troddit.mydomain.com, change the reddit links to troddit.mydomain.com, instead of to troddit.com.
Perhaps it can be detected what the current URI is, and to change it to that.
So if I visit my self-hosted instance through troddit.mydomain.com, it'll be changed to troddit.mydomain.com, but if I visit the same instance on localhost:3000, then the links will be changed to localhost:3000.

Some links not showing up

This frontend is excellent and I have been running it locally on my network. I came across a table of information that was missing titles, pulled it up on reddit and found that the titles were links. I opened a post in a public troddit instance to confirm the issue persisted there. It seems some of the older posts have their links showing up, so I'm not sure what the difference is but here is a search link to the posts: /r/Animedubs/search?sort=relevance&t=all&q=upcoming dub releases

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.