Start work on artifacts page update

src/app.py

@@ -12,7 +12,6 @@ app = Flask(__name__)
 class ArtifactItem(DataClassJsonMixin):
     file: str
     description: str
-    width: int = 0
 
 
 @dataclass
@@ -48,10 +47,6 @@ class Project:
                 with open(info_file_path, "r", encoding="utf-8") as f:
                     artifact = Artifact.from_json(f.read())
                     artifact.date = artifact.date.strip()
-                    maxwidth = max((len(a.file)
-                                    for a in artifact.artifacts), default=0)
-                    for a in artifact.artifacts:
-                        a.width = maxwidth
 
                     result.append(artifact)
             except:

src/static/style/style.css

@@ -65,9 +65,43 @@ aside.menu {
 }
 
 main {
-    @apply p-8;
+    @apply py-8 mx-40;
     grid-area: main;
 }
 
+.content {
+    @apply prose max-w-full;
+}
+
+.content.big {
+    @apply prose-xl;
+}
+
+.artifacts-header {
+    @apply text-4xl font-bold mt-20;
+}
+
+.artifacts-list {
+    display: grid;
+    grid-template-columns: max-content auto;
+    gap: 0.5rem 0.5rem;
+}
+
+.artifacts-list .artifact-link {
+    @apply text-white bg-blue-600 rounded-sm p-1 px-2 no-underline font-normal;
+    height: min-content;
+}
+
+.artifacts-list .artifact-link:hover {
+    @apply bg-blue-700;
+}
+
+.artifact-item {
+    @apply bg-gray-200 my-3;
+}
+
+.artifact-item .artifact-contents {
+    @apply p-4;
+}
 
 @tailwind utilities;

src/static/style/style.min.css

@@ -1979,10 +1979,641 @@ aside.menu {
 }
 
 main {
-  padding: 2rem;
+  margin-left: 10rem;
+  margin-right: 10rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
   grid-area: main;
 }
 
+.content {
+  color: #374151;
+  max-width: 65ch;
+}
+
+.content [class~="lead"] {
+  color: #4b5563;
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.content a {
+  color: #111827;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.content strong {
+  color: #111827;
+  font-weight: 600;
+}
+
+.content ol {
+  counter-reset: list-counter;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.content ol > li {
+  position: relative;
+  counter-increment: list-counter;
+  padding-left: 1.75em;
+}
+
+.content ol > li::before {
+  content: counter(list-counter) ".";
+  position: absolute;
+  font-weight: 400;
+  color: #6b7280;
+  left: 0;
+}
+
+.content ul > li {
+  position: relative;
+  padding-left: 1.75em;
+}
+
+.content ul > li::before {
+  content: "";
+  position: absolute;
+  background-color: #d1d5db;
+  border-radius: 50%;
+  width: 0.375em;
+  height: 0.375em;
+  top: calc(0.875em - 0.1875em);
+  left: 0.25em;
+}
+
+.content hr {
+  border-color: #e5e7eb;
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+.content blockquote {
+  font-weight: 500;
+  font-style: italic;
+  color: #111827;
+  border-left-width: 0.25rem;
+  border-left-color: #e5e7eb;
+  quotes: "\201C""\201D""\2018""\2019";
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+
+.content blockquote p:first-of-type::before {
+  content: open-quote;
+}
+
+.content blockquote p:last-of-type::after {
+  content: close-quote;
+}
+
+.content h1 {
+  color: #111827;
+  font-weight: 800;
+  font-size: 2.25em;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+
+.content h2 {
+  color: #111827;
+  font-weight: 700;
+  font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.3333333;
+}
+
+.content h3 {
+  color: #111827;
+  font-weight: 600;
+  font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+
+.content h4 {
+  color: #111827;
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+
+.content figure figcaption {
+  color: #6b7280;
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+
+.content code {
+  color: #111827;
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.content code::before {
+  content: "`";
+}
+
+.content code::after {
+  content: "`";
+}
+
+.content a code {
+  color: #111827;
+}
+
+.content pre {
+  color: #e5e7eb;
+  background-color: #1f2937;
+  overflow-x: auto;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding-top: 0.8571429em;
+  padding-right: 1.1428571em;
+  padding-bottom: 0.8571429em;
+  padding-left: 1.1428571em;
+}
+
+.content pre code {
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: 400;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.content pre code::before {
+  content: "";
+}
+
+.content pre code::after {
+  content: "";
+}
+
+.content table {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+
+.content thead {
+  color: #111827;
+  font-weight: 600;
+  border-bottom-width: 1px;
+  border-bottom-color: #d1d5db;
+}
+
+.content thead th {
+  vertical-align: bottom;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.content tbody tr {
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e7eb;
+}
+
+.content tbody tr:last-child {
+  border-bottom-width: 0;
+}
+
+.content tbody td {
+  vertical-align: top;
+  padding-top: 0.5714286em;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.content {
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.content p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.content img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content video {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content figure {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.content h2 code {
+  font-size: 0.875em;
+}
+
+.content h3 code {
+  font-size: 0.9em;
+}
+
+.content ul {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.content li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.content > ul > li p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.content > ul > li > *:first-child {
+  margin-top: 1.25em;
+}
+
+.content > ul > li > *:last-child {
+  margin-bottom: 1.25em;
+}
+
+.content > ol > li > *:first-child {
+  margin-top: 1.25em;
+}
+
+.content > ol > li > *:last-child {
+  margin-bottom: 1.25em;
+}
+
+.content ul ul, .content ul ol, .content ol ul, .content ol ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.content hr + * {
+  margin-top: 0;
+}
+
+.content h2 + * {
+  margin-top: 0;
+}
+
+.content h3 + * {
+  margin-top: 0;
+}
+
+.content h4 + * {
+  margin-top: 0;
+}
+
+.content thead th:first-child {
+  padding-left: 0;
+}
+
+.content thead th:last-child {
+  padding-right: 0;
+}
+
+.content tbody td:first-child {
+  padding-left: 0;
+}
+
+.content tbody td:last-child {
+  padding-right: 0;
+}
+
+.content > :first-child {
+  margin-top: 0;
+}
+
+.content > :last-child {
+  margin-bottom: 0;
+}
+
+.content {
+  max-width: 100%;
+}
+
+.content.big {
+  font-size: 1.25rem;
+  line-height: 1.8;
+}
+
+.content.big p {
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.content.big [class~="lead"] {
+  font-size: 1.2em;
+  line-height: 1.5;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.content.big blockquote {
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1.0666667em;
+}
+
+.content.big h1 {
+  font-size: 2.8em;
+  margin-top: 0;
+  margin-bottom: 0.8571429em;
+  line-height: 1;
+}
+
+.content.big h2 {
+  font-size: 1.8em;
+  margin-top: 1.5555556em;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+
+.content.big h3 {
+  font-size: 1.5em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6666667em;
+  line-height: 1.3333333;
+}
+
+.content.big h4 {
+  margin-top: 1.8em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+
+.content.big img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content.big video {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content.big figure {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content.big figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.content.big figure figcaption {
+  font-size: 0.9em;
+  line-height: 1.5555556;
+  margin-top: 1em;
+}
+
+.content.big code {
+  font-size: 0.9em;
+}
+
+.content.big h2 code {
+  font-size: 0.8611111em;
+}
+
+.content.big h3 code {
+  font-size: 0.9em;
+}
+
+.content.big pre {
+  font-size: 0.9em;
+  line-height: 1.7777778;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  border-radius: 0.5rem;
+  padding-top: 1.1111111em;
+  padding-right: 1.3333333em;
+  padding-bottom: 1.1111111em;
+  padding-left: 1.3333333em;
+}
+
+.content.big ol {
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.content.big ul {
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.content.big li {
+  margin-top: 0.6em;
+  margin-bottom: 0.6em;
+}
+
+.content.big ol > li {
+  padding-left: 1.8em;
+}
+
+.content.big ol > li::before {
+  left: 0;
+}
+
+.content.big ul > li {
+  padding-left: 1.8em;
+}
+
+.content.big ul > li::before {
+  width: 0.35em;
+  height: 0.35em;
+  top: calc(0.9em - 0.175em);
+  left: 0.25em;
+}
+
+.content.big > ul > li p {
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+}
+
+.content.big > ul > li > *:first-child {
+  margin-top: 1.2em;
+}
+
+.content.big > ul > li > *:last-child {
+  margin-bottom: 1.2em;
+}
+
+.content.big > ol > li > *:first-child {
+  margin-top: 1.2em;
+}
+
+.content.big > ol > li > *:last-child {
+  margin-bottom: 1.2em;
+}
+
+.content.big ul ul, .content.big ul ol, .content.big ol ul, .content.big ol ol {
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+}
+
+.prose-xl ul ul, .prose-xl ul ol, .prose-xl ol ul, .prose-xl ol ol {
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+}
+
+.content.big hr {
+  margin-top: 2.8em;
+  margin-bottom: 2.8em;
+}
+
+.content.big hr + * {
+  margin-top: 0;
+}
+
+.content.big h2 + * {
+  margin-top: 0;
+}
+
+.content.big h3 + * {
+  margin-top: 0;
+}
+
+.content.big h4 + * {
+  margin-top: 0;
+}
+
+.content.big table {
+  font-size: 0.9em;
+  line-height: 1.5555556;
+}
+
+.content.big thead th {
+  padding-right: 0.6666667em;
+  padding-bottom: 0.8888889em;
+  padding-left: 0.6666667em;
+}
+
+.content.big thead th:first-child {
+  padding-left: 0;
+}
+
+.content.big thead th:last-child {
+  padding-right: 0;
+}
+
+.content.big tbody td {
+  padding-top: 0.8888889em;
+  padding-right: 0.6666667em;
+  padding-bottom: 0.8888889em;
+  padding-left: 0.6666667em;
+}
+
+.content.big tbody td:first-child {
+  padding-left: 0;
+}
+
+.content.big tbody td:last-child {
+  padding-right: 0;
+}
+
+.content.big > :first-child {
+  margin-top: 0;
+}
+
+.content.big > :last-child {
+  margin-bottom: 0;
+}
+
+.artifacts-header {
+  font-weight: 700;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  margin-top: 5rem;
+}
+
+.artifacts-list {
+  display: grid;
+  grid-template-columns: -webkit-max-content auto;
+  grid-template-columns: max-content auto;
+  gap: 0.5rem 0.5rem;
+}
+
+.artifacts-list .artifact-link {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
+  border-radius: 0.125rem;
+  font-weight: 400;
+  padding: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  text-decoration: none;
+  height: -webkit-min-content;
+  height: -moz-min-content;
+  height: min-content;
+}
+
+.artifacts-list .artifact-link:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
+}
+
+.artifact-item {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.artifact-item .artifact-contents {
+  padding: 1rem;
+}
+
 .space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));

src/templates/base.html

@@ -21,52 +21,9 @@
         </span>
     </header>
     {% include "nav.html" %}
-    <main class="prose">
-        <h1>Wew</h1>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor dolor vel iaculis elementum. Mauris non massa at purus tincidunt fringilla vitae at nisi. Quisque egestas nisi orci, vel consectetur diam vehicula at. Etiam est nibh, lacinia sed pretium non, suscipit laoreet metus. Quisque lacinia laoreet fermentum. Curabitur tincidunt viverra vestibulum. Duis viverra ipsum in sapien facilisis accumsan. Aenean tristique at ex in dignissim. Sed auctor dolor ante, at rutrum ipsum congue et.
-        </p>
-
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor dolor vel iaculis elementum. Mauris non massa at purus tincidunt fringilla vitae at nisi. Quisque egestas nisi orci, vel consectetur diam vehicula at. Etiam est nibh, lacinia sed pretium non, suscipit laoreet metus. Quisque lacinia laoreet fermentum. Curabitur tincidunt viverra vestibulum. Duis viverra ipsum in sapien facilisis accumsan. Aenean tristique at ex in dignissim. Sed auctor dolor ante, at rutrum ipsum congue et.
-        </p>
-
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor dolor vel iaculis elementum. Mauris non massa at purus tincidunt fringilla vitae at nisi. Quisque egestas nisi orci, vel consectetur diam vehicula at. Etiam est nibh, lacinia sed pretium non, suscipit laoreet metus. Quisque lacinia laoreet fermentum. Curabitur tincidunt viverra vestibulum. Duis viverra ipsum in sapien facilisis accumsan. Aenean tristique at ex in dignissim. Sed auctor dolor ante, at rutrum ipsum congue et.
-        </p>
-
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor dolor vel iaculis elementum. Mauris non massa at purus tincidunt fringilla vitae at nisi. Quisque egestas nisi orci, vel consectetur diam vehicula at. Etiam est nibh, lacinia sed pretium non, suscipit laoreet metus. Quisque lacinia laoreet fermentum. Curabitur tincidunt viverra vestibulum. Duis viverra ipsum in sapien facilisis accumsan. Aenean tristique at ex in dignissim. Sed auctor dolor ante, at rutrum ipsum congue et.
-        </p>
-
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porttitor dolor vel iaculis elementum. Mauris non massa at purus tincidunt fringilla vitae at nisi. Quisque egestas nisi orci, vel consectetur diam vehicula at. Etiam est nibh, lacinia sed pretium non, suscipit laoreet metus. Quisque lacinia laoreet fermentum. Curabitur tincidunt viverra vestibulum. Duis viverra ipsum in sapien facilisis accumsan. Aenean tristique at ex in dignissim. Sed auctor dolor ante, at rutrum ipsum congue et.
-        </p>
+    <main>
+        {%block content%}{%endblock%}
     </main>
-    <!-- <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
-        <div class="navbar-brand">
-            <a class="navbar-item" href="{{ url_for('index') }}">
-                <img src="{{ url_for('static', filename='img/logo.png') }}" width="112">
-            </a>
-        </div>
-
-        <div class="navbar-end hide-sm">
-            <div class="navbar-item">
-                Powered with 🐴
-            </div>
-        </div>
-    </nav>
-
-    <div id="main-view" class="columns">
-        <div id="ci-menu" class="column is-2-widescreen is-3-desktop is-4-tablet">
-            {% include "nav.html" %}
-        </div>
-        <div id="ci-view" class="column">
-            <div id="main-contents" class="container">
-                {%block content%}{%endblock%}
-            </div>
-        </div>
-    </div> -->
 </body>
 
 </html>

src/templates/main.html

@@ -4,7 +4,7 @@
 
 {%block content%}
 
-<div class="content is-medium">
+<div class="content big">
     <h1>BepisBuilds</h1>
     <p>
         Welcome to BepisBuilds! <br/>

src/templates/nav.html

@@ -4,11 +4,6 @@
             Available projects
         </p>
         <ul class="menu-list">
-            <li><a class="is-active" href="#">wew</a></li>
-            <li><a href="#">wew</a></li>
-            <li><a href="#">wew</a></li>
-            <li><a href="#">wew</a></li>
-            <li><a href="#">wew</a></li>
             {%for project in projects%}
             <li><a {%if selected_project and project.id == selected_project.id -%} class="is-active" {%- endif %}
                     href="{{ url_for('display_project', project_id=project.id) }}">{{project.info.name}}</a></li>

src/templates/project_view.html

@@ -10,73 +10,48 @@
 {%block content%}
 
 <div class="content">
-    <div class="readme">
-        {%- if readme %}
-        {{readme|safe}}
-        {%-else%}
-        <h1>{{selected_project.info.name}}</h1>
-        <p>
-            Here you can find artifacts for project &quot;{{selected_project.info.name}}&quot;
-        </p>
-        {%-endif%}
-    </div>
+    {%- if readme %}
+    {{readme|safe}}
+    {%-else%}
+    <h1>{{selected_project.info.name}}</h1>
+    <p>
+        Here you can find artifacts for project &quot;{{selected_project.info.name}}&quot;
+    </p>
+    {%-endif%}
 </div>
 
 
-<h1 class="is-size-2">Artifacts</h1>
-<hr class="content-divider" />
+<h1 class="artifacts-header">Artifacts</h1>
+<hr />
 {%-for artifact in artifacts %}
 <div class="artifact-item">
     <div class="artifact-details">
-        <div class="artifact-id">
-            <p class="is-size-5">#{{artifact.id}}</p>
-        </div>
-        <div class="artifact-info">
-            <div class="artifact-info-content" style="align-items: center">
-                <p>
-                    {%-if artifact.hash%}
-                    <a class="hash-button" href="{{selected_project.info.commit_url}}/{{artifact.hash}}">{{artifact.hash[:8]}}</a>
-                    {%-endif%}
-                    Build date: <span class="build-date">{{artifact.date}}</span>
-                </p>
-                <div class="dropdown-button">
-                    <span class="icon-down-open"></span>
-                </div>
-            </div>
-        </div>
+        <span class="artifact-id">#{{artifact.id}}</span>
+        {%-if artifact.hash%}
+        <a class="hash-button" href="{{selected_project.info.commit_url}}/{{artifact.hash}}">{{artifact.hash[:8]}}</a>
+        {%-endif%}
+        <span>Build date: <span class="build-date">{{artifact.date}}</span></span>
+        <span class="icon-down-open"></span>
     </div>
-    <div class="artifact-contents">
-        <div class="column content">
-            <h2>Downloads</h2>
+    <div class="artifact-contents content">
+        <h2>Downloads</h2>
 
-            <div>
-                <table class="table is-hoverable is-striped is-bordered is-narrow">
-                    <thead>
-                        <tr>
-                            <th>Artifact</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {%-for download_item in artifact.artifacts%}
-                        <tr>
-                            <td class="min-size"><a class="button is-link button-scale"
-                                    style="width: {{download_item.width * 0.5}}em;"
-                                    href="{{ url_for('download_item', project_id=selected_project.id, artifact_id=artifact.id, download_item=download_item.file)}}">{{download_item.file}}</a>
-                            </td>
-                            <td>{{download_item.description}}</td>
-                        </tr>
-                        {%-endfor%}
-                    </tbody>
-                </table>
-            </div>
-            {%- if artifact.changelog %}
-            <h2>Changelog</h2>
-            <p>
-                {{artifact.changelog|safe}}
-            </p>
-            {%- endif %}
+        <div class="artifacts-list">
+            <span class="artifacts-head">Artifact</span>
+            <span class="artifacts-desc">Description</span>
+            {%-for download_item in artifact.artifacts%}
+            <a class="artifact-link"
+                            href="{{ url_for('download_item', project_id=selected_project.id, artifact_id=artifact.id, download_item=download_item.file)}}">{{download_item.file}}</a>
+            
+            <span class="artifact-desc">{{download_item.description}}</span>
+            {%-endfor%}
         </div>
+        {%- if artifact.changelog %}
+        <h2>Changelog</h2>
+        <p>
+            {{artifact.changelog|safe}}
+        </p>
+        {%- endif %}
     </div>
 
 </div>