feat: add pages to assets for caching
This commit is contained in:
parent
d7bb02bbad
commit
efda4b0013
7 changed files with 116 additions and 3 deletions
|
@ -3,7 +3,7 @@ import node from "@astrojs/node";
|
|||
import serviceWorker from "./index.js";
|
||||
|
||||
export default defineConfig({
|
||||
output: "server",
|
||||
output: "hybrid",
|
||||
adapter: node({
|
||||
mode: "middleware"
|
||||
}),
|
||||
|
|
16
index.js
16
index.js
|
@ -79,7 +79,7 @@ export default function serviceWorker(config) {
|
|||
'astro:build:ssr': ({ manifest }) => {
|
||||
assets = manifest.assets.filter(ass => !ass.includes('sw.js'))
|
||||
},
|
||||
'astro:build:done': async ({ dir, routes }) => {
|
||||
'astro:build:done': async ({ dir, routes, pages, }) => {
|
||||
const outFile = fileURLToPath(new URL('./sw.js', dir));
|
||||
const __dirname = path.resolve(path.dirname('.'));
|
||||
const swPath = path.join(__dirname, serviceWorkerPath ?? '');
|
||||
|
@ -88,9 +88,21 @@ export default function serviceWorker(config) {
|
|||
const _routes = routes
|
||||
.filter(({isIndex}) => isIndex)
|
||||
.map(({pathname}) => pathname)
|
||||
.filter(pathname => pathname !== '')
|
||||
?? [];
|
||||
|
||||
assets = [...new Set([...assets, ..._routes])]
|
||||
const _pages = pages
|
||||
.map(({pathname}) => {
|
||||
const lastChar = pathname.slice(-1);
|
||||
const len = pathname.length;
|
||||
return lastChar === '/'
|
||||
? `/${pathname.slice(0, len-1)}`
|
||||
: `/${pathname}`;
|
||||
})
|
||||
.filter(pathname => pathname !== '')
|
||||
?? [];
|
||||
|
||||
assets = [...new Set([...assets, ..._routes, ..._pages])]
|
||||
|
||||
console.log('>>> assets', assets);
|
||||
|
||||
|
|
66
src/content/blog/building-a-cozy-web.md
Normal file
66
src/content/blog/building-a-cozy-web.md
Normal file
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: Building a Cozy Web
|
||||
description: Let us build the web we want!
|
||||
pubDate: 'Aug 14 2024'
|
||||
heroImage: '/cozy.jpg'
|
||||
---
|
||||
|
||||
> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web).
|
||||
|
||||
Have you ever clicked a link to an article, all hyped up to read the content, only to be slapped in the face with popups over popups of requests to subscribe and asking consent to track you with cookies?
|
||||
|
||||
Do you sometimes wish you can have a consistent experience when opening articles... a place to save all your favorites, and possibly get helpful insights?
|
||||
|
||||
Ah, well you're not alone. 🤣
|
||||
|
||||
This is exactly why I started [**Cozy** 🧸](https://cozy.ayco.io/).
|
||||
|
||||
It's a simple web page that can make any web page content-focused! 🎉
|
||||
|
||||
It uses a library called [@extractus/article-extractor](https://www.npmjs.com/package/@extractus/article-extractor) to fetch and extract just the content.
|
||||
|
||||
Then with [Astro](https://astro.build), we can server-side render the page so your browser only gets clean HTML!
|
||||
|
||||
No nonsense. No headaches.
|
||||
|
||||
The project and the road map for features are all public on my [GitHub](https://github.com/ayoayco/cozy-reader)
|
||||
|
||||
## Cozy Features
|
||||
|
||||
Right now, it successfully extracts the content and delivers a clean page to your browser.
|
||||
|
||||
I'm working toward bringing the following in the coming weeks:
|
||||
1. Save favorites to a library
|
||||
2. Offline access
|
||||
3. Smart Insights about the article
|
||||
4. Easier usage (browser extensions or apps?)
|
||||
|
||||
## Coziest Usage
|
||||
|
||||
The most convenient way to use it right now is through what we call a browser bookmarklet.
|
||||
|
||||
Basically you can have a button there beside your other bookmarks that will open the current page in Cozy.
|
||||
|
||||
You can create this new bookmark titled 'Get cozy!' and put the following as value for the URL:
|
||||
|
||||
```js
|
||||
javascript:(function(){ window.open('https://cozy.ayco.io/?url=%27 + window.location.href, %27_self%27); })();
|
||||
```
|
||||
|
||||
This is possible on all major browsers, including Safari on iOS (where I personally use this often). Some screenshots:
|
||||
|
||||
| Firefox | Chrome |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
## Join the Project!
|
||||
|
||||
I'm sure this looks very simple, but I think this is the most exciting hobby project I've started yet.
|
||||
|
||||
There's a lot that happened and a lot of problems could have been avoided if people were equipped to assess the content they find online.
|
||||
|
||||
I think there's lots of good a simple tool could bring if it allows users to cut-through all the distractions and are presented with unbiased and accurate information.
|
||||
|
||||
This project is a groundwork for this experience.
|
||||
|
||||
Let's build the web we want! 🧸
|
16
src/content/config.ts
Normal file
16
src/content/config.ts
Normal file
|
@ -0,0 +1,16 @@
|
|||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const blog = defineCollection({
|
||||
type: 'content',
|
||||
// Type-check frontmatter using a schema
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
// Transform string to Date object
|
||||
pubDate: z.coerce.date(),
|
||||
updatedDate: z.coerce.date().optional(),
|
||||
heroImage: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { blog };
|
1
src/env.d.ts
vendored
1
src/env.d.ts
vendored
|
@ -1 +1,2 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
17
src/pages/blog/[...slug].astro
Normal file
17
src/pages/blog/[...slug].astro
Normal file
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from 'astro:content';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
type Props = CollectionEntry<'blog'>;
|
||||
|
||||
const post = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
---
|
||||
|
||||
<Content />
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
export const prerender = false
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
|
Loading…
Reference in a new issue