feat: add issue creation links (resolves #7)

.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/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.