Set defaults for a few of the UI flags

.eslintrc.json

@@ -1,8 +1,6 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": "next",
   "rules": {
-    // Other rules
-    "@next/next/no-img-element": "off",
-    "@next/next/no-html-link-for-pages": "off"
+    // Your custom rules here
   }
 }

.github/workflows/docker.yml

@@ -0,0 +1,30 @@
+name: Docker Build and Push
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v2
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Build and push Docker image
+      uses: docker/build-push-action@v4
+      with:
+        context: .
+        push: true
+        tags: |
+          ghcr.io/${{ github.repository }}:latest
+          ghcr.io/${{ github.repository }}:${{ github.sha }}

.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: Test
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+    types: [opened, synchronize, reopened]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+    - name: Install dependencies
+      run: npm ci
+    - name: Run lint
+      run: npm run lint
+    - name: Run type-check
+      run: npm run type-check
+    - name: Run build
+      run: npm run build

.vscode/settings.json

@@ -3,8 +3,8 @@
 	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "dbaeumer.vscode-eslint",
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true,
-		"source.fixAll.stylelint": true
+		"source.fixAll.eslint": "explicit",
+		"source.fixAll.stylelint": "explicit"
 	},
 	"typescript.preferences.importModuleSpecifier": "non-relative",
 	"css.validate": false,

Dockerfile

@@ -0,0 +1,23 @@
+# Use an official Node runtime as the base image
+FROM node:20-alpine
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install project dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the Next.js application
+RUN npm run build
+
+# Expose the port the app runs on (usually 3000 for Next.js)
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

README.md

@@ -1,47 +1,98 @@
 <h3 align="center"><img src="./public/reddium-mockup.png" width="600px" style="border-radius: 5px" alt="Whisperify"></h3>
 
-<p align="center">
-  <a href="https://reddium.vercel.app" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/visit-reddium.vercel.app-35586C.svg"></a>
-  <a href="https://github.com/eightants/reddium/releases/latest"><img src="https://img.shields.io/github/release/eightants/reddium/all.svg?colorB=38a275?label=version"></a>
-  <a href="https://ko-fi.com/eightants" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/buy_me_a-coffee-ff69b4.svg"></a>
-</p>
+> [!IMPORTANT]  
+> This is a fork of the original [Reddium](https://github.com/eightants/reddium) project. Updates include a Docker image, improved configuration, and a few UI tweaks.
 
-Have you ever wanted to browse Reddit while studying at Starbucks? Or maybe while sitting on the subway to work? In those situations, you might start being self-conscious of Reddit's bright and distinct website. What if people around you judge the subreddits you browse and the posts you read? Now, think about someone browsing Medium in the same situations. Just seeing the interface of Medium gives the impression of someone being a "knowledge seeker".
+# Reddium
 
-On the other hand, the Reddit experience on a mobile browser is lacking at best. Many functionalities require you to download the Reddit app. Is there a way to improve the experience without downloading the app?
+Reddium is a Medium-themed Reddit client. It provides a clean, distraction-free browsing experience for Reddit content.
 
-Enter Reddium: [reddium.vercel.app](https://reddium.vercel.app)
+## Features
 
-Reddium is a Medium-themed Reddit client. No longer worry about being judged while browsing Reddit in public. The Reddium interface converts Reddit posts, discussions, and memes into well-crafted articles. Once remote work is over, Reddium will be the perfect site to visit during your commute.
+- Clean, Medium-inspired interface for browsing Reddit
+- View posts, comments, and subreddits
+- Responsive design for desktop and mobile
+- Dark mode support
+- Image proxy for Reddit images
 
-Built with Next.js, TailwindCSS, and hosted on Vercel. Reddium is built with optimization in mind, making use of Next.js 10's analytics and server-side rendering. Placeholder images are obtained from [Unsplash](https://unsplash.com), and avatars are generated from [thispersondoesnotexist.com](https://thispersondoesnotexist.com/). Reddium is currently still in development.
+## Getting Started
 
-<img src="./public/reddit-post.png" width="500px"/>
+### Prerequisites
 
-Distinct Reddit interface
+- Node.js (v14 or later recommended)
+- `npm` or `yarn`
 
-<img src="./public/reddium-post.png" width="500px"/>
+### Installation
 
-On Reddium
+1. Clone the repository:
+   ```
+   git clone https://github.com/your-username/reddium.git
+   ```
 
+2. Navigate to the project directory:
+   ```
+   cd reddium
+   ```
 
-## Functionality
+3. Install dependencies:
+   ```
+   npm install
+   ```
+   or
+   ```
+   yarn install
+   ```
 
-- Browse subreddits, posts, and comments in the Medium interface
-- Search Reddit through the Medium search interface
-- Visit user profiles
-- Quality of life features to recreate the Reddit experience as closely as possible (WIP)
-- Login with Reddit to view your personal subscriptions in Reddium (Planned)
+4. Create a `.env.local` file in the root directory and add your Reddit API credentials:
+   ```
+   REDDIUM_CLIENT_ID=your_client_id
+   REDDIUM_CLIENT_SECRET=your_client_secret
+   ```
 
-## Contribute
+5. Start the development server:
+   ```
+   npm run dev
+   ```
+   or
+   ```
+   yarn dev
+   ```
 
-1. Clone the repository to your local machine. 
-2. Install all packages. 
-```
-$ npm i
-```
-3. Start the development server. 
-```
-$ npm run dev
-```
-4. Make a pull request
+6. Open [http://localhost:3000](http://localhost:3000) in your browser to view the app.
+
+## Configuration
+
+Reddium can be configured using the following environment variables:
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `REDDIUM_DOMAIN` | The domain where Reddium is hosted | `http://localhost:3000` |
+| `REDDIUM_CLIENT_ID` | Reddit API client ID | - |
+| `REDDIUM_CLIENT_SECRET` | Reddit API client secret | - |
+| `REDDIUM_DISABLE_GITHUB_LINK` | Disable the GitHub link in the UI | `false` |
+| `REDDIUM_DISABLE_KOFI_LINK` | Disable the Ko-fi link in the UI | `false` |
+| `REDDIUM_DISABLE_ABOUT` | Disable the About section in the UI | `false` |
+
+## Docker
+
+Reddium can be run as a Docker container. To run the latest version:
+
+1. Pull the Docker image:
+   ```
+   docker pull ghcr.io/joestump/reddium:main
+   ```
+
+2. Run the container:
+   ```
+   docker run -p 3000:3000 -e REDDIUM_CLIENT_ID=your_client_id -e REDDIUM_CLIENT_SECRET=your_client_secret ghcr.io/joestump/reddium:main
+   ```
+
+Replace `your_client_id` and `your_client_secret` with your actual Reddit API credentials.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

components/Layout.tsx

@@ -1,46 +1,21 @@
 import React from "react";
-import { getTimeOfDay } from "../functions/common";
-import { DOMAIN } from "../functions/constants";
-import { Props } from "../interfaces";
-import { NavMenu } from "./common";
-import TitleHead from "./TitleHead";
+import Header from './common/Header';
+import TitleHead from './TitleHead';
 
-const Layout = ({ children, title, token }: Props) => (
-  <div>
-    <TitleHead title={title}>
-      <meta
-        name="description"
-        content="The Reddit client for Silicon Valley. "
-      />
-      <meta property="og:url" content={DOMAIN} />
-      <meta
-        property="og:description"
-        content="The Reddit client for Silicon Valley. "
-      />
-      <meta property="og:image" content={`${DOMAIN}/reddium-mockup.png`} />
-    </TitleHead>
-    <header>
-      <nav className="flex items-center justify-center max-width-main mx-auto z-50 h-16 my-6 lg:mx-12 sm:mx-6">
-        <div className="flex-grow flex items-center">
-          <a href="/">
-            <div className="pr-4 nav-img h-8 flex flex-row items-center cursor-pointer sm:border-0">
-              <img className="h-full sm:h-6" src="reddium_symbol.svg" />
-              <h1 className="ml-4 site-name text-3xl tracking-tighter sm:hidden text-black">
-                Reddium
-              </h1>
-            </div>
-          </a>
-          <div className="pl-4">
-            <h1 className="font-bold text-lg leading-6 nav-greeting sm:hidden">
-              {getTimeOfDay()}
-            </h1>
-          </div>
-        </div>
-        <NavMenu token={token} />
-      </nav>
-    </header>
-    {children}
-  </div>
-);
+interface LayoutProps {
+  children: React.ReactNode;
+  title: string;
+  token: string;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children, title, token }) => {
+  return (
+    <>
+      <TitleHead title={title} />
+      <Header token={token} />
+      {children}
+    </>
+  );
+};
 
 export default Layout;

components/PostLayout.tsx

@@ -4,6 +4,7 @@ import { DOMAIN, PLACEHOLDER_IMAGES } from "../functions/constants";
 import { Props } from "../interfaces";
 import { NavMenu } from "./common";
 import TitleHead from "./TitleHead";
+import Logo from "./common/Logo";
 
 const PostLayout = ({ children, title, permalink, thumbnail, token }: Props) => (
   <div>
@@ -27,11 +28,7 @@ const PostLayout = ({ children, title, permalink, thumbnail, token }: Props) =>
     <header>
       <nav className="flex px-4 items-center justify-center max-width-main mx-auto z-50 h-16 lg:mx-12 sm:mx-6 sm:px-0">
         <div className="flex-grow flex items-center">
-          <a href="/">
-            <div className="pr-4 h-6 flex flex-row items-center cursor-pointer">
-              <img className="h-full sm:h-6" src="/reddium_symbol.svg" />
-            </div>
-          </a>
+          <Logo />
         </div>
         <NavMenu token={token}/>
       </nav>

components/Subpage.tsx

@@ -3,6 +3,7 @@ import { DOMAIN } from "../functions/constants";
 import { Props } from "../interfaces";
 import { NavMenu } from "./common";
 import TitleHead from "./TitleHead";
+import Logo from "./common/Logo";
 
 const Subpage = ({
   children,
@@ -25,11 +26,7 @@ const Subpage = ({
     >
       <nav className="flex items-center justify-center max-width-sub mx-auto z-50 h-16 lg:mx-12 sm:mx-6">
         <div className="flex-grow flex items-center">
-          <a href="/">
-            <div className="pr-4 h-6 flex flex-row items-center cursor-pointer">
-              <img className="h-full sm:h-6" src="/reddium_symbol.svg" />
-            </div>
-          </a>
+          <Logo />
         </div>
         <NavMenu token={token}/>
       </nav>