site-edits
#1
Open
junupark0507
wants to merge 5 commits from site-edits into master
pull from: site-edits
merge into: junikimm717:master
junikimm717:master
7 changed files with 282 additions and 108 deletions
-
129index.html
-
21src/index.ts
-
24src/main.ts
-
126src/style.css
-
1src/syllabus.ts
-
63syllabus.html
-
22vite.config.ts
@ -1,13 +1,130 @@ |
|||||
<!doctype html> |
|
||||
|
<!DOCTYPE html> |
||||
<html lang="en"> |
<html lang="en"> |
||||
<head> |
<head> |
||||
<meta charset="UTF-8" /> |
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
||||
<title>{제목}</title> |
|
||||
|
<title>6.S913 Fundamentals of Linux Systems</title> |
||||
|
<meta |
||||
|
name="description" |
||||
|
content="This website is intended to provide information about Juni Kim’s Linux operating system–related class" |
||||
|
/> |
||||
</head> |
</head> |
||||
<body> |
<body> |
||||
<div id="app"></div> |
|
||||
<script type="module" src="/src/main.ts"></script> |
|
||||
|
<h1>Fundamentals of linux systems</h1> |
||||
|
<div class="card"> |
||||
|
<a href="/syllabus">Syllabus</a> |
||||
|
</div> |
||||
|
<ul> |
||||
|
<li> |
||||
|
This class is intended as a crash course for students to understand the |
||||
|
basics of how modern Linux systems operate and for students to construct |
||||
|
one from scratch |
||||
|
</li> |
||||
|
<li> |
||||
|
Students are expected to be |
||||
|
<span class="highlight2" |
||||
|
>comfortable working in Unix/Linux environments and using the command |
||||
|
line</span |
||||
|
> |
||||
|
as their primary interface for development |
||||
|
</li> |
||||
|
<li> |
||||
|
Join <a href="https://piazza.com/mit/spring2026/6s913">piazza</a> to |
||||
|
receive Announcements and join class discussions |
||||
|
<!--piazza link inside a href--> |
||||
|
</li> |
||||
|
<li> |
||||
|
Lectures and lab hours will take place at |
||||
|
<span class="highlight3">34-301</span> |
||||
|
</li> |
||||
|
<li> |
||||
|
You can view the class content for a specific day by clicking the link |
||||
|
on the calendar |
||||
|
</li> |
||||
|
<li> |
||||
|
<span class="highlight1" |
||||
|
><a href="/syllabus">View the course syllabus </a></span |
||||
|
> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<h2>Schedule</h2> |
||||
|
<table class="calendar"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th><div class="date1">Sun</div></th> |
||||
|
<th>Mon</th> |
||||
|
<th>Tue</th> |
||||
|
<th>Wed</th> |
||||
|
<th>Thr</th> |
||||
|
<th>Fri</th> |
||||
|
<th><div class="date1">Sat</div></th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td></td> |
||||
|
<td></td> |
||||
|
<td> |
||||
|
<div class="date">20</div> |
||||
|
<div class="content"><a href="">Lecture 1</a></div> |
||||
|
<!-- a href ""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">21</div> |
||||
|
<div class="content"><a href="">Lecture 2</a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">22</div> |
||||
|
<div class="content"><a href=""></a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">23</div> |
||||
|
<div class="content"><a href="">Lecture 3</a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">24</div> |
||||
|
<div class="content"><a href=""></a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<div class="date">25</div> |
||||
|
<div class="content"><a href=""></a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">26</div> |
||||
|
<div class="content"><a href="">Lecture 4</a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">27</div> |
||||
|
<div class="content"><a href=""></a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">28</div> |
||||
|
<div class="content"><a href=""></a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">29</div> |
||||
|
<div class="content"><a href="">Lecture 5</a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="date">30</div> |
||||
|
<div class="content"><a href=""></a></div> |
||||
|
<!-- a href""사이에 lecture 페이지 링크 추가--> |
||||
|
<div class="end">Assignment DUE(11:59PM EST)</div> |
||||
|
</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
</body> |
</body> |
||||
|
<script type="module" src="/src/index.ts"></script> |
||||
</html> |
</html> |
||||
@ -0,0 +1,21 @@ |
|||||
|
import './style.css' |
||||
|
/*fetch("data/lecture_schedule.json") |
||||
|
.then(response => response.json()) |
||||
|
.then(data => { |
||||
|
document.getElementById("course-title").textContent = |
||||
|
`${data.course.title} (${data.course.semester})`; |
||||
|
|
||||
|
const scheduleList = document.getElementById("schedule"); |
||||
|
|
||||
|
data.weeks.forEach(week => { |
||||
|
const li = document.createElement("li"); |
||||
|
li.innerHTML = `
|
||||
|
<strong>${week.week}주차 (${week.date})</strong><br> |
||||
|
주제: ${week.topic} |
||||
|
`;
|
||||
|
scheduleList.appendChild(li); |
||||
|
}); |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error("schedule not loaded:", error); |
||||
|
});*/ |
||||
@ -1,24 +0,0 @@ |
|||||
import './style.css' |
|
||||
import typescriptLogo from './typescript.svg' |
|
||||
import viteLogo from '/vite.svg' |
|
||||
import { setupCounter } from './counter.ts' |
|
||||
|
|
||||
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
|
|
||||
<div> |
|
||||
<a href="https://vite.dev" target="_blank"> |
|
||||
<img src="${viteLogo}" class="logo" alt="Vite logo" /> |
|
||||
</a> |
|
||||
<a href="https://www.typescriptlang.org/" target="_blank"> |
|
||||
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" /> |
|
||||
</a> |
|
||||
<h1>Vite + TypeScript</h1> |
|
||||
<div class="card"> |
|
||||
<button id="counter" type="button"></button> |
|
||||
</div> |
|
||||
<p class="read-the-docs"> |
|
||||
Click on the Vite and TypeScript logos to learn more |
|
||||
</p> |
|
||||
</div> |
|
||||
`
|
|
||||
|
|
||||
setupCounter(document.querySelector<HTMLButtonElement>('#counter')!) |
|
||||
@ -1,96 +1,82 @@ |
|||||
:root { |
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; |
|
||||
line-height: 1.5; |
|
||||
font-weight: 400; |
|
||||
|
|
||||
color-scheme: light dark; |
|
||||
color: rgba(255, 255, 255, 0.87); |
|
||||
background-color: #242424; |
|
||||
|
|
||||
font-synthesis: none; |
|
||||
text-rendering: optimizeLegibility; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
|
||||
|
|
||||
a { |
|
||||
font-weight: 500; |
|
||||
color: #646cff; |
|
||||
text-decoration: inherit; |
|
||||
} |
|
||||
a:hover { |
|
||||
color: #535bf2; |
|
||||
} |
|
||||
|
|
||||
body { |
body { |
||||
margin: 0; |
|
||||
display: flex; |
|
||||
place-items: center; |
|
||||
|
place-items:top; |
||||
min-width: 320px; |
min-width: 320px; |
||||
min-height: 100vh; |
min-height: 100vh; |
||||
} |
} |
||||
|
|
||||
h1 { |
h1 { |
||||
font-size: 3.2em; |
|
||||
|
text-align: center; |
||||
|
font-size: 4.2em; |
||||
line-height: 1.1; |
line-height: 1.1; |
||||
} |
} |
||||
|
|
||||
#app { |
|
||||
max-width: 1280px; |
|
||||
margin: 0 auto; |
|
||||
padding: 2rem; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
ul { |
||||
|
|
||||
.logo { |
|
||||
height: 6em; |
|
||||
padding: 1.5em; |
|
||||
will-change: filter; |
|
||||
transition: filter 300ms; |
|
||||
} |
|
||||
.logo:hover { |
|
||||
filter: drop-shadow(0 0 2em #646cffaa); |
|
||||
} |
|
||||
.logo.vanilla:hover { |
|
||||
filter: drop-shadow(0 0 2em #3178c6aa); |
|
||||
|
text-align:left; |
||||
|
font-size: 2em; |
||||
|
line-height: 1.8; |
||||
} |
} |
||||
|
|
||||
.card { |
.card { |
||||
padding: 2em; |
|
||||
|
padding: 0.8em; |
||||
|
width: fit-content; |
||||
|
background-color: #d0ff00dc; |
||||
} |
} |
||||
|
|
||||
.read-the-docs { |
|
||||
color: #888; |
|
||||
|
.highlight1{ |
||||
|
color:blue; |
||||
|
font-size:1em; |
||||
|
font-weight:bold; |
||||
} |
} |
||||
|
|
||||
button { |
|
||||
border-radius: 8px; |
|
||||
border: 1px solid transparent; |
|
||||
padding: 0.6em 1.2em; |
|
||||
|
.highlight2{ |
||||
|
color:red; |
||||
font-size:1em; |
font-size:1em; |
||||
font-weight: 500; |
|
||||
font-family: inherit; |
|
||||
background-color: #1a1a1a; |
|
||||
cursor: pointer; |
|
||||
transition: border-color 0.25s; |
|
||||
|
font-weight:bold; |
||||
|
} |
||||
|
.highlight3{ |
||||
|
color:black; |
||||
|
font-size:1em; |
||||
|
font-weight:bold; |
||||
|
} |
||||
|
.highlight4{ |
||||
|
color:black; |
||||
|
font-size:1.4em; |
||||
|
font-weight:bold; |
||||
} |
} |
||||
button:hover { |
|
||||
border-color: #646cff; |
|
||||
|
|
||||
|
h2{ |
||||
|
font-size:3em; |
||||
|
line-height:3; |
||||
} |
} |
||||
button:focus, |
|
||||
button:focus-visible { |
|
||||
outline: 4px auto -webkit-focus-ring-color; |
|
||||
|
.calendar { |
||||
|
width: 100%; |
||||
|
table-layout: fixed; |
||||
|
border-collapse: collapse; |
||||
} |
} |
||||
|
|
||||
@media (prefers-color-scheme: light) { |
|
||||
:root { |
|
||||
color: #213547; |
|
||||
background-color: #ffffff; |
|
||||
|
.calendar th, |
||||
|
.calendar td { |
||||
|
border: 1px solid #ccc; |
||||
|
height: 170px; |
||||
|
text-align: center; |
||||
|
vertical-align: top; |
||||
} |
} |
||||
a:hover { |
|
||||
color: #747bff; |
|
||||
|
|
||||
|
.calendar th { |
||||
|
background: #f5f5f5; |
||||
|
} |
||||
|
.highlight5{ |
||||
|
font-size:1.3em; |
||||
|
color:black; |
||||
|
font-weight:bold; |
||||
|
|
||||
} |
} |
||||
button { |
|
||||
background-color: #f9f9f9; |
|
||||
|
h3{ |
||||
|
font-size:3em; |
||||
|
line-height:1; |
||||
|
font-weight:bold; |
||||
} |
} |
||||
|
.end{ |
||||
|
color:red; |
||||
} |
} |
||||
@ -0,0 +1 @@ |
|||||
|
import './style.css' |
||||
@ -1,13 +1,64 @@ |
|||||
<!doctype html> |
|
||||
|
<!DOCTYPE html> |
||||
<html lang="en"> |
<html lang="en"> |
||||
<head> |
<head> |
||||
<meta charset="UTF-8" /> |
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
||||
<title>{강의계획서 페이지}</title> |
|
||||
|
<title>6.S913 Fundamentals of Linux Systems-Syllabus</title> |
||||
</head> |
</head> |
||||
<body> |
<body> |
||||
<div id="app"></div> |
|
||||
<script type="module" src="/src/main.ts"></script> |
|
||||
|
<h1>Fundamentals of linux systems-Syllabus</h1> |
||||
|
<div class="card"><a href="/">Main</a></div> |
||||
|
<div class="topic"> |
||||
|
<ul> |
||||
|
<li> |
||||
|
<span class="highlight5">Assignment</span> |
||||
|
<div class="branch"> |
||||
|
The assignment for this course has four main parts, named |
||||
|
<span class="highlight4">busybox, kernel, user, image</span> |
||||
|
</div> |
||||
|
<br /> |
||||
|
<div class="branch"> |
||||
|
All parts must be completed and integrated together to receive |
||||
|
credit for the course |
||||
|
</div> |
||||
|
<br /> |
||||
|
<div class="branch"> |
||||
|
Assignment must be submitted by<span class="highlight4"> |
||||
|
Friday, January 30, 2026 11:59PM GMT-5</span |
||||
|
> |
||||
|
</div> |
||||
|
<br /> |
||||
|
<div class="branch"> |
||||
|
Students will be given a somewhat minimal scaffold for their |
||||
|
projects and will be responsible for submitting a tarball for their |
||||
|
project |
||||
|
</div> |
||||
|
<br /> |
||||
|
<div class="branch"> |
||||
|
<span class="highlight4" |
||||
|
>Docker is required on all systems, and Windows users are strongly |
||||
|
advised to use wsl</span |
||||
|
> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li> |
||||
|
The assignment should be done on sufficiently modern hardware (for |
||||
|
reference, you should expect to compile the linux kernel) |
||||
|
</li> |
||||
|
<li> |
||||
|
A significant part of this course is learning to maintain clean, |
||||
|
reproducible filesystem state |
||||
|
</li> |
||||
|
<li> |
||||
|
We will only grade |
||||
|
<span class="highlight4">the final submissions </span>of those who |
||||
|
have registered for credit. Submission logistics will be announced |
||||
|
later |
||||
|
</li> |
||||
|
<li> |
||||
|
<span class="highlight1"><a href="/">Back to Main</a></span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
</body> |
</body> |
||||
|
<script type="module" src="/src/syllabus.ts"></script> |
||||
</html> |
</html> |
||||
@ -0,0 +1,22 @@ |
|||||
|
import { dirname, resolve } from "node:path"; |
||||
|
import { fileURLToPath } from "node:url"; |
||||
|
import { defineConfig } from "vite"; |
||||
|
|
||||
|
const __dirname = dirname(fileURLToPath(import.meta.url)); |
||||
|
|
||||
|
export default defineConfig({ |
||||
|
server: { |
||||
|
watch: { |
||||
|
usePolling: true, |
||||
|
interval: 100, |
||||
|
}, |
||||
|
}, |
||||
|
build: { |
||||
|
rollupOptions: { |
||||
|
input: { |
||||
|
main: resolve(__dirname, "index.html"), |
||||
|
syllabus: resolve(__dirname, "syllabus.html"), |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue