feat: add dynamic home button + gh link
This commit is contained in:
parent
ad1b670ddc
commit
c6d0b071e9
8 changed files with 91 additions and 122 deletions
40
package-lock.json
generated
40
package-lock.json
generated
|
@ -8,8 +8,6 @@
|
||||||
"name": "@ayco/cozy",
|
"name": "@ayco/cozy",
|
||||||
"version": "0.1.13",
|
"version": "0.1.13",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astro-reactive/form": "^0.8.1",
|
|
||||||
"@astro-reactive/validator": "^0.3.4",
|
|
||||||
"@astrojs/netlify": "^2.2.2",
|
"@astrojs/netlify": "^2.2.2",
|
||||||
"@extractus/article-extractor": "^7.2.15",
|
"@extractus/article-extractor": "^7.2.15",
|
||||||
"sass": "^1.62.1"
|
"sass": "^1.62.1"
|
||||||
|
@ -30,35 +28,6 @@
|
||||||
"node": ">=6.0.0"
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@astro-reactive/common": {
|
|
||||||
"version": "0.1.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/@astro-reactive/common/-/common-0.1.9.tgz",
|
|
||||||
"integrity": "sha512-1qkN0wenlhTAnWQXPlq0SaG/3MCQzhI3x3Ttgin+1zGvVWRTRnsQrzOemW+NBX0VSm/oS0D3HO2ERQY74Ye0Ow=="
|
|
||||||
},
|
|
||||||
"node_modules/@astro-reactive/form": {
|
|
||||||
"version": "0.8.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.8.1.tgz",
|
|
||||||
"integrity": "sha512-m/IgQLi4Nh96aS3rCAClAJA2RTZSYFnKAYHi5/dZ0o7SupGAEW1uEcsQHAA+J5KoIh3HW0upVQY09eeYdcdGrA==",
|
|
||||||
"dependencies": {
|
|
||||||
"@astro-reactive/common": "*",
|
|
||||||
"@astro-reactive/validator": "*",
|
|
||||||
"short-unique-id": "^4.4.4"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"astro": "^2.1.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@astro-reactive/validator": {
|
|
||||||
"version": "0.3.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.3.4.tgz",
|
|
||||||
"integrity": "sha512-idxXh/ynMhjSYNPmapQOxvL6P+KVUXdu/YWUpXkj0dWHBSEyXAFBBgROeMLD+VWSymO6XfXJ+RAL/CjXRHu1zA==",
|
|
||||||
"dependencies": {
|
|
||||||
"@astro-reactive/common": "*"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"astro": "^2.1.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@astrojs/compiler": {
|
"node_modules/@astrojs/compiler": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.5.0.tgz",
|
||||||
|
@ -5165,15 +5134,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
|
||||||
"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
|
"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
|
||||||
},
|
},
|
||||||
"node_modules/short-unique-id": {
|
|
||||||
"version": "4.4.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
|
|
||||||
"integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw==",
|
|
||||||
"bin": {
|
|
||||||
"short-unique-id": "bin/short-unique-id",
|
|
||||||
"suid": "bin/short-unique-id"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/signal-exit": {
|
"node_modules/signal-exit": {
|
||||||
"version": "3.0.7",
|
"version": "3.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
|
||||||
|
|
|
@ -9,8 +9,6 @@
|
||||||
"astro": "^2.5.7"
|
"astro": "^2.5.7"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astro-reactive/form": "^0.8.1",
|
|
||||||
"@astro-reactive/validator": "^0.3.4",
|
|
||||||
"@astrojs/netlify": "^2.2.2",
|
"@astrojs/netlify": "^2.2.2",
|
||||||
"@extractus/article-extractor": "^7.2.15",
|
"@extractus/article-extractor": "^7.2.15",
|
||||||
"sass": "^1.62.1"
|
"sass": "^1.62.1"
|
||||||
|
|
|
@ -1,70 +1,77 @@
|
||||||
---
|
---
|
||||||
import Form, { FormGroup } from "@astro-reactive/form";
|
|
||||||
import { Validators } from "@astro-reactive/validator";
|
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { url } = Astro.props;
|
const { url } = Astro.props;
|
||||||
const form = new FormGroup([
|
|
||||||
{
|
|
||||||
name: "url",
|
|
||||||
value: url,
|
|
||||||
placeholder: "Type a URL here",
|
|
||||||
validators: [Validators.required, Validators.minLength(11)],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="address-bar">
|
<div class="address-bar">
|
||||||
<Form
|
<form>
|
||||||
formGroups={form}
|
<button type="button" id="app-home" name="app-home" onclick="window.location.href = '/';">
|
||||||
showValidationHints
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12l8.13-8.13z"/></svg>
|
||||||
/>
|
</button>
|
||||||
<nav>
|
<input type="text" id="app-url" name="url" value={url} placeholder="Type a URL here" />
|
||||||
<a href="/"
|
<button type="button" id="gh-link" onclick="window.location.href ='https://github.com/ayoayco/cozy';">
|
||||||
>📚 Home</a
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.375 8.174c.163-.4.688-1.987-.163-4.137c0 0-1.312-.413-4.3 1.625c-1.25-.35-2.587-.4-3.912-.4c-1.325 0-2.662.05-3.912.4c-2.988-2.05-4.3-1.625-4.3-1.625c-.85 2.15-.325 3.737-.163 4.137C2.612 9.262 2 10.662 2 12.362c0 6.437 4.162 7.887 9.975 7.887S22 18.799 22 12.362c0-1.7-.613-3.1-1.625-4.188ZM12 19.024c-4.125 0-7.475-.187-7.475-4.187c0-.95.475-1.85 1.275-2.588c1.338-1.225 3.625-.575 6.2-.575c2.588 0 4.85-.65 6.2.575c.813.738 1.275 1.625 1.275 2.588c0 3.987-3.35 4.187-7.475 4.187Zm-3.137-6.262c-.825 0-1.5 1-1.5 2.225s.674 2.237 1.5 2.237c.825 0 1.5-1 1.5-2.237c0-1.238-.675-2.225-1.5-2.225Zm6.274 0c-.825 0-1.5.987-1.5 2.225c0 1.237.675 2.237 1.5 2.237s1.5-1 1.5-2.237c0-1.238-.662-2.225-1.5-2.225Z"/></svg>
|
||||||
>
|
</a>
|
||||||
•
|
</form>
|
||||||
<a target="_blank" href="https://github.com/ayoayco/cozy"
|
|
||||||
>⭐️ GitHub</a
|
|
||||||
>
|
|
||||||
•
|
|
||||||
<a class="nav-badge" href="https://github.com/ayoayco/cozy-reader/releases/latest"><img alt="Alpha Version" src="https://img.shields.io/github/package-json/v/ayoayco/cozy?label=alpha" /></a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
|
||||||
|
const urlInput = document.getElementById('app-url') as HTMLInputElement;
|
||||||
|
if (urlInput.value === '')
|
||||||
|
homeBtn.setAttribute('style', 'display: none');
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.address-bar {
|
.address-bar {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
:global(form) {
|
||||||
|
width: 100%;
|
||||||
|
border: 0px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #555;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
box-shadow: 0 1px 3px 1px #ccc;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
:global(input[type="text"]) {
|
||||||
|
flex: 3;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0px;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
font-size: small;
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
}
|
||||||
a {
|
|
||||||
color: brown;
|
:global(button#app-home),
|
||||||
text-decoration: none;
|
:global(button#gh-link) {
|
||||||
}
|
border: 0px;
|
||||||
img {
|
background-color: transparent;
|
||||||
display: inline;
|
padding: 0px;
|
||||||
vertical-align: bottom;
|
cursor: pointer;
|
||||||
|
color: #555;
|
||||||
|
|
||||||
|
:global(svg) {
|
||||||
|
border: 0px;
|
||||||
|
background-color: transparent;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(input) {
|
:global(button#app-home) {
|
||||||
width: 100%;
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
:global(button#gh-link) {
|
||||||
|
margin-left: 0.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 0px;
|
}
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0.5rem;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
box-shadow: 0 1px 3px 1px #ccc;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -15,7 +15,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
||||||
<input type="checkbox" id="skipSave" name="skipSave" checked={skipSave} hidden />
|
<input type="checkbox" id="skipSave" name="skipSave" checked={skipSave} hidden />
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getPostCard } from '../utils/library-utils'
|
import { getPostCard } from '../utils/library'
|
||||||
const cache = await caches.open('cozy-reader');
|
const cache = await caches.open('cozy-reader');
|
||||||
const url = new URL(window.location.href);
|
const url = new URL(window.location.href);
|
||||||
const response = await cache.match(url)
|
const response = await cache.match(url)
|
||||||
|
@ -71,11 +71,15 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
||||||
const newPost = html.querySelector('body')?.querySelector('#post');
|
const newPost = html.querySelector('body')?.querySelector('#post');
|
||||||
if (postDiv && newPost?.innerHTML) {
|
if (postDiv && newPost?.innerHTML) {
|
||||||
postDiv.innerHTML = newPost.innerHTML
|
postDiv.innerHTML = newPost.innerHTML
|
||||||
|
const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
|
||||||
|
homeBtn.setAttribute('style', 'display: block');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const item = document.createElement('li');
|
const item = document.createElement('li');
|
||||||
item.appendChild(link);
|
item.appendChild(link);
|
||||||
list?.appendChild(item);
|
list?.appendChild(item);
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -105,7 +109,8 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.post-card) {
|
:global(.post-card) {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 1rem;
|
||||||
|
|
||||||
:global(.post-card__image) {
|
:global(.post-card__image) {
|
||||||
float: left;
|
float: left;
|
||||||
margin: 0.25rem 0.5rem 0.25rem 0;
|
margin: 0.25rem 0.5rem 0.25rem 0;
|
||||||
|
|
|
@ -8,9 +8,10 @@ const { article } = Astro.props;
|
||||||
const datePublished =
|
const datePublished =
|
||||||
article?.published && new Date(article.published).toDateString();
|
article?.published && new Date(article.published).toDateString();
|
||||||
---
|
---
|
||||||
{
|
|
||||||
article && (
|
|
||||||
<div id="post">
|
<div id="post">
|
||||||
|
{
|
||||||
|
article && article.url !== '/' &&
|
||||||
|
<>
|
||||||
{article.source && <span class="source">{article.source}</span>}
|
{article.source && <span class="source">{article.source}</span>}
|
||||||
{article.title && <h1 class="title">{article.title}</h1>}
|
{article.title && <h1 class="title">{article.title}</h1>}
|
||||||
{(article.author || datePublished) && (
|
{(article.author || datePublished) && (
|
||||||
|
@ -20,9 +21,9 @@ const datePublished =
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
<content set:html={article.content} />
|
<content set:html={article.content} />
|
||||||
</div>
|
</>
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
<style is:global lang="scss">
|
<style is:global lang="scss">
|
||||||
|
|
||||||
|
|
|
@ -40,13 +40,22 @@ const { meta } = Astro.props;
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style>
|
<style lang="scss">
|
||||||
#app-wrapper {
|
#app-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 650px;
|
max-width: 650px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
#main-content {
|
||||||
|
* {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#post-wrapper {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style is:global lang="scss">
|
<style is:global lang="scss">
|
||||||
:root {
|
:root {
|
||||||
|
|
|
@ -19,7 +19,7 @@ try {
|
||||||
article = await extract(url);
|
article = await extract(url);
|
||||||
if (!article ) {
|
if (!article ) {
|
||||||
article = error;
|
article = error;
|
||||||
// skipSave = true;
|
skipSave = true;
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
article = error;
|
article = error;
|
||||||
|
@ -32,17 +32,11 @@ if (url === '') {
|
||||||
content: "<p>Enter a URL above to get started.</p>",
|
content: "<p>Enter a URL above to get started.</p>",
|
||||||
url: '/'
|
url: '/'
|
||||||
};
|
};
|
||||||
skipSave = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
---
|
---
|
||||||
<Layout meta={article}>
|
<Layout meta={article}>
|
||||||
<AddressBar url={url} />
|
<AddressBar url={url} />
|
||||||
{
|
<Post slot="post" article={article} />
|
||||||
url
|
<Library skipSave={skipSave} slot="library" postDivSelector="#post"/>
|
||||||
? <Post slot="post" article={article} />
|
|
||||||
:
|
|
||||||
<div slot="post" id="outlet"></div>
|
|
||||||
}
|
|
||||||
<Library skipSave={skipSave} slot="library" postDivSelector="#outlet" />
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -11,9 +11,6 @@ export function getPostCard(html: HTMLHtmlElement) {
|
||||||
const image = html
|
const image = html
|
||||||
.querySelector('meta[property="cozy:image"]')
|
.querySelector('meta[property="cozy:image"]')
|
||||||
?.getAttribute("content");
|
?.getAttribute("content");
|
||||||
const url = html
|
|
||||||
.querySelector('meta[property="cozy:url"]')
|
|
||||||
?.getAttribute("content");
|
|
||||||
const source = html
|
const source = html
|
||||||
.querySelector('meta[property="cozy:source"]')
|
.querySelector('meta[property="cozy:source"]')
|
||||||
?.getAttribute("content");
|
?.getAttribute("content");
|
||||||
|
@ -39,19 +36,17 @@ export function getPostCard(html: HTMLHtmlElement) {
|
||||||
<div class="post-card__meta">
|
<div class="post-card__meta">
|
||||||
${
|
${
|
||||||
source
|
source
|
||||||
? `
|
&& `
|
||||||
<p class="post-card__source">${source}</p>
|
<p class="post-card__source">${source}</p>
|
||||||
`
|
`
|
||||||
: ""
|
|
||||||
}
|
}
|
||||||
${
|
${
|
||||||
published
|
published
|
||||||
? `
|
&& `
|
||||||
<p class="post-card__published">${
|
<p class="post-card__published">${
|
||||||
new Date(published)?.toLocaleDateString() || ""
|
new Date(published)?.toLocaleDateString() || ""
|
||||||
}</p>
|
}</p>
|
||||||
`
|
`
|
||||||
: ""
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
Loading…
Reference in a new issue