Fix coding examples in the demo app

Author: MurhafSousli

projects/ngx-sharebuttons-demo/src/app/pages/button-c/button-c.component.html

@@ -17,15 +17,15 @@ <h1>Share Button Component</h1>
       <p>Install the following packages</p>
 
       <h4>NPM</h4>
-      <hl-code [code]="'/public/code-examples/install-with-icons.bash' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/install-with-icons.bash' | codeFromUrl | async"/>
     </section>
 
     <section>
       <section-title>Import the styles</section-title>
 
       <p>Import share buttons theme in the global style<b>"app/src/style.scss"</b></p>
 
-      <hl-code [code]="'/public/code-examples/theme.scss' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/theme.scss' | codeFromUrl | async"/>
 
       <note>The default theme is optional, you can replace it with other theme or create your own theme from scratch,
         see the <a routerLink="/styling-guide">Styling Guide</a></note>
@@ -37,17 +37,17 @@ <h4>NPM</h4>
     <section>
       <section-title>Basic Usage</section-title>
 
-      <hl-code [code]="'/public/code-examples/single-share-button/recommended-example.html' | codeFromUrl | async"
+      <hl-code [code]="'code-examples/single-share-button/recommended-example.html' | codeFromUrl | async"
                [languages]="['html']"/>
 
-      <code-switcher [code]="'/public/code-examples/single-share-button/basic-example.ts' | codeFromUrl | async"
+      <code-switcher [code]="'code-examples/single-share-button/basic-example.ts' | codeFromUrl | async"
                      class="center">
         <share-button button="facebook" theme="classic-dark" text="Share" showText/>
         <share-button button="x" theme="classic-dark" text="Post on X" showText/>
         <share-button button="pinterest" theme="classic-dark" text="Pin" showText/>
       </code-switcher>
 
-      <code-switcher [code]="'/public/code-examples/single-share-button/override-icons-example.ts' | codeFromUrl | async"
+      <code-switcher [code]="'code-examples/single-share-button/override-icons-example.ts' | codeFromUrl | async"
                      class="center">
         <share-button button="facebook" theme="circles-dark" [icon]="fbIcon"/>
         <share-button button="x" theme="circles-dark" [icon]="tweetIcon"/>

projects/ngx-sharebuttons-demo/src/app/pages/button-d/button-d.component.html

@@ -17,7 +17,7 @@ <h1>Share Button Directive</h1>
       <p>Install the following packages</p>
 
       <h4>NPM</h4>
-      <hl-code [code]="'/public/code-examples/install.bash' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/install.bash' | codeFromUrl | async"/>
     </section>
 
     <section>
@@ -27,13 +27,13 @@ <h4>NPM</h4>
         class="hljs">shareButton="x"</code>
       </p>
 
-      <hl-code [code]="'/public/code-examples/share-directive/basic-example.ts' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/share-directive/basic-example.ts' | codeFromUrl | async"/>
 
       <b>Example with icon</b>
 
-      <hl-code [code]="'/public/code-examples/share-directive/standard-example.ts' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/share-directive/standard-example.ts' | codeFromUrl | async"/>
 
-      <code-switcher [code]="'/public/code-examples/share-directive/recommended-example.html' | codeFromUrl | async"
+      <code-switcher [code]="'code-examples/share-directive/recommended-example.html' | codeFromUrl | async"
                      [languages]="['html']"
                      fill>
         <div style="display: flex; flex-direction: column; align-items: center; gap: 40px;">

projects/ngx-sharebuttons-demo/src/app/pages/buttons-c/buttons-c.component.html

@@ -18,7 +18,7 @@ <h1>Share Buttons Component</h1>
       <p>Install the following packages</p>
 
       <h4>NPM</h4>
-      <hl-code [code]="'/public/code-examples/install-with-icons.bash' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/install-with-icons.bash' | codeFromUrl | async"/>
     </section>
 
     <section>
@@ -28,7 +28,7 @@ <h4>NPM</h4>
         <b>"app/src/style.scss"</b>
       </p>
 
-      <hl-code [code]="'/public/code-examples/theme.scss' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/theme.scss' | codeFromUrl | async"/>
 
       <note>The default theme is optional, you can replace it with other theme or create your own theme from scratch,
         see the <a routerLink="/styling-guide">Styling Guide</a></note>
@@ -40,10 +40,10 @@ <h4>NPM</h4>
     <section>
       <section-title>Basic Usage</section-title>
 
-      <hl-code [code]="'/public/code-examples/share-buttons/basic-example.ts' | codeFromUrl | async"
+      <hl-code [code]="'code-examples/share-buttons/basic-example.ts' | codeFromUrl | async"
                [languages]="['ts']"/>
 
-      <code-switcher [code]="'/public/code-examples/share-buttons/example-1.html' | codeFromUrl | async"
+      <code-switcher [code]="'code-examples/share-buttons/example-1.html' | codeFromUrl | async"
                      [languages]="['html']"
                      class="center">
         <share-buttons show="11" description="Test me"/>

projects/ngx-sharebuttons-demo/src/app/pages/custom-button/custom-button.component.html

@@ -12,7 +12,7 @@ <h1>Add custom share button</h1>
 
       <p></p>
 
-      <hl-code [code]="'/public/code-examples/custom-button/custom-button.ts' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/custom-button/custom-button.ts' | codeFromUrl | async"/>
 
       <p>The available inputs for sharing parameters are <code class="hljs">url</code>,
         <code class="hljs">title</code>, <code class="hljs">description</code>, <code class="hljs">image</code>,

projects/ngx-sharebuttons-demo/src/app/pages/faq/faq.component.html

@@ -27,7 +27,7 @@ <h1>Frequently Asked Questions</h1>
       <p>There are many other meta tags available that can be used to specify different
         types of content. But, in general, the following will suffice</p>
 
-      <hl-code [code]="'/public/code-examples/faq/meta-tags.html' | codeFromUrl | async" [languages]="['html']"/>
+      <hl-code [code]="'code-examples/faq/meta-tags.html' | codeFromUrl | async" [languages]="['html']"/>
 
       <p>Check this cool <a href="https://megatags.co/#generate-tags">online meta tags generator</a></p>
 
@@ -61,11 +61,11 @@ <h1>Frequently Asked Questions</h1>
       </section-title>
       <p>Use the option <code class="hljs">include</code> to set share buttons order, here is an example:</p>
 
-      <hl-code [code]="'/public/code-examples/faq/buttons-order-global.ts' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/faq/buttons-order-global.ts' | codeFromUrl | async"/>
 
       Or directly using the <b>include</b> input in ShareButtons components
 
-      <hl-code [code]="'/public/code-examples/faq/buttons-order.html' | codeFromUrl | async" [languages]="['html']"/>
+      <hl-code [code]="'code-examples/faq/buttons-order.html' | codeFromUrl | async" [languages]="['html']"/>
 
     </section>
 

projects/ngx-sharebuttons-demo/src/app/pages/global-options/global-options.component.html

@@ -11,7 +11,7 @@ <h1>Global Options</h1>
 
       <p><b>Example</b></p>
 
-      <hl-code [code]="'/public/code-examples/global-options/global-options.ts' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/global-options/global-options.ts' | codeFromUrl | async"/>
 
     </section>
 

projects/ngx-sharebuttons-demo/src/app/pages/icons/icons.component.html

@@ -17,7 +17,7 @@ <h1>Icons Guide</h1>
       <section-title>Usage</section-title>
       <p>You can use the function <code class="hljs">shareIcons</code> inside <code class="hljs">provideShareButtonsOptions</code> to import all share buttons icons.</p>
 
-      <hl-code [code]="'/public/code-examples/icons-guide/icons-guide.ts' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/icons-guide/icons-guide.ts' | codeFromUrl | async"/>
     </section>
 
     <section>
@@ -27,7 +27,7 @@ <h1>Icons Guide</h1>
         manually.</p>
       <p>Let's say you want to use facebook square icon instead of the default one</p>
 
-      <hl-code [code]="'/public/code-examples/icons-guide/custom-icons.ts' | codeFromUrl | async"/>
+      <hl-code [code]="'code-examples/icons-guide/custom-icons.ts' | codeFromUrl | async"/>
     </section>
   </doc-container>
 

projects/ngx-sharebuttons-demo/src/app/pages/styling/styling.component.html

@@ -9,7 +9,7 @@ <h1>Styling Guide</h1>
 
       <p>Here are a list of the CSS variables you can use to change main styles:</p>
 
-      <hl-code [code]="'/public/code-examples/styling/variables.scss' | codeFromUrl | async" [languages]="['scss']"/>
+      <hl-code [code]="'code-examples/styling/variables.scss' | codeFromUrl | async" [languages]="['scss']"/>
 
       <p>If you still need to change other CSS rules, see the classes in the next section.</p>
     </section>
@@ -18,7 +18,7 @@ <h1>Styling Guide</h1>
       <section-title>Create custom theme</section-title>
       <p>There are several classes to help you adjust your custom styles</p>
 
-      <hl-code [code]="'/public/code-examples/styling/styling.scss' | codeFromUrl | async" [languages]="['scss']"/>
+      <hl-code [code]="'code-examples/styling/styling.scss' | codeFromUrl | async" [languages]="['scss']"/>
 
       <p>If you use <b>.sb-<span style="text-decoration: underline">moon</span>-theme</b> then the theme name will
         become <b>moon</b>:</p>