[tor-commits] [metrics-web/master] Make it easier to link to #anchors.

karsten at torproject.org karsten at torproject.org
Mon Jan 9 17:03:42 UTC 2017


commit 2af2d069cbf2f8912dcf1b78f258a71d564fce20
Author: Karsten Loesing <karsten.loesing at gmx.net>
Date:   Thu Dec 22 20:36:54 2016 +0100

    Make it easier to link to #anchors.
---
 website/web/WEB-INF/about.jsp    | 18 +++++++++---------
 website/web/WEB-INF/news.jsp     |  5 ++---
 website/web/WEB-INF/research.jsp | 12 ++++--------
 website/web/WEB-INF/sources.jsp  | 11 ++++-------
 website/web/WEB-INF/stats.jsp    | 29 ++++++++++-------------------
 website/web/css/style.css        | 14 ++++++++++++++
 website/web/js/script.js         |  2 +-
 7 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/website/web/WEB-INF/about.jsp b/website/web/WEB-INF/about.jsp
index ca42fda..f51dc6a 100644
--- a/website/web/WEB-INF/about.jsp
+++ b/website/web/WEB-INF/about.jsp
@@ -14,34 +14,34 @@
 
     <div class="container">
 
-      <h1>About</h1>
+      <h1>About <a href="#about" name="about" class="anchor">#</a></h1>
 
       <p>Tor metrics are updated daily to provide transparency for Tor users, give feedback for developers, and measure evidence of network anomalies.</p>
     </div>
 
     <div class="container">
 
-      <a name="philosophy" id="anchor-philosophy"></a><br>
+      <br>
 
-      <h2>Philosophy</h2>
+      <h2>Philosophy <a href="#philosophy" name="philosophy" class="anchor">#</a></h2>
 
       <p>We only use public, non-sensitive data for metrics. Each metric goes through a rigorous review and discussion process before appearing here. We never publish statistics—or aggregate statistics—of sensitive data, such as unencrypted contents of traffic.</p>
 
-      <a name="contributing" id="anchor-contributing"></a><br>
+      <br>
 
-      <h2>Contributing</h2>
+      <h2>Contributing <a href="#contributing" name="contributing" class="anchor">#</a></h2>
 
       <p>Collecting and processing new data won't likely happen without your help! If you really want to see something measured here, we would be happy to work with you.  (Link to Trac wiki page)</p>
 
-      <a name="contact" id="anchor-contact"></a><br>
+      <br>
 
-      <h2>Contact</h2>
+      <h2>Contact <a href="#contact" name="contact" class="anchor">#</a></h2>
 
       <p>If you have any questions, contact us at <a href="mailto:metrics-team at lists.torproject.org">metrics-team at lists.torproject.org</a>.</p>
 
-      <a name="testimonials" id="anchor-testimonials"></a><br>
+      <br>
 
-      <h2>Testimonials</h2>
+      <h2>Testimonials <a href="#testimonials" name="testimonials" class="anchor">#</a></h2>
       <blockquote>
         <p class="mb-0">
           Metrics are a critical part of any security technology. If you don't know how the technology works in practice, you can't find and fix problems. You can't improve the security. You can't make it work better. This isn't glamorous or sexy work, but it's essential. This is especially true for security and privacy, where our preconceived notions of threats and usage are regularly wrong—and knowing what's really going on is the difference between security and insecurity.<br><br>
diff --git a/website/web/WEB-INF/news.jsp b/website/web/WEB-INF/news.jsp
index 85ea881..a15009e 100644
--- a/website/web/WEB-INF/news.jsp
+++ b/website/web/WEB-INF/news.jsp
@@ -13,15 +13,14 @@
     </div>
 
     <div class="container">
-      <h1>News</h1>
+      <h1>News <a href="#news" name="news" class="anchor">#</a></h1>
       <p>We collect reports of events and aggregate them here for your convenience.  The process is usually pretty informal.  Someone tells us of an event, reports it to us, and we aggregate them here.  If you know of any event that may have caused a measurement anomaly, help us add it to this list.</p>
     </div>
     <div class="container">
 
     <c:forEach var="category" items="${news}" varStatus="status">
       <c:if test="${not status.first}"><hr></c:if>
-      <a name="#${category.key[1]}" id="anchor-${category.key[1]}"></a>
-      <h2>${category.key[0]}</h2>
+      <h2>${category.key[0]} <a href="#${category.key[1]}" name="${category.key[1]}" class="anchor">#</a></h2>
       <c:forEach var="entry" items="${category.value}">
       <p>${entry[0]}</p>
       <br>
diff --git a/website/web/WEB-INF/research.jsp b/website/web/WEB-INF/research.jsp
index d58cff3..82e1680 100644
--- a/website/web/WEB-INF/research.jsp
+++ b/website/web/WEB-INF/research.jsp
@@ -13,7 +13,7 @@
     </div>
 
     <div class="container">
-      <h1>Research</h1>
+      <h1>Research <a href="#research" name="research" class="anchor">#</a></h1>
       <p>Tor started out as a research project! We encourage research on all things Tor.</p>
       <p>Look around the papers section below for some ideas on what others have researched in the past. Contact <a href="mailto:#">[some general email list here, torproject?]</a> if you want to discuss ideas.</p>
 
@@ -21,9 +21,7 @@
 
     <div class="container">
 
-      <a name="use" id="anchor-use"></a>
-
-      <h2>Feel free to use our data for your research!</h2>
+      <h2>Feel free to use our data for your research! <a href="#use" name="use" class="anchor">#</a></h2>
 
       <p>If you do, please cite <a href="https://metrics.torproject.org/" target="_self">https://metrics.torproject.org/</a> or the following <a href="http://freehaven.net/anonbib/#wecsr10measuring-tor" target="_blank">paper</a>:</p>
       <p><pre>
@@ -43,8 +41,7 @@
 
     <div class="container">
 
-      <a name="collect" id="anchor-collect"></a>
-      <h2>Want to collect your own data for research?</h2>
+      <h2>Want to collect your own data for research? <a href="#collect" name="collect" class="anchor">#</a></h2>
       <p>Look at the <a href="sources.html">sources page</a> for services that collect Tor-related data.</p>
 
     </div>
@@ -52,8 +49,7 @@
 
     <div class="container">
 
-      <a name="research" id="anchor-research"></a>
-      <h2>Research Papers</h2>
+      <h2>Research Papers <a href="#research" name="research" class="anchor">#</a></h2>
       <p>Here are some Tor-related papers. (...) If we're missing yours, let us know!</p>
 
     </div>
diff --git a/website/web/WEB-INF/sources.jsp b/website/web/WEB-INF/sources.jsp
index 3c36611..de71883 100644
--- a/website/web/WEB-INF/sources.jsp
+++ b/website/web/WEB-INF/sources.jsp
@@ -13,13 +13,12 @@
     </div>
 
     <div class="container">
-      <h1>Sources</h1>
+      <h1>Sources <a href="#sources" name="sources" class="anchor">#</a></h1>
       <p>You're a data person and only trust the statistics that you doctored yourself?  Here's all the data right from the source, doctor.</p>
     </div>
 
     <div class="container tools">
-      <a name="archive" id="anchor-archive"></a>
-      <h2>Network archives</h2>
+      <h2>Network archives <a href="#archive" name="archive" class="anchor">#</a></h2>
       <p>We get our data from the network archives below.</p>
       <div class="row">
 
@@ -43,8 +42,7 @@
     </div>
 
     <div class="container tools">
-      <a name="measurement" id="anchor-measurement"></a>
-      <h2>Measurement tools</h2>
+      <h2>Measurement tools <a href="#measurement" name="measurement" class="anchor">#</a></h2>
       <p>The following tools perform active measurements in the Tor network.  (They don't have pretty logos yet, but they are all uniquely useful!)</p>
       <div class="row">
 
@@ -76,8 +74,7 @@
     </div>
 
     <div class="container tools">
-      <a name="aggregated" id="anchor-aggregated"></a>
-      <h2>Pre-aggregated data</h2>
+      <h2>Pre-aggregated data <a href="#aggregated" name="aggregated" class="anchor">#</a></h2>
       <p>Sometimes the data from the original sources can be hard to process.  If you want to take a little shortcut, try out the following pre-aggregated statistics.</p>
       <div class="row">
 
diff --git a/website/web/WEB-INF/stats.jsp b/website/web/WEB-INF/stats.jsp
index 8ab2a00..740fd69 100644
--- a/website/web/WEB-INF/stats.jsp
+++ b/website/web/WEB-INF/stats.jsp
@@ -14,13 +14,12 @@
     </div>
 
     <div class="container">
-      <h1>Pre-aggregated statistics files used on this website</h1>
+      <h1>Pre-aggregated statistics files used on this website <a href="#stats" name="stats" class="anchor">#</a></h1>
       <p>This page contains specifications and links to pre-aggregated statistics files used on this website.</p>
     </div>
 
 <div class="container">
-<a name="servers" id="anchor-servers"></a>
-<h2>Number of relays and bridges</h2>
+<h2>Number of relays and bridges <a href="#servers" name="servers" class="anchor">#</a></h2>
 
 <p>The following data file contains the number of running <a
 href="about.html#relay">relays</a> and <a href="about.html#bridge">bridges</a>
@@ -86,8 +85,7 @@ only, this column contains the empty string.</li>
 </div>
 
 <div class="container">
-<a name="bandwidth" id="anchor-bandwidth"></a>
-<h2>Bandwidth provided and consumed by relays</h2>
+<h2>Bandwidth provided and consumed by relays <a href="#bandwidth" name="bandwidth" class="anchor">#</a></h2>
 
 <p>The following data file contains statistics on <a
 href="about.html#advertised-bandwidth">advertised</a> and <a
@@ -142,8 +140,7 @@ relays when serving directory data.</li>
 </div>
 
 <div class="container">
-<a name="advbwdist" id="anchor-advbwdist"></a>
-<h2>Advertised bandwidth distribution and n-th fastest relays</h2>
+<h2>Advertised bandwidth distribution and n-th fastest relays <a href="#advbwdist" name="advbwdist" class="anchor">#</a></h2>
 
 <p>The following data file contains statistics on the distribution of <a
 href="about.html#advertised-bandwidth">advertised bandwidth</a> of relays in the
@@ -181,8 +178,7 @@ relays.</li>
 </div>
 
 <div class="container">
-<a name="clients" id="anchor-clients"></a>
-<h2>Estimated number of clients in the Tor network</h2>
+<h2>Estimated number of clients in the Tor network <a href="#clients" name="clients" class="anchor">#</a></h2>
 
 <p>The following data file contains estimates on the number of <a
 href="about.html#client">clients</a> in the network.  These numbers are derived
@@ -246,8 +242,7 @@ should be handled with more care.</li>
 </div>
 
 <div class="container">
-<a name="userstats-combined" id="anchor-userstats-combined"></a>
-<h2>Estimated number of clients by country and transport</h2>
+<h2>Estimated number of clients by country and transport <a href="#userstats-combined" name="userstats-combined" class="anchor">#</a></h2>
 
 <p>The following data file contains additional statistics on the number of <a
 href="about.html#client">clients</a> in the network.  This data file is related
@@ -311,8 +306,7 @@ there are users by either of the two numbers.</li>
 </div>
 
 <div class="container">
-<a name="torperf" id="anchor-torperf"></a>
-<h2>Performance of downloading static files over Tor</h2>
+<h2>Performance of downloading static files over Tor <a href="#torperf" name="torperf" class="anchor">#</a></h2>
 
 <p>The following data file contains aggregate statistics on performance when
 downloading static files of different sizes over Tor.  These statistics are
@@ -362,8 +356,7 @@ over Tor.</li>
 </div>
 
 <div class="container">
-<a name="connbidirect2" id="anchor-connbidirect2"></a>
-<h2>Fraction of connections used uni-/bidirectionally</h2>
+<h2>Fraction of connections used uni-/bidirectionally <a href="#connbidirect2" name="connbidirect2" class="anchor">#</a></h2>
 
 <p>The following data file contains statistics on the fraction of direct
 connections between a <a href="about.html#relay">relay</a> and other nodes in
@@ -405,8 +398,7 @@ fractions for the three directions "read", "write", and "both" sum up to exactly
 </div>
 
 <div class="container">
-<a name="hidserv" id="anchor-hidserv"></a>
-<h2>Hidden-service statistics</h2>
+<h2>Hidden-service statistics <a href="#hidserv" name="hidserv" class="anchor">#</a></h2>
 
 <p>The following data file contains <a
 href="about.html#hidden-service">hidden-service</a> statistics gathered by a
@@ -450,8 +442,7 @@ fraction.</li>
 </div>
 
 <div class="container">
-<a name="disagreement" id="anchor-disagreement"></a>
-<h2>Disagreement among the directory authorities (deprecated)</h2>
+<h2>Disagreement among the directory authorities (deprecated) <a href="#disagreement" name="disagreement" class="anchor">#</a></h2>
 
 <div class="bs-callout bs-callout-warning">
 <h3>Deprecated</h3>
diff --git a/website/web/css/style.css b/website/web/css/style.css
index 49a0680..2b97b34 100644
--- a/website/web/css/style.css
+++ b/website/web/css/style.css
@@ -756,6 +756,20 @@ form input[type=checkbox] {
 }
 
 
+/* Anchor-Links for Headlines */
+.anchor {
+    display:none;
+    text-decoration:none;
+}
+*:hover > .anchor {
+    display:inline;
+    color:#78c040;
+}
+*:hover > .anchor:hover {
+    text-decoration:none;
+    color:#68b030;
+}
+
 
 /* No JavaScript fallbacks */
 
diff --git a/website/web/js/script.js b/website/web/js/script.js
index 8c7e4d3..10a918a 100644
--- a/website/web/js/script.js
+++ b/website/web/js/script.js
@@ -20,7 +20,7 @@ jQuery(function() {
   
   
   // smooth scolling for all anchor links
-  jQuery('a[href^="#"]').on('click',function (e) {
+  jQuery('a[href^="#"]:not(.anchor)').on('click',function (e) {
     e.preventDefault();
     var target = this.hash;
     var $target = $(target.split('#').join('#anchor-'));





More information about the tor-commits mailing list