Skip to content

Commit

Permalink
add more content and correct line numbering for code
Browse files Browse the repository at this point in the history
  • Loading branch information
julsraemy committed Feb 13, 2024
1 parent 95b5b91 commit 78cfc6c
Show file tree
Hide file tree
Showing 11 changed files with 227 additions and 152 deletions.
Empty file.
96 changes: 40 additions & 56 deletions _site/assets/stylesheets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -186,65 +186,49 @@ p {

/* Targeting inline code elements */
code {
font-family: 'Fira Code', monospace; /* Example: Using Fira Code font */
font-size: 0.9em; /* Slightly smaller font size */
background-color: #f9f9f9; /* Light grey background */
padding: 0.2em 0.4em; /* Padding around the text */
border-radius: 4px; /* Rounded corners for the background */
color: #d63384; /* Example: Changing the text color */
}

/* Styling for <pre> wrapping code blocks */
font-family: 'Fira Code', monospace; /* Using Fira Code font as an example */
font-size: 0.75em; /* Slightly smaller font size for readability */
background-color: #f9f9f9; /* Light grey background for contrast */
padding: 0.2em 0.4em; /* Padding around the text for spacing */
border-radius: 4px; /* Rounded corners for aesthetic */
color: #d63384; /* Changing the text color for distinction */
margin: 0 0.1em; /* Optional: Adds a slight space around inline code */
}

pre {
background-color: #f9f9f9; /* Light grey background for the block */
line-height: 0.9;
padding: 1em; /* Padding around the block */
border-radius: 4px; /* Rounded corners for the block */
overflow-x: auto; /* Enables horizontal scrolling for longer lines */
position: relative; /* Needed for positioning line numbers */
}

/* Ensure inline <code> doesn't inherit <pre> block styles */
pre > code {
padding: 0; /* Remove padding inside code blocks */
border-radius: 0; /* Remove border radius inside code blocks */
background-color: transparent; /* Transparent background inside code blocks */
font-size: 0.9em; /* Adjust font size for code blocks */
color: #d63384; /* Text color for code blocks */
}

/* Additional styles for line numbers (if implemented) */
pre.line-numbers {
counter-reset: linenumber; /* Create a counter for line numbers */
}

pre.line-numbers code {
counter-reset: linenumber; /* Reset the counter for each code block */
}

pre.line-numbers code > span {
counter-increment: linenumber; /* Increment the counter */
display: block; /* Display line numbers as block to appear on new line */
}

pre.line-numbers code > span:before {
content: counter(linenumber); /* Display the counter */
padding-right: 1em; /* Space between line numbers and code */
color: #999; /* Color of line numbers */
display: inline-block; /* Align line numbers with code */
text-align: right; /* Align text to the right */
width: 3em; /* Width of the line number area */
margin-left: -4em; /* Adjust spacing to align with code block */
}


.container {
max-width: 1140px;
margin: auto;
overflow: hidden;
padding: 0 15px;
position: relative;
font-family: 'Fira Code', monospace;
line-height: 1;
overflow-x: auto;
background-color: #f9f9f9; /* Background covers full container */
padding-left: 50px; /* Adjust based on the width of your line numbers */
border-radius: 4px;
margin: 1em 0;
}

.line-numbers-container {
position: absolute;
left: 0;
top: 0;
text-align: right;
padding-right: 10px; /* Space from the container edge, adjust if needed */
user-select: none;
color: #999;
/* Ensure it doesn't carry a background */
background-color: transparent;
}

.line-numbers-container span {
display: block;
line-height: 1;
/* No additional padding or margin that could affect alignment */
}

pre > code::first-line {
background-color: yellow; /* Temporary: For visual inspection */
}


.text-center {
text-align: center;
}
Expand Down
18 changes: 9 additions & 9 deletions _site/feed.json

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions _site/feed.xml

Large diffs are not rendered by default.

46 changes: 37 additions & 9 deletions _site/js/line-numbers.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('pre > code').forEach(function(codeBlock) {
var lines = codeBlock.innerHTML.split('\n');
if(lines[lines.length-1] === '') lines.pop(); // Remove last empty line
var numberedHTML = lines.map(function(line) {
return '<span>' + line + '</span>';
}).join('\n');
codeBlock.innerHTML = numberedHTML;
codeBlock.parentNode.classList.add('line-numbers');
document.querySelectorAll('pre code').forEach(function(codeBlock) {
// Normalize line breaks to Unix style for consistent handling
let codeText = codeBlock.textContent.replace(/\r\n?/g, '\n');
let lines = codeText.split('\n');

// Remove an empty line at the end if it exists
if (lines[lines.length - 1] === '') {
lines.pop();
}

let lineNumbersContainer = document.createElement('div');
lineNumbersContainer.className = 'line-numbers-container';
lineNumbersContainer.style.position = 'absolute';
lineNumbersContainer.style.left = '0';
lineNumbersContainer.style.top = '0';
lineNumbersContainer.style.textAlign = 'right';
lineNumbersContainer.style.paddingRight = '10px'; // Space between numbers and code
lineNumbersContainer.style.userSelect = 'none'; // Prevent selection of line numbers
// Ensure the container's height matches the code block's height for proper alignment
lineNumbersContainer.style.height = '100%';

// Create a span for each line number
let lineNumbersHTML = '';
for (let i = 1; i <= lines.length; i++) {
let lineNumberSpan = document.createElement('span');
lineNumberSpan.textContent = `${i}`;
lineNumberSpan.style.display = 'block'; // Each number on its own line
lineNumberSpan.style.lineHeight = 'inherit'; // Inherit line height from parent
lineNumbersContainer.appendChild(lineNumberSpan);
}

// Insert the line numbers container before the code block within the <pre> element
codeBlock.parentNode.insertBefore(lineNumbersContainer, codeBlock);

// Adjust the code block's padding-left to ensure it doesn't overlap the line numbers
codeBlock.style.paddingLeft = '40px';
});
});
});
22 changes: 21 additions & 1 deletion _site/loud.html
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ <h2>LOUD Standards</h2>
</ul>
<h3>IIIF</h3>
<p><a href="https://iiif.io" target="_blank" rel="noopener noreferrer">IIIF</a> is both a model for presenting and annotating content as well as a global community that develops shared application programming interfaces (APIs), implements them in software, and exposes interoperable content.</p>
<p>Currently, IIIF has introduced <a href="https://iiif.io/api/" target="_blank" rel="noopener noreferrer">six specifications</a>, with the Image and Presentation APIs being the most notable, both updated to version 3 in June 2020 and often considered the core IIIF APIs. Additionally, the Content Search and Authorization Flow APIs, both at version 2 and released in 2022 and 2023 respectively, are expected to receive updates to match the core APIs’ standards. The Change Discovery and Content State APIs, both in version 1.0, play essential roles in discovering, aggregating, and sharing IIIF resources.</p>
<p>(…)</p>
<h3>Web Annotation Data Model</h3>
<p>The <a href="https://www.w3.org/TR/annotation-model/" target="_blank" rel="noopener noreferrer">Web Annotation Data Model</a> is a W3C standard that provides an extensible and interoperable framework for creating and sharing annotations across various platforms. It defines relationships between resources using an RDF graph, which includes the <code>annotation</code>, a web resource, the <code>body</code>, and the <code>target</code>. This model allows a single comment to be associated with multiple resources.</p>
<p>Here is an example of machine-generated annotations in a IIIF setting. The JSON-LD snippet represents an <code>AnnotationPage</code> that contains one or more annotations related to a particular IIIF resource.</p>
Expand Down Expand Up @@ -109,10 +111,28 @@ <h3>Web Annotation Data Model</h3>
&quot;dcterms:isPartOf&quot;: {
&quot;type&quot;: &quot;Manifest&quot;,
&quot;id&quot;: &quot;https://iiif.participatory-archives.ch/SGV_12N_08589/manifest.json&quot;
}}},
}
}
},
</code></pre>
<h4>Body</h4>
<p>The <code>body</code> of an annotation is where the content of the annotation is defined. In this example, there are three textual bodies:</p>
<ul>
<li>A “TextualBody” with the value “person” for <code>commenting</code>.</li>
<li>Another “TextualBody” with the value “Object Detection (vitrivr)” for <code>tagging</code>.</li>
<li>A third “TextualBody” with HTML content indicating a detection score, also for <code>commenting</code>.</li>
</ul>
<p>These bodies represent the content of the annotation, including comments and tags related to the annotated resource.</p>
<h4>Target</h4>
<p>The <code>target</code> specifies where the annotation applies. In this setting, it points to a specific area of a IIIF Canvas. Key details include:</p>
<ul>
<li>The source URL, identifying the specific Canvas within this IIIF Presentation API 3.0 resource.</li>
<li>A selector of type “FragmentSelector”, using the Media Fragments specification (with a value indicating the specific rectangular area on the canvas targeted by the annotation).</li>
<li>A link (<code>dcterms:isPartOf</code>) to the IIIF Manifest that the Canvas is part of.</li>
</ul>
<h3>Linked Art</h3>
<p><a href="https://linked.art" target="_blank" rel="noopener noreferrer">Linked Art</a> is a community and a CIDOC (<a href="https://cidoc.mini.icom.museum/" target="_blank" rel="noopener noreferrer">ICOM International Committee for Documentation</a>) Working Group collaborating to define a metadata application profile for describing cultural heritage, and the technical means for conveniently interacting with it.</p>
<p>(…)</p>

</main>

Expand Down
4 changes: 3 additions & 1 deletion _site/pia.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@

<main>
<h1>Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA)</h1>
<p><a href="https://about.participatory-archives.ch" target="_blank" rel="noopener noreferrer">Participatory Knowledge Practices in Analogue and Digital Image Archives</a> (PIA) is a project funded by the Swiss National Science Foundation (SNSF) under the Sinergia funding scheme from February 2021 to January 2025.</p>
<p><a href="https://about.participatory-archives.ch" target="_blank" rel="noopener noreferrer">Participatory Knowledge Practices in Analogue and Digital Image Archives</a> (PIA) is a project funded by the Swiss National Science Foundation (SNSF) <a href="https://data.snf.ch/grants/grant/193788" target="_blank" rel="noopener noreferrer">under the Sinergia funding scheme</a> from February 2021 to January 2025.</p>
<p>The PIA project bridges the realms of data and tangible objects through an interdisciplinary approach, bringing together cultural anthropology, technology and design to examine both analogue and digital archives. It explores participatory knowledge practices within image archives, encourages collaboration across disciplines, and develops digital tools to help contextualise and connect images. This initiative aims to improve the preservation and sharing of knowledge by inviting both the scholarly community and the public to actively participate in understanding its history and current practices. Through workshops and user interviews, the project aims to identify new needs in digital and process-oriented knowledge creation.</p>
<p>Using three collections from the photographic archives of Cultural Anthropology Switzerland (CAS), the project develops interfaces for collaborative indexing and access to archival content. These interfaces, including both graphical and application programming interfaces (APIs), facilitate the co-creation and visualisation of knowledge and offer a reflective and intuitive user experience. At the same time, the project is assessing the analogue and digital phases of archiving from an anthropological, technical and communicative point of view, involving experts from the University of Basel and the Bern University of the Arts.</p>
<p>(…)</p>

</main>
Expand Down
96 changes: 40 additions & 56 deletions assets/stylesheets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -186,65 +186,49 @@ p {

/* Targeting inline code elements */
code {
font-family: 'Fira Code', monospace; /* Example: Using Fira Code font */
font-size: 0.9em; /* Slightly smaller font size */
background-color: #f9f9f9; /* Light grey background */
padding: 0.2em 0.4em; /* Padding around the text */
border-radius: 4px; /* Rounded corners for the background */
color: #d63384; /* Example: Changing the text color */
}

/* Styling for <pre> wrapping code blocks */
font-family: 'Fira Code', monospace; /* Using Fira Code font as an example */
font-size: 0.75em; /* Slightly smaller font size for readability */
background-color: #f9f9f9; /* Light grey background for contrast */
padding: 0.2em 0.4em; /* Padding around the text for spacing */
border-radius: 4px; /* Rounded corners for aesthetic */
color: #d63384; /* Changing the text color for distinction */
margin: 0 0.1em; /* Optional: Adds a slight space around inline code */
}

pre {
background-color: #f9f9f9; /* Light grey background for the block */
line-height: 0.9;
padding: 1em; /* Padding around the block */
border-radius: 4px; /* Rounded corners for the block */
overflow-x: auto; /* Enables horizontal scrolling for longer lines */
position: relative; /* Needed for positioning line numbers */
}

/* Ensure inline <code> doesn't inherit <pre> block styles */
pre > code {
padding: 0; /* Remove padding inside code blocks */
border-radius: 0; /* Remove border radius inside code blocks */
background-color: transparent; /* Transparent background inside code blocks */
font-size: 0.9em; /* Adjust font size for code blocks */
color: #d63384; /* Text color for code blocks */
}

/* Additional styles for line numbers (if implemented) */
pre.line-numbers {
counter-reset: linenumber; /* Create a counter for line numbers */
}

pre.line-numbers code {
counter-reset: linenumber; /* Reset the counter for each code block */
}

pre.line-numbers code > span {
counter-increment: linenumber; /* Increment the counter */
display: block; /* Display line numbers as block to appear on new line */
}

pre.line-numbers code > span:before {
content: counter(linenumber); /* Display the counter */
padding-right: 1em; /* Space between line numbers and code */
color: #999; /* Color of line numbers */
display: inline-block; /* Align line numbers with code */
text-align: right; /* Align text to the right */
width: 3em; /* Width of the line number area */
margin-left: -4em; /* Adjust spacing to align with code block */
}


.container {
max-width: 1140px;
margin: auto;
overflow: hidden;
padding: 0 15px;
position: relative;
font-family: 'Fira Code', monospace;
line-height: 1;
overflow-x: auto;
background-color: #f9f9f9; /* Background covers full container */
padding-left: 50px; /* Adjust based on the width of your line numbers */
border-radius: 4px;
margin: 1em 0;
}

.line-numbers-container {
position: absolute;
left: 0;
top: 0;
text-align: right;
padding-right: 10px; /* Space from the container edge, adjust if needed */
user-select: none;
color: #999;
/* Ensure it doesn't carry a background */
background-color: transparent;
}

.line-numbers-container span {
display: block;
line-height: 1;
/* No additional padding or margin that could affect alignment */
}

pre > code::first-line {
background-color: yellow; /* Temporary: For visual inspection */
}


.text-center {
text-align: center;
}
Expand Down
46 changes: 37 additions & 9 deletions src/js/line-numbers.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('pre > code').forEach(function(codeBlock) {
var lines = codeBlock.innerHTML.split('\n');
if(lines[lines.length-1] === '') lines.pop(); // Remove last empty line
var numberedHTML = lines.map(function(line) {
return '<span>' + line + '</span>';
}).join('\n');
codeBlock.innerHTML = numberedHTML;
codeBlock.parentNode.classList.add('line-numbers');
document.querySelectorAll('pre code').forEach(function(codeBlock) {
// Normalize line breaks to Unix style for consistent handling
let codeText = codeBlock.textContent.replace(/\r\n?/g, '\n');
let lines = codeText.split('\n');

// Remove an empty line at the end if it exists
if (lines[lines.length - 1] === '') {
lines.pop();
}

let lineNumbersContainer = document.createElement('div');
lineNumbersContainer.className = 'line-numbers-container';
lineNumbersContainer.style.position = 'absolute';
lineNumbersContainer.style.left = '0';
lineNumbersContainer.style.top = '0';
lineNumbersContainer.style.textAlign = 'right';
lineNumbersContainer.style.paddingRight = '10px'; // Space between numbers and code
lineNumbersContainer.style.userSelect = 'none'; // Prevent selection of line numbers
// Ensure the container's height matches the code block's height for proper alignment
lineNumbersContainer.style.height = '100%';

// Create a span for each line number
let lineNumbersHTML = '';
for (let i = 1; i <= lines.length; i++) {
let lineNumberSpan = document.createElement('span');
lineNumberSpan.textContent = `${i}`;
lineNumberSpan.style.display = 'block'; // Each number on its own line
lineNumberSpan.style.lineHeight = 'inherit'; // Inherit line height from parent
lineNumbersContainer.appendChild(lineNumberSpan);
}

// Insert the line numbers container before the code block within the <pre> element
codeBlock.parentNode.insertBefore(lineNumbersContainer, codeBlock);

// Adjust the code block's padding-left to ensure it doesn't overlap the line numbers
codeBlock.style.paddingLeft = '40px';
});
});
});
Loading

0 comments on commit 78cfc6c

Please sign in to comment.