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.
- node: >= 14.x
- npm: >= 7.5.1
git clone https://github.com/ArthurHeitmann/photon-reddit.git
cd photon-reddit
npm install
npm run build
npm run start
# auto restart server when js files change
npm run start-dev
# watch for Typescript & Sass file changes and auto recompile
npm run watch
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:
- Set the environment variables
APP_ID
andREDIRECT_URI
(see below)
If you use a .env file, you need the following environment variables:
APP_ID=
REDIRECT_URI=
Optional environment variables are only for the analytics system.
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
.
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>
`;
/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
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.
In general camelCase
. Except for custom html tag names then ph-[kebab-case]
. Js component classes that extend HTMLElement Ph_PascalCase
.
I don't really know how this works :)
Basically follow the instructions from here.
Before doing any major changes, first ask me.
See here: photon-reddit.com/about