Mangane is an alternative frontend for Pleroma, Akkoma and Mastodon with a focus on ease of use, readability and custom branding.
This project is developped for BDX-town Akkoma instance. Akkoma is a fork of Pleroma who mostly adds features, exposing them through new API endpoints. As of today, Akkoma and Pleroma API are compatible.
Mangane inherit from Pleroma the native large compatibility with Mastodon API.
Moreover, Mangane already has a feature detection system allowing us to adapt the experience following what platform is used as a backend.
We are speaking about Akkoma here since we are planning to add Akkoma specific features to the project without breaking any existing compatibility.
Installing Mangane on an existing Pleroma or Akkoma instance is easy. Log in with SSH your server and follow those instructions depending on your configuration.
First you need to download Mangane on your server.
/opt/pleroma/bin/pleroma_ctl frontend install mangane --ref dist --build-url https://github.com/BDX-town/Mangane/releases/latest/download/static.zip
Note: The pleroma_ctl path may vary on your system, if you are using Akkoma it's probably in /opt/akkoma/bin/
mix pleroma.frontend install mangane --ref dist --build-url https://github.com/BDX-town/Mangane/releases/latest/download/static.zip
If database configuration is enabled, you can also install Mangane from the Admin interface of Pleroma/Akkoma. Just fill the form at Frontend/Available like this.
Then you need to activate the frontend so it will be available to your users.
Edit your configuration files to add/edit the config :pleroma, :frontends
section like this
config :pleroma, :frontends,
primary: %{
"name" => "mangane",
"ref" => "dist"
}
Just fill the form at Frontend/frontends/Primary like this.
That's it! ๐
Mangane FE is now installed.
The change will take effect immediately, just refresh your browser tab, and Mangane will replace the default Pleroma FE or Akkoma FE interface.
You may need to restart Pleroma/Akkoma for the change to take effect.
See Installing Mangane over Mastodon.
Mangane is a single-page application (SPA) that runs entirely in the browser with JavaScript.
It has a single HTML file, index.html
, responsible only for loading the required JavaScript and CSS.
It interacts with the backend through XMLHttpRequest (XHR).
Here is a simplified example with Nginx:
location /api {
proxy_pass http://backend;
}
location / {
root /opt/soapbox;
try_files $uri index.html;
}
(See mastodon.conf
for a full example.)
Mangane incorporates much of the Mastodon API, Pleroma API, and more. It detects features supported by the backend to provide the right experience for the backend.
To get it running, just clone the repo:
git clone https://github.com/BDX-town/Mangane.git
cd Mangane
Ensure that Node.js and Yarn are installed, then install dependencies:
yarn
Finally, run the dev server:
yarn dev
That's it! ๐
It will serve at http://localhost:3036
by default.
You should see an input box - just enter the domain name of your instance to log in.
Tip: you can even enter a local instance like http://localhost:3000
!
Create a .env
file if you haven't already.
cp .env.example .env
And ensure that it contains NODE_ENV=development
.
Try again.
You can also run Mangane FE locally with a live production server as the backend.
Note: Whether or not this works depends on your production server. It does not seem to work with Cloudflare or VanwaNet.
To do so, just copy the env file:
The following configuration variables are supported supported in local development.
Edit .env
to set them.
All configuration is optional, except NODE_ENV
.
The Node environment. Mangane checks for the following options:
development
- What you should use while developing Mangane FE.production
- Use when compiling to deploy to a live server.test
- Use when running automated tests.
URL to the backend server.
Can be http or https, and can include a port.
For https, be sure to also set PROXY_HTTPS_INSECURE=true
.
Default: http://localhost:4000
Allows using an HTTPS backend if set to true
.
This is needed if BACKEND_URL
is set to an https://
value.
More info.
Default: false
The following commands are supported.
You must set NODE_ENV
to use these commands.
To do so, you can add the following line to your .env
file:
NODE_ENV=development
yarn dev
- Run the local dev server.
yarn build
- Compile without a dev server, into/static
directory.
yarn manage:translations
- Normalizes translation files. Should always be run after editing i18n strings.
-
yarn test:all
- Runs all tests and linters. -
yarn test
- Runs Jest for frontend unit tests. -
yarn lint
- Runs all linters. -
yarn lint:js
- Runs only JavaScript linter. -
yarn lint:sass
- Runs only SASS linter.
We welcome contributions to this project. To contribute, first review the Contributing doc
Additional supporting documents include:
- Mangane History
- Redux Store Map
Mangane supports customization of the user interface, to allow per instance branding and other features. Current customization features include:
- Instance name, site logo and favicon.
- Custom pages: e.g About, Terms of Service page, Privacy Policy page, Copyright Policy (DMCA).
- Promo panel custom links (e.g. link to blog or documentation external site).
- Mangane extensions.
- Default instance settings (e.g. default theme).
Customization details can be found in the Customization documentation
It's a known issue with the exiftool
filter.
To solve these upload problems, go to your admin-fe, search the upload section and remove exiftool
from the enabled filters.
Mangane is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
Mangane is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with Mangane. If not, see https://www.gnu.org/licenses/.
Mangane make use of code from other opensource and free software under various licenses:
-
Mangane is a fork of Soapbox a frontend for Rebased, Pleroma and Mastodon, licensed under AGPL v3 or later.
-
static/sounds/chat.mp3
andstatic/sounds/chat.oga
are from notificationsounds.com licensed under CC BY 4.0. -
Tailwind CSS licensed by Tailwindlab under the simple permissive MIT License.