Merge pull request #20 from Nix1983/CodeViewer

Code viewer
Nix1983 · Dec 10, 2023 · 6093dbb · 6093dbb
2 parents 5b25975 + dbfc999
commit 6093dbb
Show file tree

Hide file tree

Showing 8 changed files with 283 additions and 24 deletions.
diff --git a/Components/Code/CodeLanguage.cs b/Components/Code/CodeLanguage.cs
@@ -0,0 +1,10 @@
+namespace TablerForNet.Components
+{
+    public enum CodeLanguage
+    {
+        CSharp,
+        Html,
+        CSS,
+        Razor
+    }
+}
diff --git a/Components/Code/CodeViewer.razor b/Components/Code/CodeViewer.razor
@@ -0,0 +1,91 @@
+@namespace TablerForNet.Components
+@inject IJSRuntime JSRuntime
+@inject TablerService tabService
+@inject ToastService ToastService
+
+<div class="card">
+    <div class="row">
+        <!-- Code Spalte -->
+        <div class="col-11">
+            <pre>
+            <code class="language-@(Language.ToString().ToLower())">
+                    @Code
+                </code>
+            </pre>
+        </div>
+
+        <!-- Button Spalte -->
+        @if (ShowCopyButton)
+        {
+            <div class="col-1">
+                <div class="codeblock-copy d-flex justify-content-end">
+                    <div @onclick="(() => CopyToClipboard(Code))" class="cursor-pointer">
+                        <Icon IconType="TablerIcons.Copy" TextColor="@(IsClicked ? TablerColor.Teal : TablerColor.Secondary)" />
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+
+@code {
+    [Parameter]
+    public string Code { get; set; } = string.Empty;
+
+    [Parameter]
+    public string Title { get; set; } = string.Empty;
+
+    [Parameter]
+    public bool ShowCopyButton { get; set; } = true;
+
+    [Parameter]
+    public bool ShowToast { get; set; } = true;
+
+    [Parameter]
+    public string ToastText { get; set; } = "Code copied";
+
+    [Parameter]
+    public CodeLanguage Language { get; set; } = CodeLanguage.Html;
+
+    private bool IsClicked = false;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JSRuntime.InvokeVoidAsync("Prism.highlightAll");
+        }
+    }
+
+    private async Task CopyToClipboard(string code)
+    {
+        await tabService.CopyToClipboard(code);
+
+        if (ShowToast)
+        {
+            try
+            {
+                IsClicked = true;
+                await InvokeAsync(StateHasChanged);
+
+                var options = new ToastOptions
+                    {
+                        Delay = 1,
+                        ShowProgress = true,
+                        ShowHeaderClose = false,
+                        ShowHeader = false
+                    };
+                await ToastService.AddToastAsync(new ToastModel { Title = string.Empty, SubTitle = "", Message = ToastText, Options = options });
+            }
+            finally
+            {
+                await Task.Delay(500);
+                IsClicked = false;
+                await InvokeAsync(StateHasChanged);
+            }
+        }
+
+    }
+}
+
diff --git a/bundleconfig.json b/bundleconfig.json
@@ -4,7 +4,8 @@
     "inputFiles": [
       "wwwroot/css/tablerForNet.css",
       "wwwroot/css/flags.css",
-      "wwwroot/css/toolTip.css"
+      "wwwroot/css/toolTip.css",
+      "wwwroot/css/prism-vs.css"
     ],
     "minify": {
       "enabled": true,
@@ -15,7 +16,8 @@
   {
     "outputFileName": "wwwroot/js/tablerForNet.min.js",
     "inputFiles": [
-      "wwwroot/js/tablerForNet.js"
+      "wwwroot/js/tablerForNet.js",
+      "wwwroot/js/prism.js"
 
     ],
     "minify": {

diff --git a/wwwroot/css/prism-vs.css b/wwwroot/css/prism-vs.css
@@ -0,0 +1,151 @@
+[data-bs-theme="light"] :not(pre) > code[class*=language-],
+[data-bs-theme="light"] pre[class*=language-] {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    color: #000;
+    background: var(--tblr-light-bg);
+}
+
+[data-bs-theme="light"] .token.punctuation {
+    color: #000;
+}
+
+[data-bs-theme="light"] .token.comment {
+    color: #008016;
+}
+
+[data-bs-theme="light"] .token.string {
+    color: #E11500;
+}
+
+[data-bs-theme="light"] .token.function {
+    color: #785318;
+}
+
+[data-bs-theme="light"] .token.class-name {
+    color: #0491C1;
+}
+
+[data-bs-theme="light"] .token.doctype,
+[data-bs-theme="light"] .token.prolog {
+    color: #0491C1;
+}
+
+[data-bs-theme="light"] .token.keyword {
+    color: #3200FF;
+}
+
+[data-bs-theme="light"] .token.preprocessor.property {
+    color: #80807F;
+}
+
+[data-bs-theme="light"] .token.selector {
+    color: #B80000;
+}
+
+[data-bs-theme="light"] .token.atrule {
+    color: #3200FF;
+}
+
+[data-bs-theme="light"] .token.tag {
+    color: #B80000;
+}
+
+[data-bs-theme="light"] .token.attr-name {
+    color: #FF0000;
+}
+
+[data-bs-theme="light"] .token.attr-value {
+    color: #3200FF;
+}
+
+[data-bs-theme="light"] code[class*="language-css"] {
+    color: #3200FF;
+}
+
+    [data-bs-theme="light"] code[class*="language-css"] .token.property {
+        color: #B80000;
+    }
+
+    [data-bs-theme="light"] code[class*="language-css"] .token.string {
+        color: #3200FF;
+    }
+
+[data-bs-theme="light"] code[class*="language-markup"] .token.punctuation {
+    color: #3200FF;
+}
+
+[data-bs-theme="dark"] :not(pre) > code[class*=language-],
+[data-bs-theme="dark"] pre[class*=language-] {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    color: #DCDCDA;
+    background: var(--tblr-dark-bg);
+}
+
+[data-bs-theme="dark"] .token.punctuation {
+    color: #DCDCDA;
+}
+
+[data-bs-theme="dark"] .token.comment {
+    color: #23A658;
+}
+
+[data-bs-theme="dark"] .token.string {
+    color: #EA9D78;
+}
+
+[data-bs-theme="dark"] .token.function {
+    color: #A0D7A7;
+}
+
+[data-bs-theme="dark"] .token.class-name {
+    color: #13C9C6;
+}
+
+[data-bs-theme="dark"] .token.doctype,
+[data-bs-theme="dark"] .token.prolog {
+    color: #13C9C6;
+}
+
+[data-bs-theme="dark"] .token.keyword {
+    color: #439CE2;
+}
+
+[data-bs-theme="dark"] .token.preprocessor.property {
+    color: #9B9B99;
+}
+
+[data-bs-theme="dark"] .token.selector {
+    color: #D8BA76;
+}
+
+[data-bs-theme="dark"] .token.atrule {
+    color: #439CE2;
+}
+
+[data-bs-theme="dark"] .token.tag {
+    color: #439CE2;
+}
+
+[data-bs-theme="dark"] .token.attr-name {
+    color: #87DCFF;
+}
+
+[data-bs-theme="dark"] .token.attr-value {
+    color: #C8C8C6;
+}
+
+[data-bs-theme="dark"] code[class*="language-css"] {
+    color: #C8C8C6;
+}
+
+    [data-bs-theme="dark"] code[class*="language-css"] .token.property {
+        color: #67DCFF;
+    }
+
+    [data-bs-theme="dark"] code[class*="language-css"] .token.string {
+        color: #C8C8C6;
+    }
+
+[data-bs-theme="dark"] code[class*="language-markup"] .token.punctuation {
+    color: #80807F;
+}
diff --git a/wwwroot/css/tablerForNet.css b/wwwroot/css/tablerForNet.css
@@ -1,14 +1,5 @@
-/*!
-* Tabler v1.0.0-beta19 (https://tabler.io)
-* @version 1.0.0-beta19
-* @link https://tabler.io
-* Copyright 2018-2023 The Tabler Authors
-* Copyright 2018-2023 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/
-@charset "UTF-8";
-/* prettier-ignore */
-/* prettier-ignore */
+@charset "UTF-8";
+
 :root,
 [data-bs-theme=light] {
     --tblr-blue: #206bc4;
@@ -281,7 +272,7 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
 
 h1, .h1 {
     font-size: 1.5rem;
-    outline:none;
+    outline: none;
 }
 
 
@@ -28543,3 +28534,18 @@ Antialiasing
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
 }
+
+.codeblock {
+    position: relative;
+    left: 50%;
+    max-width: 64rem;
+    transform: translate(-50%);
+    width: 100%;
+}
+
+.codeblock-copy {
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+    z-index: 1;
+}
diff --git a/wwwroot/css/tablerForNet.min.css b/wwwroot/css/tablerForNet.min.css