-
-
-
-
-
Browser Extension
-
Quick Bookmarks Menu
-
-
-
- A chrome extension gives you quick access to your bookmarks.
-
-
-
-
-
-
-
Userscript
-
Video Quality Fixer for Twitter
-
-
- Force highest quality playback for Twitter videos.
-
-
-
-
-
-
-
Browser Extension
-
Blank New Tab Page - White Smoke
-
-
- A chrome extension replaces the default new tab page to a white smoke background blank page, which also supports dark mode.
-
-
-
-
-
-
-
Userscript
-
Idle Detection Bypasser
-
-
- Give a fake active response to the caller of the Idle Detection API.
-
-
+
-
View all projects...
+
+
View all projects...
+
>
)
}
+
+export async function getStaticProps(context) {
+ const projectsDir = path.join(process.cwd(), 'projects');
+ const projectNames = await fs.readdir(projectsDir);
+ let projectInfos = await Promise.all(projectNames.map(async name => {
+ const projPath = path.join(projectsDir, name);
+ const projSource = await fs.readFile(projPath, 'utf8');
+ const { data } = matter(projSource);
+ return data;
+ }));
+
+ if (!projectInfos) {
+ return {
+ notFound: true,
+ }
+ }
+
+ projectInfos.sort((p1, p2) => p1.order.localeCompare(p2.order));
+ projectInfos = projectInfos.slice(0, 4);
+
+ return {
+ props: { projectInfos }
+ }
+}
\ No newline at end of file
diff --git a/pages/projects.js b/pages/projects.js
index 1d1a600..d0fd549 100644
--- a/pages/projects.js
+++ b/pages/projects.js
@@ -1,10 +1,60 @@
+import { promises as fs } from 'fs'
+import matter from 'gray-matter'
+import path from 'path'
+import Link from 'next/link'
+import Head from 'next/head'
import cstyles from '../styles/Common.module.css'
-export default function Projects() {
+export default function Projects({ projectInfos }) {
return (
+
+ Projects | fHz
+
+
+
Projects
- Under Construction
+
)
+}
+
+export async function getStaticProps(context) {
+ const projectsDir = path.join(process.cwd(), 'projects');
+ const projectNames = await fs.readdir(projectsDir);
+ const projectInfos = await Promise.all(projectNames.map(async name => {
+ const projPath = path.join(projectsDir, name);
+ const projSource = await fs.readFile(projPath, 'utf8');
+ const { data } = matter(projSource);
+ return data;
+ }));
+
+ if (!projectInfos) {
+ return {
+ notFound: true,
+ }
+ }
+
+ projectInfos.sort((p1, p2) => p1.order.localeCompare(p2.order));
+
+ return {
+ props: { projectInfos }
+ }
}
\ No newline at end of file
diff --git a/projects/blank-new-tab-page.mdx b/projects/blank-new-tab-page.mdx
index 9eabe74..ee8ca7d 100644
--- a/projects/blank-new-tab-page.mdx
+++ b/projects/blank-new-tab-page.mdx
@@ -2,6 +2,8 @@
path: blank-new-tab-page
title: Blank New Tab Page - White Smoke
description: A chrome extension replaces the default new tab page to a white smoke background blank page, which also supports dark mode.
+type: Browser Extension
+order: c
links:
- https://chrome.google.com/webstore/detail/blank-new-tab-page-white/jmbngnnlimnakiibacglaeflpghellfh
- https://microsoftedge.microsoft.com/addons/detail/kakgoomeaegcolfmaaogfmifnnmllpkm
diff --git a/projects/idle-detection-bypasser.mdx b/projects/idle-detection-bypasser.mdx
index 6586b79..274d4fc 100644
--- a/projects/idle-detection-bypasser.mdx
+++ b/projects/idle-detection-bypasser.mdx
@@ -2,6 +2,8 @@
path: idle-detection-bypasser
title: Idle Detection Bypasser
description: Give a fake active response to the caller of the Idle Detection API.
+type: Userscript
+order: d
links:
- https://greasyfork.org/scripts/432878-idle-detection-bypasser
- https://github.com/flyhaozi/Idle-Detection-Bypasser
diff --git a/projects/quick-bookmarks-menu.mdx b/projects/quick-bookmarks-menu.mdx
index b430d6b..6af4dde 100644
--- a/projects/quick-bookmarks-menu.mdx
+++ b/projects/quick-bookmarks-menu.mdx
@@ -2,6 +2,8 @@
path: quick-bookmarks-menu
title: Quick Bookmarks Menu
description: A chrome extension gives you quick access to your bookmarks.
+type: Browser Extension
+order: a
links:
- https://chrome.google.com/webstore/detail/quick-bookmarks-menu/fkemipdcgbeknabedhecepcebhlnlhbf
- https://microsoftedge.microsoft.com/addons/detail/quick-bookmarks-menu/nipmnpfdiiloiegpkodghkbgnhedgmhj
diff --git a/projects/twitter-nsfw-expander.mdx b/projects/twitter-nsfw-expander.mdx
new file mode 100644
index 0000000..20e42c2
--- /dev/null
+++ b/projects/twitter-nsfw-expander.mdx
@@ -0,0 +1,17 @@
+---
+path: twitter-nsfw-expander
+title: NSFW Expander for Twitter
+description: Expand NSFW contents and accounts on Twitter automatically without logging in.
+type: Userscript
+order: z
+links:
+ - https://sleazyfork.org/scripts/428873-nsfw-expander-for-twitter
+ - https://github.com/flyhaozi/NSFW-Expander-for-Twitter
+---
+## NSFW Expander for Twitter
+[![](https://img.shields.io/github/stars/flyhaozi/NSFW-Expander-for-Twitter?style=social)](https://github.com/flyhaozi/NSFW-Expander-for-Twitter)
+
+This script expands NSFW contents and accounts on Twitter automatically without logging in.
+
+## âš Caution
+The script will ignore your sensitivity settings when you are logged in, please disable it when you are at work.
diff --git a/projects/twitter-video-fixer.mdx b/projects/twitter-video-fixer.mdx
index 9606992..ea0848a 100644
--- a/projects/twitter-video-fixer.mdx
+++ b/projects/twitter-video-fixer.mdx
@@ -2,6 +2,8 @@
path: twitter-video-fixer
title: Video Quality Fixer for Twitter
description: Force highest quality playback for Twitter videos.
+type: Userscript
+order: b
links:
- https://greasyfork.org/scripts/399827-video-quality-fixer-for-twitter
- https://github.com/flyhaozi/Video-Quality-Fixer-for-Twitter
diff --git a/styles/Common.module.css b/styles/Common.module.css
index ef8dc79..1cf683d 100644
--- a/styles/Common.module.css
+++ b/styles/Common.module.css
@@ -62,4 +62,67 @@
.top > div > a img {
height: 60px;
+}
+
+.cardContainer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-top: 24px;
+}
+
+.projectCard {
+ flex: 1 1 40%;
+ border: 1px dotted rgba(0, 0, 0, 0.2);
+ min-width: 300px;
+ min-height: 100px;
+ padding: 20px;
+ margin: 5px;
+}
+
+.projectCardHighlight {
+ box-shadow: 0px 2px 10px #0CC5C950;
+}
+
+.projectCard:hover {
+ background: linear-gradient(to left, #1560BD, #0CC5C9);
+ border: 1px solid white;
+}
+
+.projectCard:hover p {
+ color: white;
+}
+
+.projectBasic {
+ display: flex;
+ flex-direction: row;
+}
+
+.projectType {
+ color: grey;
+ margin-top: 0px;
+}
+
+.projectName {
+ margin-top: 0px;
+ font-size: 20px;
+ font-weight: bold;
+}
+
+.projectDesc {
+ margin-top: 0px;
+}
+
+.blogList {
+ list-style-type: none;
+ padding: 0px;
+}
+
+.blogList li span{
+ color: grey;
+}
+
+.blogList li a{
+ font-weight: bold;
+ margin-left: 10px;
}
\ No newline at end of file
diff --git a/styles/Home.module.css b/styles/Home.module.css
index b3c61f9..1c60d95 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -16,65 +16,4 @@
align-self: flex-end;
text-decoration: underline;
margin-top: 10px;
-}
-
-.cardContainer {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- margin-top: 24px;
-}
-
-.projectCard {
- border: 1px dotted rgba(0, 0, 0, 0.2);
- min-width: 300px;
- min-height: 100px;
- padding: 20px;
- margin: 5px;
-}
-
-.projectCardHighlight {
- box-shadow: 0px 2px 10px #0CC5C950;
-}
-
-.projectCard:hover {
- background: linear-gradient(to left, #1560BD, #0CC5C9);
- border: 1px solid white;
-}
-
-.projectCard:hover p {
- color: white;
-}
-
-.projectBasic {
- display: flex;
- flex-direction: row;
-}
-
-.projectType {
- color: grey;
- margin-top: 0px;
-}
-
-.projectName {
- margin-top: 0px;
- font-size: 20px;
- font-weight: bold;
-}
-
-.projectDesc {
- margin-top: 0px;
-}
-
-.blogList {
- list-style-type: none;
- padding: 0px;
-}
-
-.blogList li span{
- color: grey;
-}
-
-.blogList li a{
- font-weight: bold;
- margin-left: 10px;
}
\ No newline at end of file