Photon Reddit
Just replace reddit.com/... with photon-reddit.com/... to get started!
A clean and modern Reddit desktop web client.
Photon is a website to browse reddit without any distractions (no ads, no crowded sidebars, no distracting awards).
r/photon_reddit is the official subreddit.
How it looks like
Prerequisites
- node: >= 14.x
- npm: >= 7.5.1
Selfhosting
Commands
Download
git clone https://github.com/ArthurHeitmann/photon-reddit.git
cd photon-reddit
Install dependencies & Build
npm install
npm run build
Start
npm run start
Other commands for development
# auto restart server when js files change
npm run start-dev
# watch for Typescript & Sass file changes and auto recompile
npm run watch
Getting Login to work
These steps are optional but helpful for development (needed if you want to log in).
Go here and create your own reddit app.
-
Name: whatever you want
-
Select
installed app
-
description & about url can be left empty
-
redirect uri: [yourDomain]/redirect
Examples:
- Under
/src/static/scripts/utils/consts.ts
changeAppId
andredirectURI
to
export const appId = "[generated app id]";
export const rediretURI = "[what you entered in step 4.]";
Environment Variables
Environment variables so far are only for the analytics system. If you use a .env file here is a template:
DB_HOST=
DB_USER=
DB_PW=
DB_PORT=
DB_DB=
analyticsPw=
DB_x
is for configuring the mariaDB database. analyticsPw
is for a cookie to access the analytics dashboard.
More infos in analyticsQueryMiddleware()
in src/serverScripts/analytics.ts
.
Technical
Frontend
Esbuild is used to transpile and bundle Typescript (vanilla JS) and Scss files. No other frameworks or libraries are used.
Instead of using for example react components with jsx, a mix of the following is used:
// 1. For complex components
export default class Ph_ComponentName extends HTMLElement {
// ...
}
customElements.define("ph-component-name", Ph_ComponentName);
const element = new Ph_ComponentName(args);
// 2. Custom makeElement() function (similar to React.createElement)
const element = makeElement("div", { "class": "someClass", "data-tooltip": "tooltip" }, [
// children
makeElement("span", null, "Inner Text"),
makeElement("img", { src: "/img/logo.svg" }),
]);
// 2.5 longer alternative
const element = document.createElement("div");
// ...
// 3. Lazy method for writing a lot of elements at once (escape untrusted string inputs with escHTML() or escADQ())
element.innerHTML = `
<div class="${classNameVariable}">
<span>...</span>
...
</div>
`;
Structure
/src/static
maps to /
in the browser.
/src/static/scripts/main.ts
is the entry point for the frontend Javascript.
/src/static/style/main.scss
is the entry point for the css.
Custom html components are under /src/static/scripts/components
If a component has a custom style its _componentName.scss file lies in the components directory and is registered under /src/static/style/_components.scss
Backend
An express server. Mostly only needed for making cross-origin request for a client that otherwise get CORS blocked (mostly some reddit api calls) and handling new version releases.
node 12.x is not supported because ES6 import {} from "lib"
are used instead of require("lib")
.
Also used for analytics purposes with MariaDB. Except for minimal anonymized data, no user data is stored.
Naming conventions
In general camelCase
. Except for custom html tag names then ph-[kebab-case]
. Js component classes that extend HTMLElement Ph_PascalCase
.
Contributing
I don't really know how this works :)
Basically follow the instructions from here.
Before doing any major changes, first ask me.
Contact
See here: photon-reddit.com/about