Name: masifunde-fe
Owner: Futurice
Description: Website for masifunde
Created: 2017-07-14 09:34:00.0
Updated: 2018-05-09 10:04:32.0
Pushed: 2018-05-17 15:08:19.0
Homepage: https://www.masifunde.de
Size: 4337
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Frontend for the Masifunde website. https://masifunde.netlify.com
install
run dev
This will run nodemon with server.js which will run next.js development environment on port
3000.
Next.js, React, Styled-components, Bootstrap 4, Contentful, Fundraisingbox.
Node 8 is required with NPM.
To generate:
run build-static
It will run next.js next build && next export commands which will generate static files in the
out folder. It will ONLY export and statically generate routes which are defined in next.config.js file.
The site is hosted on Netlify, which requires static files.
Netlify will automatically run npm run build-static whenever anything is pushed to the master branch since it is connected to this GitHub repository. After that the changes should be reachable on https://masifunde.netlify.com.
When creating a Pull Request (PR) to master, Netlify will build and publish the merge result as a preview under deploy-preview-[preview-number]--masifunde.netlify.com.
Note that most Netlify build and deploy settings are defined in netlify.toml
in this repository, which override those seen in the Netlify dashboard! See
the Netlify “Deploy Contexts” documentation. (Hopefully in
the future, Netlify will hide the settings that we define in netlify.toml
to reduce confusion.)
netlify.toml (see the previous section).robots.txt and are always exported to https://masifunde.netlify.com/robots.txt.routes.js using next-routes.We have a feature flags mechanism for decoupling the release
of features from deployment. The currently existing flags can be seen in
featureFlags.js.
By default, all feature flags are enabled during development and disabled for
production. You can override this default by setting an environment variable
called ENABLED_FEATURES, like this:
able exactly feature1 and feature2
LED_FEATURES=feature1,feature2 npm run dev
able all features (the default during development)
LED_FEATURES=all npm run dev
sable all features (the default in production)
LED_FEATURES= npm run dev
The special all value always enables all feature flags.
Remember that feature flags are always temporary. Once a feature behind a flag goes to production, simply remove the flag altogether.
Occasionally, you might experience that the site doesn't update properly
after restarting the development server with a different ENABLED_FEATURES
setting. In that case, try removing the node_modules/.cache folder.
We use Bootstrap 4 for two purposes.
Our components are given custom styling using styled-components - a CSS-in-JS library.
The service used to accept user donations is called Fundraisingbox, which Masifunde has previous experience with.
Masifunde's Fundraisingbox plan doesn't allow for using the API, but we get access to an iframe we embed on our site. We can embed 4 different iframe forms at a time.
To configure the iframe, sign in to Masifunde's Fundraisingbox admin interface and go to Einstellungen > Spendenformular and select the relevant Spendenformular in the dropdown.
To fully customize the form, we hide most of the inputs in iframe, while rendering our own form fields outside of the iframe. We then populate the iframe with these custom form field values. This forces a reload and rerender of the iframe, which causes flickering. So we only do this when all custom form fields have values.
The Einbettungsadresse should specify the full url of the page this form is used (e.g https://www.masifunde.de/wie-sie-helfen/spenden), and not just the host https://www.masifunde.de.
On a successful (or failed) donation attempt, the user gets redirected to the exact url in Einbettungsadresse with a status query param.
Then a success or error message is displayed in the iframe.
If the page doesn't have the Fundraisingbox iframe, no success or error message will be displayed.
Einstellungen > Spendenformular and select the relevant Spendenformular in the dropdown.textarea at the bottom of the page in the section Design.By checking the box for Keine Standard-Stylesheets laden the Fundraisingbox iframe will use the css written in the textarea.
Note: This has to be standard css, no scss or less.
For version control and backup purposes we also store this css in the file Fundraisingbox_custom_css.css in this repo.
Fundraisingbox only displays the form in the iframe if you load the iframe from a specified domain, e.g. masifunde.netlify.com. In order to test it locally you need to expose your localhost. You can use ngrok for this. Install ngrok and run the command `ngrok http 3000 --region eu`. You will then see the address to which ngrok exposes your localhost.
Einstellungen > Spendenformular.The project uses Contentful as a CMS, which has its own JavaScript package. To better understand
the API structure you should sign in to Contentful and have a look at Content models to see how
they are structured. The credentials can be found in the Futurice password safe.
Meta data:
Hero (hero image not through Contentful):
Page intro:
Banner:
Page section:
For each section of the page, we prefix the fields with “section
section1Title
section1Markdown
section1Image
section1List
section1ReferenceList
section2Title
section2Markdown
section2Image
section2List
section2ReferenceList
No tests for now.
Project uses ESLint Airbnb style guide with some tweaks (like no semicolons). The precommit git hook will
automatically run ESLint to check if the code complies with the rules. If it fails then it will not
push to the repo.