New homepage

author: Trumeet <yuuta@yuuta.moe> 2022-09-11 18:46:12 -0700
committer: Trumeet <yuuta@yuuta.moe> 2022-09-11 18:46:12 -0700
commit: 4ec83b487ea4bcdd1235ec01656da37d1138eca0 (patch)
tree: cdaf08cec26ebc4bb2122ce695a938ab6f1c77e5 /neo/src
parent: fc127e45e665fbade7b6e86a4044bbbef646715e (diff)
download: www-4ec83b487ea4bcdd1235ec01656da37d1138eca0.tar
www-4ec83b487ea4bcdd1235ec01656da37d1138eca0.tar.gz
www-4ec83b487ea4bcdd1235ec01656da37d1138eca0.tar.bz2
www-4ec83b487ea4bcdd1235ec01656da37d1138eca0.zip
17 files changed, 862 insertions, 0 deletions
diff --git a/neo/src/acron/index.html b/neo/src/acron/index.html
new file mode 100644
index 0000000..81198bd
--- /dev/null
+++ b/neo/src/acron/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Acron</title>
+		<link rel="stylesheet" href="/milligram.min.css">
+	</head>
+	<body>
+		<h1>Acron - Another rcon</h1>
+		<p>A rewrite of Minecraft rcon that uses WebSocket and JSON to manage the server.</p>
+		<p><b><a href="https://git.yuuta.moe/Minecraft/acron.git/about/">Learn more</a> or <a href="https://git.yuuta.moe/Minecraft/acron.git/">View source</a>.</b></p>
+		<h2>Problems with rcon</h2>
+		<ul>
+			<li>[Security] No authorization: All rcon clients are hardcoded with OP level 4 in the Minecraft source code. There are also no permission control, giving any faulty or even malicious client full control over the server.</li>
+			<li>[Security] Simple authentication: All clients are sharing the same secret, making the secret easy to leak and granting attackers unlimited access to the server.</li>
+			<li>[Efficiency] Rcon executes commands in a blocking manner. The server joins the main thread and waits for the command to complete before reading more from the client.</li>
+			<li>[Limit] Rcon does not support pushing server messages to the client. This includes player messages, death messages, server logs, etc. A lot of use cases need such information.</li>
+			<li>[Limit] Rcon has a fixed command length. Although it is not likely for a command to exceed this limit, it still restricts the use cases of rcon.</li>
+			<li>[Limit] Rcon commands are hard coded to run at the spawn point of Overworld. It is impossible to execute commands in other positions or dimensions if the command does not support so itself.</li>
+			<li>[Limit] No Unix domain socket support. Unix domain socket is a great way to do localhost IPC and controlling access using Unix user and groups. However, rcon is forced to listen on a TCP address and port.</li>
+			<li>[Performance] Minecraft creates a new thread per connection accepted, and it blocks for input. Using a thread pool or async IO is much more performant.</li>
+			<li>[Security] Rcon does not support TLS. It is just using plain TCP.</li>
+		</ul>
+		<h2>Problems Acron solved</h2>
+		<ul>
+			<li>[Security] Authentication and Authorization: With Acron, administrators are able to specify unique tokens for each client, and it is also possible to easily define the commands clients are permitted to execute using regex rules.</li>
+			<li>[Efficiency] Acron uses a command queue to schedule commands. Clients need to specify an ID, and Acron will return the result with the same ID once the command is done. In the meantime, clients can enqueue more commands.</li>
+			<li>[Limit] Server push: Acron will send player messages, death messages of living entities, player join / leave messages, and server lag warnings to the client. Acron also classifies the messages, so clients do not need to parse them manually.</li>
+			<li>[Limit] Command length: Acron does not limit command length.</li>
+			<li>[Limit] Locations and other configurations: Acron clients can specify the world, position, rotation, and name for each command they execute, or they can set a per-connection default.</li>
+			<li>[Limit] Unix domain socket: Sorry, currently Acron does not support Unix domain socket either. Unix domain sockets will be available in later versions.</li>
+			<li>[Performance] Acron uses Netty, which is built-in in Minecraft, to performance async IO using thread pools.</li>
+			<li>[Security] TLS: Although Acron does not support TLS itself, it is using WebSocket, which gives the choice of adding a reverse proxy with TLS support.</li>
+		</ul>
+		<h2>Technical Specification</h2>
+		<p>Acron is based on:</p>
+		<ul>
+			<li>WebSocket: Instead of designing a Layer 5 protocol, Acron chooses WebSocket to make the implementation of server and client easier. Moreover, WebSocket has a wide range of support compared to plain TCP sockets.</li>
+			<li>JSON: Although JSON is slow and schema-less, it comes with no addition dependencies as a Minecraft mod because Minecraft depends on GSON internally.</li>
+			<li>Netty: The WebSocket server is based on Netty because it is built-in in the Minecraft server.</li>
+			<li>GSON: Acron uses GSON to deserialize / serialize JSON since GSON is also a Minecraft dependency.</li>
+		</ul>
+		<h2>Learn More</h2>
+		<p><b>Get started by reading:</b></p>
+		<ul>
+			<li><a href="https://git.yuuta.moe/Minecraft/acron.git/about/">The complete documentation</a></li>
+			<li><a href="https://git.yuuta.moe/Minecraft/acron.git/about/#installation">How to install</a></li>
+			<li><a href="https://git.yuuta.moe/Minecraft/acron.git/">The source code</a></li>
+		</ul>
+		<p>Licensed under GPL v2.</p>
+	</body>
+</html>
+
diff --git a/neo/src/assets/images/container-background.jpg b/neo/src/assets/images/container-background.jpg
new file mode 100644
index 0000000..1a3f14e
--- /dev/null
+++ b/neo/src/assets/images/container-background.jpg
diff --git a/neo/src/assets/images/plus.svg b/neo/src/assets/images/plus.svg
new file mode 100644
index 0000000..4cc6141
--- /dev/null
+++ b/neo/src/assets/images/plus.svg
@@ -0,0 +1,32 @@
+<svg viewBox="0 0 256 256" width="256" height="256" 
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <filter id="noise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence baseFrequency="0.01 0.5" result="NOISE" numOctaves="2" />
+            <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="16" xChannelSelector="R" yChannelSelector="R" />
+        </filter>
+
+        <pattern id="ShapeT" x="0" y="0" width="64" height="64">
+            <path d="M48 28 L16 28 L16 36 L28 36 L28 52 L36 54 L36 36 L48 36 Z" fill="#006C7F" />
+        </pattern>
+
+        <pattern id="ShapeTri" x="0" y="0" width="64" height="64">
+            <path d="M16 48 L48 32 L32 16 Z" fill="#1D697C" />
+        </pattern>
+
+        <pattern id="Tile" x="0" y="0" width="128" height="128" patternUnits="userSpaceOnUse">
+            <rect fill="url(#ShapeT)" height="64" width="64" x="0" y="0">
+                <!-- <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 32 32" to="0 32 32" dur="16s" repeatCount="indefinite"/> -->
+            </rect>
+
+            <rect fill="url(#ShapeTri)" height="64" width="64" x="64" y="64">
+                <!-- <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 96 96" to="360 96 96" dur="8s" repeatCount="indefinite"/> -->
+            </rect>
+        </pattern>
+    </defs>
+
+    <g transform="rotate(-15)">
+        <rect fill="url(#Tile)" height="128" width="128" x="0" y="0" />
+        <rect fill="url(#Tile)" height="128" width="128" x="128" y="128" />
+    </g>
+</svg>
+\ No newline at end of file
diff --git a/neo/src/assets/images/yuuta.png b/neo/src/assets/images/yuuta.png
new file mode 100644
index 0000000..2f4407e
--- /dev/null
+++ b/neo/src/assets/images/yuuta.png
diff --git a/neo/src/assets/images/yuuta@1x.jpg b/neo/src/assets/images/yuuta@1x.jpg
new file mode 100644
index 0000000..0255fa9
--- /dev/null
+++ b/neo/src/assets/images/yuuta@1x.jpg
diff --git a/neo/src/assets/images/yuuta@1x.webp b/neo/src/assets/images/yuuta@1x.webp
new file mode 100644
index 0000000..dc705ee
--- /dev/null
+++ b/neo/src/assets/images/yuuta@1x.webp
diff --git a/neo/src/index.css b/neo/src/index.css
new file mode 100644
index 0000000..063729b
--- /dev/null
+++ b/neo/src/index.css
@@ -0,0 +1,104 @@
+@import '~@fortawesome/fontawesome-free/css/fontawesome.css';
+@import '~@fortawesome/fontawesome-free/css/brands.css';
+@import '~@fortawesome/fontawesome-free/css/regular.css';
+@import '~@fortawesome/fontawesome-free/css/solid.css';
+@import '~unsemantic/assets/stylesheets/unsemantic-grid-responsive.css';
+
+@import 'stylesheets/chem-elements.css';
+@import 'stylesheets/footer.css';
+@import 'stylesheets/header.css';
+@import 'stylesheets/identities.css';
+@import 'stylesheets/intro.css';
+@import 'stylesheets/labels.css';
+
+body {
+    background: url(./assets/images/plus.svg) #f68a99;
+
+    font-size: 1em;
+    margin: 0;
+    min-height: 100vh;
+    padding: 5vh 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+html {
+    font-family: 'Helvetica Neue', Helvetica, Arial, PingFangTC-Light, 'Microsoft YaHei', 微软雅黑, 'STHeiti Light',
+        STXihei, '华文细黑', Heiti, 黑体, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+#container {
+    background: url(./assets/images/container-background.jpg) grey;
+    background-size: cover;
+    box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
+    padding-top: 1em;
+    margin: 0 auto;
+    max-width: 64em;
+}
+
+.section.intro {
+    background: rgba(255, 255, 255, 0.85);
+}
+
+.no-wrap {
+    display: inline-block;
+}
+
+#container,
+#container > *:first-child {
+    border-top-left-radius: 2em;
+}
+
+#container,
+#container > *:last-child,
+#container > *:last-child > *:last-child {
+    border-bottom-right-radius: 2em;
+}
+
+.header .small-labels .group::before,
+.header .small-labels .label::before {
+    color: #eee;
+}
+
+.identities .small-labels .group::before,
+.identities .small-labels .label::before {
+    color: #333;
+}
+
+@media (max-width: 768px) {
+    body {
+        padding: 0;
+    }
+
+    #container {
+        padding: 0;
+    }
+
+    #container,
+    #container > *:first-child {
+        border-top-left-radius: 0;
+    }
+
+    #container,
+    #container > *:last-child,
+    #container > *:last-child > *:last-child {
+        border-bottom-right-radius: 0;
+    }
+
+    .section.header {
+        background: rgba(0, 0, 0, 0.75);
+    }
+
+    .intro .block .split {
+        padding: 0 0.5em;
+    }
+
+    .intro p {
+        border-left: none;
+        padding: 0.2em;
+    }
+}
diff --git a/neo/src/index.html b/neo/src/index.html
new file mode 100644
index 0000000..99b9a8b
--- /dev/null
+++ b/neo/src/index.html
@@ -0,0 +1,352 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link href="${require('./index.css')}" rel="stylesheet">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <title>Yuuta Liang</title>
+</head>
+
+<body>
+    <div id="container">
+        <div class="section header grid-container grid-parent">
+            <div class="split picture-container grid-40">
+                <a href="${require('./assets/images/yuuta.png')}">
+                    <picture class="picture">
+                        <source type="image/webp" srcset="${require('./assets/images/yuuta@1x.webp')}" />
+                        <img src="${require('./assets/images/yuuta@1x.jpg')}" alt="picture of Yuuta" />
+                    </picture>
+                </a>
+            </div>
+
+            <div class="split grid-60">
+                <div class="names">
+                    <h1 class="name">
+                        <span class="no-wrap">
+                            Yuuta Liang (a.k.a. YuutaW)
+                        </span>
+                    </h1>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">language</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fas fa-language"></i>
+                        汉语 / 普通话
+                    </span>
+                    <span class="label">English</span>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">location</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fas fa-location-arrow"></i>
+                        Vancouver
+                    </span>
+                    <span class="label">Beijing</span>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">aging</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fa fa-birthday-cake"></i>
+                        00's
+                    </span>
+                </div>
+
+                <br />
+
+                <div class="label-group">
+                    <span class="header">education</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fas fa-university"></i>
+			<a href="https://ubc.ca">UBC undergraduate</a>
+                    </span>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">major</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fas fa-university"></i>
+                        science
+                    </span>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">home-lab</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fas fa-box"></i>
+			<a href="https://cloud.yuuta.network">Yuuta Cloud</a>
+                    </span>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">noc-operator</span>
+                    <a class="label" href="#">
+                        <i aria-hidden="true" class="fas fa-network-wired"></i>
+                        <span class="content">AS142281</span>
+                    </a>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">platforms</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fab fa-linux"></i>
+                        arch BSD
+                    </span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fab fa-windows"></i>
+			WinSvr2022 Win10
+                    </span>
+                </div>
+
+		<br />
+
+                <div class="label-group">
+                    <span class="header">coding</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fa fa-code"></i>
+                        C Java
+                    </span>
+                    <span class="label">
+			POSIX Web Android
+                    </span>
+                    <span class="label">
+	                CLion Idea
+                    </span>
+                </div>
+
+                <div class="label-group">
+                    <span class="header">computer science</span>
+                    <span class="label">
+                        <i aria-hidden="true" class="fa fa-microchip"></i>
+                        operating systems
+                    </span>
+                    <span class="label">
+			embedded systems
+                    </span>
+                    <span class="label">
+			CPUs
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="section intro">
+            <h2><i aria-hidden="true" class="fa fa-chevron-right"></i>short intro</h2>
+
+            <div class="block grid-container grid-parent">
+                <div class="split grid-50 mobile-grid-100">
+                    <p>
+		    First year science student at UBC. Coding since grade three and always a computer / electronics enthusiast.<br />
+		    Some experience in Android development, POSIX development, and SRE. I did a little bit of analog circuits and PCB designing.<br />
+		    Running my own ASN and vSphere cluster.<br />
+		    I'm currently interested in OS, embedded, CPU, and electronics. Working hard.
+                    </p>
+                    <p>
+		    UBC 理学院 <small>萌萌哒</small>大一新生。三年级开始写程序，超喜欢计算机和电路设计。<br />
+                    写过一些 Android 和 POSIX 程序，玩过一些运维。曾经做过一点点模拟电路和 PCB 设计。<br />
+		    也有在跑自己的 ASN 和 vSphere 集群。<br />
+		    目前感兴趣的领域是操作系统 / 嵌入式 / CPU / 电路方向。努力学习中w
+                    </p>
+		    <p>
+		    I'm also an old school developer and Unix lover. I do lots of projects in C.<br />
+		    I also host a lot of things to support the decentralized Internet.
+		    </p>
+		    <p>
+		    喜欢老的东西以及 Unix，因此很多项目都是 C 写的。<br />
+		    同时也在自建很多东西来支持去中心化的互联网。
+		    </p>
+                </div>
+
+                <div class="split grid-50 mobile-grid-100">
+                    <figure class="identities">
+                        <figcaption><i class="fas fa-external-link-alt"></i>open-source</figcaption>
+                        <ul>
+                            <li>
+                                <a href="https://git.yuuta.moe/">
+                                    <i aria-hidden="true" class="fab fa-git"></i>
+                                    <span class="label">CGit Web</span>
+                                    <span class="fake-link">git.yuuta.moe</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://git.yuuta.moe/Trumeet/">
+                                    <i aria-hidden="true" class="fab fa-github"></i>
+                                    <span class="label">GitHub</span>
+                                    <span class="fake-link">@Trumeet</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </figure>
+
+                    <figure class="identities">
+                        <figcaption><i class="fas fa-external-link-alt"></i>reach me</figcaption>
+                        <ul>
+                            <li>
+                                <a href="https://twitter.com/NeoTrumeet/">
+                                    <i aria-hidden="true" class="fab fa-twitter"></i>
+                                    <span class="label">Twitter</span>
+                                    <span class="fake-link">@NeoTrumeet</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <i aria-hidden="true" class="fab fa-telegram"></i>
+                                    <span class="label">Matrix</span>
+                                    <span class="fake-link">@yuuta:yuuta.moe</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </figure>
+                    <figure class="identities">
+                        <figcaption><i class="fas fa-external-link-alt"></i>sites</figcaption>
+                        <ul>
+                            <li>
+                                <a href="https://ftp.yuuta.moe/">
+                                    <i aria-hidden="true" class="fa fa-file"></i>
+                                    <span class="label">FTP</span>
+                                    <span class="fake-link">ftp.yuuta.moe</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://blog.yuuta.moe/">
+                                    <i aria-hidden="true" class="fa fa-rss"></i>
+                                    <span class="label">Blog</span>
+                                    <span class="fake-link">Garden in the Wonderland</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://yuuta.network/">
+                                    <i aria-hidden="true" class="fa fa-plug"></i>
+                                    <span class="label">YuutaNet</span>
+                                    <span class="fake-link">yuuta.network</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </figure>
+                    <figure class="identities">
+                        <figcaption><i class="fas fa-external-link-alt"></i>notable projects</figcaption>
+                        <ul>
+                            <li>
+                                <a href="https://git.yuuta.moe/Minecraft/acron.git">
+                                    <i aria-hidden="true" class="fa fa-gamepad"></i>
+                                    <span class="label">Acron</span>
+                                    <span class="fake-link">acron.git</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://git.yuuta.moe/Minecraft/minecraft-pacman.git">
+                                    <i aria-hidden="true" class="fa fa-gamepad"></i>
+                                    <span class="label">Minecraft-Pacman</span>
+				    <span class="fake-link">minecraft-pacman.git</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://github.com/MiPushFramework/MiPushFramework/">
+                                    <i aria-hidden="true" class="fa fa-rss"></i>
+                                    <span class="label">[Archived] MiPushFramework</span>
+                                    <span class="fake-link">MiPushFramework.git</span>
+                                </a>
+                            </li>
+                            <li>
+		                <a href="/projs/">
+                                    <i aria-hidden="true" class="fas fa-external-link-alt"></i>
+                                    <span class="label">Others</span>
+                                    <span class="fake-link">projs</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </figure>
+                </div>
+            </div>
+        </div>
+
+        <div class="section intro">
+            <h2><i aria-hidden="true" class="fa fa-chevron-right"></i>/me</h2>
+
+            <div class="block grid-container grid-parent">
+                <div class="split grid-50 mobile-grid-100">
+                    <p>
+		    喜欢可爱的东西和可爱的人。<br />
+		    游戏玩得不多，常玩 osu!std 和 Minecraft <small>以及一些 gal</small>。<br />
+		    平时喜欢听 VOCALOID 和 J-Pop。动画什么的也有在看但是不是很多。<br />
+		    平时有空做的最多的事情就是写代码和水群。<br />
+		    很能咕，大鸽子（<br />
+                    </p>
+                    <p>
+		    最喜欢的番是 <a href="https://zh.moegirl.org.cn/CLANNAD">CLANNAD</a>：看的第一部番，神剧无需多言。<br />
+		    最喜欢的 <a href="https://zh.moegirl.org.cn/zh-hans/VOCALOID%E8%81%8C%E4%BA%BA">VOCALOID P 主</a> 是 <a href="https://www.youtube.com/channel/UCam3IAA-nyfxRL8_wDQ35VA/">MIMI</a>：强烈推荐，非常好听，十分治愈。<br />
+		    最喜欢的歌姬是 <a href="https://zh.moegirl.org.cn/%E5%88%9D%E9%9F%B3%E6%9C%AA%E6%9D%A5#">初音未来</a>，<a href="https://zh.moegirl.org.cn/IA">IA</a> 和 <a href="https://zh.moegirl.org.cn/%E5%8F%AF%E4%B8%8D">Kafu</a> 也很不错。<br />
+		    最喜欢的小说是三体。<br />
+		    最喜欢的人 ..... 还没有吧（
+                    </p>
+		    <p>
+		    </p>
+                </div>
+
+                <div class="split grid-50 mobile-grid-100">
+                    <figure class="identities">
+                        <figcaption><i class="fas fa-external-link-alt"></i>profiles</figcaption>
+                        <ul>
+                            <li>
+                                <a href="https://osu.ppy.sh/users/23872922">
+                                    <i aria-hidden="true" class="fab fa-accessible-icon"></i>
+                                    <span class="label">osu!</span>
+                                    <span class="fake-link">Yuuta_Liang</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </figure>
+
+                    <div class="label-group">
+                        <span class="header alt"><i aria-hidden="true" class="fas fa-tag"></i>anime</span>
+
+			<span class="label">CLANNAD</span>
+                    </div>
+
+                    <div class="label-group">
+                        <span class="header alt"><i aria-hidden="true" class="fas fa-tag"></i>games</span>
+
+                        <span class="label">Minecraft: Java Edition</span>
+			<span class="label">osu! standard</span>
+			<span class="label">千恋万花</span>
+			<p><img src="https://project.chinalcmod.com/osu/sig.php?colour=hexff66aa&uname=Yuuta_Liang&pp=1&countryrank&removeavmargin&darktriangles&xpbar" /></p>
+                    </div>
+
+                    <div class="label-group">
+                        <span class="header alt"><i aria-hidden="true" class="fas fa-tag"></i>music</span>
+
+			<span class="label">MIMI</span>
+			<span class="label">Orangestar</span>
+			<span class="label">Hatsune Miku</span>
+			<span class="label">IA</span>
+			<span class="label">Kafu</span>
+			<span class="label">REOL</span>
+			<span class="label">YOASOBI</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="section footer">
+            <a class="hosting" href="https://github.com/amphineko/amphineko">
+                <i aria-hidden="true" class="fas fa-code-branch"></i> Fork this template on GitHub. Template by @amphineko, licensed under MIT.</a>
+        </div>
+
+        <div class="section footer shadow">
+            <a class="hosting" href="//blog.yuuta.moe/donate">
+                <i aria-hidden="true" class="far fa-heart"></i> Donate me!
+            </a>
+            <div class="copyright">
+                <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
+		Copyright © 2017 - 2022 YuutaW. Illustrations have their own licenses.<br />
+		Background image: <a class="copyright" href="https://www.pixiv.net/artworks/91882132">"Glow" by Rella</a><br />
+		Profile photo: Fuko, CLANNAD
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/neo/src/index.js b/neo/src/index.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/neo/src/index.js
diff --git a/neo/src/minecraft-pacman/index.html b/neo/src/minecraft-pacman/index.html
new file mode 100644
index 0000000..22a62cb
--- /dev/null
+++ b/neo/src/minecraft-pacman/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang=en>
+	<head>
+		<meta charset="utf-8">
+		<title>Minecraft Pacman</title>
+		<link rel="stylesheet" href="/milligram.min.css">
+	</head>
+	<body>
+		<h1>Minecraft Pacman</h1>
+		<h2>Manage Minecraft and Fabric versions using pacman(1)!</h2>
+		<p>The best way to install Minecraft on Arch Linux.</p>
+		<h2>Downloads</h2>
+		<p><a href="https://git.yuuta.moe/Minecraft/minecraft-pacman.git/snapshot/minecraft-pacman-master.tar">Latest Tarball</a>, <a href="https://git.yuuta.moe/Minecraft/minecraft-pacman.git">Git</a> and <a href="https://git.yuuta.moe/Minecraft/minecraft-pacman.git/about/">README.md</a>.</p>
+		<h2>How does it work</h2>
+		<p>Minecraft and Fabric binaries and just ordinary files. Therefore, it is possible to install and upgrade multiple versions globally (and also natively) using pacman(1) on Arch Linux.</p>
+		<p>Installation in home directories have multiple disadvantages: users cannot share them, and there is no standard way of upgrading. Most importantly, * most * Minecraft launchers on the Internet have significant disadvantages that prevent me from using them.</p>
+		<p>Thus, I made a series of PKGBUILD files to download, package and install Minecraft (and also Fabric) as packages on your Arch Linux system.</p>
+		<p>However, Minecraft and Fabric contains lots of (3.3k) files. Manually keeping track of them and adding them to PKGBUILDs would be a nightmare. This is when I wrote a custom generator in C that automatically downloads version.json files and exporting the variables for PKGBUILDs' uses.</p>
+		<p>This project also adheres the Unix philosophy: it only bundles Minecraft files and nothing more. All runtime configurations, for example arguments, are stored in environment files that are easily parsed using shell scripts, so you can make a simple launcher in POSIX shell within a hundred of lines.</p>
+		<h2>How to use it</h2>
+		<p>Great! You now knows why it's better to install Minecraft as Arch Linux packages, so let's go over the installation procedure.</p>
+		<p>Because PKGBUILDs are dynamically generated, and Mojang prohibits the distribution of Minecraft files (I think this includes manifest jsons as well), I could not provide ready-to-use packages or PKGBUILDs. You have to generate PKGBUILDs and make them on your own. No worry, this process is simple.<p>
+		<p>Just <a href="https://git.yuuta.moe/Minecraft/minecraft-pacman.git/snapshot/minecraft-pacman-master.tar">download the latest source tarball</a> and run <code>./switch 1.18.1</code>, so PKGBUILDs will be generated. Then, run <code>makepkg</code> in <code>mc/</code> to create Minecraft packages.</p>
+		<p>For assets (sounds, extra textures, languages, etc) and Fabric, as well as the exported variables, please consult <a href="https://git.yuuta.moe/Minecraft/minecraft-pacman.git/about/">README</a>.</p>
+		<br />
+		<p>Licensed under GPL v2.</p>
+	</body>
+</html>
diff --git a/neo/src/stylesheets/chem-elements.css b/neo/src/stylesheets/chem-elements.css
new file mode 100644
index 0000000..49c1ca5
--- /dev/null
+++ b/neo/src/stylesheets/chem-elements.css
@@ -0,0 +1,25 @@
+.chem-element {
+    background: rgba(255, 163, 163, 0.09);
+    border-radius: 0.25em;
+    box-shadow: 0 0 0.1em 0.1em rgba(0, 0, 0, 0.05);
+    color: #fff;
+    margin-left: -0.35em;
+    margin-right: -0.25em;
+    padding: 0.2em 0.1em 0.2em 0.35em;
+    transition-duration: 0.5s;
+}
+
+.chem-element:hover {
+    box-shadow: 0 0 0.2em 0.2em rgba(255, 255, 255, 0.05);
+}
+
+
+.chem-element[data-element="neon"]::before {
+    content: '10';
+    font-size: 0.45em;
+    vertical-align: -0.5em;
+}
+
+.chem-element[data-element="neon"]:hover {
+    background: #faa3a3;
+}
diff --git a/neo/src/stylesheets/footer.css b/neo/src/stylesheets/footer.css
new file mode 100644
index 0000000..8bd8793
--- /dev/null
+++ b/neo/src/stylesheets/footer.css
@@ -0,0 +1,26 @@
+.footer.fab, .footer .fas, .footer .far {
+    text-align: center;
+    width: 1.25em;
+}
+
+.copyright {
+    background: rgba(53, 76, 100, 0.90);
+    color: #aaa;
+    font-size: 0.9em;
+    line-height: 2em;
+    padding: 0.5em 1em;
+}
+
+.hosting {
+    background: rgba(53, 76, 100, 0.90);
+    color: #ddd;
+    font-size: 0.9em;
+    font-weight: normal;
+    display: block;
+    padding: 0.75em 1em;
+    text-decoration: none;
+}
+
+.hosting .link {
+    color: #acd;
+}
diff --git a/neo/src/stylesheets/header.css b/neo/src/stylesheets/header.css
new file mode 100644
index 0000000..6cce44f
--- /dev/null
+++ b/neo/src/stylesheets/header.css
@@ -0,0 +1,67 @@
+.section.header {
+    align-items: center;
+    display: flex;
+}
+
+@media (max-width: 768px) {
+    .section.header {
+        flex-direction: column;
+    }
+}
+
+.section.header .split {
+    padding: 0 1em;
+}
+
+.section.header .name {
+    color: #f5f5f5;
+    display: inline-block;
+    font-weight: 300;
+    line-height: 1.25em;
+    margin: 0.25em 0;
+    margin-right: 0.5em;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+.section.header .name .chem-element {
+    text-decoration: none;
+}
+
+.section.header .name::after {
+    bottom: 0em;
+    color: #aaa;
+    display: inline-block;
+    font-size: 0.5em;
+    position: relative;
+}
+
+.section.header .name.lang-cn::after {
+    content: 'zh-CN';
+}
+
+.section.header .name.lang-en::after {
+    content: 'en-US';
+}
+
+.section.header .name.lang-ja::after {
+    content: 'ja-JP';
+}
+
+.section.header .picture {
+    background: white;
+    border: 0.5em solid white;
+    border-radius: 50%;
+    box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15);
+    display: block;
+    overflow: hidden;
+}
+
+.section.header .picture img {
+    box-sizing: content-box;
+    height: 100%;
+    width: 100%;
+}
+
+.section.header .picture-container {
+    padding: 2em;
+}
diff --git a/neo/src/stylesheets/identities.css b/neo/src/stylesheets/identities.css
new file mode 100644
index 0000000..1c8ed8d
--- /dev/null
+++ b/neo/src/stylesheets/identities.css
@@ -0,0 +1,71 @@
+figure.identities {
+    border-bottom: 0.1em solid rgba(0, 0, 0, 0.05);
+    margin: 0.75em 0;
+}
+
+figure.identities:last-child {
+    border-bottom: none;
+}
+
+figure.identities figcaption {
+    color: #777;
+    line-height: 2em;
+    padding: 0 0.25em;
+}
+
+figure.identities figcaption i {
+    font-size: 1.21em;
+    margin-right: 0.5ch; /* margin from mystery space after identity brand icons */
+    text-align: center;
+    width: 1.5em;
+}
+
+figure.identities ul {
+    margin: 0;
+    padding: 0;
+}
+
+figure.identities ul li {
+    display: block;
+    list-style: none;
+    margin: 0.5em 0;
+}
+
+figure.identities ul li a {
+    color: #333;
+    display: block;
+    font-size: 1.1em;
+    line-height: 1.75em;
+    padding: 0.5em 0.25em;
+    text-decoration: none;
+    transition-duration: 0.25s;
+}
+
+figure.identities ul li a:hover {
+    background-color: rgba(1, 105, 124, 0.05);
+}
+
+figure.identities ul li a i {
+    font-size: 1.1em;
+    text-align: center;
+    width: 1.5em;
+}
+
+figure.identities ul li a .fake-link {
+    color: #317589;
+    float: right;
+}
+
+/* shutdown & redacted */
+
+figure.identities ul li.shutdown a .label,
+figure.identities ul li.shutdown a .fake-link {
+    text-decoration: line-through;
+    transition-duration: 0.25s;
+}
+
+figure.identities ul li.shutdown a:hover .label,
+figure.identities ul li.shutdown a:hover .fake-link {
+    color: #ddd;
+    text-decoration-color: #c93756;
+}
diff --git a/neo/src/stylesheets/intro.css b/neo/src/stylesheets/intro.css
new file mode 100644
index 0000000..640d467
--- /dev/null
+++ b/neo/src/stylesheets/intro.css
@@ -0,0 +1,63 @@
+.intro {
+    margin: 1.5em 0;
+    padding: 1em 0;
+}
+
+.intro .block .split {
+    padding: 0 1em;
+}
+
+.intro h2 {
+    font-weight: 300;
+    letter-spacing: 0.02em;
+    line-height: 2em;
+    margin: 0;
+}
+
+.intro h2 i.fa {
+    margin: 0.25em;
+    text-align: center;
+    width: 1em;
+}
+
+.intro p {
+    color: #555;
+    font-size: 1.2em;
+    font-weight: 300;
+    line-height: 1.75em;
+    margin: 1em 0;
+    overflow: auto;
+    padding: 0.5em 0.5em;
+}
+
+.intro .label-group {
+    border-bottom: .1em solid rgba(0,0,0,.05);
+    display: block;
+    margin-top: 3em;
+    width: 100%;
+}
+
+.intro .label-group:last-child {
+    border-bottom: none;
+}
+
+.intro .label-group .header.alt {
+    color: #777;
+    font-size: 1em;
+    padding: 0 0.25em;
+}
+
+.intro .label-group .header.alt .fa-tag {
+    font-size: 1.21em;
+    margin-right: 0.5ch;
+    text-align: center;
+    width: 1.5em;
+}
+
+.intro .label-group .label {
+    background: transparent;
+    box-shadow: none;
+    margin: 0.25em 0.25em;
+    padding: 0 0.25em;
+    transition-duration: .5s;
+}
diff --git a/neo/src/stylesheets/labels.css b/neo/src/stylesheets/labels.css
new file mode 100644
index 0000000..082c984
--- /dev/null
+++ b/neo/src/stylesheets/labels.css
@@ -0,0 +1,41 @@
+.label-group {
+    display: inline-block;
+    margin: 1.25em 0;
+    padding: 0 0.25em;
+    position: relative;
+}
+
+.label-group .header {
+    color: white;
+    display: block;
+    font-size: 0.8em;
+    left: 0;
+    padding: 0;
+    position: absolute;
+    text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
+    top: -1.75em;
+}
+
+.label-group .header.alt {
+    color: #333;
+}
+
+.label-group .label {
+    background: #eee;
+    box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.1);
+    color: #333;
+    display: inline-block;
+    line-height: 2.2em;
+    margin: 0.25em 0;
+    padding: 0 0.5em;
+}
+
+.label-group a.label {
+    text-decoration: none;
+}
+
+.label-group .label i {
+    font-size: 1.2em;
+    margin-right: 0.25em;
+    vertical-align: -0.05em;
+}
diff --git a/neo/src/stylesheets/links.css b/neo/src/stylesheets/links.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/neo/src/stylesheets/links.css
author	Trumeet <yuuta@yuuta.moe>	2022-09-11 18:46:12 -0700
committer	Trumeet <yuuta@yuuta.moe>	2022-09-11 18:46:12 -0700
commit	4ec83b487ea4bcdd1235ec01656da37d1138eca0 (patch)
tree	cdaf08cec26ebc4bb2122ce695a938ab6f1c77e5 /neo/src
parent	fc127e45e665fbade7b6e86a4044bbbef646715e (diff)
download	www-4ec83b487ea4bcdd1235ec01656da37d1138eca0.tar www-4ec83b487ea4bcdd1235ec01656da37d1138eca0.tar.gz www-4ec83b487ea4bcdd1235ec01656da37d1138eca0.tar.bz2 www-4ec83b487ea4bcdd1235ec01656da37d1138eca0.zip