mattions.github.com/categories.html at master · mattions/mattions.github.com · 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
---
layout: page
title: Categories
header: Posts By Category
---

<section class="section" style="padding-top: 100px;">
  <div class="container" style="max-width: 780px;">
    <a href="/" style="color: var(--text-muted); font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 32px;">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
      Back to Home
    </a>

    <h1 style="font-size: 2rem; font-weight: 800; margin-bottom: 40px;">Categories</h1>

    <!-- Static fallback content if Jekyll fails to process -->
    <div id="categoriesFallback" style="display: none;">
      <div style="margin-bottom: 32px;">
        <h2 id="academic" style="font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; color: var(--accent-blue);">Academic</h2>
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <div class="glass-card" style="padding: 16px 20px;">
            <a href="/2012/06/01/neuronvisio" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem;">Neuronvisio — A Neuron Companion</a>
            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 4px;">June 01, 2012 · #Academic</div>
          </div>
          <div class="glass-card" style="padding: 16px 20px;">
            <a href="/2012/06/04/multiscale-modelling" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem;">Multiscale Modelling — Integrating Electrical and Biochemical</a>
            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 4px;">June 04, 2012 · #Academic</div>
          </div>
          <div class="glass-card" style="padding: 16px 20px;">
            <a href="/2012/06/04/neuroml-and-standards" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem;">NeuroML & Standards</a>
            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 4px;">June 04, 2012 · #Academic</div>
          </div>
          <div class="glass-card" style="padding: 16px 20px;">
            <a href="/2012/06/05/science-and-society-program" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem;">Science and Society Program</a>
            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 4px;">June 05, 2012 · #Academic</div>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 32px;">
        <h2 id="sustainability" style="font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; color: var(--accent-green);">Sustainability</h2>
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <div class="glass-card" style="padding: 16px 20px;">
            <a href="/2012/06/05/sustainablesouk-a-geolocalized-market-to-trade-local-goods" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem;">SustainableSouk: A Geolocalized Market to Trade Local Goods</a>
            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 4px;">June 05, 2012 · #Sustainability</div>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 32px;">
        <h2 id="fintech" style="font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; color: #fbbf24;">FinTech</h2>
        <div style="display: flex; flex-direction: column; gap: 12px;">
          <div class="glass-card" style="padding: 16px 20px;">
            <a href="/2014/10/05/coinduit" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem;">Coinduit</a>
            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 4px;">October 05, 2014 · #FinTech</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Jekyll processed content -->
    {% for category in site.categories %}
    {% assign category_name = category[0] %}
    {% assign posts = category[1] %}
    {% if posts.size > 0 %}
    <div style="margin-bottom: 32px;" class="jekyll-content">
      <h2 id="{{ category_name | slugify }}" style="font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; color: var(--accent-blue);">
        {{ category_name }}
      </h2>
      <div style="display: flex; flex-direction: column; gap: 12px;">
        {% for post in posts %}
        <div class="glass-card" style="padding: 16px 20px;">
          <a href="{{ post.url }}" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem;">{{ post.title }}</a>
          <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 4px;">
            {{ post.date | date: "%B %d, %Y" }}
            {% if post.tags %} · {% for tag in post.tags %}#{{ tag }}{% if forloop.last != true %}, {% endif %}{% endfor %}{% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
</section>

<script>
  // If Jekyll didn't process the page, show the fallback content
  document.addEventListener('DOMContentLoaded', function() {
    const jekyllContent = document.querySelector('.jekyll-content');
    const fallback = document.getElementById('categoriesFallback');
    if (!jekyllContent && fallback) {
      fallback.style.display = 'block';
    }
  });
</script>