Fider

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}