Add AnchorJS logic for header links #10155

lucperkins · 2018-08-30T22:57:56Z

This PR uses the AnchorJS library to more easily link to specific headers. It currently uses the ¶ character for h2 headers and the # character for h3 headers. I'm happy to use different characters, expand to more headers, etc.

Here's an example page chosen at random:

https://deploy-preview-10155--kubernetes-io-master-staging.netlify.com/docs/tasks/tls/certificate-rotation/

Hover over headings like "Before you begin" and "Overview" to see the anchor tags in action.

lucperkins · 2018-08-30T22:58:06Z

/assign @MistyHacks @chenopis

k8sio-netlify-preview-bot · 2018-08-30T23:01:48Z

Deploy preview for kubernetes-io-master-staging ready!

Built with commit 6439918

https://deploy-preview-10155--kubernetes-io-master-staging.netlify.com

k8sio-netlify-preview-bot · 2018-08-30T23:01:48Z

Deploy preview for kubernetes-io-master-staging ready!

Built with commit ecb381f

https://deploy-preview-10155--kubernetes-io-master-staging.netlify.com

mdlinville · 2018-08-31T03:26:24Z

I looked at the preview and it looks fine. FWIW I think we should use the link glyph (the default) and not the paragraph glyph. This is the test page with the problem on the live site: https://deploy-preview-10155--kubernetes-io-master-staging.netlify.com//docs/setup/independent/kubelet-integration/#workflow-when-using-kubeadm-join Oddly on that page, some sections have a # character and some have the paragraph symbol. Make sure you use touch so the link is always visible on touch-enabled devices that can't hover.

mdlinville · 2018-08-31T03:28:34Z

static/js/script.js

@@ -1,4 +1,18 @@
- //modal close button
+function addAnchorTags() {


Why can't you just use the default anchorjs call? This looks super complicated.

As explained in the PR description, I opted for separate icons for the different heading levels. I'm not committed to that design choice, just throwing it out there.

Sorry I missed that. I think we should talk about this as a SIG. My personal gut-reaction opinion is that different icons will create visual inconsistency that users might not be able to easily discern the purpose of, since to notice what level a heading is at, you need to scroll back up to its parent, etc. When people grab the link, what they want is to be able to send someone (or their own browser via a bookmark) exactly there. They don't necessarily care what level it is at. I might totally be off base, though. It is an interesting idea.

using the same icons/symbols for all heading levels seems OK.

@MistyHacks I agree that a single icon seems like a good default for now (I've chosen # as that seems to be standard in the industry). I've already made that change, which you can have a look at in the preview build. We can leave open the option of a more fine-grained system down the line.

Where are you seeing # being used? I have seen https://www.compart.com/en/unicode/U+1F517 (the default for AnchorJS) used quite heavily in multiple docsets. That said, it isn't a deal breaker for me.

@MistyHacks Okay, that works for me!

One more nit: When I look at https://deploy-preview-10155--kubernetes-io-master-staging.netlify.com//docs/setup/independent/kubelet-integration/#workflow-when-using-kubeadm-join, the <code> in the title should really be rendering as mono text, not bolder than the surrounding text. It's getting the bold from #docsContent code. The easiest thing to do is remove the font-family: inherit from the following selector, and it looks better to my eyes to set the font-size just slightly smaller too:

#docsContent h1 code, #docsContent h2 code, #docsContent h3 code, #docsContent h4 code, #docsContent h5 code, #docsContent h6 code { /* font-family: inherit; */ font-size: inherit; background-color: transparent; font-size: 85%; }

neolit123 · 2018-08-31T04:00:22Z

thank you, this fixes the formatting in headings.

lucperkins · 2018-09-10T19:00:54Z

@MistyHacks Okay, I've updated the CSS to address the issue you've pointed and changed the icon to the AnchorJS default. Let me know if there's anything else!

mdlinville

/lgtm
/approve
/hold
(in case you want to address one more nit)

mdlinville · 2018-09-10T19:55:54Z

static/js/script.js

+    visible: 'touch'
+  }
+
+  anchors.add('#docsContent h2, #docsContent h3');


I don't think you should stop at h3, why not go all the way down to 6? I didn't notice this before.

@MistyHacks Ah, good call. I wrongly assumed that the header sizes stopped at h3. A simple git grep showed that that is quite incorrect 😄

Fixed.

k8s-ci-robot · 2018-09-10T19:57:15Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: mistyhacks

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [mistyhacks]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

mdlinville · 2018-09-10T20:06:58Z

/hold cancel

mdlinville · 2018-09-10T20:07:28Z

/lgtm

* fix invalid href of cloud controller manager (#10240) * fix invalid yaml format (#10238) * update storage-limits doc with Azure disk part (#10224) update storage-limits doc with Azure disk part fix comments * Update kubelet-config-file.md (#10222) Update link to KubeletConfiguration struct. * fix a trivial misspelling (#10244) * Fix cassandra-statefulset.yaml indent level (#10243) * Mention minimum etcd versions (#10208) Source: https://groups.google.com/d/msg/kubernetes-dev/jMPA4JzKiY4/HIx2ugvLBAAJ * fix 404 error (#10250) * Small verb tweak (#10190) Present participle, ftw. * Add AnchorJS logic for header links (#10155) * Add AnchorJS JavaScript * Remove existing inpage_heading logic * Remove underline from anchor tags * Use single icon and add touch visibility * Use paragraph link icon for AnchorJS * Update Sass to use code formatting in docsContent headers * Update header size coverage to H3-H6 * fix broken link in kubefed.md (#10254) * Update the version numbers for the X-Remote-Extra- and Impersonate-Extra- key fixes (#9827) The fix was cherry picked into 1.11.3, 1.10.7, and 1.9.11: kubernetes/kubernetes#67162 kubernetes/kubernetes#67163 kubernetes/kubernetes#67164 * fix typo (#10168) * fix typo * addressing comments. * Update setup-ha-etcd-with-kubeadm.md * fix typos (#10252) * fix description of contribute guide (#10253) * describe truncate feature about advanced audit (#10236) * describe truncate feature about advanced audit * Update audit.md

* Update docs for fields allowed at root of CRD schema (#9973) * add plugin docs and examples (#10053) * docs update to promote TaintNodesByCondition to beta (#9626) * HPA Specificity Improvements (#8757) Updated the HPA docs to reference the `autoscaling/v2beta2` API version, and added documentation about the new fields. * adjust docs for pod ready++ (#10049) * Remove --cadvisor-port - has been deprecated since v1.10 (#10023) Change-Id: Id2a685473a243aef492a98ff450759f39e362557 * Add Documentation for Snapshot Feature (#9948) * Add documentation for snapshot feature * Update volume-snapshots.md * Add dry-run to api-concepts (#10033) * kubeadm-init: Update the offline support section (#10062) The update includes the following things (in mind with Kubernetes 1.12): - Remove the 1.8 image versions - Add the 1.10 image versions that were missing until now - Include a comment for the missing arch suffixes in 1.12 Signed-off-by: Rostislav M. Georgiev <rostislavg@vmware.com> * Say bye to `DynamicProvisioningScheduling` (#10157) The mentioned feature gate is now collapsed into `VolumeScheduling`. xref: kubernetes/kubernetes#67432 * Update ResourceQuota per PriorityClass state for 1.12 (#10229) * TokenRequest and TokenRequestProjection now beta (#10161) xref: kubernetes/kubernetes#67349 * Change feature state for kms provider to beta. (#10230) KMS Provider will be graduating to beta in v1.12, reflecting this change on the website. * coredns default (#10200) * Promote ShareProcessNamespace to beta in docs (#9996) * Add CoreDNS details to DNS Debug docs (#10201) * add coredns details * address nits, add query logging section * Update docs with topology aware dynamic provisioning (#9939) * Document topology aware volume binding feature * update for readability * Update storage-classes.md * comma splice * don't abbreviate * HPA Algorithm Information Improvements (#9780) * Update HPA docs with more algorithm details The HPA docs pointed to an out-of-date document for information on the algorithm details, which users were finding confusing. This sticks a section on the algorithm in the HPA docs instead, documenting both general behavior and corner cases. * Add glossary info, HPA docs on quantities People often ask about the quantity notation when working with the metrics APIs, so this adds a glossary entry on quantities (since they're used elsewhere in the system), and a short explantation in the HPA walkthough. * Information about HPA readiness and stabilization This adds information about the new changes to HPA readiness and stabilization from kubernetes/enhancements#591, and other minor changes that landed in Kubernetes 1.12. * Update horizontal-pod-autoscale.md * Audit 1.12 doc (#9953) * audit 1.12 document * remove legacy audit feature kubernetes/kubernetes#65862 * update feature gate doc * MountPropagation is now GA (#10090) * RuntimeClass documentation (#10102) * RuntimeClass documentation * Update runtime-class.md * Add documentation for Scheduler performance tuning (#10048) * Add documentation for Scheduler performance tuning * Update scheduler-perf-tuning.md * TTL controller for cleaning up finished resources (#10064) * TTL controller for cleaning up finished resources * Address comments * Update ttlafterfinished.md * Bump quota configuration api version (#10217) * Incremental update from master (#10278) * fix invalid href of cloud controller manager (#10240) * fix invalid yaml format (#10238) * update storage-limits doc with Azure disk part (#10224) update storage-limits doc with Azure disk part fix comments * Update kubelet-config-file.md (#10222) Update link to KubeletConfiguration struct. * fix a trivial misspelling (#10244) * Fix cassandra-statefulset.yaml indent level (#10243) * Mention minimum etcd versions (#10208) Source: https://groups.google.com/d/msg/kubernetes-dev/jMPA4JzKiY4/HIx2ugvLBAAJ * fix 404 error (#10250) * Small verb tweak (#10190) Present participle, ftw. * Add AnchorJS logic for header links (#10155) * Add AnchorJS JavaScript * Remove existing inpage_heading logic * Remove underline from anchor tags * Use single icon and add touch visibility * Use paragraph link icon for AnchorJS * Update Sass to use code formatting in docsContent headers * Update header size coverage to H3-H6 * fix broken link in kubefed.md (#10254) * Update the version numbers for the X-Remote-Extra- and Impersonate-Extra- key fixes (#9827) The fix was cherry picked into 1.11.3, 1.10.7, and 1.9.11: kubernetes/kubernetes#67162 kubernetes/kubernetes#67163 kubernetes/kubernetes#67164 * fix typo (#10168) * fix typo * addressing comments. * Update setup-ha-etcd-with-kubeadm.md * fix typos (#10252) * fix description of contribute guide (#10253) * describe truncate feature about advanced audit (#10236) * describe truncate feature about advanced audit * Update audit.md * docs update to promote ScheduleDaemonSetPods to beta (#9923) * Dynamic volume limit updates for 1.12 (#10211) * add a placeholder commit * Update docs for csi volume limits * Update storage-limits.md * Add "MayRunAs" value among other GroupStrategies (#9888) * Add CoreDNS details to the customize DNS doc (#10228) * Add CoreDNS details to the customize DNS doc Rewrite the document to include more details about CoreDNS, since it's now the default from v1.12 * Address comments * Improve doc wording * Fix link * Update dns-custom-nameservers.md * Update dns-custom-nameservers.md * Fix secrets docs in 1.12 branch (#10056) * Fix secrets docs * Update secret.md * Revert CoreDNS Docs (#10319) * Revert "Add CoreDNS details to DNS Debug docs (#10201)" This reverts commit 462817a. * Revert "Add CoreDNS details to the customize DNS doc (#10228)" This reverts commit e7319ee. * Revert "coredns default (#10200)" This reverts commit 698e93b. * Add CRI installation instructions page Added cri-installation page with CRI installation instructions Referenced it from kubeadm-init and install-kubeadm pages. * kubeadm: update API types documentation for 1.12 (#10283) v1alpha2 -> v1alpha3 MasterConfiguration -> [new-api-types] * TokenRequest feature documentation (#10295) * AdvancedAuditing is now GA (#10156) xref: kubernetes/kubernetes#65862 `AdvancedAuditing` feature is GA in 1.12. This PR adjusts the related docs. * update runtime-class.md (#10332) * update runtime-class.md * Update runtime-class.md * Document cross-authorizer permissions for creating RBAC roles (#10015) * Document cross-authorizer permissions for creating RBAC roles * Update rbac.md * kubeadm: update authored content for 1.12 (reference docs and cluster creation) (#10348) * kubeadm: update authored content in reference docs for 1.12 * kubeadm: add time frame in create-cluster-kubeadm for 1.12 * add AllowedProcMountTypes and ProcMountType to docs (#9911) Signed-off-by: Jess Frazelle <acidburn@microsoft.com> * kubeadm: add new command line reference (#10306) Add: - placeholder files - include place holder files - include "renew" sub command - add missing tabs for "alpha phase kubelet" * Documenting SCTP support in Kubernetes (#10279) * Documenting SCTP support in Kubernetes Service, Endpoint, NetworkPolicy and Pod * Updates based on comments on the PR * kubectl expose update with SCTP support * Updated according to comments in the PR * Revert "kubectl expose update with SCTP support" This reverts commit 0d5a1e6. * TLS Bootstrap and Server Cert Rotation feature documentation (#10232) * TokenRequest feature documentation * line wrapping to make review not insane * update content for GA without major refactor * Update kubelet-tls-bootstrapping.md * Add clarifications for volume snapshots (#10296) * Update kubadm ha installation for 1.12 (#10264) * Update kubadm ha installation for 1.12 Signed-off-by: Chuck Ha <ha.chuck@gmail.com> * update stable version Signed-off-by: Chuck Ha <ha.chuck@gmail.com> * Update stacked control plane for v1.12 (#2) * use v1alpha3 Signed-off-by: Chuck Ha <ha.chuck@gmail.com> * more v1alpha3 (#4) * updates Signed-off-by: Chuck Ha <ha.chuck@gmail.com> * Document how to run in-tree cloud providers with kubeadm (#10357) Change-Id: Iab6b996a830503d74a6eb0c507c5f8ca7a39235b * kubeadm reference doc for release 1.12 (#10359) * Revert "Revert "Add CoreDNS details to DNS Debug docs (#10201)"" This reverts commit bb30f4d. * Revert "Revert "Add CoreDNS details to the customize DNS doc (#10228)"" This reverts commit bc23d45. * Revert "Revert "coredns default (#10200)"" This reverts commit 7f4350d. * add missing instruction for ha guide (#10374) Signed-off-by: Chuck Ha <ha.chuck@gmail.com> * kubeadm - Ha upgrade updates (#10340) * Update HA upgrade docs * Adds external etcd HA upgrade guide Signed-off-by: Chuck Ha <ha.chuck@gmail.com> * copyedit * more edits * add runasgroup in psp (#10076) * update KubeletPluginsWatcher feature gate (#10205) * generated 1.12 docs * Building Multi-arch images with Manifests (#10379) In 1.12, a variety of images used in a typical kubernetes installation have started to using manifests to better support environments with arm or ppc64le architectures. For example all images used with kubeadm by default have manifests, another would be all the tests in the conformance test suite. Here we capture the best practices for everyone to start using manifests in their own workflows. Change-Id: I5ba4c5fe55ffc9486a8251760f3352be4f2e1494 * Upgrade docs for v1.12 (#10344) * generated assets and docs * remove 1.7 * update 1.12 * update plugin documentation under docs>tasks>extend-kubectl (#10259) * update plugin documentation under docs>tasks>extend-kubectl * Update kubectl-plugins.md

k8s-ci-robot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Aug 30, 2018

k8s-ci-robot assigned chenopis and mdlinville Aug 30, 2018

k8s-ci-robot requested review from Rajakavitha1 and xiangpengzhao August 30, 2018 22:58

Add AnchorJS JavaScript

0a60e32

Remove existing inpage_heading logic

8cf8e1a

k8s-ci-robot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. and removed size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Aug 30, 2018

Remove underline from anchor tags

9d13b0b

k8s-ci-robot added size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. and removed size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Aug 30, 2018

mdlinville reviewed Aug 31, 2018

View reviewed changes

lucperkins added 5 commits August 31, 2018 07:25

Address merge conflict

343cae9

Use single icon and add touch visibility

7bf38fe

Fix merge conflict

1804194

Use paragraph link icon for AnchorJS

aca2287

Update Sass to use code formatting in docsContent headers

94a1971

mdlinville reviewed Sep 10, 2018

View reviewed changes

k8s-ci-robot added lgtm "Looks good to me", indicates that a PR is ready to be merged. do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. labels Sep 10, 2018

k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Sep 10, 2018

Update header size coverage to H3-H6

6439918

k8s-ci-robot removed the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Sep 10, 2018

k8s-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Sep 10, 2018

k8s-ci-robot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Sep 10, 2018

k8s-ci-robot merged commit 9ce0cd0 into kubernetes:master Sep 10, 2018

lucperkins mentioned this pull request Oct 16, 2018

Markdown is not rendered in headings #10137

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add AnchorJS logic for header links #10155

Add AnchorJS logic for header links #10155

lucperkins commented Aug 30, 2018 •

edited

Loading

lucperkins commented Aug 30, 2018

k8sio-netlify-preview-bot commented Aug 30, 2018 •

edited

Loading

k8sio-netlify-preview-bot commented Aug 30, 2018

mdlinville commented Aug 31, 2018

mdlinville Aug 31, 2018

lucperkins Aug 31, 2018

mdlinville Sep 5, 2018

neolit123 Sep 5, 2018

lucperkins Sep 5, 2018

mdlinville Sep 6, 2018

lucperkins Sep 7, 2018

mdlinville Sep 7, 2018 •

edited

Loading

neolit123 commented Aug 31, 2018

lucperkins commented Sep 10, 2018

mdlinville left a comment

mdlinville Sep 10, 2018

lucperkins Sep 10, 2018 •

edited

Loading

k8s-ci-robot commented Sep 10, 2018

mdlinville commented Sep 10, 2018

mdlinville commented Sep 10, 2018

		@@ -1,4 +1,18 @@
		//modal close button
		function addAnchorTags() {

Add AnchorJS logic for header links #10155

Add AnchorJS logic for header links #10155

Conversation

lucperkins commented Aug 30, 2018 • edited Loading

lucperkins commented Aug 30, 2018

k8sio-netlify-preview-bot commented Aug 30, 2018 • edited Loading

k8sio-netlify-preview-bot commented Aug 30, 2018

mdlinville commented Aug 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdlinville Sep 7, 2018 • edited Loading

Choose a reason for hiding this comment

neolit123 commented Aug 31, 2018

lucperkins commented Sep 10, 2018

mdlinville left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lucperkins Sep 10, 2018 • edited Loading

Choose a reason for hiding this comment

k8s-ci-robot commented Sep 10, 2018

mdlinville commented Sep 10, 2018

mdlinville commented Sep 10, 2018

lucperkins commented Aug 30, 2018 •

edited

Loading

k8sio-netlify-preview-bot commented Aug 30, 2018 •

edited

Loading

mdlinville Sep 7, 2018 •

edited

Loading

lucperkins Sep 10, 2018 •

edited

Loading