diff --git a/.pages.yml b/.pages.yml index ce8bd9b..8b13ad7 100644 --- a/.pages.yml +++ b/.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 diff --git a/eleventy.config.js b/eleventy.config.js index 7e0e4a9..4e9735a 100644 --- a/eleventy.config.js +++ b/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); diff --git a/src/_layouts/report.njk b/src/_layouts/report.njk index 6d27f1f..6b81421 100644 --- a/src/_layouts/report.njk +++ b/src/_layouts/report.njk @@ -94,7 +94,10 @@ layout: base {% for issue in issueList %} {% if issue.fileSlug !== page.fileSlug %}
-

Issue {{ loop.index }}{{ issue.data.title }}

+
+

Issue {{ loop.index }}{{ issue.data.title }}

+ {% newIssueUrl issue.data.title, issue.rawInput, issue.data.sample, issuesUrl %} +
{{ issue.templateContent | safe }}
@@ -118,7 +121,7 @@ layout: base
{% endif %}
-
Sample:
+
Pages:
{% if issue.data.sample == "all" %}
All pages
{% else %} diff --git a/src/_utils/new-issue-url.js b/src/_utils/new-issue-url.js new file mode 100644 index 0000000..caa5195 --- /dev/null +++ b/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 `Create an issuefor '${title}' (external link)`; +} diff --git a/src/admin/config.yml b/src/admin/config.yml index b91d163..38891d1 100644 --- a/src/admin/config.yml +++ b/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 diff --git a/src/assets/styles/report.css b/src/assets/styles/report.css index e792444..45272a2 100644 --- a/src/assets/styles/report.css +++ b/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; diff --git a/src/assets/styles/screen.css b/src/assets/styles/screen.css index 6c12108..65d96d5 100644 --- a/src/assets/styles/screen.css +++ b/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%; } } diff --git a/src/report/index.md b/src/report/index.md index d53cc94..b053a05 100644 --- a/src/report/index.md +++ b/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.