content,internal: badges form improvements
Updates badges form to mirror behavior of search input.
If a module url is entered with an http(s):// prefix
the prefix will be stripped and the resulting path is
used in the badge URL. Removes the interactive update
in lieu of an update button after the badge has been
created. Live updates with our scheme removal logic
lead to a strange experience when changing urls after
a badge was already created.
Fixes golang/go#43458
Change-Id: I1732a3eeb54f475c90f0b6f5f2976fb25cbfe039
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/281712
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index 550421f..00cba76 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -1506,6 +1506,7 @@
.Badge-clickToCopy {
background: var(--gray-10) url('/static/img/copy-click.svg') right no-repeat;
background-position: right 0.75rem center;
+ cursor: pointer;
}
.Badge-submitButton {
border: none;
diff --git a/content/static/html/pages/badge.tmpl b/content/static/html/pages/badge.tmpl
index c608462..80aebf4 100644
--- a/content/static/html/pages/badge.tmpl
+++ b/content/static/html/pages/badge.tmpl
@@ -12,7 +12,7 @@
<label class="Badge-formElement">
Badge
<div class="Badge-previewLink">
- <a class="js-badgeExampleButton" href="{{.SiteURL}}/{{.LinkPath}}">
+ <a class="js-badgeExampleButton" href="https://pkg.go.dev/{{.LinkPath}}">
<img class="Badge-badgeIcon" src="/static/img/badge.svg" alt="Go Reference">
</a>
</div>
@@ -21,10 +21,10 @@
<label class="Badge-formElement">
URL
<input name="path" class="js-toolsPathInput"
- value="{{.LinkPath}}" placeholder="e.g., https://pkg.go.dev/golang.org/x/pkgsite">
+ value="{{if .LinkPath}}https://pkg.go.dev/{{.LinkPath}}{{end}}" placeholder="e.g., https://pkg.go.dev/golang.org/x/pkgsite">
</label>
<label class="Badge-formElement">
- <button type="submit" class="Badge-submitButton">Create</button>
+ <button type="submit" class="Badge-submitButton">{{if .LinkPath}}Update{{else}}Create{{end}}</button>
</label>
</form>
<div class="Badge-snippetContainer">
@@ -32,12 +32,12 @@
<label class="Badge-formElement">
HTML
<input title="Click to copy HTML" name="html" class="Badge-clickToCopy js-toolsCopySnippet" type="text"
- value='<a href="{{.SiteURL}}/{{.LinkPath}}"><img src="{{.SiteURL}}/{{.BadgePath}}" alt="Go Reference"></a>' readonly>
+ value='<a href="https://pkg.go.dev/{{.LinkPath}}"><img src="https://pkg.go.dev/{{.BadgePath}}" alt="Go Reference"></a>' readonly>
</label>
<label class="Badge-formElement">
Markdown
<input title="Click to copy markdown" name="markdown" class="Badge-clickToCopy js-toolsCopySnippet" type="text"
- value="[]({{.SiteURL}}/{{.LinkPath}})" readonly>
+ value="[](https://pkg.go.dev/{{.LinkPath}})" readonly>
</label>
{{else}}
<div class="Badge-gopherLanding">
diff --git a/content/static/js/badge.js b/content/static/js/badge.js
index f297ed1..217920c 100644
--- a/content/static/js/badge.js
+++ b/content/static/js/badge.js
@@ -13,21 +13,3 @@
document.execCommand('copy');
});
});
-
-const pathEl = document.querySelector('.js-toolsPathInput');
-const htmlEl = document.querySelector('input[name="html"].js-toolsCopySnippet');
-const markdownEl = document.querySelector('input[name="markdown"].js-toolsCopySnippet');
-const badgeEl = document.querySelector('.js-badgeExampleButton');
-if (pathEl && htmlEl && markdownEl && badgeEl) {
- pathEl.addEventListener('input', e => {
- const origin = window.location.origin;
- const href = `${origin}/${e.target.value}`;
- var imgSrc = `${origin}/badge/${e.target.value}`;
- if (e.target.value) {
- imgSrc = imgSrc + '.svg';
- }
- htmlEl.value = `<a href="${href}"><img src="${imgSrc}" alt="Go Reference"></a>`;
- markdownEl.value = `[](${href})`;
- badgeEl.href = href;
- });
-}
diff --git a/content/static/js/badge.min.js b/content/static/js/badge.min.js
index 6eaf28e..bbf0f7f 100644
--- a/content/static/js/badge.min.js
+++ b/content/static/js/badge.min.js
@@ -4,6 +4,4 @@
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
-var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.createTemplateTagFirstArg=function(a){return a.raw=a};$jscomp.createTemplateTagFirstArgWithRaw=function(a,b){a.raw=b;return a};var snippetEls=document.querySelectorAll(".js-toolsCopySnippet");snippetEls.forEach(function(a){a.addEventListener("click",function(b){b.preventDefault();b.currentTarget.select();document.execCommand("copy")})});
-var pathEl=document.querySelector(".js-toolsPathInput"),htmlEl=document.querySelector('input[name="html"].js-toolsCopySnippet'),markdownEl=document.querySelector('input[name="markdown"].js-toolsCopySnippet'),badgeEl=document.querySelector(".js-badgeExampleButton");
-pathEl&&htmlEl&&markdownEl&&badgeEl&&pathEl.addEventListener("input",function(a){var b=window.location.origin,c=b+"/"+a.target.value;b=b+"/badge/"+a.target.value;a.target.value&&(b+=".svg");htmlEl.value='<a href="'+c+'"><img src="'+b+'" alt="Go Reference"></a>';markdownEl.value="[![Go Reference]("+b+")]("+c+")";badgeEl.href=c});
+var snippetEls=document.querySelectorAll(".js-toolsCopySnippet");snippetEls.forEach(function(b){b.addEventListener("click",function(a){a.preventDefault();a.currentTarget.select();document.execCommand("copy")})});
diff --git a/internal/frontend/badge.go b/internal/frontend/badge.go
index 8d5af2f..f5f6d2d 100644
--- a/internal/frontend/badge.go
+++ b/internal/frontend/badge.go
@@ -7,14 +7,11 @@
import (
"fmt"
"net/http"
- "net/url"
"strings"
)
type badgePage struct {
basePage
- // SiteURL is hostname, including a https:// prefix.
- SiteURL string
// LinkPath is the URL path of the badge will link to.
LinkPath string
// BadgePath is the URL path of the badge SVG.
@@ -30,17 +27,16 @@
return
}
- // The user may input a fully qualified URL (https://pkg.go.dev/net/http)
- // or just a pathname (net/http). Using url.Parse we handle both cases.
- inputURL := r.URL.Query().Get("path")
- parsedURL, _ := url.Parse(inputURL)
- if parsedURL != nil {
- path = strings.TrimPrefix(parsedURL.RequestURI(), "/")
+ // The user may input a fully qualified URL (https://pkg.go.dev/net/http
+ // or https://github.com/my/module) or just a pathname (net/http).
+ path = strings.TrimPrefix(r.URL.Query().Get("path"), "https://pkg.go.dev/")
+ urlSchemeIdx := strings.Index(path, "://")
+ if urlSchemeIdx > -1 {
+ path = path[urlSchemeIdx+3:]
}
page := badgePage{
basePage: s.newBasePage(r, "Badge generation tool"),
- SiteURL: "https://" + r.Host,
LinkPath: path,
BadgePath: "badge/" + path + ".svg",
}
diff --git a/internal/frontend/badge_test.go b/internal/frontend/badge_test.go
index fe1e7f7..f90bf71 100644
--- a/internal/frontend/badge_test.go
+++ b/internal/frontend/badge_test.go
@@ -32,27 +32,23 @@
},
{
"/badge/?path=net/http",
- `<a href="https://example.com/net/http"><img src="https://example.com/badge/net/http.svg" alt="Go Reference"></a>`,
+ `<a href="https://pkg.go.dev/net/http"><img src="https://pkg.go.dev/badge/net/http.svg" alt="Go Reference"></a>`,
},
{
"/badge/?path=https://pkg.go.dev/net/http",
- `<a href="https://example.com/net/http"><img src="https://example.com/badge/net/http.svg" alt="Go Reference"></a>`,
+ `<a href="https://pkg.go.dev/net/http"><img src="https://pkg.go.dev/badge/net/http.svg" alt="Go Reference"></a>`,
},
{
"/badge/?path=github.com/google/uuid",
- "[](https://example.com/github.com/google/uuid)",
+ "[](https://pkg.go.dev/github.com/google/uuid)",
},
{
"/badge/?path=https://pkg.go.dev/github.com/google/uuid",
- "[](https://example.com/github.com/google/uuid)",
+ "[](https://pkg.go.dev/github.com/google/uuid)",
},
{
- "/badge/?path=https://google.com",
- "<p>Type a pkg.go.dev URL above to create a badge link.</p>",
- },
- {
- "/badge/?path=https://google.com/github.com/google/uuid",
- "[](https://example.com/github.com/google/uuid)",
+ "/badge/?path=https://github.com/google/uuid",
+ "[](https://pkg.go.dev/github.com/google/uuid)",
},
}
