mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-30 09:36:42 +10:00
Format docs
This commit is contained in:
Kimmo Puputti
parent
8acccbd932
commit
bc51074084
6 changed files with 67 additions and 69 deletions
|
|
@ -11,27 +11,27 @@ environment variable `REACT_APP_GOOGLE_ANALYTICS_ID`;
|
|||
|
||||
If you want to add a new analytics library, you can do as follows:
|
||||
|
||||
1. Add the analytics library script
|
||||
1. Add the analytics library script
|
||||
|
||||
If the analytics library has an external script, add the library script tag to the
|
||||
[src/public/index.html](../public/index.html) file. If you need more control, see how the GA
|
||||
script is added in [server/renderer.js](../server/renderer.js).
|
||||
If the analytics library has an external script, add the library script tag to the
|
||||
[src/public/index.html](../public/index.html) file. If you need more control, see how the GA
|
||||
script is added in [server/renderer.js](../server/renderer.js).
|
||||
|
||||
1. Create a handler
|
||||
1. Create a handler
|
||||
|
||||
To track page views, create a custom handler e.g. in
|
||||
[src/analytics/handlers.js](../src/analytics/handlers.js). The handler should be a class that
|
||||
implements a `trackPageView(url)` method.
|
||||
To track page views, create a custom handler e.g. in
|
||||
[src/analytics/handlers.js](../src/analytics/handlers.js). The handler should be a class that
|
||||
implements a `trackPageView(url)` method.
|
||||
|
||||
Note that the `url` parameter might not be the same as in the URL bar of the browser. It is the
|
||||
canonical form of the URL. For example, in the listing page it doesn't have the dynamic title
|
||||
slug in the middle. This allows unified analytics and correct tracking of pages that can be
|
||||
accessed from multiple different URLs.
|
||||
Note that the `url` parameter might not be the same as in the URL bar of the browser. It is the
|
||||
canonical form of the URL. For example, in the listing page it doesn't have the dynamic title
|
||||
slug in the middle. This allows unified analytics and correct tracking of pages that can be
|
||||
accessed from multiple different URLs.
|
||||
|
||||
If you analytics library takes the page URL from the browser, you might need to override that
|
||||
behavior to use the canonical URL that is given to the method.
|
||||
If you analytics library takes the page URL from the browser, you might need to override that
|
||||
behavior to use the canonical URL that is given to the method.
|
||||
|
||||
1. Initialise the handler
|
||||
1. Initialise the handler
|
||||
|
||||
Initialise the handler in the `setupAnalyticsHandlers()` function in
|
||||
[src/index.js](../src/index.js).
|
||||
Initialise the handler in the `setupAnalyticsHandlers()` function in
|
||||
[src/index.js](../src/index.js).
|
||||
|
|
|
|||
|
|
@ -22,40 +22,40 @@ The default icons are generated with [RealFaviconGenerator](https://realfavicong
|
|||
can upload your original icon to the tool, customise the colors and themes, and download a generated
|
||||
set if icons and an HTML snippet to point to those images.
|
||||
|
||||
1. Open https://realfavicongenerator.net/
|
||||
1. Open https://realfavicongenerator.net/
|
||||
|
||||
1. Upload your original icon image
|
||||
1. Upload your original icon image
|
||||
|
||||
1. Configure platform specific icons
|
||||
1. Configure platform specific icons
|
||||
|
||||
**Note:** Remember to set the "Theme color" in the Android Chrome section
|
||||
**Note:** Remember to set the "Theme color" in the Android Chrome section
|
||||
|
||||
1. Configure the paths to use `/static/icons/` as the root path of the icons
|
||||
1. Configure the paths to use `/static/icons/` as the root path of the icons
|
||||
|
||||
1. Generate the icons
|
||||
1. Generate the icons
|
||||
|
||||
1. Unzip the favicons.zip archive and replace the default icons and files in
|
||||
[public/static/icons/](../public/static/icons/) with the new icons
|
||||
1. Unzip the favicons.zip archive and replace the default icons and files in
|
||||
[public/static/icons/](../public/static/icons/) with the new icons
|
||||
|
||||
1. Replace the default HTML snippet in [public/index.html](../public/index.html) with the snippet
|
||||
from the generator.
|
||||
1. Replace the default HTML snippet in [public/index.html](../public/index.html) with the snippet
|
||||
from the generator.
|
||||
|
||||
**Note:** Remove the manifest link from the snippet as we have a default manifest with extra data
|
||||
compared to the generated one. You can edit the default file as you wish.
|
||||
**Note:** Remove the manifest link from the snippet as we have a default manifest with extra
|
||||
data compared to the generated one. You can edit the default file as you wish.
|
||||
|
||||
**Example HTML snippet:**
|
||||
**Example HTML snippet:**
|
||||
|
||||
```html
|
||||
<!-- Start Favicons from https://realfavicongenerator.net/ -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/static/icons/safari-pinned-tab.svg" color="#c0392b">
|
||||
<link rel="shortcut icon" href="/static/icons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/static/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#c0392b">
|
||||
<!-- End Favicons -->
|
||||
```
|
||||
```html
|
||||
<!-- Start Favicons from https://realfavicongenerator.net/ -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/static/icons/safari-pinned-tab.svg" color="#c0392b">
|
||||
<link rel="shortcut icon" href="/static/icons/favicon.ico">
|
||||
<meta name="msapplication-config" content="/static/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#c0392b">
|
||||
<!-- End Favicons -->
|
||||
```
|
||||
|
||||
## Map marker icon
|
||||
|
||||
|
|
|
|||
10
docs/env.md
10
docs/env.md
|
|
@ -33,9 +33,7 @@ In production, it's recommended that you set the configuration via env variables
|
|||
an .env file. The client application will only be packaged with env variables that start with
|
||||
REACT_APP. This way server secrets don't end up in client bundles.
|
||||
|
||||
**With deploys note that the configuration options are bundled in the
|
||||
client package at build time.** The configuration of the build
|
||||
environment must match run environment for things to work
|
||||
consistently. To apply changes to configuration values client bundle
|
||||
must be rebuilt. Just restarting the server is not enough.
|
||||
|
||||
**With deploys note that the configuration options are bundled in the client package at build
|
||||
time.** The configuration of the build environment must match run environment for things to work
|
||||
consistently. To apply changes to configuration values client bundle must be rebuilt. Just
|
||||
restarting the server is not enough.
|
||||
|
|
|
|||
12
docs/i18n.md
12
docs/i18n.md
|
|
@ -7,12 +7,12 @@ to format dates, numbers, money values, etc.
|
|||
|
||||
To change the language, do the following:
|
||||
|
||||
1. Copy the default [src/translations/en.json](../src/translations/en.json) English translation
|
||||
messages file into some other file like `es.json`.
|
||||
1. Copy the default [src/translations/en.json](../src/translations/en.json) English translation
|
||||
messages file into some other file like `es.json`.
|
||||
|
||||
1. Change the messages in the new messages file to your language.
|
||||
1. Change the messages in the new messages file to your language.
|
||||
|
||||
1. In [src/config.js](../src/config.js), change the `locale` variable value
|
||||
1. In [src/config.js](../src/config.js), change the `locale` variable value
|
||||
|
||||
1. In [src/app.js](../src/app.js), change the translation imports to come from the correct
|
||||
`react-intl` locale and the new messages file you created.
|
||||
1. In [src/app.js](../src/app.js), change the translation imports to come from the correct
|
||||
`react-intl` locale and the new messages file you created.
|
||||
|
|
|
|||
|
|
@ -35,18 +35,18 @@ documentation.
|
|||
|
||||
In the `master` branch:
|
||||
|
||||
1. Fetch the latest changes from the upstream repository:
|
||||
1. Fetch the latest changes from the upstream repository:
|
||||
|
||||
```sh
|
||||
git fetch upstream
|
||||
```
|
||||
```sh
|
||||
git fetch upstream
|
||||
```
|
||||
|
||||
1. Merge the changes to your local branch
|
||||
1. Merge the changes to your local branch
|
||||
|
||||
```sh
|
||||
git merge upstream/master
|
||||
```
|
||||
```sh
|
||||
git merge upstream/master
|
||||
```
|
||||
|
||||
1. Fix possible merge conflicts, commit, and push/deploy.
|
||||
1. Fix possible merge conflicts, commit, and push/deploy.
|
||||
|
||||
See also the [Syncing a fork](https://help.github.com/articles/syncing-a-fork/) documentation.
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ can create a static page.
|
|||
|
||||
Steps for creating a static page:
|
||||
|
||||
1. [Create a new folder under `src/containers/`](#1-creating-a-new-folder)
|
||||
2. [Create a new JavaScript file using the same name.](#2-creating-a-javascript-file)
|
||||
3. [Create a new CSS file using the same name.](#3-creating-a-css-file)
|
||||
4. [Write the content to a JavaScript file (i.e. AboutPage.js in our example).](#4-creating-the-component)
|
||||
5. [Write the style rules to CSS file (i.e. AboutPage.css in our example).](#5-adding-some-styles-to-the-css-file)
|
||||
6. [Add the newly created page component to `src/containers/index.js`](#6-adding-the-component-to-the-component-directory)
|
||||
7. [Add the newly created page to `src/routeConfiguration.js`](#7-adding-a-route-to-the-page)
|
||||
1. [Create a new folder under `src/containers/`](#1-creating-a-new-folder)
|
||||
2. [Create a new JavaScript file using the same name.](#2-creating-a-javascript-file)
|
||||
3. [Create a new CSS file using the same name.](#3-creating-a-css-file)
|
||||
4. [Write the content to a JavaScript file (i.e. AboutPage.js in our example).](#4-creating-the-component)
|
||||
5. [Write the style rules to CSS file (i.e. AboutPage.css in our example).](#5-adding-some-styles-to-the-css-file)
|
||||
6. [Add the newly created page component to `src/containers/index.js`](#6-adding-the-component-to-the-component-directory)
|
||||
7. [Add the newly created page to `src/routeConfiguration.js`](#7-adding-a-route-to-the-page)
|
||||
|
||||
## 1. Creating a new folder
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue