feat: Add code highlighting with ngx-highlightjs.

CreamLib · Feb 14, 2023 · 9ad1e7c · 9ad1e7c
1 parent b75f5b3
commit 9ad1e7c
Show file tree

Hide file tree

Showing 36 changed files with 556 additions and 303 deletions.
diff --git a/angular.json b/angular.json
@@ -103,7 +103,7 @@
                 "output": "/assets/"
               }
             ],
-            "styles": ["./projects/ngx-cream-lib/assets/css/main.css", "src/assets/css/local.css"],
+            "styles": ["./projects/ngx-cream-lib/assets/css/main.css", "src/assets/css/local.css",  "./node_modules/highlight.js/styles/github.css"],
             "scripts": []
           }
         },

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@angular/platform-browser": "^15.0.0",
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
+    "ngx-highlightjs": "^7.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

diff --git a/src/404.html b/src/404.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Accessible and semantic Angular components - CreamNG</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Free and open source library of Angular accessible components" />
+
+    <link rel="icon" type="image/svg+xml" href="./assets/img/favicon.svg" />
+    <link rel="icon" type="image/png" href="./assets/img/favicon.png" />
+    <link rel="icon" type="image/x-icon" href="./assets/img/favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { ConfigPageComponent } from './pages/config-page/config-page.component';
 import { DesignBasicsPageComponent } from './pages/design-basics-page/design-basics-page.component';
 import { IconographyPageComponent } from './pages/iconography-page/iconography-page.component';
 import { FormDesignPageComponent } from './pages/form-design-page/form-design-page.component';
+import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
 @NgModule({
   declarations: [
@@ -56,8 +57,20 @@ import { FormDesignPageComponent } from './pages/form-design-page/form-design-pa
     IconographyPageComponent,
     FormDesignPageComponent,
   ],
-  imports: [BrowserModule, AppRoutingModule, NgxCreamLibModule],
-  providers: [],
+  imports: [BrowserModule, AppRoutingModule, NgxCreamLibModule, HighlightModule],
+  providers: [
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        coreLibraryLoader: () => import('highlight.js/lib/core'),
+        languages: {
+          typescript: () => import('highlight.js/lib/languages/typescript'),
+          xml: () => import('highlight.js/lib/languages/xml'),
+          json: () => import('highlight.js/lib/languages/json'),
+        },
+      },
+    },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/pages/accordion-page/accordion-page.component.html b/src/app/pages/accordion-page/accordion-page.component.html
@@ -23,22 +23,8 @@ <h3>General component</h3>
     </c3m-tab-panel>
     <c3m-tab-panel class="block-style" tabTitle="Application">
       <pre>
-  &lt;c3m-accordion titleLevel=&#34;4&#34;&gt;
-    &lt;c3m-accordion-item label=&#34;First block&#34; total=&#34;5&#34;&gt;
-      &lt;p&gt;NG-CONTENT&lt;/p&gt;
-    &lt;/c3m-accordion-item&gt;
-    &lt;c3m-accordion-item label=&#34;Second block&#34; [isOpen]=&#34;true&#34;&gt;
-      &lt;p&gt;NG-CONTENT&lt;/p&gt;
-    &lt;/c3m-accordion-item&gt;
-    &lt;c3m-accordion-item label=&#34;Third block&#34;&gt;
-      &lt;p&gt;NG-CONTENT&lt;/p&gt;
-    &lt;/c3m-accordion-item&gt;
-    &lt;c3m-accordion-item label=&#34;Forth block&#34;&gt;
-      &lt;p&gt;NG-CONTENT&lt;/p&gt;
-    &lt;/c3m-accordion-item&gt;
-  &lt;/c3m-accordion&gt;
-        </pre
-      >
+        <code [highlight]="code"></code>
+      </pre>
     </c3m-tab-panel>
   </c3m-tabs>
 </section>

diff --git a/src/app/pages/accordion-page/accordion-page.component.ts b/src/app/pages/accordion-page/accordion-page.component.ts
@@ -10,4 +10,22 @@ export class AccordionPageComponent implements CreamPage {
   pageTitle = 'Accordion';
   componentName = 'c3m-accordion/ c3m-accordion-item';
   resourceType = 'Component';
+
+  code = `
+  <c3m-tab-panel class="block-style" tabTitle="Demo" [isActive]="true">
+    <c3m-accordion titleLevel="4">
+      <c3m-accordion-item label="First block" total="5">
+        <p>Content of the block</p>
+      </c3m-accordion-item>
+      <c3m-accordion-item label="Second block" [isOpen]="true">
+        <p>Content of the block with <a href="#">a link</a></p>
+      </c3m-accordion-item>
+      <c3m-accordion-item label="Third block">
+        <p>Content of the block</p>
+      </c3m-accordion-item>
+      <c3m-accordion-item label="Forth block">
+        <p>Content of the block</p>
+      </c3m-accordion-item>
+    </c3m-accordion>
+  </c3m-tab-panel>`;
 }
diff --git a/src/app/pages/chip-page/chip-page.component.html b/src/app/pages/chip-page/chip-page.component.html
@@ -7,7 +7,7 @@ <h3>Deletable Chip</h3>
     </c3m-tab-panel>
     <c3m-tab-panel class="block-style" tabTitle="Application">
       <pre>
-&lt;c3m-chip label=&#34;Chip example label&#34;&gt;&lt;/c3m-chip&gt;
+        <code [highlight]="codeChipDel"></code>
       </pre>
     </c3m-tab-panel>
   </c3m-tabs>
@@ -22,7 +22,7 @@ <h3>Non-deletable Chip</h3>
     </c3m-tab-panel>
     <c3m-tab-panel class="block-style" tabTitle="Application">
       <pre>
-&lt;c3m-chip label=&#34;Keyword&#34; [deletable]=&#34;false&#34;&gt;&lt;/c3m-chip&gt;
+        <code [highlight]="codeChipNonDel"></code>
       </pre>
     </c3m-tab-panel>
   </c3m-tabs>
@@ -37,7 +37,7 @@ <h3>Chip with Link</h3>
     </c3m-tab-panel>
     <c3m-tab-panel class="block-style" tabTitle="Application">
       <pre>
-&lt;c3m-chip label=&#34;Refers to Home Page&#34; linkUrl=&#34;/&#34;&gt;&lt;/c3m-chip&gt;
+        <code [highlight]="codeChipLink"></code>
       </pre>
     </c3m-tab-panel>
   </c3m-tabs>

diff --git a/src/app/pages/chip-page/chip-page.component.ts b/src/app/pages/chip-page/chip-page.component.ts
@@ -9,4 +9,13 @@ export class ChipPageComponent {
   pageTitle = 'Chip';
   componentName = 'c3m-chip';
   resourceType = 'Component';
+
+  codeChipDel = `
+  <c3m-chip label="Chip example label"></c3m-chip>`;
+
+  codeChipNonDel = `
+  <c3m-chip label="Keyword" [deletable]="false"></c3m-chip>`;
+
+  codeChipLink = `
+  <c3m-chip label="Refers to Home Page" linkUrl="/"></c3m-chip>`;
 }
diff --git a/src/app/pages/collapsible-page/collapsible-page.component.html b/src/app/pages/collapsible-page/collapsible-page.component.html
@@ -9,9 +9,7 @@ <h3>General Component</h3>
     </c3m-tab-panel>
     <c3m-tab-panel class="block-style" tabTitle="Application">
       <pre>
-&lt;c3m-collapsible summary=&#34;Title of collapsible panel&#34; total=&#34;5&#34;&gt;
-  &lt;NG-CONTENT&gt;
-&lt;/c3m-collapsible&gt;
+          <code [highlight]="code"></code>
       </pre>
     </c3m-tab-panel>
   </c3m-tabs>

diff --git a/src/app/pages/collapsible-page/collapsible-page.component.ts b/src/app/pages/collapsible-page/collapsible-page.component.ts
@@ -9,4 +9,9 @@ export class CollapsiblePageComponent {
   pageTitle = 'Collapsible';
   componentName = 'c3m-collapsible';
   resourceType = 'Component';
+
+  code = `
+  <c3m-collapsible summary="Title of collapsible panel" total="5">
+    <NG-CONTENT>
+  </c3m-collapsible>`;
 }
diff --git a/src/app/pages/config-page/config-page.component.html b/src/app/pages/config-page/config-page.component.html
@@ -13,34 +13,19 @@ <h3>Adding CreamNg Assets</h3>
     file of your project, change the value of the "style" keyword as shown hereafter:
   </p>
 
-  <pre class="command">
-
-&#34;styles&#34;: [
-  &#34;/node_modules/ngx-cream-lib/assets/css/main.css&#34;
-],
-
-  </pre>
+  <pre class="command"><code [highlight]="codeCommand"></code></pre>
 
   <p>
     You must also add the following lines to the "assets" keyword, in order to import the icons:
   </p>
 
   <div class="command">
     <pre>
-  &#34;assets&#34;: [
-    &#34;src/favicon.ico&#34;,
-    &#34;src/assets&#34;,
-  </pre
-    >
+      <code [highlight]="codeAsset"></code>
+  </pre>
     <pre class="highlight">
-    &#123;
-      &#34;glob&#34;: &#34;**/*&#34;,
-      &#34;input&#34;: &#34;./projects/ngx-cream-lib/assets&#34;,
-      &#34;output&#34;: &#34;/assets/&#34;
-    &#125;
-  </pre
-    >
-    <pre>],</pre>
+      <code [highlight]="codeAssetHighlight"></code>
+    </pre>
   </div>
 
   <p>This will allow you to use your own assets as much as the library's.</p>
@@ -84,26 +69,11 @@ <h3>Internationalisation</h3>
     </li>
     <li>
       Edit this new file with the wanted translation using the &lt;target&gt; element:
-      <div class="command">
-        <pre>
-        ...
-&lt;trans-unit id=&#34;7022070615528435141&#34; datatype=&#34;html&#34;&gt;
-  &lt;source&gt;Delete&lt;/source&gt;</pre
-        >
-        <pre class="highlight">
-  &lt;target&gt;Supprimer&lt;/target&gt;
-  </pre
-        >
-        <pre>
-  &lt;context-group purpose=&#34;location&#34;&gt;
-    &lt;context context-type=&#34;sourcefile&#34;&gt;projects/ngx-cream-lib/src/lib/chip/chip.component.html&lt;/context&gt;
-    &lt;context context-type=&#34;linenumber&#34;&gt;19&lt;/context&gt;
-  &lt;/context-group&gt;
-&lt;/trans-unit&gt;
-        ...
-  </pre
-        >
-      </div>
+      <!--div class="command"-->
+      <pre class="command">
+          <code [highlight]="codeInternationalisation"></code>
+  </pre>
+      <!--/div-->
     </li>
   </ol>
 

diff --git a/src/app/pages/config-page/config-page.component.ts b/src/app/pages/config-page/config-page.component.ts
@@ -7,4 +7,34 @@ import { Component } from '@angular/core';
 })
 export class ConfigPageComponent {
   pageTitle = 'Configuring CreamNg';
+
+  codeCommand = `
+  "styles": [
+    "/node_modules/ngx-cream-lib/assets/css/main.css"
+  ],`;
+
+  codeAsset = `
+  "assets": [
+    "src/favicon.ico",
+    "src/assets",
+  ],`;
+
+  codeAssetHighlight = `
+  {
+    "glob": "**/*",
+    "input": "./projects/ngx-cream-lib/assets",
+    "output": "/assets/"
+  }`;
+
+  codeInternationalisation = `...
+  <trans-unit id="7022070615528435141" datatype="html">
+    <source>Delete</source>
+    <target>Supprimer</target>
+
+    <context-group purpose="location">
+      <context context-type="sourcefile">projects/ngx-cream-lib/src/lib/chip/chip.component.html</context>
+      <context context-type="linenumber">19</context>
+    </context-group>
+  </trans-unit>
+          ...`;
 }
diff --git a/src/app/pages/custom-design/custom-design.component.html b/src/app/pages/custom-design/custom-design.component.html
@@ -14,15 +14,7 @@ <h3>Adding your own style-sheet</h3>
   </p>
 
   <div class="command">
-    <pre>
-
-  &#34;styles&#34;: [
-    &#34;/node_modules/ngx-cream-lib/assets/css/main.css&#34;,</pre
-    >
-    <pre class="highlight">
-    &#34;src/assets/css/local.css&#34;
-    </pre>
-    <pre>],</pre>
+    <pre><code [highlight]="codeStyle"></code></pre>
   </div>
 
   <p>
@@ -69,28 +61,45 @@ <h4>Adding icons to your project</h4>
     for more information), you can create your own svg sprite, as the example here after:
   </p>
 
-  <div class="command">
-    <pre>
-&lt;!-- SVG DEFINITIONS --&gt;
-&lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt;
-  &lt;defs&gt;
-    &lt;style type=&#34;text/css&#34; &gt;
-        /* add your own style here */
-    &lt;/style&gt;
-
-    &lt;g id=&#34;nav-blocks&#34;&gt;
-      &lt;path fill=&#34;none&#34; d=&#34;M0 0h24v24H0z&#34;/&gt;
-      &lt;path d=&#34;M3 3h8v8H3V3zm0 10h8v8H3v-8zM13 3h8v8h-8V3zm0 10h8v8h-8v-8z&#34;/&gt;
-    &lt;/g&gt;
-    &lt;g id=&#34;ic-download&#34;&gt;
-      &lt;path fill=&#34;none&#34; d=&#34;M0 0h24v24H0z&#34;/&gt;
-      &lt;path d=&#34;M3 19h18v2H3v-2zm10-5.828L19.071 7.1l1.414 1.414L12 17 3.515 8.515 4.929 7.1 11 13.17V2h2v11.172z&#34;/&gt;
-    &lt;/g&gt;
-  &lt;/defs&gt;
-&lt;/svg&gt;
-  </pre
-    >
-  </div>
+  <pre class="command"><code [highlight]="codeDecorative"></code></pre>
+
+  <p>
+    Notice that, as the image carries no information, we may hide it from screen readers by setting
+    the
+    <code>aria-hidden</code>
+    attribute as "true".
+  </p>
+
+  <h4>Non-decorative images</h4>
+
+  <p>Images that carry information, i.e. they are not purely decorative, must appear as:</p>
+
+  <ul>
+    <li>
+      image files properly referenced by the
+      <code>img</code>
+      element and with a
+      <strong>
+        mandatory
+        <code>alt</code>
+        attribute
+      </strong>
+      to describe its purpose or meaning;
+    </li>
+    <li>
+      svg sprite image called with the
+      <code>use</code>
+      element, with a
+      <strong>
+        mandatory
+        <code>title</code>
+        element
+      </strong>
+      describing its meaning or purpose:
+    </li>
+  </ul>
+
+  <pre class="command"><code [highlight]="codeNonDecorative"></code></pre>
 
   <p>
     If you need to add a new icon to your svg sprite, simply get the svg code (without the opening

diff --git a/src/app/pages/custom-design/custom-design.component.ts b/src/app/pages/custom-design/custom-design.component.ts
@@ -7,4 +7,22 @@ import { Component } from '@angular/core';
 })
 export class CustomDesignComponent {
   pageTitle = 'Custom Design';
+
+  codeStyle = `
+  "styles": [
+    "/node_modules/ngx-cream-lib/assets/css/main.css",
+    "src/assets/css/local.css"
+  ],`;
+
+  codeDecorative = `
+<svg role="img" width="24" height="24" aria-hidden="true">
+  <use href="./assets/img/sprite.svg#pic-arrow"></use>
+</svg>`;
+
+  codeNonDecorative = `
+<svg role="img" width="24" height="24">
+  <title>Favorites</title>
+  <use href="./assets/img/sprite.svg#ic-favorites"></use>
+</svg>
+`;
 }