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

feat: library on homepage

Browse source
This commit is contained in:
Ayo 2023-06-04 19:34:33 +02:00
parent b3eb0ab8fc
commit 1ecc7f541d
5 changed files with 492 additions and 4240 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4673
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

15
src/components/Library.astro
View file

@ -7,6 +7,7 @@ export interface Props {
const {postDivSelector, skipSave = false} = Astro.props; const {postDivSelector, skipSave = false} = Astro.props;
--- ---
<div id="library"> <div id="library">
<h2></h2>
<ul id="post-list"></ul> <ul id="post-list"></ul>
</div> </div>
@ -28,6 +29,11 @@ const {postDivSelector, skipSave = false} = Astro.props;
const cachedResponses = await cache.keys(); const cachedResponses = await cache.keys();
const list = document.querySelector('#post-list'); const list = document.querySelector('#post-list');
if (cachedResponses.length) {
const heading = document.querySelector('#library h2') as HTMLHeadingElement;
heading.innerText = 'Previously viewed:';
}
cachedResponses cachedResponses
.filter(request => { .filter(request => {
const urlObj = new URL(request.url); const urlObj = new URL(request.url);
@ -37,7 +43,6 @@ const {postDivSelector, skipSave = false} = Astro.props;
const {url} = request; const {url} = request;
const link = document.createElement('a'); const link = document.createElement('a');
let responseText; let responseText;
const fullResponse = await cache.match(url) const fullResponse = await cache.match(url)
@ -52,12 +57,18 @@ const {postDivSelector, skipSave = false} = Astro.props;
link.href = url; link.href = url;
link.onclick = async (e) => { link.onclick = async (e) => {
e.preventDefault(); e.preventDefault();
scroll(0,0);
const html = document.createElement('html'); const html = document.createElement('html');
html.innerHTML = responseText; html.innerHTML = responseText;
const newPost = html.querySelector('body')?.querySelector('#post'); const newPost = html.querySelector('body')?.querySelector('#post');
if (postDiv && newPost?.innerHTML) { if (postDiv && newPost?.innerHTML) {
const homeLink = document.createElement('a');
homeLink.href = '/';
homeLink.innerText = 'Home';
postDiv.innerHTML = (newPost.innerHTML) postDiv.innerHTML = (newPost.innerHTML)
const homeLinkWrapper = document.createElement('div');
homeLinkWrapper.append(homeLink)
postDiv.insertBefore(homeLinkWrapper, postDiv.firstChild);
} }
} }
const item = document.createElement('li'); const item = document.createElement('li');

6
src/components/Post.astro
View file

@ -2,13 +2,13 @@
import { ArticleData } from "@extractus/article-extractor"; import { ArticleData } from "@extractus/article-extractor";
export interface Props { export interface Props {
article: ArticleData; article: ArticleData;
isHome?: boolean;
} }
const { article } = Astro.props; const { article, isHome = false } = Astro.props;
const datePublished = const datePublished =
article?.published && new Date(article.published).toDateString(); article?.published && new Date(article.published).toDateString();
--- ---
{ {
article && ( article && (
<div id="post"> <div id="post">
@ -50,7 +50,7 @@ const datePublished =
p, p,
table, table,
ul { ul {
margin: 1em 0; margin: 0 0 1em;
font-size: 20px; font-size: 20px;
} }

11
src/layouts/Layout.astro
View file

@ -16,7 +16,7 @@ const { title } = Astro.props;
<title>{appTitle} {title && `| ${title}`}</title> <title>{appTitle} {title && `| ${title}`}</title>
</head> </head>
<body> <body>
<slot name="address-bar" /> <slot />
<div id="main-content"> <div id="main-content">
<div id="post-wrapper"> <div id="post-wrapper">
<slot name="post" /> <slot name="post" />
@ -30,17 +30,10 @@ const { title } = Astro.props;
<style> <style>
#main-content { #main-content {
display: flex;
padding: 1em; padding: 1em;
max-width: 1000px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }
#post-wrapper, #library-wrapper {
flex: 1
}
#post-wrapper {
flex-grow: 2;
}
</style> </style>
<style is:global> <style is:global>

27
src/pages/index.astro
View file

@ -1,5 +1,5 @@
--- ---
import { extract } from "@extractus/article-extractor"; import { ArticleData, extract } from "@extractus/article-extractor";
import AddressBar from "../components/AddressBar.astro"; import AddressBar from "../components/AddressBar.astro";
import Post from "../components/Post.astro"; import Post from "../components/Post.astro";
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
@ -7,39 +7,32 @@ import Library from "../components/Library.astro";
const params = Astro.url.searchParams; const params = Astro.url.searchParams;
const url = params.get('url') || ''; const url = params.get('url') || '';
let article; let article: ArticleData;
let skipSave; let skipSave;
try { const error = {
article = await extract(url);
} catch {
article = {
title: "Something is not right", title: "Something is not right",
content: "<p>The article extractor did not get any result.</p>", content: "<p>The article extractor did not get any result.</p>",
};
skipSave = true;
} }
if (!article) { try {
article = { article = await extract(url) || error;
title: "Something is not right", } catch {
content: "<p>The article extractor did not get any result.</p>", article = error;
}
skipSave = true; skipSave = true;
} }
if (url === '') { if (url === '') {
article = { article = {
title: "Welcome to Cozy 🧸", title: "Welcome to Cozy 🧸",
author: "Ayo Ayco", content: "<p>Enter a URL above to get started.</p>",
content: "<p>Enter a URL in the address bar above to get started.</p>",
}; };
skipSave = true; skipSave = true;
} }
--- ---
<Layout title={url !== "" ? article?.title : "Your modern-day reading assistant"}> <Layout title={url !== "" ? article?.title : "Your modern-day reading assistant"}>
<AddressBar slot="address-bar" url={url} /> <AddressBar url={url} />
<Post slot="post" article={article} /> <Post slot="post" article={article} />
<Library skipSave={skipSave} slot="library" postDivSelector="#post" /> <Library skipSave={!article || skipSave} slot="library" postDivSelector="#post" />
</Layout> </Layout>