From 6d087a99be0d6e4c73f1e98cb2d764ded0fe125c Mon Sep 17 00:00:00 2001 From: Phoebe Lartisant Date: Tue, 3 Sep 2024 10:41:21 +0200 Subject: [PATCH 1/5] remake hosted label --- int/api/box.go | 101 +++++++++++++--------------- int/api/middlewares.go | 3 +- int/api/resources/injectedStyle.css | 67 ++++++++++++++++++ 3 files changed, 114 insertions(+), 57 deletions(-) create mode 100644 int/api/resources/injectedStyle.css diff --git a/int/api/box.go b/int/api/box.go index a494afd..f4ae517 100644 --- a/int/api/box.go +++ b/int/api/box.go @@ -17,66 +17,55 @@ 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 + +// InjectStyles injects the DeWeb label style into the HTML content +func InjectStyles(content []byte) []byte { + styleHTML := fmt.Sprintf(` + + + + `, injectedStyle) + + return bytes.Replace(content, []byte(""), []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(` - -
- -
- - - - -
Hosted on chain
- -
-
- %s -
%s
-
-
- `, massaLogomark, chainDocURL, chainName, config.Version) +
+
+ + + + + hosted on chain + + %s +
%s
+ +
+
`, massaLogomark, chainDocURL, chainName, config.Version) // Insert the boxHTML before the closing tag return bytes.Replace(content, []byte(""), []byte(boxHTML), 1) diff --git a/int/api/middlewares.go b/int/api/middlewares.go index 411f69c..bfecc30 100644 --- a/int/api/middlewares.go +++ b/int/api/middlewares.go @@ -150,7 +150,8 @@ 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 = InjectStyles(content) + content = InjectHtmlBox(content, network.ChainID) logger.Debugf("Injected 'Hosted by Massa' box\n%s", content) } diff --git a/int/api/resources/injectedStyle.css b/int/api/resources/injectedStyle.css new file mode 100644 index 0000000..bc381d2 --- /dev/null +++ b/int/api/resources/injectedStyle.css @@ -0,0 +1,67 @@ +.massa-logo { + width: 20px; + height: 20px; +} + +.massa-box { + position: fixed; + z-index: 1000; + bottom: 0px; + left: 0px; + + min-width: 100vw; + + background: linear-gradient(135deg, transparent 60%, #cecece 100%); + + color: #010112; + opacity: 1; + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.massa-box-disappeared { + opacity: 0; + transform: translatex(-20px); +} + +.massa-box-content { + display: flex; + flex-direction: row; + align-items: center; + justify-content: end; + gap: 12px; + color: #010112; + font-family: "Roboto", sans-serif; + padding: 0px 16px; +} + +.massa-link, +.massa-logo-link { + text-decoration: none; + color: #010112; + cursor: pointer; +} + +.hide-button { + background-color: transparent; + border: none; + font-size: 20px; + cursor: pointer; + position: relative; + top: -2px; + color: #010112; +} + +/* Mobile Styles */ +@media (max-width: 880px) { + .massa-link, + .hide-button, + .deweb-version { + display: none; + } + .massa-box { + background: transparent; + } + .massa-logo-link { + padding: 8px; + } +} From 132f7f5a8724ed66b2018a0ca56a0183d0bf349c Mon Sep 17 00:00:00 2001 From: Phoebe Lartisant Date: Tue, 3 Sep 2024 17:09:19 +0200 Subject: [PATCH 2/5] popup v2 --- int/api/box.go | 41 +++++++-------------- int/api/resources/injectedStyle.css | 46 ++++++++++++------------ int/api/resources/massaBox.html | 55 +++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 52 deletions(-) create mode 100644 int/api/resources/massaBox.html diff --git a/int/api/box.go b/int/api/box.go index f4ae517..43a464d 100644 --- a/int/api/box.go +++ b/int/api/box.go @@ -4,6 +4,8 @@ import ( "bytes" _ "embed" "fmt" + "log" + "os" "github.com/massalabs/DeWeb/int/config" pkgConfig "github.com/massalabs/DeWeb/pkg/config" @@ -27,6 +29,7 @@ func InjectStyles(content []byte) []byte { + `, injectedStyle) @@ -38,37 +41,17 @@ func InjectHtmlBox(content []byte, chainID uint64) []byte { chainName := getChainName(chainID) chainDocURL := getChainDocURL(chainID) - boxHTML := fmt.Sprintf(` -
-
- - - - - hosted on chain - - %s -
%s
- -
-
`, massaLogomark, chainDocURL, chainName, config.Version) + boxHtml := "int/api/resources/massaBox.html" + + boxTemplate, err := os.ReadFile(boxHtml) + if err != nil { + log.Fatalf("Failed to read template file: %v", err) + } + + boxHTML := fmt.Sprintf(string(boxTemplate), massaLogomark, chainDocURL, chainName, config.Version) // Insert the boxHTML before the closing tag - return bytes.Replace(content, []byte(""), []byte(boxHTML), 1) + return bytes.Replace(content, []byte(""), []byte(boxHTML), 1) } // getChainName returns the name of the chain based on the chainID diff --git a/int/api/resources/injectedStyle.css b/int/api/resources/injectedStyle.css index bc381d2..6dce8a0 100644 --- a/int/api/resources/injectedStyle.css +++ b/int/api/resources/injectedStyle.css @@ -1,37 +1,40 @@ +@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"); + .massa-logo { width: 20px; height: 20px; } .massa-box { - position: fixed; - z-index: 1000; - bottom: 0px; - left: 0px; + display: none; + align-items: center; + justify-content: space-between; + + position: relative; min-width: 100vw; - background: linear-gradient(135deg, transparent 60%, #cecece 100%); + background: #ffffff; color: #010112; opacity: 1; - transition: opacity 0.5s ease, transform 0.5s ease; + padding: 12px; } .massa-box-disappeared { - opacity: 0; - transform: translatex(-20px); + display: none; } .massa-box-content { + font-family: "IBM Plex Mono", monospace; + font-size: 14px; display: flex; flex-direction: row; align-items: center; - justify-content: end; + width: 66%; + justify-content: space-between; gap: 12px; color: #010112; - font-family: "Roboto", sans-serif; - padding: 0px 16px; } .massa-link, @@ -44,24 +47,21 @@ .hide-button { background-color: transparent; border: none; - font-size: 20px; + font-size: 16px; cursor: pointer; position: relative; - top: -2px; color: #010112; } +.massa-flex-content { + display: flex; + align-items: center; + gap: 8px; +} + /* Mobile Styles */ @media (max-width: 880px) { - .massa-link, - .hide-button, - .deweb-version { - display: none; - } - .massa-box { - background: transparent; - } - .massa-logo-link { - padding: 8px; + .massa-box-content { + justify-content: flex-start; } } diff --git a/int/api/resources/massaBox.html b/int/api/resources/massaBox.html new file mode 100644 index 0000000..c72eebd --- /dev/null +++ b/int/api/resources/massaBox.html @@ -0,0 +1,55 @@ +
+
+
+ + + + + hosted on chain + +
+
+ %s +
%s
+
+
+ +
+ + From df852a1a37934221d41d2afcfda55f665b99061e Mon Sep 17 00:00:00 2001 From: Phoebe Lartisant Date: Tue, 3 Sep 2024 17:24:58 +0200 Subject: [PATCH 3/5] refactor go functions --- int/api/box.go | 25 +++++++++++++++---------- int/api/middlewares.go | 5 +++-- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/int/api/box.go b/int/api/box.go index 43a464d..497eece 100644 --- a/int/api/box.go +++ b/int/api/box.go @@ -22,22 +22,27 @@ var massaLogomark []byte //go:embed resources/injectedStyle.css var injectedStyle []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 { +func injectStyles(content []byte) []byte { styleHTML := fmt.Sprintf(` - - - - - `, injectedStyle) + + + `, injectedStyle) return bytes.Replace(content, []byte(""), []byte(styleHTML), 1) } // InjectHtmlBox injects a "Hosted by Massa" box into the HTML content -func InjectHtmlBox(content []byte, chainID uint64) []byte { +func injectHtmlBox(content []byte, chainID uint64) []byte { chainName := getChainName(chainID) chainDocURL := getChainDocURL(chainID) @@ -45,7 +50,7 @@ func InjectHtmlBox(content []byte, chainID uint64) []byte { boxTemplate, err := os.ReadFile(boxHtml) if err != nil { - log.Fatalf("Failed to read template file: %v", err) + log.Fatalf("failed to read template file: %v", err) } boxHTML := fmt.Sprintf(string(boxTemplate), massaLogomark, chainDocURL, chainName, config.Version) diff --git a/int/api/middlewares.go b/int/api/middlewares.go index bfecc30..958daf3 100644 --- a/int/api/middlewares.go +++ b/int/api/middlewares.go @@ -150,8 +150,9 @@ func getWebsiteResource(network *msConfig.NetworkInfos, websiteAddress, resource if strings.HasPrefix(contentType, "text/html") { logger.Debugf("Injecting 'Hosted by Massa' box") - content = InjectStyles(content) - content = InjectHtmlBox(content, network.ChainID) + + content = InjectOnChainBox(content, network.ChainID) + logger.Debugf("Injected 'Hosted by Massa' box\n%s", content) } From a66b320d6a8cd3d4ac7da1d9eadce5b1d8e67568 Mon Sep 17 00:00:00 2001 From: Phoebe Lartisant Date: Tue, 3 Sep 2024 17:43:52 +0200 Subject: [PATCH 4/5] fix css --- int/api/resources/injectedStyle.css | 6 +- int/api/resources/massaBox.html | 94 +++++++++++++++-------------- 2 files changed, 53 insertions(+), 47 deletions(-) diff --git a/int/api/resources/injectedStyle.css b/int/api/resources/injectedStyle.css index 6dce8a0..22783cd 100644 --- a/int/api/resources/injectedStyle.css +++ b/int/api/resources/injectedStyle.css @@ -10,15 +10,17 @@ 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: 12px; + padding: 12px 0px; } .massa-box-disappeared { @@ -35,6 +37,7 @@ justify-content: space-between; gap: 12px; color: #010112; + padding: 0px 12px; } .massa-link, @@ -51,6 +54,7 @@ cursor: pointer; position: relative; color: #010112; + margin-right: 12px; } .massa-flex-content { diff --git a/int/api/resources/massaBox.html b/int/api/resources/massaBox.html index c72eebd..8adfbdf 100644 --- a/int/api/resources/massaBox.html +++ b/int/api/resources/massaBox.html @@ -1,55 +1,57 @@ -
-
-
- - - - - hosted on chain - -
-
- %s -
%s
+ +
+
+
+ + + + + hosted on chain + +
+
+ %s +
%s
+
+
- -
- + const closeButton = document.getElementById("closeMassaBoxBtn"); + if (closeButton) { + closeButton.addEventListener("click", closeMassaBox); + } + }); + + From ce59d8df40703c07ff1fc7c391f5b22ce777f486 Mon Sep 17 00:00:00 2001 From: thomas-senechal Date: Wed, 4 Sep 2024 10:26:17 +0200 Subject: [PATCH 5/5] Fix body injection and improve a bit bar design --- int/api/box.go | 21 ++++++++++++--------- int/api/resources/injectedStyle.css | 8 +++++--- int/api/resources/massaBox.html | 2 +- 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/int/api/box.go b/int/api/box.go index 497eece..86a6d7a 100644 --- a/int/api/box.go +++ b/int/api/box.go @@ -4,8 +4,7 @@ import ( "bytes" _ "embed" "fmt" - "log" - "os" + "regexp" "github.com/massalabs/DeWeb/int/config" pkgConfig "github.com/massalabs/DeWeb/pkg/config" @@ -22,6 +21,9 @@ var massaLogomark []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) @@ -46,17 +48,18 @@ func injectHtmlBox(content []byte, chainID uint64) []byte { chainName := getChainName(chainID) chainDocURL := getChainDocURL(chainID) - boxHtml := "int/api/resources/massaBox.html" + boxHTML := fmt.Sprintf(string(massaBox), massaLogomark, chainDocURL, chainName, config.Version) + + bodyRegex := regexp.MustCompile(`(?i)]*>`) - boxTemplate, err := os.ReadFile(boxHtml) - if err != nil { - log.Fatalf("failed to read template file: %v", err) + loc := bodyRegex.FindIndex(content) + if loc == nil { + return content } - boxHTML := fmt.Sprintf(string(boxTemplate), massaLogomark, chainDocURL, chainName, config.Version) + result := append(content[:loc[1]], append([]byte(boxHTML), content[loc[1]:]...)...) - // Insert the boxHTML before the closing tag - return bytes.Replace(content, []byte(""), []byte(boxHTML), 1) + return result } // getChainName returns the name of the chain based on the chainID diff --git a/int/api/resources/injectedStyle.css b/int/api/resources/injectedStyle.css index 22783cd..182c1be 100644 --- a/int/api/resources/injectedStyle.css +++ b/int/api/resources/injectedStyle.css @@ -20,7 +20,7 @@ color: #010112; opacity: 1; - padding: 12px 0px; + padding: .25rem 1rem; } .massa-box-disappeared { @@ -37,7 +37,6 @@ justify-content: space-between; gap: 12px; color: #010112; - padding: 0px 12px; } .massa-link, @@ -47,6 +46,10 @@ cursor: pointer; } +.massa-on-chain-text { + text-wrap: nowrap; +} + .hide-button { background-color: transparent; border: none; @@ -54,7 +57,6 @@ cursor: pointer; position: relative; color: #010112; - margin-right: 12px; } .massa-flex-content { diff --git a/int/api/resources/massaBox.html b/int/api/resources/massaBox.html index 8adfbdf..f65d3af 100644 --- a/int/api/resources/massaBox.html +++ b/int/api/resources/massaBox.html @@ -11,7 +11,7 @@