Fider is an open source web tool to allow users to log in easily with OAuth support and post requests that can be upvoted by other users.
Setting up
- Download Docker image
- Following the directions here did not work for synology NAS
- use info in yml file to manually configure docker image using the synology docker UI
- download Postgres image
- configure all environment variables from the yml file
- db port does not need to be exposed because docker lets images talk to themselves
- link to local port to container port and use synology reverse proxy
- use google SMTP server login details. other mail options didn't work
- follow the directions on Fider's website to configure OAuth for Google and Facebook
- Set up oAuth for Azure Active Directory [1]
- https://portal.azure.com and navigate to Azure Active Directory -> App Registrations
- copy Application (client) ID
- go to Certificates & secrets, New client secret, set to never expire
- Authorize URL or end point: https://login.microsoftonline.com/{yourTenantId}/oauth2/v2.0/authorize
- Token URL: https://login.microsoftonline.com/{yourTenantId}/oauth2/v2.0/token
- Profile API URL: https://graph.microsoft.com/v1.0/me
- In Azure, add the callback URL generated by Fider by adding the Web platform configuration
Setting up a second instance
- Duplicate the settings of the postgres container in the Docker UI
- Make a new folder and link the fider database to it
- Do the same for the fider container
- Change the port for Fider
- Link the container to the new db, but change the name (e.g. db-2) and make sure the environment variable DATABASE_URL matches the new name.
- Launch the database container, check log to make sure it's ready to accept connections
- Launch Fider container
- If both are successful, register reverse proxy
- Register subdomain in DNS provider (e.g. Google Domains)
- Add subdomain to certs for Let's Encrypt (make sure connection can be made)
Customizing Styles
Edit the CSS under Advanced
Remove the purple colour with this CSS code:
All instances of #3b4ade were replaced with #007bff
.c-vote-counter button.m-voted,.c-vote-counter button.no-touch:hover{color:#007bff}.c-vote-counter button.m-voted .icon,.c-vote-counter button.no-touch:hover .icon{color:#007bff}
.c-avatar.m-staff{border:1px solid #007bff}
.c-username.m-staff{color:#007bff;border-color:#007bff}
.subtitle.active:hover{color:#007bff}
.c-post-list .c-list-item .c-list-item-title:hover{color:#007bff}
.c-post-list-show-more{cursor:pointer;font-weight:500;color:#007bff;margin-left:55px}
.c-side-menu .c-side-menu-item.m-active {
color: #007bff;
border-left: 2px solid #007bff;
font-weight: 600;
background-color: #fff;
}
.c-side-menu .c-side-menu-item.m-active:hover{color:#007bff}