Skip to content

Instantly share code, notes, and snippets.

Avatar

Carmelo carmelodevuz

View GitHub Profile
@carmelodevuz
carmelodevuz / Readme.md
Last active Jan 26, 2023
Metronic Angular Skeleton (demos 1-8)
View Readme.md

Basic skeleton preparation:

  1. Remove unnecessary modules in the folder src/app/modules. (!!!Except auth, i18n and errors folders).
  2. Comment unnecessary routes in the src/app/pages/routing.ts file. [9-45] rows.
  3. Clear Dashboard src/app/pages/dashboard.component.html file.
  4. Clear Dashboard module src/app/pages/dashboard.module.ts file (!remove WidgetsModule from the code, rows [5, 17].
  5. Remove Widgets src/_metronic/partials/content/widgets folder and the file src/app/_metronic/partials/index.ts file comment row [3].
  6. Clear Aside menu in the file src/app/_metronic/layout/components/aside/aside-menu/aside-menu.component.html. Keep only Dashboard menu item. (For demo1 also need to clear src/app/_metronic/layout/components/sidebar/sidebar-menu/sidebar-menu.component.html file)
  7. Clear Header menu in the file src/app/_metronic/layout/components/header/header-menu/header-menu.component.html. Keep only dashboard menu item.
  8. In case if you don't need Aut
@carmelodevuz
carmelodevuz / Readme.md
Created Oct 4, 2022
Metronic 8 Angular CKEditor integration
View Readme.md

!!! Check out the official documentation of CKEditort first https://ckeditor.com/docs/ckeditor4/latest/guide/dev_angular.html.

  1. Run the command: yarn add ckeditor4-angular.
  2. import CKEditorModule to your application.
  3. Add variable editorData and method onChange into code behind (See example in your.component.ts file).
  4. Add ckeditor into your HTML markup (See example in your.component.html file).
@carmelodevuz
carmelodevuz / CKExampleComponent.tsx
Last active Oct 18, 2022
Metronic 8 React CKEditor integration
View CKExampleComponent.tsx
// ! CKEditor doesn't have a port to the Typescript version, cause of that we use @ts-ignore a lot here:
// @ts-ignore
import {CKEditor} from '@ckeditor/ckeditor5-react'
// @ts-ignore
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
const CKExampleComponent = () => {
return (<CKEditor
editor={ClassicEditor}
@carmelodevuz
carmelodevuz / How-to.md
Last active Jan 3, 2023
Metronic React v8.1.2 - RTL
View How-to.md
  1. Copy and paste rtl.config.js file.
  2. Add packages to the package.json file (copy them from the package.json) below and re-install packages with yarn command.
  3. Run the command: yarn run webpack --config webpack-rtl.config.js
  4. In the file src/index.tsx file comment rows [18, 19]: // import './_metronic/assets/sass/plugins.scss' // import './_metronic/assets/sass/style.scss'
  5. In the file src/index.tsx add the row: import './_metronic/assets/css/style.rtl.css' (! before style.react.scss).
  6. In the file public/index.html update the html tag with: <html direction="rtl" dir="rtl" style="direction: rtl">
  7. Find and replace next attributes in the project: data-kt-menu-placement='bottom-start' =&gt; data-kt-menu-placement='bottom-end'
@carmelodevuz
carmelodevuz / Readme.md
Last active Jan 23, 2023
Keenthemes Metronic 8.038 RTL
View Readme.md

RTL

  1. In file '/angular/demo{#}/src/assets/sass/style.angular.scss' comment the next rows [8, 9]:
  // @import "./core/vendors/plugins/prismjs";
  // @import "./core/vendors/plugins/formvalidation";

!!! THESE TWO PLUGINS AREN'T RTL READY !!!

@carmelodevuz
carmelodevuz / package.json
Last active Apr 11, 2022
metronic-react-yarn-lock
View package.json
{
"name": "demo3",
"version": "8.0.38",
"private": true,
"homepage": "/metronic8/react/demo3",
"dependencies": {
"@formatjs/intl-pluralrules": "^4.0.28",
"@formatjs/intl-relativetimeformat": "^9.1.7",
"@fortawesome/fontawesome-free": "^5.15.3",
"@popperjs/core": "~2.10.1",