add blogs, move pictures to local + much more

components/content/ProseCode.vue

@@ -0,0 +1,123 @@
+<template>
+	<div class="container my-2 bg-neutral-900">
+		<span v-if="filename"
+			class="filename-text text-xs leading-none tracking-tight text-gray-400 font-jetbrains">
+			{{ filename }}
+		</span>
+		<slot />
+		<div class="bottom-container">
+			<div class="copy-container">
+				<button class="rounded hover:bg-zinc-800/60 transition-colors duration-200 flex p-1"
+					@click="copy(code)">
+					<div class="h-6"
+						v-if="copied">
+						<Icon size="24" name="tabler:check" />
+					</div>
+					<div class="h-6"
+						v-else>
+						<Icon size="24" name="tabler:copy" />
+					</div>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+  
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+const { copy, copied, text } = useClipboard();
+const props = withDefaults(
+	defineProps<{
+		code?: string;
+		language?: string | null;
+		filename?: string | null;
+		highlights?: Array<number>;
+	}>(),
+	{ code: '', language: null, filename: null, highlights: [] }
+);
+</script>
+  
+<style scoped>
+.icon {
+	display: block;
+}
+
+.container {
+	position: relative;
+	padding-top: 0.5em;
+	overflow: hidden;
+	border-radius: 0.5rem;
+}
+
+.container:hover .bottom-container {
+	opacity: 1;
+	pointer-events: all;
+}
+
+.bottom-container {
+	display: flex;
+	transition-property: opacity;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 250ms;
+	opacity: 0;
+	pointer-events: none;
+	position: relative;
+	justify-content: flex-end;
+}
+
+.copy-container {
+	height: fit-content;
+	display: flex;
+	position: absolute;
+	bottom: 15px;
+	right: 15px;
+}
+
+.filename-text {
+	position: absolute;
+	top: 0.25rem;
+	right: 0.25rem;
+	padding: 0.25em 0.5em;
+}
+
+:slotted(pre) {
+	margin-top: 0;
+	margin-bottom: 0;
+	display: flex;
+	flex: 1 1 0%;
+	overflow-x: auto;
+	padding: 1rem;
+	line-height: 1.625;
+	counter-reset: lines;
+}
+
+:slotted(pre code) {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+:slotted(pre code .line) {
+	min-height: 1em;
+}
+
+:slotted(pre code .line::before) {
+	counter-increment: lines;
+	content: counter(lines);
+	width: 1em;
+	margin-right: 1.5rem;
+	display: inline-block;
+	text-align: right;
+	color: rgba(115, 138, 148, 0.4);
+}
+
+:slotted(pre code .highlight) {
+	background-color: #363b46;
+	display: block;
+	margin-right: -1em;
+	margin-left: -1em;
+	padding-right: 1em;
+	padding-left: 0.75em;
+	border-left: 0.25em solid red;
+}
+</style>

components/content/ProseCodeInline.vue

@@ -0,0 +1,17 @@
+<template>
+	<code lang="js">
+		<slot />
+	</code>
+</template>
+
+<style scoped>
+code {
+	background-color: #252425;
+	border-radius: 0.375rem;
+	font-size: 0.875rem;
+	font-weight: 400;
+	line-height: 1.25rem;
+	overflow: hidden;
+	padding: 3px 6px;
+}
+</style>

components/content/ProseH2.vue

@@ -0,0 +1,41 @@
+<template>
+	<div :id="id"
+		class="group flex mt-2">
+		<div class="text-2xl">
+			<slot />
+		</div>
+		<button @click="copy(location.origin + location.pathname + '#' + id)"
+			class="group-hover:opacity-100 ml-2 hover:bg-zinc-800 flex items-center h-fit p-[2px] transition-opacity duration-200 rounded opacity-0">
+			<div class="h-4"
+				v-if="copied">
+				<Icon size="16"
+					name="tabler:check" />
+			</div>
+			<div class="h-4"
+				v-else>
+				<Icon size="16"
+					name="tabler:link" />
+			</div>
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	useClipboard, useBrowserLocation
+} from '@vueuse/core';
+const { copy, copied, text } = useClipboard();
+const props = withDefaults(
+	defineProps<{
+		id?: string;
+	}>(),
+	{ id: '' }
+);
+const location = useBrowserLocation()
+</script>
+
+<style scoped>
+.icon {
+	display: block;
+}
+</style>