Skip to content

Commit c9fc854

Browse files
majunze2001majunze2001
committed
Propose OSS page
- Integrated GitHub REST API with template CSS. - See source/oss/index.md for details.
1 parent 9f3bfd6 commit c9fc854

File tree

3 files changed

+217
-1
lines changed

3 files changed

+217
-1
lines changed

‎_config.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,8 @@ theme_config:
208208
People: /people || fa fa-user
209209
Funding: /funding || fa fa-info
210210
#tags: /tags/ || fa fa-tags
211-
GitHub: https://github.com/SymbioticLab || fab fa-github-alt
211+
Open Source: /oss || fab fa-github-alt
212+
#GitHub: https://github.com/SymbioticLab || fab fa-github-alt
212213
# Wiki: https://symbiotic.eecs.umich.edu/wiki || fab fa-wikipedia-w
213214
Join us: https://forms.gle/L3Syau9dBzi8eLxQ7 || fa fa-user-plus
214215
# Collaboration: https://docs.google.com/document/d/1mVPqfnqLz_CXVz8XyDLcB1BIlUyezY2A-t5mV33JZHw/edit?usp=sharing || fa fa-user-plus

‎custom/layouts/oss.njk‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
{% extends '_layout.njk' %}
2+
{% import '_macro/sidebar.njk' as sidebar_template with context %}
3+
4+
{% block title %}{{ page.title }}{% endblock %}
5+
6+
{% block class %}archive posts-collapse{% endblock %}
7+
8+
{% block content %}
9+
10+
<style>
11+
.card-container, .project-container {
12+
display: flex;
13+
flex-wrap: wrap;
14+
gap: 20px;
15+
justify-content: space-between;
16+
margin: 0;
17+
padding: 0;
18+
}
19+
20+
.project {
21+
width: 100%; /* Full width for each project */
22+
padding: 15px;
23+
box-sizing: border-box;
24+
background-color: #f9f9f9;
25+
border: 1px solid #ddd;
26+
border-radius: 8px;
27+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
28+
text-align: left;
29+
text-decoration: none;
30+
color: #333;
31+
display: flex;
32+
flex-direction: column;
33+
gap: 10px;
34+
}
35+
36+
.project:hover {
37+
cursor: pointer;
38+
border-color: #bbb;
39+
}
40+
41+
.project-header {
42+
display: flex;
43+
align-items: center;
44+
justify-content: space-between;
45+
margin-bottom: 10px;
46+
}
47+
48+
.project-logo {
49+
max-height: 50px;
50+
object-fit: contain;
51+
margin-left: 10px;
52+
}
53+
54+
.project-name {
55+
font-size: 20px;
56+
font-weight: bold;
57+
flex-grow: 1;
58+
}
59+
60+
.project-description {
61+
font-size: 14px;
62+
}
63+
64+
.project-details {
65+
display: flex;
66+
justify-content: flex-end;
67+
gap: 20px; /* Add space between details */
68+
font-size: 12px;
69+
color: #666;
70+
}
71+
72+
/* Fixed widths for consistent vertical alignment */
73+
.project-details .language {
74+
width: 50px; /* Fixed width for language */
75+
}
76+
77+
.project-details .stars, .project-details .forks {
78+
width: 30px; /* Fixed width for stars and forks */
79+
}
80+
81+
.project-details span {
82+
display: flex;
83+
align-items: center;
84+
gap: 5px;
85+
justify-content: space-between;
86+
}
87+
88+
.project-details i {
89+
color: #333;
90+
}
91+
92+
@media (max-width: 800px) {
93+
.project {
94+
width: calc(100% - 20px); /* Full width on smaller screens */
95+
}
96+
97+
/* Remove fixed widths on smaller screens for flexibility */
98+
.project-details .language,
99+
.project-details .stars,
100+
.project-details .forks {
101+
width: auto;
102+
}
103+
}
104+
</style>
105+
106+
<h1>Open Source Projects</h1>
107+
<div class="intro">
108+
<p>{{ page.content }}</p>
109+
</div>
110+
111+
{% for section in page.sections %}
112+
<section class="github-section">
113+
<h3>{{ section.title }}</h3>
114+
{% if section.description %}
115+
<p>{{ section.description }}</p>
116+
{% endif %}
117+
118+
<div class="project-container">
119+
{% for item in section.items %}
120+
<a href="{{ item.url or item.github_url }}" class="project" data-repo="{{ item.github_url }}">
121+
<div class="project-header">
122+
<div class="project-name">{{ item.name }}</div>
123+
{% if item.logo %}
124+
<img src="{{ item.logo }}" alt="{{ item.name }} logo" class="project-logo">
125+
{% endif %}
126+
</div>
127+
<div class="project-description">{{ item.description }}</div>
128+
{% if item.github_url %}
129+
<div class="project-details">
130+
<!-- Fixed width for consistent alignment, using FontAwesome icons -->
131+
<span class="language"><i class="fas fa-code"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-language">...</span></span>
132+
<span class="stars"><i class="fas fa-star"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-stars">...</span></span>
133+
<span class="forks"><i class="fas fa-code-branch"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-forks">...</span></span>
134+
</div>
135+
{% endif %}
136+
</a>
137+
{% endfor %}
138+
</div>
139+
</section>
140+
{% endfor %}
141+
142+
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <!-- FontAwesome Kit -->
143+
<script>
144+
document.addEventListener('DOMContentLoaded', function () {
145+
const projects = document.querySelectorAll('.project');
146+
147+
projects.forEach(project => {
148+
const githubUrl = project.getAttribute('data-repo');
149+
if (githubUrl) {
150+
// Construct the GitHub API URL by inserting "api." after "https://"
151+
const apiUrl = githubUrl.replace('https://github.com/', 'https://api.github.com/repos/');
152+
153+
fetch(apiUrl)
154+
.then(response => response.json())
155+
.then(data => {
156+
// Use project name to generate IDs
157+
const idPrefix = data.name.toLowerCase().replace(/ /g, '-');
158+
159+
document.getElementById(`${idPrefix}-language`).textContent = data.language || 'N/A';
160+
document.getElementById(`${idPrefix}-stars`).textContent = data.stargazers_count || 0;
161+
document.getElementById(`${idPrefix}-forks`).textContent = data.forks_count || 0;
162+
})
163+
.catch(error => console.error('Error fetching GitHub data:', error));
164+
}
165+
});
166+
});
167+
</script>
168+
{% endblock %}

‎source/oss/index.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: OSS
3+
date: 2024-10-05
4+
layout: oss
5+
sections:
6+
# Section name
7+
- title: "Energy-Efficient Systems"
8+
# Section description
9+
description: "Projects focused on optimizing energy use in software systems."
10+
items:
11+
# name: required
12+
# url and github_url: one of them must exists;
13+
# url is the hyperlink for project card;
14+
# github_url fetches repo detail if exists and serves the hyperlink if url is not present
15+
# logo: optional, expecting an image url
16+
# description: required, currently only support plain text
17+
- name: "Zeus"
18+
url: ""
19+
github_url: "https://github.com/ml-energy/zeus"
20+
logo: "https://ml.energy/zeus/assets/img/logo_light.svg"
21+
description: "Zeus is a library for (1) measuring the energy consumption of Deep Learning workloads and (2) optimizing their energy consumption. Zeus is part of The ML.ENERGY Initiative."
22+
23+
- title: "Systems + AI"
24+
description: "Combining AI with traditional systems research."
25+
items:
26+
- name: "Oobleck"
27+
url: "https://ml.energy/oobleck"
28+
github_url: "https://github.com/SymbioticLab/Oobleck"
29+
logo: ""
30+
description: "Oobleck is a large-model training framework with fast fault recovery support utilizing the concept of pipeline templates. It is the first training framework that realizes Dynamic reconfiguration and Pipeline template instantiation."
31+
- name: "FedScale"
32+
url: ""
33+
github_url: "https://github.com/SymbioticLab/FedScale"
34+
logo: ""
35+
description: "Placeholder for project details."
36+
37+
- title: "Memory systems"
38+
description: "Research on tiered (including disaggregated) memory systems."
39+
items:
40+
- name: "Transparent Page Placement for Tiered-Memory"
41+
url: "https://lwn.net/Articles/876993/"
42+
github_url: ""
43+
logo: ""
44+
description: "A Linux patch that enhances memory management in NUMA systems by promoting pages from slow-tier memory (e.g., CXL) to faster toptier memory (e.g., DDR) using an updated AutoNUMA mechanism. It separates reclamation and allocation processes, allowing the toptier to maintain free space for high-demand pages, reducing frequent page migrations. Testing on Meta workloads showed significant performance improvements, lowering remote NUMA read bandwidth and decreasing throughput regression."
45+
46+
---
47+
Disclaimer: placeholder

0 commit comments

Comments
 (0)