content/static: additional metadata in the right sidebar
Adds a section to the right sidenav highlighting
metadata about modules to help reinforce best practices
for maintaining modules on the pkgsite. This feature is
implemented behind the "unit-meta-details" experiment.
For golang/go#43129
Change-Id: I2755756b10f5cb1b1d1a2f9caf42c90fc715ff3b
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/277854
Trust: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/unit_meta.css b/content/static/css/unit_meta.css
index a1c000c..154952b 100644
--- a/content/static/css/unit_meta.css
+++ b/content/static/css/unit_meta.css
@@ -24,3 +24,60 @@
margin-bottom: 0.5rem;
text-transform: uppercase;
}
+
+.UnitMetaDetails-header {
+ border-bottom: 0.0625rem solid var(--gray-8);
+ display: flex;
+ font-size: 0.75rem;
+ justify-content: space-between;
+ line-height: 1rem;
+ margin-bottom: 0.5rem;
+ margin-top: 1.85rem;
+ padding-bottom: 0.5rem;
+ text-transform: uppercase;
+}
+.UnitMetaDetails ul {
+ list-style: none;
+ padding-inline-start: 0;
+}
+.UnitMetaDetails li {
+ font-size: 0.875rem;
+ margin-bottom: 0.75rem;
+}
+.UnitMetaDetails a {
+ font-size: 0.8125rem;
+ text-transform: none;
+}
+.UnitMetaDetails-icon {
+ height: auto;
+ margin-right: 0.25rem;
+ position: relative;
+ width: 0.875rem;
+ top: 0.125rem;
+ z-index: -1;
+}
+.UnitMetaDetails-toggletip button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ width: 1.625rem;
+}
+.UnitMetaDetails [role='status'] {
+ height: 0;
+ position: absolute;
+ width: 0;
+}
+.UnitMetaDetails-toggletipBubble {
+ background: var(--white) 80%;
+ border: 0.0625rem solid var(--gray-8);
+ border-radius: 0.25rem;
+ display: block;
+ font-size: 0.75rem;
+ left: -6rem;
+ letter-spacing: 0.01875rem;
+ line-height: 1rem;
+ padding: 0.5rem;
+ position: relative;
+ top: 1.5rem;
+ width: 12rem;
+}
diff --git a/content/static/html/helpers/_unit_meta.tmpl b/content/static/html/helpers/_unit_meta.tmpl
index 3ddc1b9..0124b25 100644
--- a/content/static/html/helpers/_unit_meta.tmpl
+++ b/content/static/html/helpers/_unit_meta.tmpl
@@ -5,6 +5,9 @@
-->
{{define "unit_meta"}}
+ {{if (.Experiments.IsActive "unit-meta-details")}}
+ {{template "unit_meta_details" .}}
+ {{end}}
<div class="UnitMeta">
<div class="UnitMeta-header">Links</div>
<div class="UnitMeta-repo">Repository</div>
@@ -26,4 +29,51 @@
<div class="UnitMeta-repo">{{.Body}}</div>
<a href="{{.Href}}" title="{{.Href}}" target="_blank" rel="noopener">{{.Href}}</a>
{{end}}
+{{end}}
+
+{{define "unit_meta_details_toggletip"}}
+ <span class="UnitMetaDetails-toggletip">
+ <button type="button" aria-label="more info" data-toggletip-content="{{.}}">
+ <img class="UnitMetaDetails-icon" src="/static/img/pkg-icon-help_24x24.svg" alt="" height="24" width="24">
+ </button>
+ <span role="status"></span>
+ </span>
+{{end}}
+
+{{define "unit_meta_details_check"}}
+ <img class="UnitMetaDetails-icon"
+ {{- if . -}}
+ src="/static/img/pkg-icon-checkCircleOutline_24x24.svg" alt="checked"
+ {{- else -}}
+ src="/static/img/pkg-icon-cancel_24x24.svg" alt="unchecked"
+ {{- end -}}
+ height="24" width="24">
+{{end}}
+
+{{define "unit_meta_details"}}
+ <div class="UnitMetaDetails">
+ <div class="UnitMetaDetails-header">DETAILS<a href="/about">Learn more</a></div>
+ <ul>
+ <li>
+ {{template "unit_meta_details_check" .Unit.HasGoMod}}
+ Has <a href="{{.Details.ModFileURL}}" target="_blank">go.mod</a> file
+ {{template "unit_meta_details_toggletip" "The Go module system was introduced in Go 1.11 and is the official dependency management solution for Go."}}
+ </li>
+ <li>
+ {{template "unit_meta_details_check" .Unit.IsRedistributable}}
+ Permissive license
+ {{template "unit_meta_details_toggletip" "Permissive licenses place minimal restrictions on how software can be used, modified, and redistributed."}}
+ </li>
+ <li>
+ {{template "unit_meta_details_check" .Details.IsTaggedVersion}}
+ Tagged version
+ {{template "unit_meta_details_toggletip" "Modules with tagged versions give importers more predictable builds."}}
+ </li>
+ <li>
+ {{template "unit_meta_details_check" .Details.IsStableVersion}}
+ Stable version
+ {{template "unit_meta_details_toggletip" "When a project reaches major version v1 it is considered stable."}}
+ </li>
+ </ul>
+ </div>
{{end}}
\ No newline at end of file
diff --git a/content/static/js/toggle-tip.js b/content/static/js/toggle-tip.js
new file mode 100644
index 0000000..450de8a
--- /dev/null
+++ b/content/static/js/toggle-tip.js
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2019-2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+const toggles = document.querySelectorAll('[data-toggletip-content]');
+
+/**
+ * Adds event listeners to toggletip elements to display their
+ * content when the toggle button is pressed. Used in the right
+ * sidebar details section.
+ */
+toggles.forEach(toggle => {
+ const message = toggle.getAttribute('data-toggletip-content');
+ const tip = toggle.nextElementSibling;
+ toggle.addEventListener('click', () => {
+ tip.innerHTML = '';
+ setTimeout(() => {
+ tip.innerHTML = '<span class="UnitMetaDetails-toggletipBubble">' + message + '</span>';
+ }, 100);
+ });
+
+ // Close on outside click
+ document.addEventListener('click', e => {
+ if (toggle !== e.target) {
+ tip.innerHTML = '';
+ }
+ });
+
+ // Remove toggletip on ESC
+ toggle.addEventListener('keydown', e => {
+ const ESC_KEY = 27;
+ if ((e.keyCode || e.which) === ESC_KEY) {
+ tip.innerHTML = '';
+ }
+ });
+});
diff --git a/content/static/js/unit.js b/content/static/js/unit.js
index f3e32d6..23cdcd5 100644
--- a/content/static/js/unit.js
+++ b/content/static/js/unit.js
@@ -6,6 +6,7 @@
*/
import { AccordionController } from './accordion.js';
+import './toggle-tip.js';
/**
* Instantiates accordion controller for the left sidebar.
diff --git a/internal/experiment.go b/internal/experiment.go
index 71564f4..22c4bdd 100644
--- a/internal/experiment.go
+++ b/internal/experiment.go
@@ -6,19 +6,21 @@
package internal
const (
- ExperimentAutocomplete = "autocomplete"
- ExperimentFasterDecoding = "faster-decoding"
- ExperimentGoldmark = "goldmark"
- ExperimentReadmeOutline = "readme-outline"
+ ExperimentAutocomplete = "autocomplete"
+ ExperimentFasterDecoding = "faster-decoding"
+ ExperimentGoldmark = "goldmark"
+ ExperimentReadmeOutline = "readme-outline"
+ ExperimentUnitSidebarDetails = "unit-sidebar-details"
)
// Experiments represents all of the active experiments in the codebase and
// a description of each experiment.
var Experiments = map[string]string{
- ExperimentAutocomplete: "Enable autocomplete with search.",
- ExperimentFasterDecoding: "Decode ASTs faster.",
- ExperimentGoldmark: "Enable the usage of rendering markdown using goldmark instead of blackfriday.",
- ExperimentReadmeOutline: "Enable the readme outline in the side nav.",
+ ExperimentAutocomplete: "Enable autocomplete with search.",
+ ExperimentFasterDecoding: "Decode ASTs faster.",
+ ExperimentGoldmark: "Enable the usage of rendering markdown using goldmark instead of blackfriday.",
+ ExperimentReadmeOutline: "Enable the readme outline in the side nav.",
+ ExperimentUnitSidebarDetails: "Enable the details section in the right sidebar.",
}
// Experiment holds data associated with an experimental feature for frontend
