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
-
130src/style.css
-
1src/syllabus.ts
-
63syllabus.html
-
22vite.config.ts
@ -1,13 +1,130 @@ |
|||
<!doctype html> |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<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> |
|||
<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> |
|||
<script type="module" src="/src/index.ts"></script> |
|||
</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 { |
|||
margin: 0; |
|||
display: flex; |
|||
place-items: center; |
|||
place-items:top; |
|||
min-width: 320px; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 3.2em; |
|||
text-align: center; |
|||
font-size: 4.2em; |
|||
line-height: 1.1; |
|||
} |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
text-align: center; |
|||
ul { |
|||
|
|||
text-align:left; |
|||
font-size: 2em; |
|||
line-height: 1.8; |
|||
} |
|||
.card { |
|||
padding: 0.8em; |
|||
width: fit-content; |
|||
background-color: #d0ff00dc; |
|||
} |
|||
|
|||
.logo { |
|||
height: 6em; |
|||
padding: 1.5em; |
|||
will-change: filter; |
|||
transition: filter 300ms; |
|||
.highlight1{ |
|||
color:blue; |
|||
font-size:1em; |
|||
font-weight:bold; |
|||
} |
|||
.logo:hover { |
|||
filter: drop-shadow(0 0 2em #646cffaa); |
|||
|
|||
.highlight2{ |
|||
color:red; |
|||
font-size:1em; |
|||
font-weight:bold; |
|||
} |
|||
.logo.vanilla:hover { |
|||
filter: drop-shadow(0 0 2em #3178c6aa); |
|||
.highlight3{ |
|||
color:black; |
|||
font-size:1em; |
|||
font-weight:bold; |
|||
} |
|||
.highlight4{ |
|||
color:black; |
|||
font-size:1.4em; |
|||
font-weight:bold; |
|||
} |
|||
|
|||
.card { |
|||
padding: 2em; |
|||
h2{ |
|||
font-size:3em; |
|||
line-height:3; |
|||
} |
|||
.calendar { |
|||
width: 100%; |
|||
table-layout: fixed; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
.read-the-docs { |
|||
color: #888; |
|||
.calendar th, |
|||
.calendar td { |
|||
border: 1px solid #ccc; |
|||
height: 170px; |
|||
text-align: center; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 8px; |
|||
border: 1px solid transparent; |
|||
padding: 0.6em 1.2em; |
|||
font-size: 1em; |
|||
font-weight: 500; |
|||
font-family: inherit; |
|||
background-color: #1a1a1a; |
|||
cursor: pointer; |
|||
transition: border-color 0.25s; |
|||
.calendar th { |
|||
background: #f5f5f5; |
|||
} |
|||
button:hover { |
|||
border-color: #646cff; |
|||
.highlight5{ |
|||
font-size:1.3em; |
|||
color:black; |
|||
font-weight:bold; |
|||
|
|||
} |
|||
button:focus, |
|||
button:focus-visible { |
|||
outline: 4px auto -webkit-focus-ring-color; |
|||
h3{ |
|||
font-size:3em; |
|||
line-height:1; |
|||
font-weight:bold; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
color: #213547; |
|||
background-color: #ffffff; |
|||
} |
|||
a:hover { |
|||
color: #747bff; |
|||
} |
|||
button { |
|||
background-color: #f9f9f9; |
|||
} |
|||
.end{ |
|||
color:red; |
|||
} |
|||
@ -0,0 +1 @@ |
|||
import './style.css' |
|||
@ -1,13 +1,64 @@ |
|||
<!doctype html> |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<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> |
|||
<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> |
|||
<script type="module" src="/src/syllabus.ts"></script> |
|||
</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