cc-resource-archive/docs/_layouts/listing.html at 2b9da79544980aa7e425c6793c3506b888df918d · creativecommons/cc-resource-archive · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
  <head>
    <title>{{ page.title }} | Creative Commons Resource Archive</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      href="/_assets/vocabulary/favicon/favicon.ico"
      sizes="any"
    />
    <link
      rel="icon"
      href="/_assets/vocabulary/favicon/favicon.svg"
      type="image/svg+xml"
    />
    <link
      rel="manifest"
      href="/_assets/vocabulary/favicon/manifest.webmanifest"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/_assets/vocabulary/favicon/apple-touch-icon.png"
    />
    <link rel="stylesheet" type="text/css" href="/_assets/css/style.css" />

    <!-- If the page is all.html, apply the following javascript -->
    {% if page.title == "All" %}
    <script src="/_assets/js/listing.js"></script>
    {% endif %}
  </head>

  <body class="listing-page">
    <!-- The standard CC header, located at docs/_includes/header.html -->
    {% include header.html %}

    <!-- If the page is all.html, then add a class "filter-grid" to <main>. Else, do not add the class -->
    {% if page.title == "All" %}
    <main class="filter-grid">
      {% else %}
      <main>
        {% endif %}
        <!-- The main heading for the site -->
        <header>
          <h1>Resources</h1>

          {% if page.title == "All" %}
          <p>
            Filter and access the resources below or
            <a href="/submit/">submit one here</a>
          </p>

          {% else %}
          <p>
            The resources related to Creative Commons. You can also
            <a href="/submit/">submit one here</a>
          </p>
          {% endif %}
        </header>

        <!-- If the page following this layout is All (all.html), then display the page content here -->
        {% if page.title == "All" %} {{content}} {% endif %}

        <!-- This is the section that shows all the resource cards in the site.
       The homepage shows upto 16 'featured' items ordered (1) to (16 or lesser) -->
        <ul id="thumbnaillist">
          {% for i in (1..16) %} {% for page in site.pages %} {% if page.layout
          =='resource' %} {% if page.featured == i %}
          <li
            class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}"
          >
            <article>
              <div class="card">
                <div class="card-content">
              <img class="thumbnail" src="{{page.image-thumb}}" alt="{% if
              page.image-alt %}{{ page.image-alt }} {% else %} '' {% endif %} "
              />
            </div>
          </div>
              <h3 class="thumbnailtitle">
                <a class="thumbnailLink" href="{{ page.permalink }}"
                  >{{ page.title }}</a
                >
              </h3>
              <p class="thumbnailblurb">{{ page.blurb }}</p>
            </article>
          </li>
          {% endif %} {% endif %} {% endfor %} {% endfor %}

          <!-- Apart from the homepage, we want to list all the resources present in the site.
         So this part lists the other resources apart from the starting 16. This does that on the basis
         of weight (1 to 4) property. -->
          {% unless page.title == 'Home' %} {% for i in (1..4) %} {% for page in
          site.pages %} {% if page.layout == 'resource' %} {% if page.weight ==
          i %} {% unless page.featured %} {% if page.paramfilter ==
          page.paramvalue %}
          <li
            class="thumbnailbox {{ page.topic }} {{ page.medium }} {{page.language}}"
          >
            <article>
              <img class="thumbnail" src="{{page.image-thumb}}" alt="{% if
              page.image-alt %}{{ page.image-alt }} {% else %} '' {% endif %} "
              />
              <h3 class="thumbnailtitle">
                <a class="thumbnailLink" href="{{ page.permalink }}"
                  >{{ page.title }}</a
                >
              </h3>
              <p class="thumbnailblurb">{{ page.blurb }}</p>
            </article>
          </li>
          {% endif %} {% endunless %} {% endif %} {% endif %} {% endfor %} {%
          endfor %} {% endunless %}
        </ul>

        <!-- If the page following this layout is Homepage (index.html), then display the page content here -->
        {% if page.title == "Home" %} {{content}} {% endif %}

        <!-- As we added two <main> tags above in the if statement, we will have to close it twice depending on the page -->
        {% if page.title == "All" %}
      </main>
      {% else %}
    </main>
    {% endif %}

    <!-- The standard CC footer, located at docs/_includes/footer.html -->
    {% include footer.html %}
  </body>

  <!-- Including vocabulary.js from vocabulary directory -->
  <script src="/_assets/vocabulary/js/vocabulary.js"></script>
</html>