Merge pull request #214 from valor-software/feat-citation-block-visual

feat(articles): update citation block visual

Author: andsonjosef

assets/articles/0048-webpack-plugin-written-by-chatgpt/webpack-plugin-written-by-chatgpt.adoc

@@ -14,14 +14,15 @@ A lot of my focus lately is on ModuleFederation and webpack. I asked myself what
 
 The first question I asked the site:
 
+[.block-citation]
 [quote,Zackary Chapple]
 ____
-Create a webpack plugin in typescript that wraps module federation and adds additional logging"
+Create a webpack plugin in typescript that wraps module federation and adds additional logging
 ____
 
 
 Below is the first reply:
-
+[.block-citation]
 [quote, The AI]
 ____
 To create a webpack plugin in TypeScript that wraps module federation and adds additional logging, you can follow these steps:"
@@ -127,11 +128,15 @@ ____
 
 You can see that the last code block is incomplete. Sometimes, on more lengthy requests, the chatbot can time out, I tried, quite literally, asking it to keep going.
 
-"Keep going"
--- Zackary Chapple
+[.block-citation]
+[quote, Zackary Chapple]
+____
+Keep going
+____
+ 
 
 "Sure, here are the next steps:", said ChatGPT
-
+[.block-citation]
 [quote, The AI]
 ____
 
@@ -202,7 +207,7 @@ ____
 == Modifying the results
 
 Seeing what the results were it was quite verbose, but it does not follow the platform I usually like to use, https://dev.to/nrwl_io[@nrwl_io's, window=_blank] Nx. So I did a redirect on the conversation.
-
+[.block-citation]
 [quote, Zackary Chapple]
 ____
 how can I simplify the steps by using Nx
@@ -289,14 +294,14 @@ In the libs/module-federation-logging-plugin/src/index.ts file, export the Modul
 == Second timeout
 
 You can see that I received another timeout due to the length of the response. This time instead of just asking it to continue I tried to get it to pick back up from step 7 which was incomplete.
-
+[.block-citation]
 [quote, Zackary Chapple]
 ____
 Repeat the content of step 7 and keep going
 ____
 
 And the chat-bot said:
-
+[.block-citation]
 [quote, The AI]
 ____
 Sure, here is the content of step 7:
@@ -354,14 +359,14 @@ ____
 == One more tweak
 
 Just to see how far I can go I wanted to add some documentation. No plugin is complete without documentation right?
-
+[.block-citation]
 [quote, Zackary Chapple]
 ____
 Can you add swagger documentation to the src/module-federation-logging-plugin.ts file
 ____
 
 And the chat-bot delivered the following:
-
+[.block-citation]
 [quote, The AI]
 ____
 To add Swagger documentation to the src/module-federation-logging-plugin.ts file, you can use Swagger annotations in the form of JSDoc comments. JSDoc is a documentation standard for JavaScript that is widely supported by tools like Swagger.

libs/route-pages/blog-portfolio/src/article.component.ts

@@ -8,7 +8,7 @@ import { Subscription, of } from "rxjs";
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'article',
-    styles:[`
+    styles: [`
     ::ng-deep.turbo-table {
         margin-top: 25px;
     }
@@ -28,6 +28,33 @@ import { Subscription, of } from "rxjs";
         margin: auto;
         width: 40%
     }
+    ::ng-deep.block-citation {
+        border-left-width: 8px;
+        --tw-border-opacity: 1;
+        border-color: rgba(32, 32, 32, var(--tw-border-opacity));
+        --tw-bg-opacity: 1;
+        background-color: #2c2c2d;
+    }
+    ::ng-deep.block-citation>.attribution {
+        padding: 0 16px 16px 16px;
+        text-align: right;
+    }
+    ::ng-deep.block-citation>blockquote {
+        border: 0px
+    }
+    ::ng-deep.block-citation>blockquote>.paragraph:first-of-type:before {
+        content: open-quote;
+        float: left;
+        font-size: 3em;
+        margin-right: 4px;
+        font-weight: 700;
+        line-height: 0.6em;
+        color: rgba(226, 78, 99, var(--tw-text-opacity));
+    }
+    ::ng-deep.block-citation>blockquote>.paragraph:first-of-type:after {
+        content: no-close-quote;
+    }
+     
     `],
     templateUrl: './article.component.html'
 })