knadh/listmonk
1
1
Fork 0
mirror of https://github.com/knadh/listmonk.git synced 2025-01-19 21:05:10 +08:00
Code Issues Projects Releases Packages Wiki Activity
listmonk/frontend
History
Kailash Nadh fabe06e339 Add support for custom CSS/JS in settings for admin and public pages. 
This feature was originally authored by @sweetppro in PR #438.
However, since the PR ended up in an unclean state with
multiple master merges (instead of rebase) from the upstream, there are
several commits that are out of order and can can no longer be be
squashed for a clean feature merge.

This commit aggregates the changes from the original PR and applies the
following fixes on top of it.

- Add custom admin JS box to appearance UI.
- Refactor i18n language strings.
- Add handlers and migrations for the new `appearance.admin.custom_js`
  field.
- Fix migration version to `v2.1.0`
- Load custom appearance CSS/JS bytes into global constants during boot
  instead of making a DB call on every request.
- Fix and canonicalize URIs from `/api/custom*` to `/public/*.css`
  and `/admin/*.css`. Add proxy paths to yarn proxy config.
- Remove redundant HTTP handlers for different custom appearance files
  and refactor into a single handler `serveCustomApperance()`
- Fix content-type and UTF8 encoding headers for different file types.
- Fix incorrect registration of public facing custom CSS/JS handlers
  in the authenticated admin URI group.
- Fix merge conflicts in `Settings.vue`.
- Minor HTML and style fixes.
- Remove the `AppearanceEditor` component and use the existing
  `HTMLEditor` component instead.
- Add `language` prop to the `HTMLEditor` component.

Co-authored-by: SweetPPro <sweetppro@users.noreply.github.com>
2021-12-18 15:38:42 +05:30
..
cypress Add support for searching lists + search UI. Closes #618. 2021-12-09 21:34:38 +05:30
fontello improved mobile navbar/sidebar (#574) 2021-11-10 00:26:34 +05:30
public Add support for custom CSS/JS in settings for admin and public pages. 2021-12-18 15:38:42 +05:30
src Add support for custom CSS/JS in settings for admin and public pages. 2021-12-18 15:38:42 +05:30
.browserslistrc
.editorconfig
.env.sample
.eslintrc.js
.gitignore
babel.config.js
cypress.json Fix broken Cypress UI tests. 2021-12-09 20:47:52 +05:30
package.json Bump tinymce from 5.9.2 to 5.10.0 in /frontend 2021-11-02 15:53:03 +00:00
README.md WIP: Add tests 2021-04-10 12:26:33 +05:30
vue.config.js Add support for custom CSS/JS in settings for admin and public pages. 2021-12-18 15:38:42 +05:30
yarn.lock Bump tinymce from 5.9.2 to 5.10.0 in /frontend 2021-11-02 15:53:03 +00:00

README.md

listmonk frontend (Vue + Buefy)

It's best if the listmonk/frontend directory is opened in an IDE as a separate project where the frontend directory is the root of the project.

For developer setup instructions, refer to the main project's README.

Globals

In main.js, Buefy and vue-i18n are attached globally. In addition:

  • $api (collection of API calls from api/index.js)
  • $utils (util functions from util.js). They are accessible within Vue as this.$api and this.$utils.

Some constants are defined in constants.js.

APIs and states

The project uses a global vuex state to centrally store the responses to pretty much all APIs (eg: fetch lists, campaigns etc.) except for a few exceptions. These are called models and have been defined in constants.js. The definitions are in store/index.js.

There is a global state loading (eg: loading.campaigns, loading.lists) that indicates whether an API call for that particular "model" is running. This can be used anywhere in the project to show loading spinners for instance. All the API definitions are in api/index.js. It also describes how each API call sets the global loading status alongside storing the API responses.

IMPORTANT: All JSON field names in GET API responses are automatically camel-cased when they're pulled for the sake of consistentcy in the frontend code and for complying with the linter spec in the project (Vue/AirBnB schema). For example, content_type becomes contentType. When sending responses to the backend, however, they should be snake-cased manually. This is overridden for certain calls such as /api/config and /api/settings using the preserveCase: true param in api/index.js.

Icon pack

Buefy by default uses Material Design Icons (MDI) with icon classes prefixed by mdi-.

listmonk uses only a handful of icons from the massive MDI set packed as web font, using Fontello. To add more icons to the set using fontello:

  • Go to Fontello and drag and drop frontend/fontello/config.json (This is the full MDI set converted from TTF to SVG icons to work with Fontello).
  • Use the UI to search for icons and add them to the selection (add icons from under the Custom section)
  • Download the Fontello pack and from the ZIP:
    • Copy and overwrite config.json to frontend/fontello
    • Copy fontello.woff2 to frontend/src/assets/icons.
    • Open css/fontello.css and copy the individual icon definitions and overwrite the ones in frontend/src/assets/icons/fontello.css