Add new entry blog: Web Infra 1 (#3)

* Change blog entry style : titles font weight lighter->normal
* Add tmpfs scripts for linux (dev only)

Co-authored-by: Corentin <corentin-pro@mail.com>
Co-authored-by: Jimmy Vargo <james@ayo.tokyo>
Reviewed-on: ayo/website#3

package.json

@@ -32,6 +32,7 @@
 	},
 	"scripts": {
 		"build": "webpack --config webpack.prod.js",
+		"predev": "./scripts/tmpfs_dirs.sh",
 		"dev": "webpack --config webpack.dev.js",
 		"server": "webpack --config webpack.server.js",
 		"start": "node server.js",

scripts/tmpfs_dirs.sh

@@ -0,0 +1,17 @@
+#! /bin/bash
+
+if [[ $(uname) != "Linux" ]]; then
+	echo "Not on Linux : no tmpfs"
+	exit
+fi
+
+CWD=$(cd -P . && pwd)
+readarray -t TMPFS_DIRS < <(df -lt tmpfs --output=target | tail -n +2)
+
+
+if [[ " ${TMPFS_DIRS[*]} " =~ " ${CWD}/public " ]]; then
+	echo "public alread a tmpfs"
+else
+	echo "Mounting public as tmpfs"
+	sudo mount -m -t tmpfs tmpfs public
+fi

src/blog_entry.jsx

@@ -38,18 +38,16 @@ class BlogEntryComponent extends Component
 				<img id="image-view"/>
 			</div>,
 			<script>
-				{`const container = document.getElementById("image-container")
+				{`
-				const image_view = document.getElementById("image-view")
-
 				function open_image(src)
 				{
-					image_view.src = src
+					document.getElementById("image-view").src = src
-					container.style.display = 'flex'
+					document.getElementById("image-container").style.display = 'flex'
 				}
 
 				function close_image()
 				{
-					container.style.display = 'none'
+					document.getElementById("image-container").style.display = 'none'
 				}`}
 			</script>
 		]

src/blog_entry.scss

@@ -8,7 +8,7 @@
 
 	h1, h2, h3
 	{
-		font-weight: lighter;
+		font-weight: normal;
 		margin: 8px 0;
 		color: var(--highlight-fg-color);
 	}
@@ -62,7 +62,7 @@
 			font-weight: normal;
 			font-style: italic;
 		}
-		
+
 		p
 		{
 			display: flex;
@@ -70,7 +70,7 @@
 			justify-content: center;
 			width: 100%;
 		}
-		
+
 		img
 		{
 			display: block;

src/test.js

@@ -1,13 +0,0 @@
-const container = document.getElementById("image-container")
-const image_view = document.getElementById("image-view")
-
-function view_image(src)
-{
-	image_view.src = src
-	container.style.display = 'flex'
-}
-
-function close_image()
-{
-	container.style.display = 'none'
-}

webpack.base.js

@@ -66,8 +66,8 @@ class BlogListingPlugin
 					},
 					(compilationAssets, callback) => {
 						let content = []
-						Object.keys(compilationAssets).forEach((file_path) => {
+						Object.keys(compilationAssets).sort().reverse().forEach((file_path) => {
-							if(file_path.startsWith('blog') && file_path.endsWith('.md'))
+							if(file_path.startsWith('blog') && file_path.endsWith('.md') && !file_path.endsWith('_draft.md'))
 							{
 								const file_name = path.basename(file_path).slice(0, -3)
 								const blog_info = path.basename(path.dirname(file_path)).split('_')
@@ -131,11 +131,7 @@ module.exports = {
 			type: "asset/inline"
 		},
 		{
-			test: /\.(png|jpg|jpeg|gif)$/,
+			test: /assets\/.*\.(png|jpg|jpeg|gif|ttf|otf)$/,
-			type: "asset/resource"
-		},
-		{
-			test: /\.(ttf|otf)$/,
 			type: "asset/resource"
 		}
 	]
@@ -147,18 +143,14 @@ module.exports = {
 			{from: 'index.html'},
 			{from: 'robot.txt'},
 			{from: 'src/lang', to: 'lang'},
-			{from: 'assets/blog', to: 'blog'},
+			{from: 'assets', to: 'assets', globOptions: {ignore: '**/blog/**'}},
-			{from: 'assets/icons', to: 'assets/icons'},
+			{from: 'assets/blog', to: 'blog', globOptions: {ignore: '**/blog/draft_*/**'}}
-			{from: 'assets/images', to: 'assets/images'},
-			{from: 'assets/theme', to: 'assets/theme'},
-			{from: 'assets/fonts', to: 'assets/fonts'}
 		]})
 	],
 	output:
 	{
 		filename: 'bundle.js',
 		path: path.resolve(__dirname, 'public'),
-		assetModuleFilename: 'assets/[query].[ext]',
 		clean: true
 	}
 };