A mobile-first web client for the german internet forum forum.mods.de built with ember.js. If you're looking for potber-api, you can find it here.

Table of contents

• How to use
• Core features
  • Browser support
  • Standalone mode (PWA)
  • BBCode parser
  • Gestures
  • Themes
• How to develop or build the app
  • Preqrequesites
  • Installation
  • Running / Development
    • Linting
    • Testing
    • Building
    • Deploying
• Further Reading / Useful Links

How to use

Visit https://www.potber.de (or https://test.potber.de for the staging environment) to use the app.

Core features

Browser support

Potber supports the following browsers. Other browser might work, but are not supported. The app might still behave and display differently on different devices.

• Chrome >= 108
• Chrome for Android >= 108
• Firefox >= 107
• Firefox for Android >= 107
• Safari on iOS >= 16.1

Standalone mode (PWA)

The app supports standalone mode (PWA). In stadalone mode, the website behaves almost exactly like an App. Whether your browser supports standalone mode and how to enable it highly depends on your browser. Android Chrome offers an option to "Install app" in your website settings, while iOS Safari has an option to "Add website to home screen". If you're having trouble, maybe this article can be of help.

BBCode parser

The application includes a functioning and fully custom BBCode parser written in TypeScript. It is able to parse most of the board's BBCode without errors and is being continously worked on. You can find it here.

Gestures

The app includes basic support for gestures. Gestures support can be enabled in the settings. When doing so, the app will disable some of your browser's native gestures (like pull to refresh). You might still run into issues in case your device adds native gestures on top of that. For example, some Android devices use horizontal swipes for navigating the OS.

The following gestures have been implemented so far:

• Swipe horizontally from the edge of your screen to show the sidebar. Swipe the other direction to close the sidebar.
• Swipe down on any board page to refresh that page. You need to be scrolled all the way to the top of the page first.
• Swipe up on any thread page to refresh that page. You need to be scrolled all the way to the bottom of the page first.

Themes

You can customize the application's appearance via the available themes. Additionally, feel free to create your own theme and suggest adding it to the app. The individual steps might depend on your browser, but this is rougly how you do it:

1. Open the application on a desktop device. Make sure you have the 'default' theme selected as it'll make the process easier.
2. Rightclick anywhere into the application and hit Inspect (or Untersuchen in german). What you see now is the inspector panel. In the panel, look for the styles container. It looks rougly like this:

element {
  ...
}

:root {
  ...
}
...

3. Scroll down in that container until you see a section called html, html *
4. You can now change any of the default theme's variables.
5. Send me a copy of the entire section and tell me how the theme should be called. 🙂

If you feel skilled enough, you can also create a PR of course. Themes are located here. All themes will be merged with the default theme, so you only need to provide variables you want to override.

How to develop or build the app

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with npm)
• Ember CLI
• potber-api - Without this web server, potber-client does not function.

Installation

• git clone https://github.com/spuxx1701/potber-client.git
• cd potber-client
• npm install

Running / Development

You can either run the application via a Dev Container or without. The advantage of using the dev container is that you do not need to setup or clone the potber-auth and potber-api repository. Similar as running the application via npm run start:remote except that potber-auth and potber-api are running locally via Docker.

Dev Container

You need to have Docker installed on your system and have the Dev Containers extension setup in VSCode. Clone potber-api and open it in VSCode. Click on Reopen in container. After finishing the setup, you can start the development server with npm start inside of the VSCode terminal. Visit the app at http://localhost:4200.

Without Dev Container

• Clone potber-api and start up a local instance.
• Start up the development server with npm start (assuming you also have cloned potber-api and potber-auth). You can also run the client using the remote staging instances of potber-api and potber-auth via npm run start:remote.
• Visit the app at http://localhost:4200.

Linting

• npm run lint
• npm run lint:fix

Testing

• npm run test
• npm run test:coverage

Building

• ember build (development)
• ember build --environment staging (staging)
• ember build --environment production (production)

Deploying

The application can be deployed via Docker. The application provides two different Dockerfiles for the staging and production environments:

• staging
• production

After building the Docker image, you can run it locally or on a remote host. In case you're curious about how potber.de is hosted: Both the test and production environments run on a Flux-controlled MicroK8s cluster. The infrastructure is documented here.

Further Reading / Useful Links

• ember.js - The framework.
• potber-api - The web server that potber-client utilizes.
• dockerhub - The dockerhub repository.

Credit

• Credit goes to fiskensen for the very cool whale animation that is used as a loading indicator and in the logo. Thank you!