115 lines
2.5 KiB
Svelte
115 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import Projects from '$lib/card-collections/Projects.svelte';
|
|
import Header from '$lib/header.svelte';
|
|
import PostTag from '$lib/posts/PostTag.svelte';
|
|
import type { Article } from '$lib/posts/types';
|
|
import { afterUpdate } from 'svelte';
|
|
|
|
export let data: any;
|
|
|
|
const post: Article = data.data;
|
|
|
|
afterUpdate(() => {
|
|
const codeBlocks = document.querySelectorAll('article pre');
|
|
codeBlocks.forEach((codeBlock) => {
|
|
const copyButton = document.createElement('button');
|
|
copyButton.textContent = '📋 Copy code';
|
|
copyButton.classList.add('article-code-copy-button-32984456');
|
|
|
|
copyButton.addEventListener('click', () => {
|
|
const codeText = codeBlock.textContent || '';
|
|
const trimmedCodeText = codeText.replace(copyButton.textContent || '', '');
|
|
|
|
navigator.clipboard
|
|
.writeText(trimmedCodeText)
|
|
.then(() => {
|
|
console.log('Copied code to clipboard');
|
|
})
|
|
.catch((error) => {
|
|
console.error(
|
|
'Error copying code to clipboard, this may be due to privacy settings in your browser'
|
|
);
|
|
});
|
|
});
|
|
|
|
codeBlock.appendChild(copyButton);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<Header title={post.title} />
|
|
|
|
<div class="column-container">
|
|
<div class="main-column">
|
|
<article>
|
|
<p>
|
|
{#each post.tags as tag}
|
|
<PostTag {tag} />
|
|
{/each}<br /><br />
|
|
Published: {post.date.toLocaleDateString()}<br />
|
|
Author: {post.author}
|
|
</p>
|
|
<content>
|
|
{@html post.content}
|
|
</content>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="side-column">
|
|
<Projects />
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.column-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.main-column {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.column-container {
|
|
flex-direction: row; /* Switch to row layout for larger screens */
|
|
}
|
|
.main-column {
|
|
flex: 2; /* Take up 2/3 of the available width */
|
|
}
|
|
.side-column {
|
|
flex: 1; /* Take up 1/3 of the available width */
|
|
padding-top: 70px;
|
|
}
|
|
}
|
|
|
|
:global(article pre) {
|
|
position: relative;
|
|
text-align: left;
|
|
background-color: rgb(46, 46, 46);
|
|
color: white;
|
|
padding: 15px;
|
|
padding-top: 30px;
|
|
padding-bottom: 30px;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
white-space: pre;
|
|
overflow: auto;
|
|
}
|
|
|
|
:global(.article-code-copy-button-32984456) {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 15px;
|
|
color: white;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|