feat: library on homepage
This commit is contained in:
Ayo
parent
b3eb0ab8fc
commit
1ecc7f541d
5 changed files with 492 additions and 4240 deletions
4673
package-lock.json
generated
4673
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -7,6 +7,7 @@ export interface Props {
|
|||
const {postDivSelector, skipSave = false} = Astro.props;
|
||||
---
|
||||
<div id="library">
|
||||
<h2></h2>
|
||||
<ul id="post-list"></ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -28,6 +29,11 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
|||
const cachedResponses = await cache.keys();
|
||||
const list = document.querySelector('#post-list');
|
||||
|
||||
if (cachedResponses.length) {
|
||||
const heading = document.querySelector('#library h2') as HTMLHeadingElement;
|
||||
heading.innerText = 'Previously viewed:';
|
||||
}
|
||||
|
||||
cachedResponses
|
||||
.filter(request => {
|
||||
const urlObj = new URL(request.url);
|
||||
|
|
@ -37,7 +43,6 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
|||
const {url} = request;
|
||||
const link = document.createElement('a');
|
||||
|
||||
|
||||
let responseText;
|
||||
|
||||
const fullResponse = await cache.match(url)
|
||||
|
|
@ -52,12 +57,18 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
|||
link.href = url;
|
||||
link.onclick = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
scroll(0,0);
|
||||
const html = document.createElement('html');
|
||||
html.innerHTML = responseText;
|
||||
const newPost = html.querySelector('body')?.querySelector('#post');
|
||||
if (postDiv && newPost?.innerHTML) {
|
||||
const homeLink = document.createElement('a');
|
||||
homeLink.href = '/';
|
||||
homeLink.innerText = 'Home';
|
||||
postDiv.innerHTML = (newPost.innerHTML)
|
||||
const homeLinkWrapper = document.createElement('div');
|
||||
homeLinkWrapper.append(homeLink)
|
||||
postDiv.insertBefore(homeLinkWrapper, postDiv.firstChild);
|
||||
}
|
||||
}
|
||||
const item = document.createElement('li');
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
import { ArticleData } from "@extractus/article-extractor";
|
||||
export interface Props {
|
||||
article: ArticleData;
|
||||
isHome?: boolean;
|
||||
}
|
||||
|
||||
const { article } = Astro.props;
|
||||
const { article, isHome = false } = Astro.props;
|
||||
const datePublished =
|
||||
article?.published && new Date(article.published).toDateString();
|
||||
---
|
||||
|
||||
{
|
||||
article && (
|
||||
<div id="post">
|
||||
|
|
@ -50,7 +50,7 @@ const datePublished =
|
|||
p,
|
||||
table,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
margin: 0 0 1em;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const { title } = Astro.props;
|
|||
<title>{appTitle} {title && `| ${title}`}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot name="address-bar" />
|
||||
<slot />
|
||||
<div id="main-content">
|
||||
<div id="post-wrapper">
|
||||
<slot name="post" />
|
||||
|
|
@ -30,17 +30,10 @@ const { title } = Astro.props;
|
|||
|
||||
<style>
|
||||
#main-content {
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
max-width: 1000px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#post-wrapper, #library-wrapper {
|
||||
flex: 1
|
||||
}
|
||||
#post-wrapper {
|
||||
flex-grow: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style is:global>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import { extract } from "@extractus/article-extractor";
|
||||
import { ArticleData, extract } from "@extractus/article-extractor";
|
||||
import AddressBar from "../components/AddressBar.astro";
|
||||
import Post from "../components/Post.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
|
|
@ -7,39 +7,32 @@ import Library from "../components/Library.astro";
|
|||
|
||||
const params = Astro.url.searchParams;
|
||||
const url = params.get('url') || '';
|
||||
let article;
|
||||
let article: ArticleData;
|
||||
let skipSave;
|
||||
|
||||
try {
|
||||
article = await extract(url);
|
||||
} catch {
|
||||
article = {
|
||||
const error = {
|
||||
title: "Something is not right",
|
||||
content: "<p>The article extractor did not get any result.</p>",
|
||||
};
|
||||
skipSave = true;
|
||||
}
|
||||
|
||||
if (!article) {
|
||||
article = {
|
||||
title: "Something is not right",
|
||||
content: "<p>The article extractor did not get any result.</p>",
|
||||
}
|
||||
try {
|
||||
article = await extract(url) || error;
|
||||
} catch {
|
||||
article = error;
|
||||
skipSave = true;
|
||||
}
|
||||
|
||||
if (url === '') {
|
||||
article = {
|
||||
title: "Welcome to Cozy 🧸",
|
||||
author: "Ayo Ayco",
|
||||
content: "<p>Enter a URL in the address bar above to get started.</p>",
|
||||
content: "<p>Enter a URL above to get started.</p>",
|
||||
};
|
||||
skipSave = true;
|
||||
}
|
||||
|
||||
---
|
||||
<Layout title={url !== "" ? article?.title : "Your modern-day reading assistant"}>
|
||||
<AddressBar slot="address-bar" url={url} />
|
||||
<AddressBar url={url} />
|
||||
<Post slot="post" article={article} />
|
||||
<Library skipSave={skipSave} slot="library" postDivSelector="#post" />
|
||||
<Library skipSave={!article || skipSave} slot="library" postDivSelector="#post" />
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue