Commit df395b4b authored by Marco Cavalli's avatar Marco Cavalli
Browse files

feat: add examples.html with custom styles and structured content

parent f524480f
Loading
Loading
Loading
Loading
Loading
+327 −0
Original line number Diff line number Diff line
<!DOCTYPE html>

<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta content="pandoc" name="generator"/>
<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
<title>Annex A (normative): NGSI-LD identifier considerations</title>
<style>
      code{white-space: pre-wrap;}
      span.smallcaps{font-variant: small-caps;}
      div.columns{display: flex; gap: min(4vw, 1.5em);}
      div.column{flex: auto; overflow-x: auto;}
      div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
      /* The extra [class] is a hack that increases specificity enough to
         override a similar rule in reveal.js */
      ul.task-list[class]{list-style: none;}
      ul.task-list li input[type="checkbox"] {
        font-size: inherit;
        width: 0.8em;
        margin: 0 0.8em 0.2em -1.6em;
        vertical-align: middle;
      }
      .display.math{display: block; text-align: center; margin: 0.5rem auto;}
    </style>
<link href="../styles.css" rel="stylesheet"/>
<link href="../styling.css" rel="stylesheet"/>
<!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
    <![endif]-->
<script>
      const links = document.getElementsByTagName("link"); // link[0] should be styiling.css
      if (links[1].getAttribute("rel") === "stylesheet") {
        if (styleToggle) {
          links[1].href = "API.css";
        } else {
          links[1].href = "background_highlight.css";
        }
      }
    </script>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      padding-bottom: 4rem;
      max-width: unset !important;
      left: 0 !important;
    }
    .example-container {
      display: flex;
      gap: 20px; /* Space between the two divs */
    }
    .example-container > div {
      flex: 1; /* Each div takes up equal space */
      border: 1px solid #ccc; /* Optional: Add a border for better visibility */
      padding: 10px; /* Optional: Add some padding inside the divs */
      box-sizing: border-box; /* Ensure padding and border are included in the width */
    }
  </style>
</head>
<body>
  <h2>Inline Custom Styles</h2>
  <div class="example-container">
    <div>
      [some text]{.HTML_Code}<br/>
      [some text]{.HTML_Sample}<br/>
      [some text]{.HTML_Variable}<br/>
      [some text]{.HTML_Keyboard}<br/>
      [some text]{.HTML_Definition}<br/>
      [some text]{.HTML_Error}<br/>
      [some text]{.NF}<br/>
    </div>
    <div>
      <span class="HTML_Code">some text</span><br/>
      <span class="HTML_Sample">some text</span><br/>
      <span class="HTML_Variable">some text</span><br/>
      <span class="HTML_Keyboard">some text</span><br/>
      <span class="HTML_Definition">some text</span><br/>
      <span class="HTML_Error">some text</span><br/>
      <span class="NF">some text</span><br/>
    </div>
  </div> 
  <h2>Headings</h2>
  <div class="example-container">
    <div>
      # Heading 1<br/><br/>
      ## Heading 2<br/><br/>
      ### Heading 3<br/><br/>
      #### Heading 4<br/><br/>
      ##### Heading 5<br/><br/>
      ###### Heading 6<br/><br/>
    </div>
    <div>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
    </div>
  </div>  
  <h2>Text Styles</h2>
  <div class="example-container">
    <div>
      *Italic Text*<br/>
      **Bold Text**<br/>
      ***Bold Italic Text***<br/>
      Text&lt;sup&gt;1&lt;/sup&gt;
    </div>
    <div>
      <em>Italic Text</em><br/>
      <strong>Bold Text</strong><br/>
      <strong><em>Bold Italic Text</em></strong><br>
      Text<sup>1</sup>
    </div>
  </div>
  <h2>Links</h2>
  <div class="example-container">
    <div>
      (Google)[https://google.com]
    </div>
    <div>
      <a href="https://google.com">Google</a>
    </div>
  </div>
  <h2>References</h2>
  <div class="example-container">
    <div>
      In this text we refer to [n.1] and [i.someref].<br/>
    </div>
    <div>
      In this text we refer to <a href="https://example.com/n.1">[n.1]</a> and <a href="https://example.com/i.someref">[i.someref]</a>
    </div>
  </div>
  <h2>Notes</h2>
  <div class="example-container">
    <div>
      >>> [!note] NOTE:<br/>
      When the simplified GeoJSON representation is selected, the layout of the Entities changes, see clause 4.5.17 for details.<br>
      >>>
    </div>
    <div class="NO"><div><p>NOTE:</p></div><div>
    <p>When the simplified GeoJSON representation is selected, the layout of the Entities changes, see <a href="clause-4.html#4.5.17">clause 4.5.17</a> for details.</p>
    </div></div>
  </div>
  <h2>Examples</h2>
  <div class="example-container">
    <div>
      >>> [!tip] EXAMPLE 1:<br/>
      When the simplified GeoJSON representation is selected, the layout of the Entities changes, see clause 4.5.17 for details.<br>
      >>>
    </div>
    <div class="NO"><div><p>EXAMPLE 1:</p></div><div>
    <p>When the simplified GeoJSON representation is selected, the layout of the Entities changes, see <a href="clause-4.html#4.5.17">clause 4.5.17</a> for details.</p>
    </div></div>
  </div>
  <h2>JSONS</h2>
  <div class="example-container">
    <div>
      >>> [!tip] EXAMPLE 11:<br>
      [?q=parkingTickets\[value\]=="Overstay 60 minutes"&jsonKeys=parkingTickets]{.HTML_Code} . The trailing path is [parkingTickets]{.HTML_Code} . The [parkingTickets]{.HTML_Code} *Property* of the JSON object is targeted, but the target [value]{.HTML_Code} raw is JSON, and is not expanded to [ngsi-ld:hasValue]{.HTML_Code} using the core *\@context* . Refer to the following NGSI-LD Entity:<br>
      ``` json<br>
      {<br>
        "id": "urn:ngsi-ld:Car:6152s",<br>
        "type": "Car",<br>
        "parkingTickets": {<br>
        "type": "JsonProperty",<br>
        "json": {<br>
               "id": "85a6cc52-0589-45f9",<br>
               "value": "Overstay 60 minutes"<br>
            }<br>
        }<br>
      }<br>
      ```<br>
      >>>
    </div>
    <div class="EX"><div><p>EXAMPLE 11:</p></div><div>
<p><span class="HTML_Code">?q=parkingTickets[value]==“Overstay 60 minutes”&jsonKeys=parkingTickets</span> . The trailing path is <span class="HTML_Code">parkingTickets</span> . The <span class="HTML_Code">parkingTickets</span> <i>Property</i> of the JSON object is targeted, but the target <span class="HTML_Code">value</span> raw is JSON, and is not expanded to <span class="HTML_Code">ngsi-ld:hasValue</span> using the core <i>@context</i> . Refer to the following NGSI-LD Entity:</p>
<div class="sourceCode" id="cb27"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb27-1"><a aria-hidden="true" href="#cb27-1" tabindex="-1"></a><span class="fu">{</span></span>
<span id="cb27-2"><a aria-hidden="true" href="#cb27-2" tabindex="-1"></a><span class="er">  </span><span class="dt">"id"</span><span class="fu">:</span><span class="er"> </span><span class="st">"urn:ngsi-ld:Car:6152s"</span><span class="fu">,</span></span>
<span id="cb27-3"><a aria-hidden="true" href="#cb27-3" tabindex="-1"></a><span class="er">  </span><span class="dt">"type"</span><span class="fu">:</span><span class="er"> </span><span class="st">"Car"</span><span class="fu">,</span></span>
<span id="cb27-4"><a aria-hidden="true" href="#cb27-4" tabindex="-1"></a><span class="er">  </span><span class="dt">"parkingTickets"</span><span class="fu">:</span><span class="er"> </span><span class="fu">{</span></span>
<span id="cb27-5"><a aria-hidden="true" href="#cb27-5" tabindex="-1"></a><span class="er">  </span><span class="dt">"type"</span><span class="fu">:</span><span class="er"> </span><span class="st">"JsonProperty"</span><span class="fu">,</span></span>
<span id="cb27-6"><a aria-hidden="true" href="#cb27-6" tabindex="-1"></a><span class="er">  </span><span class="dt">"json"</span><span class="fu">:</span><span class="er"> </span><span class="fu">{</span></span>
<span id="cb27-7"><a aria-hidden="true" href="#cb27-7" tabindex="-1"></a><span class="er">         </span><span class="dt">"id"</span><span class="fu">:</span><span class="er"> </span><span class="st">"85a6cc52-0589-45f9"</span><span class="fu">,</span></span>
<span id="cb27-8"><a aria-hidden="true" href="#cb27-8" tabindex="-1"></a><span class="er">         </span><span class="dt">"value"</span><span class="fu">:</span><span class="er"> </span><span class="st">"Overstay 60 minutes"</span></span>
<span id="cb27-9"><a aria-hidden="true" href="#cb27-9" tabindex="-1"></a><span class="er">      </span><span class="fu">}</span></span>
<span id="cb27-10"><a aria-hidden="true" href="#cb27-10" tabindex="-1"></a><span class="er">  </span><span class="fu">}</span></span>
<span id="cb27-11"><a aria-hidden="true" href="#cb27-11" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
</div></div>
  </div>
  <h2>Images</h2>
  <div class="example-container">
    <div>
      ::: FL<br/>
      &lt;img src="media/image2.png" &gt;<br/>
      :::<br/>
      <br/>
      ::: TF<br/>
      Figure 4.2.1-1: Overview of the NGSI-LD Information Model Structure<br/>
      :::<br/>
    </div>
    <div>
      <div class="FL" id="Figure_4.2.1-1">
<p><img src="media/image2.png"/></p>
</div>
<div class="TF" id>
<p>Figure 4.2.1‑1: Overview of the NGSI-LD Information Model Structure</p>
</div>
    </div>
  </div>
    <h2>Tables</h2>
  <div class="example-container">
    <div>
    ::: TH<br/>
    Table 4.3.5-2: Main implementation configurations<br/>
    :::<br/>
<br/>
    ::: TAL<br/>
    +-----------+-----------------------+-----------------------+<br/>
    | Descrip   | Temporal API          | RegistryAPI           |<br/>
    +===========+=======================+=======================+<br/>
    | Central   | none                  | none                  |<br/>
    +-----------+-----------------------+-----------------------+<br/>
    :::
    </div>
    <div>
<div class="TH" id="Table_4.3.5-2">
<p>Table 4.3.5‑2: Main implementation configurations</p>
</div>
<table style="width:99%;">
<colgroup>
<col style="width: 73%"/>
<col style="width: 13%"/>
<col style="width: 13%"/>
</colgroup>
<thead>
<tr>
<th><div class="TAH">
Description
</div></th>
<th><div class="TAH">
Temporal API
</div></th>
<th><div class="TAH">
RegistryAPI
</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="TAL">
Central
</div></td>
<td><div class="TAL">
none
</div></td>
<td><div class="TAL">
none
</div></td>
</tr>
</tbody>
</table>
    </div>
  </div>

<h2>Lists</h2>
<div class="example-container">
    <div>
      #### 5.6.8.3 Input data<br>
      <br>
      - A JSON-LD Array containing one or more JSON-LD documents each one representing an Entity as mandated by clause 5.2.4. See clause 5.5.11.2 for information on behaviour when there is more than one instance of the same entity in the input Array.<br>
      - An optional flag indicating the update mode (only applies in case the Entity already exists):<br>
      &nbsp;&nbsp;&nbsp;- Replace. All the existing Entity content shall be replaced (default mode).<br>
      &nbsp;&nbsp;&nbsp;- Update. Existing Entity content shall be updated.<br>
    </div>
    <div>
      <h4 data-number="10.6.8.3" id="5.6.8.3">5.6.8.3 Input data</h4>
<ul>
<li>A JSON-LD Array containing one or more JSON-LD documents each one representing an Entity as mandated by <a href="clause-5.html#5.2.4">clause 5.2.4</a>. See <a href="clause-5.html#5.5.11.2">clause 5.5.11.2</a> for information on behaviour when there is more than one instance of the same entity in the input Array.</li>
<li>An optional flag indicating the update mode (only applies in case the Entity already exists):
<ul>
<li>Replace. All the existing Entity content shall be replaced (default mode).</li>
<li>Update. Existing Entity content shall be updated.</li>
</ul></li>
</ul>
      </div>
</div>

<h2>Hardcoded links to clauses/figures/images</h2>

<div class="example-container">
    <div>
      See clauses 3.2, 1.2 and 5.6.8.3.<br/>
      Looking at Table 2.3-1.<br/>
      As shown in Figure 4.2.1-1.<br/>
      As mentioned in annex b.
    </div>
    <div>
      See clauses <a href="clause-3.html#3.2">3.2</a>, <a href="clause-1.html#1.2">1.2</a> and <a href="clause-5.html#5.6.8.3">5.6.8.3</a>.<br/>
      Looking at <a href="clause-2.html#2.3-1">table 2.3-1</a>.<br/>
      As shown in <a href="clause-4.html#4.2.1-1">figure 4.2.1-1</a>.<br/>
      As mentioned in <a href="annex-b.html">annex b</a>.
      </div>
</div>

<h2>Dynamic links to clauses/figures/images</h2>

<div class="example-container">
    <div>
      See Clause+++test+++root.2.3.<br/>
      Looking at Table+++below.<br/>
      As shown in Figure+++above.<br/>
      As mentioned in Clause+++root.
    </div>
    <div>
      See <a href="clause-3.html#3.2.3">clause 3.2.3</a>.<br/>
      Looking at <a href="clause-2.html#2.3-1">table 2.3-1</a>.<br/>
      As shown in <a href="clause-4.html#4.2.1-1">figure 4.2.1-1</a>.<br/>
      As mentioned in <a href="annex-b.html">annex b</a>.
      </div>
</div>

</body>
</html>