From 78cfc6c4be19f9466d68ec1d6ed58b653e04c39d Mon Sep 17 00:00:00 2001 From: "Julien A. Raemy" Date: Tue, 13 Feb 2024 11:53:20 +0100 Subject: [PATCH] add more content and correct line numbering for code --- _site/assets/stylesheets/something.css | 0 _site/assets/stylesheets/style.css | 96 +++++++++++--------------- _site/feed.json | 18 ++--- _site/feed.xml | 18 ++--- _site/js/line-numbers.js | 46 +++++++++--- _site/loud.html | 22 +++++- _site/pia.html | 4 +- assets/stylesheets/style.css | 96 +++++++++++--------------- src/js/line-numbers.js | 46 +++++++++--- src/loud.md | 27 +++++++- src/pia.md | 6 +- 11 files changed, 227 insertions(+), 152 deletions(-) create mode 100644 _site/assets/stylesheets/something.css diff --git a/_site/assets/stylesheets/something.css b/_site/assets/stylesheets/something.css new file mode 100644 index 0000000..e69de29 diff --git a/_site/assets/stylesheets/style.css b/_site/assets/stylesheets/style.css index abfae57..b5bc680 100644 --- a/_site/assets/stylesheets/style.css +++ b/_site/assets/stylesheets/style.css @@ -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 
 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  doesn't inherit 
 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;
 }
diff --git a/_site/feed.json b/_site/feed.json
index 171c540..60aff5a 100644
--- a/_site/feed.json
+++ b/_site/feed.json
@@ -23,19 +23,11 @@
       "date_published": "2024-02-10T00:00:00.000Z"
     },
     
-    {
-      "id": "https://phd.julsraemy.ch/loud.html",
-      "url": "https://phd.julsraemy.ch/loud.html",
-      "title": "LOUD for Cultural Heritage – Linked Open Usable Data",
-      "content_html": "ol { list-style-type: upper-alpha; } Linked Open Usable Data (LOUD) A summary page about LOUD, page in construction… The Semantic Web, with its use of Resource Description Framework (RDF) graphs, offers significant potential for data modelling and reasoning, but faces challenges in terms of query complexity, data handling, and visualisation. Despite these obstacles, the advent of JavaScript Object Notation for Linked Data (JSON-LD) represents a notable advance, providing a flexible data representation that addresses some of these issues by allowing dual treatment as both JSON and a graph. LOUD Design Principles One of the main purposes of LOUD is to make the data more easily accessible to software developers, who play a key role in interacting with the data and building software and services on top of it, and to some extent to academics. As such, striking a delicate balance between the dual imperatives of data completeness and accuracy, which depend on the underlying ontological construct, and the pragmatic considerations of scalability and usability, becomes imperative. Similar to Tim-Berners Lee’s Five Star Open Data Deployment Scheme, Robert Sanderson listed five design principles that underpin LOUD: The right Abstraction for the audience Few Barriers to entry Comprehensible by introspection Documentation with working examples Few Exceptions, instead many consistent patterns LOUD Standards Three systems adhering to the LOUD design principles have been identified: International Image Interoperability Framework (IIIF) Web Annotation Data Model Linked Art IIIF IIIF 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. Web Annotation Data Model The Web Annotation Data Model 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 annotation, a web resource, the body, and the target. This model allows a single comment to be associated with multiple resources. Here is an example of machine-generated annotations in a IIIF setting. The JSON-LD snippet represents an AnnotationPage that contains one or more annotations related to a particular IIIF resource. { "@context": "http://iiif.io/api/presentation/3/context.json", "id": "https://iiif.participatory-archives.ch/annotations/SGV_12N_08589-p1-list.json", "type": "AnnotationPage", "items": [ { "@context": "http://www.w3.org/ns/anno.jsonld", "id": "https://iiif.participatory-archives.ch/annotations/SGV_12N_08589-p1-list/annotation-436121.json", "motivation": "commenting", "type": "Annotation", "body": [ { "type": "TextualBody", "value": "person", "purpose": "commenting" }, { "type": "TextualBody", "value": "Object Detection (vitrivr)", "purpose": "tagging" }, { "type": "TextualBody", "value": "<br><small>Detection score: 0.9574</small>", "purpose": "commenting" } ], "target": { "source": "https://iiif.participatory-archives.ch/SGV_12N_08589/canvas/p1", "selector": { "type": "FragmentSelector", "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=319,2942,463,523" }, "dcterms:isPartOf": { "type": "Manifest", "id": "https://iiif.participatory-archives.ch/SGV_12N_08589/manifest.json" }}}, Linked Art Linked Art is a community and a CIDOC (ICOM International Committee for Documentation) Working Group collaborating to define a metadata application profile for describing cultural heritage, and the technical means for conveniently interacting with it.",
-      "date_published": "2024-02-11T00:00:00.000Z"
-    },
-    
     {
       "id": "https://phd.julsraemy.ch/pia.html",
       "url": "https://phd.julsraemy.ch/pia.html",
       "title": "LOUD for Cultural Heritage – Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA)",
-      "content_html": "Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA) Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA) is a project funded by the Swiss National Science Foundation (SNSF) under the Sinergia funding scheme from February 2021 to January 2025. (…)",
+      "content_html": "Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA) Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA) is a project funded by the Swiss National Science Foundation (SNSF) under the Sinergia funding scheme from February 2021 to January 2025. 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. 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. (…)",
       "date_published": "2024-02-12T00:00:00.000Z"
     },
     
@@ -53,6 +45,14 @@
       "title": "LOUD for Cultural Heritage - PhD Thesis",
       "content_html": "Linked Open Usable Data for Cultural Heritage: Perspectives on Community Practices and Semantic Interoperability PhD Thesis in Digital Humanities affiliated with the Graduate School of Social Sciences’ (G3S) doctoral programme. PDF Version on the University of Basel’s repository: (…) Submitted on DD Month 2024 Author Julien A. Raemy (University of Basel) https://orcid.org/0000-0002-4711-5759 Supervisors Prof. Dr. Peter Fornaro (University of Basel) https://orcid.org/0000-0003-1485-4923 Prof. Dr. Walter Leimgruber (University of Basel) Dr. Robert Sanderson (Yale University) https://orcid.org/0000-0003-4441-6852 Abstract My PhD focuses on web standards, i.e. Linked Open Usable Data (LOUD) specifications (such as the IIIF Presentation API 3.0, Linked Art, and the W3C Web Annotation Data Model), supporting the description and dissemination of cultural heritage resources. Two research axes or perspectives have been identified to investigate LOUD, the first axis focusing on community practices, i.e. assessing the mechanisms by which organisations, individuals and apparatuses are entangled in consensus-making, and the second on semantic interoperability, i.e. how to make data meaningful to machines in a standardised and interoperable manner. This work is grounded as part of the SNSF-funded research project Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA), which aims to develop a citizen science platform around three photographic collections from the archives of Cultural Anthropology Switzerland (CAS), formerly the Swiss Society for Folklore Studies. The theoretical framework is firmly rooted in Actor-Network Theory (ANT), a constructivist approach mainly defined by Bruno Latour, as one of the objectives is to describe the associations between actors and the social fabrics of the LOUD ecosystem as well as to highlight the importance of non-human actors, such as the data models developed in the context of the PIA research project. Additionally, the theoretical framework is enriched by integrating complementary perspectives from Anna Haraway’s Situated Knowledges, Susan Leigh Star’s Boundary Objects, and Luciano Floridi’s Philosophy of Information. Each of these frameworks contributes uniquely to our understanding of LOUD and its socio-technical landscape. Overall, this doctoral thesis aims to contribute to the understanding of LOUD and their adoption within cultural heritage institutions. By investigating community practices and semantic interoperability, this research seeks to identify and address challenges and provide insights into how LOUD can be effectively used for the description and dissemination of cultural heritage resources, taking into account all the human and non-human entities needed to develop those standards and to learn from it in the broader cultural heritage field. Moreover, this research aims to recognise the evolution of community practices and the potential bias of a western-centred view. The empirical part of the research is not limited to the implementation of the LOUD standards within the PIA research project, it also comprises an analysis of the social fabrics of the IIIF and Linked Art communities, and an investigation of LUX, Yale Collections Discovery platform. Introduction (…) Context (…) Interlinking Cultural Heritage Data (…) Exploring Relationships through an Actor-Network Theory Lens (…) Research Scope and Methodology (…) The Social Fabrics of IIIF and Linked Art (…) PIA as a Laboratory (…) Yale’s LUX (…) Discussion (…) Conclusion (…) Bibliography (…) This page will host my PhD thesis in HTML format.",
       "date_published": "2024-02-12T00:00:00.000Z"
+    },
+    
+    {
+      "id": "https://phd.julsraemy.ch/loud.html",
+      "url": "https://phd.julsraemy.ch/loud.html",
+      "title": "LOUD for Cultural Heritage – Linked Open Usable Data",
+      "content_html": "ol { list-style-type: upper-alpha; } Linked Open Usable Data (LOUD) A summary page about LOUD, page in construction… The Semantic Web, with its use of Resource Description Framework (RDF) graphs, offers significant potential for data modelling and reasoning, but faces challenges in terms of query complexity, data handling, and visualisation. Despite these obstacles, the advent of JavaScript Object Notation for Linked Data (JSON-LD) represents a notable advance, providing a flexible data representation that addresses some of these issues by allowing dual treatment as both JSON and a graph. LOUD Design Principles One of the main purposes of LOUD is to make the data more easily accessible to software developers, who play a key role in interacting with the data and building software and services on top of it, and to some extent to academics. As such, striking a delicate balance between the dual imperatives of data completeness and accuracy, which depend on the underlying ontological construct, and the pragmatic considerations of scalability and usability, becomes imperative. Similar to Tim-Berners Lee’s Five Star Open Data Deployment Scheme, Robert Sanderson listed five design principles that underpin LOUD: The right Abstraction for the audience Few Barriers to entry Comprehensible by introspection Documentation with working examples Few Exceptions, instead many consistent patterns LOUD Standards Three systems adhering to the LOUD design principles have been identified: International Image Interoperability Framework (IIIF) Web Annotation Data Model Linked Art IIIF IIIF 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. Currently, IIIF has introduced six specifications, 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. (…) Web Annotation Data Model The Web Annotation Data Model 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 annotation, a web resource, the body, and the target. This model allows a single comment to be associated with multiple resources. Here is an example of machine-generated annotations in a IIIF setting. The JSON-LD snippet represents an AnnotationPage that contains one or more annotations related to a particular IIIF resource. { "@context": "http://iiif.io/api/presentation/3/context.json", "id": "https://iiif.participatory-archives.ch/annotations/SGV_12N_08589-p1-list.json", "type": "AnnotationPage", "items": [ { "@context": "http://www.w3.org/ns/anno.jsonld", "id": "https://iiif.participatory-archives.ch/annotations/SGV_12N_08589-p1-list/annotation-436121.json", "motivation": "commenting", "type": "Annotation", "body": [ { "type": "TextualBody", "value": "person", "purpose": "commenting" }, { "type": "TextualBody", "value": "Object Detection (vitrivr)", "purpose": "tagging" }, { "type": "TextualBody", "value": "<br><small>Detection score: 0.9574</small>", "purpose": "commenting" } ], "target": { "source": "https://iiif.participatory-archives.ch/SGV_12N_08589/canvas/p1", "selector": { "type": "FragmentSelector", "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=319,2942,463,523" }, "dcterms:isPartOf": { "type": "Manifest", "id": "https://iiif.participatory-archives.ch/SGV_12N_08589/manifest.json" } } }, Body The body of an annotation is where the content of the annotation is defined. In this example, there are three textual bodies: A “TextualBody” with the value “person” for commenting. Another “TextualBody” with the value “Object Detection (vitrivr)” for tagging. A third “TextualBody” with HTML content indicating a detection score, also for commenting. These bodies represent the content of the annotation, including comments and tags related to the annotated resource. Target The target specifies where the annotation applies. In this setting, it points to a specific area of a IIIF Canvas. Key details include: The source URL, identifying the specific Canvas within this IIIF Presentation API 3.0 resource. 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). A link (dcterms:isPartOf) to the IIIF Manifest that the Canvas is part of. Linked Art Linked Art is a community and a CIDOC (ICOM International Committee for Documentation) Working Group collaborating to define a metadata application profile for describing cultural heritage, and the technical means for conveniently interacting with it. (…)",
+      "date_published": "2024-02-11T00:00:00.000Z"
     }
     
   ]
diff --git a/_site/feed.xml b/_site/feed.xml
index f21b3ea..14c7da6 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -14,20 +14,12 @@
         
     
     
-    
-        
-        https://phd.julsraemy.ch/loud.html
-        https://phd.julsraemy.ch/loud.html
-        2024-02-11T00:00:00Z
-        
-    
-    
     
         
         https://phd.julsraemy.ch/pia.html
         https://phd.julsraemy.ch/pia.html
         2024-02-12T00:00:00Z
-        
+        
     
     
     
@@ -46,5 +38,13 @@
         
     
     
+    
+        
+        https://phd.julsraemy.ch/loud.html
+        https://phd.julsraemy.ch/loud.html
+        2024-02-11T00:00:00Z
+        
+    
+    
 
 
diff --git a/_site/js/line-numbers.js b/_site/js/line-numbers.js
index c09e093..01eef98 100644
--- a/_site/js/line-numbers.js
+++ b/_site/js/line-numbers.js
@@ -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 '' + line + '';
-        }).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 
 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';
     });
-});
+});
\ No newline at end of file
diff --git a/_site/loud.html b/_site/loud.html
index 16f635e..f9237d6 100644
--- a/_site/loud.html
+++ b/_site/loud.html
@@ -69,6 +69,8 @@ 
LOUD Standards

 
 
IIIF

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

+
Currently, IIIF has introduced six specifications, 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.

+
(…)

 
Web Annotation Data Model

 
The Web Annotation Data Model 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 annotation, a web resource, the body, and the target. This model allows a single comment to be associated with multiple resources.

 
Here is an example of machine-generated annotations in a IIIF setting. The JSON-LD snippet represents an AnnotationPage that contains one or more annotations related to a particular IIIF resource.

@@ -109,10 +111,28 @@ 
Web Annotation Data Model

         "dcterms:isPartOf": {
           "type": "Manifest",
           "id": "https://iiif.participatory-archives.ch/SGV_12N_08589/manifest.json"
-        }}},
+        }
+      }
+    },
 

+
Body

+
The body of an annotation is where the content of the annotation is defined. In this example, there are three textual bodies:

+
    
+
  • A “TextualBody” with the value “person” for commenting.
    • 
+
  • Another “TextualBody” with the value “Object Detection (vitrivr)” for tagging.
    • 
+
  • A third “TextualBody” with HTML content indicating a detection score, also for commenting.
    • 
+

+
These bodies represent the content of the annotation, including comments and tags related to the annotated resource.

+
Target

+
The target specifies where the annotation applies. In this setting, it points to a specific area of a IIIF Canvas. Key details include:

+
    
+
  • The source URL, identifying the specific Canvas within this IIIF Presentation API 3.0 resource.
    • 
+
  • 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).
    • 
+
  • A link (dcterms:isPartOf) to the IIIF Manifest that the Canvas is part of.
    • 
+

 
Linked Art

 
Linked Art is a community and a CIDOC (ICOM International Committee for Documentation) Working Group collaborating to define a metadata application profile for describing cultural heritage, and the technical means for conveniently interacting with it.

+
(…)

 
     
     
diff --git a/_site/pia.html b/_site/pia.html
index 62e018e..9d8ee72 100644
--- a/_site/pia.html
+++ b/_site/pia.html
@@ -45,7 +45,9 @@
     
     

         
Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA)

-
Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA) is a project funded by the Swiss National Science Foundation (SNSF) under the Sinergia funding scheme from February 2021 to January 2025.

+
Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA) is a project funded by the Swiss National Science Foundation (SNSF) under the Sinergia funding scheme from February 2021 to January 2025.

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

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

 
(…)

 
     

diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
index abfae57..b5bc680 100644
--- a/assets/stylesheets/style.css
+++ b/assets/stylesheets/style.css
@@ -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 
 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  doesn't inherit 
 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;
 }
diff --git a/src/js/line-numbers.js b/src/js/line-numbers.js
index c09e093..01eef98 100644
--- a/src/js/line-numbers.js
+++ b/src/js/line-numbers.js
@@ -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 '' + line + '';
-        }).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 
 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';
     });
-});
+});
\ No newline at end of file
diff --git a/src/loud.md b/src/loud.md
index fec3c65..2be73e6 100644
--- a/src/loud.md
+++ b/src/loud.md
@@ -41,6 +41,10 @@ Three systems adhering to the LOUD design principles have been identified:
 
 [IIIF](https://iiif.io) 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.
 
+Currently, IIIF has introduced [six specifications](https://iiif.io/api/), 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.
+
+(...)
+
 ### Web Annotation Data Model
 
 The [Web Annotation Data Model](https://www.w3.org/TR/annotation-model/) 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 `annotation`, a web resource, the `body`, and the `target`. This model allows a single comment to be associated with multiple resources.
@@ -85,9 +89,30 @@ Here is an example of machine-generated annotations in a IIIF setting. The JSON-
         "dcterms:isPartOf": {
           "type": "Manifest",
           "id": "https://iiif.participatory-archives.ch/SGV_12N_08589/manifest.json"
-        }}},
+        }
+      }
+    },
 ```
 
+#### Body
+
+The `body` of an annotation is where the content of the annotation is defined. In this example, there are three textual bodies:
+
+- A "TextualBody" with the value "person" for `commenting`.
+- Another "TextualBody" with the value "Object Detection (vitrivr)" for `tagging`.
+- A third "TextualBody" with HTML content indicating a detection score, also for `commenting`.
+
+These bodies represent the content of the annotation, including comments and tags related to the annotated resource.
+
+#### Target
+
+The `target` specifies where the annotation applies. In this setting, it points to a specific area of a IIIF Canvas. Key details include:
+- The source URL, identifying the specific Canvas within this IIIF Presentation API 3.0 resource.
+- 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).
+- A link (`dcterms:isPartOf`) to the IIIF Manifest that the Canvas is part of.
+
 ### Linked Art
 
 [Linked Art](https://linked.art) is a community and a CIDOC ([ICOM International Committee for Documentation](https://cidoc.mini.icom.museum/)) Working Group collaborating to define a metadata application profile for describing cultural heritage, and the technical means for conveniently interacting with it.
+
+(...)
diff --git a/src/pia.md b/src/pia.md
index bdb3ca9..2d0f097 100644
--- a/src/pia.md
+++ b/src/pia.md
@@ -9,6 +9,10 @@ permalink: "/pia.html"
 
 # Participatory Knowledge Practices in Analogue and Digital Image Archives (PIA)
 
-[Participatory Knowledge Practices in Analogue and Digital Image Archives](https://about.participatory-archives.ch) (PIA) is a project funded by the Swiss National Science Foundation (SNSF) under the Sinergia funding scheme from February 2021 to January 2025.
+[Participatory Knowledge Practices in Analogue and Digital Image Archives](https://about.participatory-archives.ch) (PIA) is a project funded by the Swiss National Science Foundation (SNSF) [under the Sinergia funding scheme](https://data.snf.ch/grants/grant/193788) from February 2021 to January 2025.
+
+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.
+
+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.
 
 (...)
\ No newline at end of file