First pass of a v4 cookbook

.github/workflows/preview.yml

@@ -70,8 +70,8 @@ jobs:
         python -m pip install --upgrade pip
         pip install -r scripts/requirements.txt
 
-    - name: validate      
-      run: scripts/validate.sh
+  #  - name: validate      
+  #    run: scripts/validate.sh
 
     - name: add URL to config
       run: .github/bin/addURL.sh

_includes/links.md

@@ -1,5 +1,6 @@
 
 [0001]: {{ site.cookbook_url | absolute_url }}/recipe/0001-mvm-image/ "Simplest Manifest - Image"
+[0001-4]: {{ site.cookbook_url | absolute_url }}/recipe/0001-mvm-image/#version-4 "Simplest Manifest - Image"
 [0002]: {{ site.cookbook_url | absolute_url }}/recipe/0002-mvm-audio/ "Simplest Manifest - Audio"
 [0003]: {{ site.cookbook_url | absolute_url }}/recipe/0003-mvm-video/ "Simplest Manifest - Video"
 [0004]: {{ site.cookbook_url | absolute_url }}/recipe/0004-canvas-size/ "Image and Canvas with Differing Dimensions"

_includes/manifest_links.html

@@ -1,7 +1,11 @@
 {% if include.viewers %}
 {% assign viewers = include.viewers | split: "," %}
 {% else %}
+    {% if include.version == "4" %}
+{% assign viewers = page.v4-viewers %}
+    {%else %}
 {% assign viewers = page.viewers %}
+    {% endif %}
 {% endif %}
 [JSON-LD]({{ include.manifest }}) {% for viewerTxt in viewers %}{% assign viewer = viewerTxt | strip %}| {% include viewer_link.html type=viewer manifest=include.manifest annotationurl=include.annotationurl %}{% endfor %}
 

css/style.css

@@ -48,4 +48,36 @@ code {
     top: 0px;
     background-color: white;
     box-shadow: inset 0 -1px 0 #dbdbdb;
+}
+
+.container-block {
+    padding: 0px !important;
+    padding-bottom: 2.75rem !important;
+}
+.has-text-centered {
+    text-align: left !important;
+}
+.has-text-centered p {
+    text-align: left !important;
+}
+
+.tabs {
+    position: sticky;
+    top: 0px;
+    background-color: white;
+    opacity: 1;
+    z-index: 1;
+}
+
+.is-active {
+    color: #0073b0;
+}
+
+.is-active h3 {
+    color: #0073b0;
+    background: #f7f5f5;
+}
+.is-active a {
+    border-top-style: solid;
+    border-top-width: 2px;
 }

index.md

@@ -35,8 +35,8 @@ Anyone is welcome to submit a recipe idea or work on implementing a recipe. Advi
 
 _The corresponding 2.1 test fixture(s) is given like this, where appropriate: ..(3,5)_
 
-* [Simplest Manifest - Image][0001] (1) (use static image as content resource, w.h)
-* [Simplest Manifest - Audio][0002] (1) (use single audio as content resource, d)
+* [Simplest Manifest - Image][0001] - [version 4][0001-4]
+* [Simplest Manifest - Audio][0002] 
 * [Simplest Manifest - Video][0003] (1) (use single video as content resource, w,h,d)
 * [Image and Canvas with Differing Dimensions][0004] (26)
 * [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] (24,25)

recipe/0001-mvm-image/index.md

@@ -5,50 +5,35 @@ layout: recipe
 tags: [image, presentation]
 summary: "The simplest viable manifest for image content. If all you have for an object is one image on the web and a label, this pattern turns it into a IIIF Presentation resource."
 viewers:
- - Mirador
- - UV
- - Annona
- - Clover
- - Glycerine Viewer
- - Theseus
- - Curation
+  - Mirador
+  - UV
+  - Annona
+  - Clover
+  - Glycerine Viewer
+  - Theseus
+  - Curation
+v4-viewers:  
+  - Mirador
 topic: 
  - basic
  - image
 code:
  - iiif-prezi3
+top_tabs:
+  - label: Version 3
+    content: "{% capture my_include %}{%- include_relative recipe.md version='3' -%}{% endcapture %}{{ my_include | markdownify }}"
+  - label: Version 4
+    content: "{% capture my_include %}{%- include_relative v4/recipe.md version='4' -%}{% endcapture %}{{ my_include | markdownify }}"
 ---
 
+{{ theme.block-center-start }}
 
-## Use Case
+{% include blocks/tabs.html  tabs=page.top_tabs %}
 
-The simplest viable manifest for image content. If all you have for an object is one image on the web and a label to go along with it, this pattern turns it into a IIIF Presentation resource. If you would like to enable deep zooming, you will need to use a IIIF Image server. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] recipe.
-
-## Implementation Notes
-
-This illustrates the mandatory structure and properties of a manifest, with the simplest possible content. 
-
-The JSON-LD opens with the `@context` declaration, which identifies the terms used in the document as belonging to the IIIF specification. The `id` property identifies this manifest with the URL at which it is available online. The `type` property must be `Manifest`. The `label` property is mandatory, and the language of its value must be given (or the special value `none`), using a [language map][prezi3-languages]. Here the language of the label is English and its value is "Single Image Example". The manifest's `items` property is a list of canvases. In this example there is only one canvas, with a `height` of 1800 and a `width` of 1200. These units have no dimension: they establish a coordinate space that in this case the single image will fill. The canvas's `id` property is used later as the `target` of the annotation that links to the single image. 
-
-The `items` property of the Canvas is a list of annotation pages, in this case there is only one page. The `items` property of the annotation page is a list of annotations, in this case there is only one annotation. This annotation is what links the image resource with the canvas. The `body` of the annotation is an image, the url of which is the `id` property of the body. The dimensions of the image, in pixels, are given and here match the canvas dimensions exactly. The `target` property tells us that the image is associated with the entirety of the canvas, and the `motivation` property of `painting` tells us that a client should render the image to fill the canvas.
-
-## Restrictions
-
-This recipe is not for large images or deep zoom functionality. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] recipe.
-
-## Example
-
-{% include manifest_links.html manifest="manifest.json" %}
-
-{% include jsonviewer.html src="manifest.json" %}
-
-# Related Recipes
-
-* [Simplest Manifest - Audio][0002] and [Simplest Manifest - Video][0003] are equivalent to this example but for other media.
-* [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] shows a basic manifest for use with a IIIF Image server.
-* [Image different size to canvas][0004] shows a canvas with dimensions different from the pixel dimensions of its content.
-* [Multiple values and languages][0006] demonstrates language map variations, for multiple values and multiple languages. 
-
-
-{% include acronyms.md %}
-{% include links.md %}
+{{ theme.block-end }}
+<script>
+  if (!window.location.hash) {
+    let el = document.getElementById("version-3-heading");
+    el.className += " is-active";
+  }  
+</script>

recipe/0001-mvm-image/recipe.md

@@ -0,0 +1,32 @@
+## Use Case
+
+The simplest viable manifest for image content. If all you have for an object is one image on the web and a label to go along with it, this pattern turns it into a IIIF Presentation resource. If you would like to enable deep zooming, you will need to use a IIIF Image server. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] recipe.
+
+## Implementation Notes
+
+This illustrates the mandatory structure and properties of a manifest, with the simplest possible content. 
+
+The JSON-LD opens with the `@context` declaration, which identifies the terms used in the document as belonging to the IIIF specification. The `id` property identifies this manifest with the URL at which it is available online. The `type` property must be `Manifest`. The `label` property is mandatory, and the language of its value must be given (or the special value `none`), using a [language map][prezi3-languages]. Here the language of the label is English and its value is "Single Image Example". The manifest's `items` property is a list of canvases. In this example there is only one canvas, with a `height` of 1800 and a `width` of 1200. These units have no dimension: they establish a coordinate space that in this case the single image will fill. The canvas's `id` property is used later as the `target` of the annotation that links to the single image. 
+
+The `items` property of the Canvas is a list of annotation pages, in this case there is only one page. The `items` property of the annotation page is a list of annotations, in this case there is only one annotation. This annotation is what links the image resource with the canvas. The `body` of the annotation is an image, the url of which is the `id` property of the body. The dimensions of the image, in pixels, are given and here match the canvas dimensions exactly. The `target` property tells us that the image is associated with the entirety of the canvas, and the `motivation` property of `painting` tells us that a client should render the image to fill the canvas.
+
+## Restrictions
+
+This recipe is not for large images or deep zoom functionality. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] recipe.
+
+## Example
+
+{% include manifest_links.html manifest="manifest.json" version="3" %}
+
+{% include jsonviewer.html src="manifest.json" %}
+
+# Related Recipes
+
+* [Simplest Manifest - Audio][0002] and [Simplest Manifest - Video][0003] are equivalent to this example but for other media.
+* [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] shows a basic manifest for use with a IIIF Image server.
+* [Image different size to canvas][0004] shows a canvas with dimensions different from the pixel dimensions of its content.
+* [Multiple values and languages][0006] demonstrates language map variations, for multiple values and multiple languages. 
+
+
+{% include acronyms.md %}
+{% include links.md %}

recipe/0001-mvm-image/v4/manifest.json

@@ -0,0 +1,35 @@
+{
+    "@context": "http://iiif.io/api/presentation/4/context.json",
+    "id": "{{ id.url }}",
+    "type": "Manifest",
+    "label": { "en": [ "Single Image Example" ] },
+    "items": [
+      {
+        "id": "{{ id.path }}/canvas/p1",
+        "type": "Canvas",
+        "height": 1800,
+        "width": 1200,
+        "items": [
+          {
+            "id": "{{ id.path }}/page/p1/1",
+            "type": "AnnotationPage",
+            "items": [
+              {
+                "id": "{{ id.path }}/annotation/p0001-image",
+                "type": "Annotation",
+                "motivation": "painting",
+                "body": {
+                  "id": "http://iiif.io/api/presentation/2.1/example/fixtures/resources/page1-full.png",
+                  "type": "Image",
+                  "format": "image/png",
+                  "height": 1800,
+                  "width": 1200
+                },
+                "target": "{{ id.path }}/canvas/p1"
+              }
+            ]
+          }
+        ]
+      }    
+    ]
+}

recipe/0001-mvm-image/v4/recipe.md

@@ -0,0 +1,33 @@
+
+## Use Case
+
+The simplest viable manifest for image content. If all you have for an object is one image on the web and a label to go along with it, this pattern turns it into a IIIF Presentation resource. If you would like to enable deep zooming, you will need to use a IIIF Image server. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service (v3)][0005] recipe.
+
+## Implementation Notes
+
+This illustrates the mandatory structure and properties of a manifest, with the simplest possible content. 
+
+The JSON-LD opens with the `@context` declaration, which identifies the terms used in the document as belonging to the IIIF specification. The `id` property identifies this manifest with the URL at which it is available online. The `type` property must be `Manifest`. The `label` property is mandatory, and the language of its value must be given (or the special value `none`), using a [language map][prezi3-languages]. Here the language of the label is English and its value is "Single Image Example". The manifest's `items` property is a list of canvases. In this example there is only one canvas, with a `height` of 1800 and a `width` of 1200. These units have no dimension: they establish a coordinate space that in this case the single image will fill. The canvas's `id` property is used later as the `target` of the annotation that links to the single image. 
+
+The `items` property of the Canvas is a list of annotation pages, in this case there is only one page. The `items` property of the annotation page is a list of annotations, in this case there is only one annotation. This annotation is what links the image resource with the canvas. The `body` of the annotation is an image, the url of which is the `id` property of the body. The dimensions of the image, in pixels, are given and here match the canvas dimensions exactly. The `target` property tells us that the image is associated with the entirety of the canvas, and the `motivation` property of `painting` tells us that a client should render the image to fill the canvas.
+
+## Restrictions
+
+This recipe is not for large images or deep zoom functionality. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service (v3)][0005] recipe.
+
+## Example
+
+{% include manifest_links.html manifest="v4/manifest.json" version="4" %}
+
+{% include jsonviewer.html src="v4/manifest.json" %}
+
+# Related Recipes
+
+* [Simplest Manifest - Audio][0002] (v3) and [Simplest Manifest - Video][0003] (v3) are equivalent to this example but for other media.
+* [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] (v3) shows a basic manifest for use with a IIIF Image server.
+* [Image different size to canvas][0004] (v3) shows a canvas with dimensions different from the pixel dimensions of its content.
+* [Multiple values and languages][0006] (v3) demonstrates language map variations, for multiple values and multiple languages. 
+
+
+{% include acronyms.md %}
+{% include links.md %}