CSCI E-12 Resources

• CSCI E-12 Resources

Snippet of Vue code that formats list of resources:

<ul class="resources">
    <li v-for="r in urls" class="resource">
        <a v-bind:href="r.url">
          <img v-if="r.image" v-bind:src="r.image" />
        </a>
        <div class="title">
          <a v-bind:href="r.url">{{ r.title }}</a>
        </div>
        <div class="hostname">{{ r.hostname }}</div>
        <div class="description">{{ r.description }}</div>
    </li>
</ul>

And the JSON data (snippet) that powers it:

{
  "urls": [
    {
      "url": "https://alistapart.com/",
      "title": "A List Apart",
      "description": "For people who make websites",
      "image": "https://i2.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=512%2C512&ssl=1"
    },
    {
      "url": "https://learn.jquery.com/",
      "title": "jQuery Learning Center",
      "keywords": "javascript, library",
      "image": "https://cscie12.dce.harvard.edu/images/site-card-jquery.png"
    },
    {
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview",
      "title": "An overview of HTTP | MDN",
      "description": "HTTP is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance, text, layout description, images, videos, scripts, and more.",
      "image": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview/fetching_a_page.png"
    },
    {
      "url": "http://www.w3.org/",
      "title": "World Wide Web Consortium (W3C)",
      "description": "The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.",
      "image": "https://www.w3.org/Icons/WWW/w3c_home_nb-v.svg"
    }, ... ]}