feat: add issue creation links (resolves #7)

Author: greatislander

.pages.yml

@@ -67,10 +67,10 @@ content:
         type: string
         list: true
         description: Enter technologies used to build the website.
-      - name: issues
+      - name: issuesUrl
         label: Issues link
         type: string
-        description: Enter the link to the website's issues page on GitHub, Gitlab or JIRA.
+        description: Enter the link to the website's GitHub repository or Gitlab repository.
         required: false
   - label: Issues
     name: issue

eleventy.config.js

@@ -1,5 +1,6 @@
 import {EleventyRenderPlugin} from '@11ty/eleventy';
 import syntaxHighlightPlugin from '@11ty/eleventy-plugin-syntaxhighlight';
+import newIssueUrl from './src/_utils/new-issue-url.js';
 import scTable from './src/_utils/sc-table.js';
 import scUri from './src/_utils/sc-uri.js';
 import sanitizeNumber from './src/_utils/sanitize-number.js';
@@ -8,7 +9,7 @@ export default function eleventy(eleventyConfig) {
 	eleventyConfig.addFilter('scUri', scUri);
 
 	eleventyConfig.addNunjucksAsyncShortcode('scTable', scTable);
-
+	eleventyConfig.addShortcode('newIssueUrl', newIssueUrl);
 	eleventyConfig.addLayoutAlias('report', 'report.njk');
 
 	eleventyConfig.addPlugin(EleventyRenderPlugin);

src/_layouts/report.njk

@@ -94,7 +94,10 @@ layout: base
   {% for issue in issueList %}
     {% if issue.fileSlug !== page.fileSlug %}
     <article class="issue">
-      <h3 id="{{ issue.data.title  | slugify }}" class="issue-title"><span class="number">Issue {{ loop.index }}</span>{{ issue.data.title }}</h3>
+      <header class="issue-title">
+        <h3 id="{{ issue.data.title | slugify }}"><span class="number">Issue {{ loop.index }}</span>{{ issue.data.title }}</h3>
+        {% newIssueUrl issue.data.title, issue.rawInput, issue.data.sample, issuesUrl %}
+      </header>
       {{ issue.templateContent | safe }}
 
       <div class="issue-meta">
@@ -118,7 +121,7 @@ layout: base
           </div>
           {% endif %}
           <div>
-            <dt>Sample: </dt>
+            <dt>Pages: </dt>
             {% if issue.data.sample == "all" %}
             <dd>All pages</dd>
             {% else %}

src/_utils/new-issue-url.js

@@ -0,0 +1,23 @@
+import newGithubIssueUrl from 'new-github-issue-url';
+
+export default function newIssueUrl(title, body, sample, issuesUrl) {
+	issuesUrl ||= '';
+
+	let issueUrl = '';
+
+	body = sample === 'all' ? `${body}\n#### Pages\n\n- All pages` : `${body}\n#### Pages\n\n- ${sample}`;
+
+	if (issuesUrl.includes('github')) {
+		issueUrl = newGithubIssueUrl({
+			repoUrl: issuesUrl,
+			title,
+			body,
+		});
+	}
+
+	if (issuesUrl.includes('gitlab')) {
+		issueUrl = new URL(`${issuesUrl}/-/issues/new?issue[title]=${encodeURIComponent(title)}&issue[description]=${encodeURIComponent(body)}`);
+	}
+
+	return `<a href="${issueUrl}" rel="external">Create an issue<span class="external">for '${title}' (external link)</span><svg aria-hidden="true" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="14" width="16"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z" fill="currentColor"></path></svg></a>`;
+}

src/admin/config.yml

@@ -76,10 +76,10 @@ collections:
             widget: list
             default: [HTML, CSS, JavaScript, WAI-ARIA, SVG]
             hint: Enter technologies used to build the website in a comma-separated list.
-          - name: issues
+          - name: issuesUrl
             label: Issues link
             widget: string
-            hint: Enter the link to the website's issues page on GitHub, Gitlab or JIRA.
+            hint: Enter the link to the website's GitHub repository or Gitlab repository.
             required: false
   - label: Issues
     label_singular: Issue

src/assets/styles/report.css

@@ -141,15 +141,22 @@ pre[class*='language-'] {
 	border: 1px solid #d3d3d3;
 }
 
-.issue-title {
+.issue header {
+	align-items: flex-end;
 	display: flex;
-	flex-direction: column;
+	justify-content: space-between;
 	margin: -1rem -1rem 2rem;
 	padding: 0.75rem 1em;
 	background-color: #e6e6fa;
 }
 
-.issue-title .number {
+.issue header h3 {
+	margin-block: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.issue header .number {
 	display: block;
 	padding: 0.25em 0.5em;
 	font-size: 65%;
@@ -161,6 +168,10 @@ pre[class*='language-'] {
 	width: auto;
 }
 
+.issue header a {
+	margin-block-end: 0.25rem;
+}
+
 .issue-meta {
 	margin: 2em -1em -1em;
 	background: #eee;
@@ -180,7 +191,7 @@ pre[class*='language-'] {
 }
 
 .issue-meta div {
-	width: 100%;
+	width: 45%;
 	margin: 0 2.5% 2.5% 0;
 }
 
@@ -205,7 +216,7 @@ pre[class*='language-'] {
 	border-top: 1px solid #d3d3d3;
 }
 
-.sample-list a {
+.sample-list li a {
 	font-family: 'Noto Sans Mono', monospace;
 	font-size: 0.75rem;
 	color: #191970;

src/assets/styles/screen.css

@@ -1,5 +1,15 @@
-@media (width >= 30em) {
+@media (width < 48em) {
+	.issue header {
+		align-items: flex-start;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+}
+
+
+@media (width < 30em) {
 	.issue-meta div {
-		width: 45%;
+		width: 100%;
 	}
 }

src/report/index.md

@@ -36,6 +36,6 @@ technologies:
   - WAI-ARIA
   - SVG
 
-issues: https://github.com/inclusive-design/idrc-wcag-reporter/
+issuesUrl: https://gitlab.com/inclusive-design/idrc-wcag-reporter
 ---
 This website is partly accessible. Some severe issues were found and described in this report.