moris/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

page.svelteにまとめた

Browse source
This commit is contained in:
moris 2025-04-03 23:28:24 +09:00
parent 2a44deeca6
commit 7a17a2c188
2 changed files with 75 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/routes/code/[slug]/+layout.svelte
View file

@ -1,73 +0,0 @@
<script lang="ts">
let { children } = $props();
import './app.css'
function toggleFullScreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.querySelector("body")?.requestFullscreen();
}
}
function hideContent() {
let uuid = crypto.randomUUID()
window.name = uuid
window.parent.postMessage({"id": uuid, 'message': 'toggleHide'}, '*');
}
</script>
<svelte:head>
<meta name="robots" content="noindex">
</svelte:head>
<div id='window'>
<div class="menubar">
<button style="background-color: rgb(255 95 87)" aria-label="reload" onclick={()=>{location.reload()}}></button>
<button style="background-color: rgb(255 188 46)" aria-label="close" onclick={hideContent}></button>
<button style="background-color: rgb(40 200 64)" aria-label="fullscreen" onclick={toggleFullScreen}></button>
</div>
<div class="code">
{@render children()}
</div>
</div>
<style>
#window {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
box-sizing: border-box;
border: solid var(--border-color) 1px;
border-radius: 12px;
box-shadow: 0px 8px 40px var(--shadow-color);
background-color: var(--back-color);
font-family: sans-serif;
overflow: hidden;
}
.menubar {
display: flex;
height: 28px;
padding: 0 4px;
border-radius: 12px 12px 0 0;
background-color: var(--head-color);
border-bottom: solid var(--divider-color) 1px;
}
button {
all: unset;
width: 12px;
height: 12px;
margin: 8px 4px;
border-radius: 50%;
cursor: pointer;
}
.code {
height: calc(100% - 28px);
overflow-x: hidden;
overflow-y: auto;
}
</style>

76
src/routes/code/[slug]/+page.svelte
View file

@ -1,5 +1,79 @@
<script lang="ts">
const { data } = $props();
import './app.css';
</script>
<div>{@html data.html}</div>
<svelte:head>
<meta name="robots" content="noindex">
</svelte:head>
<div id='window'>
<div class="menubar">
<button class="a" style="background-color: rgb(255 95 87)" aria-label="reload"></button>
<button class="b" style="background-color: rgb(255 188 46)" aria-label="close"></button>
<button class="c" style="background-color: rgb(40 200 64)" aria-label="fullscreen"></button>
</div>
<div class="code">
{@html data.html}
</div>
<script>
function toggleFullScreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.querySelector("body")?.requestFullscreen();
}
}
function hideContent() {
let uuid = crypto.randomUUID()
window.name = uuid
window.parent.postMessage({"id": uuid, 'message': 'toggleHide'}, '*');
}
document.querySelector('button.a')?.addEventListener('click', ()=>{location.reload()})
document.querySelector('button.b')?.addEventListener('click', ()=>{hideContent()})
document.querySelector('button.c')?.addEventListener('click', ()=>{toggleFullScreen()})
</script>
</div>
<style>
#window {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
box-sizing: border-box;
border: solid var(--border-color) 1px;
border-radius: 12px;
box-shadow: 0px 8px 40px var(--shadow-color);
background-color: var(--back-color);
font-family: sans-serif;
overflow: hidden;
}
.menubar {
display: flex;
height: 28px;
padding: 0 4px;
border-radius: 12px 12px 0 0;
background-color: var(--head-color);
border-bottom: solid var(--divider-color) 1px;
}
button {
all: unset;
width: 12px;
height: 12px;
margin: 8px 4px;
border-radius: 50%;
cursor: pointer;
}
.code {
height: calc(100% - 28px);
overflow-x: hidden;
overflow-y: auto;
}
</style>