Merge pull request #220 from ma10/add-copy-link-button-20240405

ガイドライン項目やチェック内容の見出しにリンクをコピーするボタンを追加

en/source/_static/a11y-gl.css

@@ -26,3 +26,18 @@ body {
     border: 1px solid #ccc;
     padding: 16px;
 }
+
+button.copy-link{
+    margin-left: 0.5em;
+    cursor: pointer;
+    border: 0;
+    font-size: 1rem;
+    background: transparent;
+    color: #2779B0;
+    padding: 0;
+    height: 1.5rem;
+}
+
+button.copy-link:hover {
+    color: #236D9F;
+}

en/source/_static/copylink.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const buttonLabel = 'Copy Link';
+  const sections = document.querySelectorAll('section.permalink');
+
+  sections.forEach(section => {
+    const header = section.querySelector('h2');
+    if (header) {
+      const button = document.createElement('button');
+      button.textContent = buttonLabel;
+      button.className = 'copy-link';
+      button.onclick = function () {
+        navigator.clipboard.writeText(location.origin + location.pathname + '#' + section.id);
+      };
+      header.appendChild(button);
+    }
+  });
+});

en/source/_templates/layout.html

@@ -38,6 +38,7 @@
     <meta property="og:url" content="{{ theme_canonical_url }}{{ pagename }}{{ file_suffix }}" />
     <meta name="twitter:card" content="summary_large_image" />
   {% endif %}
+  <script src="{{ pathto('_static/copylink.js', 1) }}"></script>
 {% endblock %}
 {% block content %}
   <p><a href="{{ baseurl_ja }}{{ pagename }}.html">The normative (Japanese) version of this page is here.</a></p>

ja/source/_static/a11y-gl.css

@@ -26,3 +26,18 @@ body {
     border: 1px solid #ccc;
     padding: 16px;
 }
+
+button.copy-link{
+    margin-left: 0.5em;
+    cursor: pointer;
+    border: 0;
+    font-size: 1rem;
+    background: transparent;
+    color: #2779B0;
+    padding: 0;
+    height: 1.5rem;
+}
+
+button.copy-link:hover {
+    color: #236D9F;
+}

ja/source/_static/copylink.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const buttonLabel = 'リンクをコピー';
+  const sections = document.querySelectorAll('section.permalink');
+
+  sections.forEach(section => {
+    const header = section.querySelector('h2');
+    if (header) {
+      const button = document.createElement('button');
+      button.textContent = buttonLabel;
+      button.className = 'copy-link';
+      button.onclick = function () {
+        navigator.clipboard.writeText(location.origin + location.pathname + '#' + section.id);
+      };
+      header.appendChild(button);
+    }
+  });
+});

ja/source/_templates/layout.html

@@ -38,6 +38,7 @@
     <meta property="og:url" content="{{ theme_canonical_url }}{{ pagename }}{{ file_suffix }}" />
     <meta name="twitter:card" content="summary_large_image" />
   {% endif %}
+  <script src="{{ pathto('_static/copylink.js', 1) }}"></script>
 {% endblock %}
 {% block content %}
   {% if meta is defined %}

tools/yaml2rst/templates/checks/allchecks.rst

@@ -7,7 +7,7 @@
 {% for check in allchecks -%}
 .. _check-{{ check.id }}:
 
-{% filter make_heading(2) -%}
+{% filter make_heading(2, 'permalink') -%}
 {%- if lang == 'ja' -%}
 チェックID：{{ check.id }}
 {%- elif lang == 'en' -%}

tools/yaml2rst/templates/checks/examples-tool.rst

@@ -1,7 +1,7 @@
 {% for ex in examples -%}
 .. _check-example-{{ ex.tool }}-{{ ex.check_id }}:
 
-{% filter make_heading(2) -%}
+{% filter make_heading(2, 'permalink') -%}
 :ref:`check-{{ ex.check_id }}`
 {%- endfilter %}
 

tools/yaml2rst/templates/gl-category.rst

@@ -2,7 +2,7 @@
 {% for gl in guidelines -%}
 .. _{{ gl.id }}:
 
-{{ gl.title|make_heading(2) }}
+{{ gl.title|make_heading(2, 'permalink') }}
 
 {{ gl.guideline }}