Make my blog printable

scripts/new-post.js

@@ -6,7 +6,10 @@ import { fileURLToPath } from 'url';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const title = process.argv[2] ?? 'New Blog Post';
-const slug = title.toLowerCase().replaceAll(' ', '-').slice(0, 60);
+let slug = title.toLowerCase().replaceAll(' ', '-');
+while (slug.length > 60 && slug.includes('-')) {
+	slug = slug.substring(0, slug.lastIndexOf('-'));
+}
 
 const filename = `${format(new Date(), 'yyyy.MM.dd')}.${slug}.md`;
 

src/app.scss

@@ -81,6 +81,14 @@ body {
 	flex-direction: column;
 }
 
+@media print {
+	main code[class*='language-'],
+	main pre[class*='language-'] {
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
+}
+
 /* Pagefind UI */
 .pagefind-ui {
 	--pagefind-ui-border-radius: 0;

src/routes/+page.svelte

@@ -13,6 +13,7 @@
 	import BlogPostList from './posts/[[page=integer]]/BlogPostList.svelte';
 	import Button from '$lib/Button.svelte';
 	import BlogPost from './posts/[[page=integer]]/BlogPost.svelte';
+	import SocialButton from './SocialButton.svelte';
 
 	export let data;
 </script>
@@ -70,34 +71,34 @@
 
 	<ul class="socials">
 		<li>
-			<a target="_blank" rel="noreferrer me" href="mailto:kaan@bgenc.net">
-				<EnvelopeSimple aria-hidden />
-				<span>Email</span>
-			</a>
+			<SocialButton href="mailto:kaan@bgenc.net">
+				<EnvelopeSimple slot="logo" />
+				Email
+			</SocialButton>
 		</li>
 		<li>
-			<a target="_blank" rel="noreferrer me" href="https://github.com/SeriousBug">
-				<GithubLogo aria-hidden />
-				<span>Github</span>
-			</a>
+			<SocialButton href="https://github.com/SeriousBug">
+				<GithubLogo slot="logo" />
+				Github
+			</SocialButton>
 		</li>
 		<li>
-			<a target="_blank" rel="noreferrer me" href="https://fosstodon.org/@kaan">
-				<MastodonLogo aria-hidden />
-				<span>Mastodon</span>
-			</a>
+			<SocialButton href="https://fosstodon.org/@kaan">
+				<MastodonLogo slot="logo" />
+				Mastodon
+			</SocialButton>
 		</li>
 		<li>
-			<a target="_blank" rel="noreferrer me" href="https://www.linkedin.com/in/kaan-barmore-genc">
-				<LinkedinLogo aria-hidden />
-				<span>LinkedIn</span>
-			</a>
+			<SocialButton href={'https://www.linkedin.com/in/kaan-barmore-genc'}>
+				<LinkedinLogo slot="logo" />
+				LinkedIn
+			</SocialButton>
 		</li>
 		<li>
-			<a target="_blank" href={cv}>
-				<FilePlus />
-				<span>CV</span>
-			</a>
+			<SocialButton href={cv} rel="" showPrint={false}>
+				<FilePlus slot="logo" />
+				CV
+			</SocialButton>
 		</li>
 	</ul>
 </section>
@@ -115,6 +116,7 @@
 		<BlogPostList showYear showReadingTime={false} posts={data.highlightedPosts} />
 		<div class="all-posts-button">
 			<Button href="/posts/">All Posts</Button>
+			<div class="print-link">https://bgenc.net/posts/</div>
 		</div>
 	</section>
 {/if}
@@ -142,20 +144,30 @@
 		align-items: center;
 	}
 
+	.print-link {
+		display: none;
+	}
+
+	@media print {
+		.socials {
+			gap: 0;
+		}
+
+		picture {
+			margin-top: -200px;
+			margin-left: 300px;
+			margin-bottom: -80px;
+		}
+
+		.print-link {
+			display: block;
+		}
+	}
+
 	.socials li {
 		list-style-type: none;
 	}
 
-	.socials a {
-		@include button($color-secondary, $color-secondary-text);
-		min-width: 8rem;
-	}
-
-	h1 {
-		width: 100%;
-		text-align: center;
-	}
-
 	.all-posts-button {
 		max-width: 12rem;
 		margin: 2rem auto 0 auto;

src/routes/Header.svelte

@@ -51,7 +51,7 @@
 	<Spacer />
 	<div class="collapse-container">
 		<div class="collapse" class:expanded>
-			<div id="search"></div>
+			<div class="" id="search"></div>
 			<Button href="/posts/">Blog</Button>
 			<Button href="/portfolio/">Portfolio</Button>
 		</div>
@@ -128,6 +128,16 @@
 		}
 	}
 
+	@media print {
+		#search {
+			display: none;
+		}
+
+		.collapse-container {
+			display: none;
+		}
+	}
+
 	.logo {
 		width: 12rem;
 		height: 12rem;

src/routes/SocialButton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	export let href = '';
+	export let rel = 'noreferrer me';
+	export let showPrint = true;
+</script>
+
+<a data-show-print={showPrint} target="_blank" {rel} {href}>
+	<div aria-hidden><slot name="logo"></slot></div>
+	<span><slot></slot></span>
+	<div class="print-link">{href.replace(/^mailto:/, '')}</div>
+</a>
+
+<style lang="scss">
+	@import '../vars';
+	@import '../button';
+
+	a {
+		@include button($color-secondary, $color-secondary-text);
+		min-width: 8rem;
+	}
+
+	.print-link {
+		display: none;
+	}
+
+	@media print {
+		.print-link {
+			display: block;
+		}
+
+		[data-show-print='false'] {
+			display: none;
+		}
+	}
+</style>

src/routes/posts/[[page=integer]]/BlogPost.svelte

@@ -5,9 +5,11 @@
 	export let showYear: boolean = false;
 	export let showReadingTime: boolean = true;
 	export let post: Post;
+
+	const href = `/${post.path}`;
 </script>
 
-<a href={`/${post.path}`}>
+<a {href}>
 	<li>
 		<div>
 			<h5 class="post-title">
@@ -26,6 +28,7 @@
 			{/if}
 		</div>
 	</li>
+	<div class="print-link">{`https://bgenc.net${href}`}</div>
 </a>
 
 <style lang="scss">
@@ -71,4 +74,14 @@
 		font-size: 0.9rem;
 		opacity: 0.8;
 	}
+
+	.print-link {
+		display: none;
+	}
+
+	@media print {
+		.print-link {
+			display: block;
+		}
+	}
 </style>