New: Add document notification

CarbonPackages · Sep 28, 2022 · b1be75b · b1be75b
1 parent b01d1ab
commit b1be75b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -4,20 +4,20 @@
 
 This package provides a tiny fusion helper for notifications:
 
-Type `info`  
+Type `info`
 ![screenshot info]
 
-Type `warning`  
+Type `warning`
 ![screenshot warning]
 
-Type `alert`  
+Type `alert`
 ![screenshot alert]
 
-Type `success`  
+Type `success`
 ![screenshot success]
 
 Besides these four types, there is also the type `backend`, which on a document,
-which is in the colors of the Neos Backend, is ideal for a notification.  
+which is in the colors of the Neos Backend, is ideal for a notification.
 ![screenshot backend]
 
 ## [Carbon.Notification:Tag]
@@ -41,7 +41,7 @@ and website languages differ from each other.
 
 ## [Carbon.Notification:Backend]
 
-A variant from `Carbon.Notification:Tag`.  
+A variant from `Carbon.Notification:Tag`.
 This notification gets only shown in the backend. Great for NodeTypes, who need
 input in the inspector. It has the same capabilities as [Carbon.Notification:Tag],
 it is just extended with `@if.inBackend = ${node.context.inBackend}`
@@ -57,6 +57,10 @@ the message is shown, otherwise, it will be hidden. This is done with the CSS se
 
 A use-case for this if you want to show a notification if a content collection is empty.
 
+## [Carbon.Notification:Document]
+
+This sourounds `Carbon.Notification:Tag` with the needed `HTML` Markup for a document.
+
 ## Customization
 
 Every notification load the default styles from the settings `Carbon.Notification.default`. If you
@@ -96,6 +100,7 @@ package is now installed correctly.
 [subscription]: https://github.com/CarbonPackages/Carbon.Notification/subscription
 [carbon.notification:tag]: Resources/Private/Fusion/Components/Tag.fusion
 [carbon.notification:backend]: Resources/Private/Fusion/Components/Backend.fusion
+[carbon.notification:document]: Resources/Private/Fusion/Components/Document.fusion
 [carbon.notification:data]: Resources/Private/Fusion/Components/Data.fusion
 [`settings.carbon.yaml`]: Configuration/Settings.Carbon.yaml
 [screenshot alert]: https://user-images.githubusercontent.com/4510166/77485453-7bedff00-6e2d-11ea-9795-97aab52ded6d.png

diff --git a/Resources/Private/Fusion/Components/Document.fusion b/Resources/Private/Fusion/Components/Document.fusion
@@ -0,0 +1,19 @@
+prototype(Carbon.Notification:Document) < prototype(Neos.Fusion:Component) {
+    lang = null
+    title = null
+
+    renderer = Neos.Fusion:Http.Message {
+        httpResponseHead.headers.'Content-Type' = 'text/html'
+        doctype = '<!DOCTYPE html>'
+        content = afx`
+            <html lang={props.lang} style="height:100%">
+                <head>
+                    <title>{props.title}</title>
+                </head>
+                <body style="font-family:'Noto Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'">
+                    <Carbon.Notification:Tag {...props} lang={null} />
+                </body>
+            </html>
+        `
+    }
+}