News & Events

Code

# This cell loads the CSV data directly from the Google sheet via its published CSV-specific URL.

# We need to load in Python, as OJS doesn't have a caching system. Once loaded, we "publish" the variable globally to OJS.
# This block is run in Python as we need Pandas for the necessary caching functionality.
import pandas as pd
news_data_cached = pd.read_csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vRqatWozaX_-OaBG_9Peoj4RknvI1OMUOpHUbb8TvzzN8aB5VFGLpLTlqrkY9iavuKZPl9eH0I3Aozm/pub?gid=0&single=true&output=csv")
ojs_define(news_data_cached = news_data_cached)

Code

// This cell transposes the Python-loaded data.

// We loaded the data from Google sheets via Python Pandas to allow for caching.
// This cell transposes the data presented from Python, as numpy & OJS expect data in opposite order.
// We do this in OJS to make conversion easier.
news_data = transpose(news_data_cached)

Code

// This cell iterates through the the news data, and builds the displayed output.
html`
<div id="news" class="list-grid">
  ${news_data.map(row => html`
    <div class="card ${row.category}" ${row.date ? `item_date="${row.date}"` : ""}>
      <div class="card-body">
        <div class="card-header">
          <span class="badge badge-${row.category?.toLowerCase()}">${row.category}</span>
          ${row.fontawesome ? `<div class="icon"><i class="${row.fontawesome}"></i></div> ` : ""}
        </div>
        <h3>${row.title}</h3>
        <div class="card-desc">
          ${md`${row.description}`}
          ${row.date ? `<div class="card-date"><i class="fa-regular fa-calendar fa-xs"></i> ${row.date}</div>`: ""}
        </div>
        <a href="${row.link}" class="card-link">
            More ... 
            <i class="fa-solid fa-arrow-right"></i>
        </a>
      </div>
    </div>
  `)}
</div>
`