Propose OSS page

README.md

@@ -12,6 +12,8 @@ node_modules/.bin/hexo new news "News Title"
 ```
 
 ## Testing Locally
+Use Node.js 16, because there are known issues with newer versions. [nvm](https://github.com/nvm-sh/nvm) is recommended.
+
 You can start a server locally.
 ```
 npm start

_config.yml

@@ -208,7 +208,8 @@ theme_config:
     People: /people || fa fa-user
     Funding: /funding || fa fa-info
     #tags: /tags/ || fa fa-tags
-    GitHub: https://github.com/SymbioticLab || fab fa-github-alt
+    Open Source: /open-source || fab fa-github-alt
+    #GitHub: https://github.com/SymbioticLab || fab fa-github-alt
     # Wiki: https://symbiotic.eecs.umich.edu/wiki || fab fa-wikipedia-w
     # Join us: https://forms.gle/L3Syau9dBzi8eLxQ7 || fa fa-user-plus
     # Collaboration: https://docs.google.com/document/d/1mVPqfnqLz_CXVz8XyDLcB1BIlUyezY2A-t5mV33JZHw/edit?usp=sharing || fa fa-user-plus

custom/layouts/open-source.njk

@@ -0,0 +1,174 @@
+{% extends '_layout.njk' %}
+{% import '_macro/sidebar.njk' as sidebar_template with context %}
+
+{% block title %}{{ page.title }}{% endblock %}
+
+{% block class %}archive posts-collapse{% endblock %}
+
+{% block content %}
+
+<style>
+  .card-container, .project-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+  }
+
+  .project {
+    width: 48%; /* Full width for each project */
+    padding: 15px;
+    padding-top: 4px;
+    box-sizing: border-box;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+    text-align: left;
+    text-decoration: none;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .project:hover {
+    cursor: pointer;
+    border-color: #bbb;
+  }
+
+  .project-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+
+  .project-logo {
+    max-height: 50px;
+    object-fit: contain;
+    margin-right: 2px;
+  }
+
+  .project-name {
+    font-size: 20px;
+    font-weight: bold;
+    flex-grow: 1;
+  }
+
+  .project-description {
+    font-size: 14px;
+  }
+
+  .project-details {
+    display: flex;
+    justify-content: flex-start;
+    gap: 20px; /* Add space between details */
+    font-size: 12px;
+    color: #666;
+  }
+
+  /* Fixed widths for consistent vertical alignment */
+  .project-details .language {
+    width: 50px; /* Fixed width for language */
+  }
+
+  .project-details .stars, .project-details .forks {
+    width: 30px; /* Fixed width for stars and forks */
+  }
+
+  .project-details span {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    justify-content: space-between;
+  }
+
+  .project-details i {
+    color: #333;
+  }
+
+  @media (max-width: 800px) {
+    .project {
+      width: calc(100% - 20px); /* Full width on smaller screens */
+      margin: 0 auto;
+    }
+
+    /* Remove fixed widths on smaller screens for flexibility */
+    .project-details .language,
+    .project-details .stars,
+    .project-details .forks {
+      width: auto;
+    }
+  }
+</style>
+
+<h1>Open Source Projects</h1>
+<div class="intro">
+  <p>{{ page.content }}</p>
+</div>
+
+{% for section in page.sections %}
+  <section class="github-section">
+    <h3>{{ section.title }}</h3>
+    {% if section.description %}
+      <p>{{ section.description }}</p>
+    {% endif %}
+
+    <div class="project-container">
+      {% for item in section.items %}
+        <a href="{{ item.url or item.github_url }}" class="project" data-repo="{{ item.github_url }}">
+          <div class="project-header">
+          <span>
+            <div class="project-name">{{ item.name }}</div>
+          {% if item.github_url %}
+            <div class="project-details">
+              <!-- Fixed width for consistent alignment, using FontAwesome icons -->
+              <span class="language"><i class="fas fa-code"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-language">...</span></span>
+              <span class="stars"><i class="far fa-star"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-stars">...</span></span>
+              <span class="forks"><i class="fas fa-code-branch"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-forks">...</span></span>
+            </div>
+          {% endif %}
+          </span>
+          {% if item.logo %}
+            <span style="width: {{ item.logo_scale or '100%' }}">
+              <img src="{{ item.logo }}" alt="{{ item.name }} logo" class="project-logo">
+            </span>
+          {% endif %}
+          </div>
+          <div class="project-description">{{ item.description }}</div>
+        </a>
+      {% endfor %}
+    </div>
+  </section>
+{% endfor %}
+
+<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <!-- FontAwesome Kit -->
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const projects = document.querySelectorAll('.project');
+
+    projects.forEach(project => {
+      const githubUrl = project.getAttribute('data-repo');
+      if (githubUrl) {
+        // Construct the GitHub API URL by inserting "api." after "https://"
+        const apiUrl = githubUrl.replace('https://github.com/', 'https://api.github.com/repos/');
+
+        fetch(apiUrl)
+          .then(response => response.json())
+          .then(data => {
+            // Use project name to generate IDs
+            const idPrefix = data.name.toLowerCase().replace(/ /g, '-');
+
+            document.getElementById(`${idPrefix}-language`).textContent = data.language || 'N/A';
+            document.getElementById(`${idPrefix}-stars`).textContent = data.stargazers_count || 0;
+            document.getElementById(`${idPrefix}-forks`).textContent = data.forks_count || 0;
+          })
+          .catch(error => console.error('Error fetching GitHub data:', error));
+      }
+    });
+  });
+</script>
+{% endblock %}

source/open-source/index.md

@@ -0,0 +1,56 @@
+---
+title: Open Source
+date: 2025-03-18
+layout: open-source
+
+# Sections schema
+# - title: "Section title"
+#   description: "Section description"
+#   items:
+#     - name: "Project title"
+#       description: "Project description to put in the body of the card"
+#       github_url: "GitHub repository link"
+#       url: "Optional: Link to open when the project card is clicked; falls back to `github_url` if omitted"
+#       logo: "Optional: Link to logo file"
+#       logo_scale: "Optional: will be added as CSS height: `logo_scale`"
+
+sections:
+  - title: "Energy-Efficient Systems"
+    description: "Projects focused on optimizing energy use in software systems."
+    items:
+      - name: "Zeus"
+        url: "https://ml.energy/zeus"
+        github_url: "https://github.com/ml-energy/zeus"
+        logo: "/open-source/logo/zeus.svg"
+        logo_scale: 70%
+        description: "Deep learning energy measurement and optimization."
+
+  - title: "Systems for AI"
+    description: "Building efficient systems for AI workloads."
+    items:
+      - name: "Cornstarch"
+        github_url: "https://github.com/cornstarch-org/Cornstarch"
+        logo: "/open-source/logo/cornstarch.svg"
+        description: "Build, train, and run your own multimodal model."
+      - name: "Oobleck"
+        github_url: "https://github.com/SymbioticLab/Oobleck"
+        description: "A resilient distributed training framework."
+      - name: "FedScale"
+        url: "https://fedscale.ai"
+        github_url: "https://github.com/SymbioticLab/FedScale"
+        logo: "/open-source/logo/fedscale.png"
+        logo_scale: 45%
+        description: "A scalable and extensible federated learning platform."
+
+  - title: "Memory systems"
+    description: "Building practical disaggregated and/or tiered memory systems."
+    items:
+      - name: "TPP (Transparent Page Placement)"
+        url: "https://lwn.net/Articles/876993/"
+        github_url: ""
+        logo: ""
+        description: "TPP is now part of the Linux kernel."
+
+---
+
+We build strong open-source software based on research, meant for adoption in the real world.