remake hosted label

int/api/box.go

@@ -4,6 +4,7 @@ import (
 	"bytes"
 	_ "embed"
 	"fmt"
+	"regexp"
 
 	"github.com/massalabs/DeWeb/int/config"
 	pkgConfig "github.com/massalabs/DeWeb/pkg/config"
@@ -17,69 +18,48 @@ const (
 //go:embed resources/massa_logomark.svg
 var massaLogomark []byte
 
-// InjectHostedByMassaBox injects a "Hosted by Massa" box into the HTML content
-func InjectHostedByMassaBox(content []byte, chainID uint64) []byte {
+//go:embed resources/injectedStyle.css
+var injectedStyle []byte
+
+//go:embed resources/massaBox.html
+var massaBox []byte
+
+func InjectOnChainBox(content []byte, chainID uint64) []byte {
+	content = injectStyles(content)
+	content = injectHtmlBox(content, chainID)
+
+	return content
+}
+
+// InjectStyles injects the DeWeb label style into the HTML content
+func injectStyles(content []byte) []byte {
+	styleHTML := fmt.Sprintf(`
+  		<!-- Injected DeWeb label style -->
+  		  <style type="text/css" >
+  		    %s
+  		  </style>
+  		<!-- Injected DeWeb label style -->`, injectedStyle)
+
+	return bytes.Replace(content, []byte("</head>"), []byte(styleHTML), 1)
+}
+
+// InjectHtmlBox injects a "Hosted by Massa" box into the HTML content
+func injectHtmlBox(content []byte, chainID uint64) []byte {
 	chainName := getChainName(chainID)
 	chainDocURL := getChainDocURL(chainID)
 
-	boxHTML := fmt.Sprintf(`
-		<style>
-			.hosted-by-massa-box {
-				position: fixed;
-				bottom: 10px;
-				left: 10px;
-				background-color: #FFFFFF;
-				color: #010112;
-				padding: 8px;
-				border-radius: 8px;
-				z-index: 10000;
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
-				font-family: Urbane, sans-serif;
-				font-size: 16px;
-				line-height: 16px;
-				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-			}
-			.hosted-by-massa-box a {
-				font-weight: 700;
-				text-decoration: none;
-				color: #010112;
-			}
-			.hosted-by-massa-box .logo {
-				width: 22px;
-				height: 22px;
-			}
-			.hosted-by-massa-box .hide-button {
-				background: none;
-				border: none;
-				color: #010112;
-				font-size: 16px;
-				cursor: pointer;
-				position: absolute;
-				top: 5px;
-				right: 5px;
-			}
-		</style>
-		<div class="hosted-by-massa-box" id="massaBox">
-			<button class="hide-button" onclick="document.getElementById('massaBox').style.display='none'">✖</button>
-			<div style="display: flex; align-items: center; gap: 4px;">
-				<a href="https://massa.net" target="_blank">
-					<div class="logo">%s</div>
-				</a>
-				<a href="https://docs.massa.net/docs/deweb/home" target="_blank">
-					<div style="margin-right: 12px">Hosted on chain</div>
-				</a>
-			</div>
-			<div style="display: flex; justify-content: space-between;">
-				<a href="%s" target="_blank" style="font-weight: 400;">%s</a>
-				<div>%s</div>
-			</div>
-		</div>
-	</body>`, massaLogomark, chainDocURL, chainName, config.Version)
-
-	// Insert the boxHTML before the closing </body> tag
-	return bytes.Replace(content, []byte("</body>"), []byte(boxHTML), 1)
+	boxHTML := fmt.Sprintf(string(massaBox), massaLogomark, chainDocURL, chainName, config.Version)
+
+	bodyRegex := regexp.MustCompile(`(?i)<body[^>]*>`)
+
+	loc := bodyRegex.FindIndex(content)
+	if loc == nil {
+		return content
+	}
+
+	result := append(content[:loc[1]], append([]byte(boxHTML), content[loc[1]:]...)...)
+
+	return result
 }
 
 // getChainName returns the name of the chain based on the chainID

int/api/middlewares.go

@@ -150,7 +150,9 @@ func getWebsiteResource(network *msConfig.NetworkInfos, websiteAddress, resource
 
 	if strings.HasPrefix(contentType, "text/html") {
 		logger.Debugf("Injecting 'Hosted by Massa' box")
-		content = InjectHostedByMassaBox(content, network.ChainID)
+
+		content = InjectOnChainBox(content, network.ChainID)
+
 		logger.Debugf("Injected 'Hosted by Massa' box\n%s", content)
 	}
 

int/api/resources/injectedStyle.css

@@ -0,0 +1,73 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
+
+.massa-logo {
+  width: 20px;
+  height: 20px;
+}
+
+.massa-box {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+
+  z-index: 100000;
+  position: relative;
+
+  min-width: 100vw;
+  max-width: 100%;
+
+  background: #ffffff;
+
+  color: #010112;
+  opacity: 1;
+  padding: .25rem 1rem;
+}
+
+.massa-box-disappeared {
+  display: none;
+}
+
+.massa-box-content {
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 66%;
+  justify-content: space-between;
+  gap: 12px;
+  color: #010112;
+}
+
+.massa-link,
+.massa-logo-link {
+  text-decoration: none;
+  color: #010112;
+  cursor: pointer;
+}
+
+.massa-on-chain-text {
+  text-wrap: nowrap;
+}
+
+.hide-button {
+  background-color: transparent;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  position: relative;
+  color: #010112;
+}
+
+.massa-flex-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Mobile Styles */
+@media (max-width: 880px) {
+  .massa-box-content {
+    justify-content: flex-start;
+  }
+}

int/api/resources/massaBox.html

@@ -0,0 +1,57 @@
+<body>
+  <div class="massa-box" id="massaBox">
+    <div class="massa-box-content">
+      <div class="massa-flex-content">
+        <a
+          class="massa-logo-link"
+          href="https://massa.net"
+          target="_blank"
+          onclick="document.getElementById('massaBox').classList.add('show-all')"
+        >
+          <div class="massa-logo">%s</div>
+        </a>
+        <a
+          class="massa-link massa-on-chain-text"
+          href="https://docs.massa.net/docs/deweb/home"
+          target="_blank"
+        >
+          <strong>hosted on chain</strong>
+        </a>
+      </div>
+      <div class="massa-flex-content">
+        <a class="massa-link" href="%s" target="_blank">%s</a>
+        <div class="deweb-version">%s</div>
+      </div>
+    </div>
+    <button class="hide-button" id="closeMassaBoxBtn">&times;</button>
+  </div>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      function checkIfClosed() {
+        const isClosed = localStorage.getItem("massaBoxClosed");
+        const massaBox = document.getElementById("massaBox");
+
+        if (isClosed != "true") {
+          massaBox.style.display = "flex";
+        }
+      }
+
+      // Function to close the element and save the state in local storage
+      function closeMassaBox() {
+        const massaBox = document.getElementById("massaBox");
+        if (massaBox) {
+          massaBox.style.display = "none";
+          localStorage.setItem("massaBoxClosed", "true");
+        }
+      }
+
+      checkIfClosed();
+
+      const closeButton = document.getElementById("closeMassaBoxBtn");
+      if (closeButton) {
+        closeButton.addEventListener("click", closeMassaBox);
+      }
+    });
+  </script>
+</body>