ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

style: layout

Browse source
This commit is contained in:
Ayo 2023-06-04 15:46:48 +02:00
parent c8672fc4eb
commit 4e2256c6d3
4 changed files with 65 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/Library.astro
View file

@ -5,7 +5,9 @@ export interface Props {
const {postDivSelector} = Astro.props;
---
<div id="library"></div>
<div id="library">
<ul id="post-list"></ul>
</div>
<input value={postDivSelector} name="postDivSelector" id="postDivSelector" hidden />
@ -21,31 +23,43 @@ const {postDivSelector} = Astro.props;
const postDiv = document.querySelector(postDivSelector?.value);
const cachedResponses = await cache.keys();
const library = document.getElementById('library');
const list = document.createElement('ul');
cachedResponses.forEach(response => {
const {url} = response;
const list = document.querySelector('#post-list');
cachedResponses
.filter(request => {
const urlObj = new URL(request.url);
return urlObj.search !== '';
})
.forEach(async (request) => {
const {url} = request;
const link = document.createElement('a');
link.innerText = url;
let responseText;
const fullResponse = await cache.match(url)
fullResponse?.text().then(data => {
responseText = data;
const html = document.createElement('html');
html.innerHTML = responseText;
const title = html.querySelector('title');
link.innerText = (title?.innerText || url).replace('Cozy 🧸 | ', '');
});
link.href = url;
link.onclick = async (e) => {
e.preventDefault();
const fullResponse = await cache.match(url)
fullResponse?.text().then(data => {
const html = document.createElement('html');
html.innerHTML = data;
const body = html.querySelector('body');
const newPost = body?.querySelector('#post');
console.log(body?.querySelector('#post'));
html.innerHTML = responseText;
const newPost = html.querySelector('body')?.querySelector('#post');
if (postDiv && newPost?.innerHTML) {
postDiv.innerHTML = (newPost.innerHTML)
}
});
}
const item = document.createElement('li');
item.appendChild(link);
list?.appendChild(item);
})
library?.appendChild(list);
});
</script>

5
src/components/post.astro
View file

@ -26,11 +26,6 @@ const datePublished =
}
<style is:inline>
div#post {
max-width: 600px;
margin: 1em auto;
padding: 1em;
}
@counter-style publish-icons {
system: cyclic;
symbols: "️✍️" "🗓️";

25
src/layouts/layout.astro
View file

@ -16,10 +16,33 @@ const { title } = Astro.props;
<title>{appTitle} {title && `| ${title}`}</title>
</head>
<body>
<slot />
<slot name="address-bar" />
<div id="main-content">
<div id="post-wrapper">
<slot name="post" />
</div>
<div id="library-wrapper">
<slot name="library" />
</div>
</div>
</body>
</html>
<style>
#main-content {
display: flex;
padding: 1em;
max-width: 1000px;
margin: 0 auto;
}
#post-wrapper, #library-wrapper {
flex: 1
}
#post-wrapper {
flex-grow: 2;
}
</style>
<style is:global>
:root {
--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,

14
src/pages/index.astro
View file

@ -18,9 +18,17 @@ try {
};
}
if (url === '') {
article = {
title: "Welcome to Cozy 🧸",
author: "Ayo Ayco",
content: "<p>Enter a URL in the address bar above to get started.</p>",
};
}
---
<Layout title={url !== "" ? article?.title : "Your modern-day reading assistant"}>
<AddressBar url={url} />
<Library postDivSelector="#post" />
{url && <Post article={article} />}
<AddressBar slot="address-bar" url={url} />
<Post slot="post" article={article} />
<Library slot="library" postDivSelector="#post" />
</Layout>