style: layout
This commit is contained in:
Ayo
parent
c8672fc4eb
commit
4e2256c6d3
4 changed files with 65 additions and 25 deletions
|
|
@ -5,7 +5,9 @@ export interface Props {
|
||||||
|
|
||||||
const {postDivSelector} = Astro.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 />
|
<input value={postDivSelector} name="postDivSelector" id="postDivSelector" hidden />
|
||||||
|
|
||||||
|
|
@ -21,31 +23,43 @@ const {postDivSelector} = Astro.props;
|
||||||
const postDiv = document.querySelector(postDivSelector?.value);
|
const postDiv = document.querySelector(postDivSelector?.value);
|
||||||
|
|
||||||
const cachedResponses = await cache.keys();
|
const cachedResponses = await cache.keys();
|
||||||
const library = document.getElementById('library');
|
const list = document.querySelector('#post-list');
|
||||||
const list = document.createElement('ul');
|
|
||||||
cachedResponses.forEach(response => {
|
cachedResponses
|
||||||
const {url} = response;
|
.filter(request => {
|
||||||
|
const urlObj = new URL(request.url);
|
||||||
|
return urlObj.search !== '';
|
||||||
|
})
|
||||||
|
.forEach(async (request) => {
|
||||||
|
const {url} = request;
|
||||||
const link = document.createElement('a');
|
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.href = url;
|
||||||
link.onclick = async (e) => {
|
link.onclick = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const fullResponse = await cache.match(url)
|
|
||||||
fullResponse?.text().then(data => {
|
|
||||||
const html = document.createElement('html');
|
const html = document.createElement('html');
|
||||||
html.innerHTML = data;
|
html.innerHTML = responseText;
|
||||||
const body = html.querySelector('body');
|
const newPost = html.querySelector('body')?.querySelector('#post');
|
||||||
const newPost = body?.querySelector('#post');
|
|
||||||
console.log(body?.querySelector('#post'));
|
|
||||||
if (postDiv && newPost?.innerHTML) {
|
if (postDiv && newPost?.innerHTML) {
|
||||||
postDiv.innerHTML = (newPost.innerHTML)
|
postDiv.innerHTML = (newPost.innerHTML)
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
const item = document.createElement('li');
|
const item = document.createElement('li');
|
||||||
item.appendChild(link);
|
item.appendChild(link);
|
||||||
list?.appendChild(item);
|
list?.appendChild(item);
|
||||||
})
|
});
|
||||||
library?.appendChild(list);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -26,11 +26,6 @@ const datePublished =
|
||||||
}
|
}
|
||||||
|
|
||||||
<style is:inline>
|
<style is:inline>
|
||||||
div#post {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 1em auto;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
@counter-style publish-icons {
|
@counter-style publish-icons {
|
||||||
system: cyclic;
|
system: cyclic;
|
||||||
symbols: "️✍️" "🗓️";
|
symbols: "️✍️" "🗓️";
|
||||||
|
|
|
||||||
|
|
@ -16,10 +16,33 @@ const { title } = Astro.props;
|
||||||
<title>{appTitle} {title && `| ${title}`}</title>
|
<title>{appTitle} {title && `| ${title}`}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</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>
|
<style is:global>
|
||||||
:root {
|
:root {
|
||||||
--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||||
|
|
|
||||||
|
|
@ -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"}>
|
<Layout title={url !== "" ? article?.title : "Your modern-day reading assistant"}>
|
||||||
<AddressBar url={url} />
|
<AddressBar slot="address-bar" url={url} />
|
||||||
<Library postDivSelector="#post" />
|
<Post slot="post" article={article} />
|
||||||
{url && <Post article={article} />}
|
<Library slot="library" postDivSelector="#post" />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue