refactor(docs): update getting-started content

acrodata · May 8, 2024 · 4437c5d · 4437c5d
1 parent fbdb6c1
commit 4437c5d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/projects/docs/src/app/app.config.ts b/projects/docs/src/app/app.config.ts
@@ -31,6 +31,7 @@ export const appConfig: ApplicationConfig = {
           scss: () => import('highlight.js/lib/languages/scss'),
           xml: () => import('highlight.js/lib/languages/xml'),
           json: () => import('highlight.js/lib/languages/json'),
+          diff: () => import('highlight.js/lib/languages/diff'),
         },
       },
     },

diff --git a/projects/docs/src/app/pages/getting-started/getting-started.component.html b/projects/docs/src/app/pages/getting-started/getting-started.component.html
@@ -12,17 +12,6 @@ <h2 id="setup">
   <a href="getting-started#setup">Setup</a>
 </h2>
 
-<pre><code highlight="import { GuiModule } from '@acrodata/gui';
-
-@NgModule({
-  ...
-  imports: [GuiModule, ...],
-  ...
-})
-export class YourAppModule {
-}"
-[languages]="['ts']"></code></pre>
-
 <p>Define a theme with Angular Material's theming system.
   <a href="https://material.angular.io/guide/theming" target="_blank">More about theming.</a>
 </p>
@@ -37,16 +26,26 @@ <h2 id="setup">
 @include gui.all-control-themes($theme);"
 [languages]="['scss']"></code></pre>
 
+<p>🚨 If you use the Angular Material as default library and have included all component themes,
+  there's no need to include the GUI themes anymore.</p>
+
+<pre><code highlight="+ @include mat.all-component-themes($theme);
++ @include mtx.all-component-themes($theme);
+- @include gui.all-control-themes($theme);"
+[languages]="['diff']"></code></pre>
+
 <h2 id="usage">
   <a href="getting-started#usage">Usage</a>
 </h2>
 
 <pre><code highlight="import { Component } from '@angular/core';
-import { GuiFields } from '@acrodata/gui';
+import { GuiModule, GuiFields } from '@acrodata/gui';
 
 @Component({
   selector: 'your-app',
   template: `&lt;gui-form [config]=&quot;config&quot; [model]=&quot;model&quot; [form]=&quot;form&quot;&gt;&lt;/gui-form&gt;`,
+  standalone: true,
+  imports: [GuiModule],
 })
 export class YourAppComponent {
   config: GuiFields = {

diff --git a/projects/docs/src/styles/_reboot.scss b/projects/docs/src/styles/_reboot.scss
@@ -14,6 +14,10 @@
   --hl-number: rgb(50, 160, 85);
   --hl-comment: rgba(100, 100, 100);
   --hl-title: rgb(165, 120, 20);
+  --hl-inserted-text: rgb(17, 99, 41);
+  --hl-inserted-bg: rgb(218, 251, 225);
+  --hl-deleted-text: rgb(130, 7, 30);
+  --hl-deleted-bg: rgb(255, 235, 233);
   --mat-standard-button-toggle-height: 32px;
 }
 
@@ -166,3 +170,13 @@ table {
 .hljs-title {
   color: var(--hl-title);
 }
+
+.hljs-addition {
+  color: var(--hl-inserted-text);
+  background-color: var(--hl-inserted-bg);
+}
+
+.hljs-deletion {
+  color: var(--hl-deleted-text);
+  background-color: var(--hl-deleted-bg);
+}