Skip to content

Instantly share code, notes, and snippets.

View carmelodevuz's full-sized avatar

Carmelo carmelodevuz

1 follower · 0 following
View GitHub Profile
@carmelodevuz
carmelodevuz / How-to.md
Last active April 3, 2025 21:58
Metronic React v8.1.2 - RTL
  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 January 27, 2025 11:27
Metronic Angular Skeleton (demos 1-8)

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 October 4, 2022 21:06
Metronic 8 Angular CKEditor integration

!!! 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 / Readme.md
Last active May 29, 2024 22:36
Keenthemes Metronic 8.038 RTL

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 / CKExampleComponent.tsx
Last active July 25, 2023 07:01
Metronic 8 React CKEditor integration
// ! 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 / package.json
Last active April 11, 2022 09:44
metronic-react-yarn-lock
{
"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",