Adjusted styling

Akashic101 · Apr 30, 2024 · caeb844 · caeb844
1 parent e39ac5c
commit caeb844
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 52 deletions.
diff --git a/generateNewBlog.mjs b/generateNewBlog.mjs
@@ -5,58 +5,58 @@ import inquirer from 'inquirer';
 
 // Function to validate non-empty input
 const validateInput = (input) => {
-    return input.trim() !== '' ? true : 'This field is required.';
+	return input.trim() !== '' ? true : 'This field is required.';
 };
 
 // Function to generate files based on user input
 async function generateFiles() {
-    const currentFileUrl = import.meta.url;
-    const currentDir = path.dirname(url.fileURLToPath(currentFileUrl));
+	const currentFileUrl = import.meta.url;
+	const currentDir = path.dirname(url.fileURLToPath(currentFileUrl));
 
-    const currentDate = new Date().toISOString().split('T')[0]; // Get today's date in the format YYYY-MM-DD
+	const currentDate = new Date().toISOString().split('T')[0]; // Get today's date in the format YYYY-MM-DD
 
-    const answers = await inquirer.prompt([
-        {
-            type: 'input',
-            name: 'title',
-            message: 'Enter the title:',
-            validate: validateInput,
-        },
-        {
-            type: 'input',
-            name: 'description',
-            message: 'Enter the description:',
-            validate: validateInput,
-        },
-        {
-            type: 'confirm',
-            name: 'includeCode',
-            message: 'Does the markdown file include code?',
-            default: false,
-        },
-    ]);
+	const answers = await inquirer.prompt([
+		{
+			type: 'input',
+			name: 'title',
+			message: 'Enter the title:',
+			validate: validateInput,
+		},
+		{
+			type: 'input',
+			name: 'description',
+			message: 'Enter the description:',
+			validate: validateInput,
+		},
+		{
+			type: 'confirm',
+			name: 'includeCode',
+			message: 'Does the markdown file include code?',
+			default: false,
+		},
+	]);
 
-    // Create the variables from the supplied answers
-    let { title, description, includeCode } = answers;
+	// Create the variables from the supplied answers
+	let { title, description, includeCode } = answers;
 
-    // The title of the folder uses "-" instead of spaces, so we replace them all
-    let folderTitle = title.replace(/\s+/g, '-');
+	// The title of the folder uses "-" instead of spaces, so we replace them all
+	let folderTitle = title.replace(/\s+/g, '-');
 
-    // Create the paths for the blog and images
-    const blogFolderPath = path.join(currentDir, 'src', 'blog', `${currentDate}-${folderTitle}`);
-    const assetsFolderPath = path.join(
-        currentDir,
-        'src',
-        'assets',
-        'images',
-        `${currentDate}-${folderTitle}`,
-    );
+	// Create the paths for the blog and images
+	const blogFolderPath = path.join(currentDir, 'src', 'blog', `${currentDate}-${folderTitle}`);
+	const assetsFolderPath = path.join(
+		currentDir,
+		'src',
+		'assets',
+		'images',
+		`${currentDate}-${folderTitle}`,
+	);
 
-    // Create the folders
-    fs.mkdirSync(blogFolderPath, { recursive: true });
-    fs.mkdirSync(assetsFolderPath, { recursive: true });
+	// Create the folders
+	fs.mkdirSync(blogFolderPath, { recursive: true });
+	fs.mkdirSync(assetsFolderPath, { recursive: true });
 
-    const frontmatter = `---
+	const frontmatter = `---
 layout: blog.njk
 title: ${title}
 author: David Moll
@@ -73,12 +73,12 @@ hasCode: ${includeCode}
 ![{{ socialMediaPreviewImageAlt }}]({{ socialMediaPreviewImage }})
 `;
 
-    // Write the frontmatter-data in a file to the blog-path
-    fs.writeFileSync(path.join(blogFolderPath, `${currentDate}-${folderTitle}.md`), frontmatter);
+	// Write the frontmatter-data in a file to the blog-path
+	fs.writeFileSync(path.join(blogFolderPath, `${currentDate}-${folderTitle}.md`), frontmatter);
 
-    console.log(
-        `Blog folder "${currentDate}-${folderTitle}" and Markdown file created successfully.`,
-    );
+	console.log(
+		`Blog folder "${currentDate}-${folderTitle}" and Markdown file created successfully.`,
+	);
 }
 
 generateFiles();
diff --git a/...ize-your-website-for-print/2024-04-30-How-to-optimize-your-website-for-print.md b/...ize-your-website-for-print/2024-04-30-How-to-optimize-your-website-for-print.md
@@ -3,12 +3,12 @@ layout: blog.njk
 title: How to optimize your website for print
 author: David Moll
 date: 2024-04-30
-tags: 
-- posts
+tags:
+  - posts
 description: Neat little tricks on how to make your website looking better for print
 folderName: 2024-04-30-How-to-optimize-your-website-for-print
 socialMediaPreviewImage: https://blog.davidmoll.net/assets/images/2024-04-30-How-to-optimize-your-website-for-print/cover.png
-socialMediaPreviewImageAlt: 
+socialMediaPreviewImageAlt:
 hasCode: true
 ---
 
@@ -58,7 +58,7 @@ If your content is long enough you run into the problem that some parts of it ma
 
 ### break-after
 
-The `break-after` property specifies whether or not a page break, column break, or region break should occur after the specified element. This means that if you for example have an image with a class that has this styling applied and it would break across pages it will instead move down and start at the second page. 
+The `break-after` property specifies whether or not a page break, column break, or region break should occur after the specified element. This means that if you for example have an image with a class that has this styling applied and it would break across pages it will instead move down and start at the second page.
 
 ```css:bundle.css
 
@@ -77,11 +77,12 @@ h1 {
     break-before: always;
 }
 ```
+
 <div class="avoidBreakInside">
 
 ### break-inside
 
-The last property allows you to simply say to avoid content being split across pages.  It's something very general you can use in multiple places to make your printed website a bit more readable:
+The last property allows you to simply say to avoid content being split across pages. It's something very general you can use in multiple places to make your printed website a bit more readable:
 
 ```css:bundle.css
 
@@ -93,6 +94,7 @@ pre {
 	break-inside: avoid;
 }
 ```
+
 </div>
 ### font-size
 
@@ -128,6 +130,7 @@ p {
 	font-size: 16px;
 }
 ```
+
 <div class="avoidBreakInside">
 
 ## Custom footer
@@ -143,5 +146,6 @@ body::after {
 	white-space: pre;
 }
 ```
+
 </div>
-These are some simple CSS-tricks that will help you to optimize your website a little bit. Did you use any of those? Let me know, I'd love to have a look at your page :)
+These are some simple CSS-tricks that will help you to optimize your website a little bit. Did you use any of those? Let me know, I'd love to have a look at your page :)