mirror of
https://github.com/thegeneralist01/archivr
synced 2026-07-21 18:55:36 +02:00
feat: entry detail view and artifact file serving
This commit is contained in:
parent
9337a822ad
commit
dcf9e127bb
6 changed files with 868 additions and 10 deletions
|
|
@ -132,22 +132,83 @@ function renderEntries() {
|
|||
|
||||
function renderContextDetail(detail) {
|
||||
contextBody.innerHTML = "";
|
||||
const title = document.createElement("strong");
|
||||
title.textContent = valueText(detail.summary.title) || valueText(detail.summary.entry_uid);
|
||||
contextBody.append(title);
|
||||
|
||||
const items = [
|
||||
// Title
|
||||
const titleEl = document.createElement("strong");
|
||||
titleEl.className = "rail-entry-title";
|
||||
titleEl.textContent =
|
||||
valueText(detail.summary.title) || valueText(detail.summary.entry_uid);
|
||||
contextBody.append(titleEl);
|
||||
|
||||
// Metadata section
|
||||
const metaSection = document.createElement("div");
|
||||
metaSection.className = "rail-section";
|
||||
|
||||
if (detail.summary.original_url) {
|
||||
const urlRow = document.createElement("div");
|
||||
urlRow.className = "rail-item";
|
||||
const urlLabel = document.createElement("span");
|
||||
urlLabel.className = "rail-label";
|
||||
urlLabel.textContent = "Original URL";
|
||||
const urlLink = document.createElement("a");
|
||||
urlLink.href = detail.summary.original_url;
|
||||
urlLink.target = "_blank";
|
||||
urlLink.rel = "noopener noreferrer";
|
||||
urlLink.className = "rail-url-link";
|
||||
urlLink.textContent = detail.summary.original_url;
|
||||
urlRow.append(urlLabel, document.createTextNode(": "), urlLink);
|
||||
metaSection.append(urlRow);
|
||||
}
|
||||
|
||||
const metaFields = [
|
||||
["Added", detail.summary.archived_at],
|
||||
["Source", detail.summary.source_kind],
|
||||
["Type", detail.summary.entity_kind],
|
||||
["Visibility", detail.summary.visibility],
|
||||
["Artifacts", detail.artifacts.length],
|
||||
["Structured root", detail.structured_root_relpath],
|
||||
];
|
||||
|
||||
for (const [label, value] of items) {
|
||||
for (const [label, value] of metaFields) {
|
||||
const item = document.createElement("div");
|
||||
item.className = "rail-item";
|
||||
item.textContent = `${label}: ${valueText(value)}`;
|
||||
contextBody.append(item);
|
||||
const labelEl = document.createElement("span");
|
||||
labelEl.className = "rail-label";
|
||||
labelEl.textContent = label;
|
||||
item.append(labelEl, document.createTextNode(`: ${valueText(value)}`));
|
||||
metaSection.append(item);
|
||||
}
|
||||
contextBody.append(metaSection);
|
||||
|
||||
// Artifacts section
|
||||
if (detail.artifacts.length > 0) {
|
||||
const artifactsSection = document.createElement("div");
|
||||
artifactsSection.className = "rail-section";
|
||||
const artifactsHeading = document.createElement("div");
|
||||
artifactsHeading.className = "rail-section-heading";
|
||||
artifactsHeading.textContent = `Artifacts (${detail.artifacts.length})`;
|
||||
artifactsSection.append(artifactsHeading);
|
||||
const list = document.createElement("ul");
|
||||
list.className = "artifact-list";
|
||||
detail.artifacts.forEach((artifact, index) => {
|
||||
const li = document.createElement("li");
|
||||
const a = document.createElement("a");
|
||||
a.href = `/api/archives/${state.archiveId}/entries/${detail.summary.entry_uid}/artifacts/${index}`;
|
||||
a.target = "_blank";
|
||||
a.rel = "noopener noreferrer";
|
||||
a.className = "artifact-link";
|
||||
const roleName = artifact.artifact_role.replace(/_/g, " ");
|
||||
const size =
|
||||
artifact.byte_size != null ? ` (${formatBytes(artifact.byte_size)})` : "";
|
||||
a.textContent = `${roleName}${size}`;
|
||||
li.append(a);
|
||||
list.append(li);
|
||||
});
|
||||
artifactsSection.append(list);
|
||||
contextBody.append(artifactsSection);
|
||||
} else {
|
||||
const noArtifacts = document.createElement("div");
|
||||
noArtifacts.className = "rail-item muted";
|
||||
noArtifacts.textContent = "No artifacts.";
|
||||
contextBody.append(noArtifacts);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -312,3 +312,61 @@ select {
|
|||
min-width: 860px;
|
||||
}
|
||||
}
|
||||
|
||||
.rail-entry-title {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.rail-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.rail-section-heading {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--accent);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.rail-label {
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.rail-url-link {
|
||||
color: var(--accent);
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.artifact-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.artifact-link {
|
||||
display: block;
|
||||
padding: 6px 8px;
|
||||
background: var(--paper-3);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.artifact-link:hover {
|
||||
background: var(--line);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue