Skip to content

Commit

Permalink
feat: now using astro-pwa integration
Browse files Browse the repository at this point in the history
  • Loading branch information
jamerrq committed Apr 10, 2024
1 parent 144859c commit 228374d
Show file tree
Hide file tree
Showing 27 changed files with 685 additions and 174 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
dist/
.vercel/
.unlighthouse/
dev-dist/

# generated types
.astro/
Expand Down
101 changes: 53 additions & 48 deletions astro.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { defineConfig } from 'astro/config'

// PWA Support
import { VitePWA } from 'vite-plugin-pwa'
// PWA
import AstroPWA from '@vite-pwa/astro'
import { manifest } from './src/utils/seoConfig'

// Integrations
Expand All @@ -11,7 +11,6 @@ import robotsTxt from 'astro-robots-txt'
import preact from '@astrojs/preact'
import pageInsight from 'astro-page-insight'
import sitemap from '@astrojs/sitemap'
import compress from 'astro-compress'
import mdx from '@astrojs/mdx'

// https://astro.build/config
Expand All @@ -29,7 +28,54 @@ export default defineConfig({
page !== 'https://jamerrq.deno.dev/es/board/'
}),
mdx(),
compress()
AstroPWA({
registerType: 'autoUpdate',
manifest,
devOptions: {
enabled: true
},
workbox: {
globDirectory: 'dist/client',
globPatterns: [
'**/*.woff2',
'pizarra.webp',
'img/this_is_fine.webp',
'movies/bitwise_liminal_compressed_240p.webm',
'_astro/*.module.*.js',
'_astro/client.*.js',
'_astro/hoisted.*.js',
'_astro/*icons.*.js'
// 'offline.html',
],
// Don't fallback on document based (e.g. `/some-page`) requests
// This removes an errant console.log message from showing up.
navigateFallback: null, // 'offline.html' <- working on this
runtimeCaching: [
{
urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|avif)$/,
handler: 'CacheFirst',
options: {
cacheName: 'images',
expiration: {
maxEntries: 100,
maxAgeSeconds: 30 * 24 * 60 * 60
}
}
},
{
urlPattern: /\.(?:woff|woff2|ttf|eot|ico)$/,
handler: 'CacheFirst',
options: {
cacheName: 'fonts',
expiration: {
maxEntries: 10,
maxAgeSeconds: 30 * 24 * 60 * 60
}
}
}
]
}
})
],
output: 'server',
i18n: {
Expand All @@ -48,49 +94,8 @@ export default defineConfig({
inlineStylesheets: 'always'
},
vite: {
// build: {
// cssMinify: "lightningcss"
// },
plugins: [
VitePWA({
registerType: 'autoUpdate',
manifest,
workbox: {
globDirectory: 'dist/client',
globPatterns: [
'**/*.{woff2}',
'pizarra.webp',
'bitwise_liminal_compressed_240p.webm'
],
// Don't fallback on document based (e.g. `/some-page`) requests
// This removes an errant console.log message from showing up.
navigateFallback: null,
runtimeCaching: [
{
urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|avif)$/,
handler: 'CacheFirst',
options: {
cacheName: 'images',
expiration: {
maxEntries: 100,
maxAgeSeconds: 30 * 24 * 60 * 60
}
}
},
{
urlPattern: /\.(?:woff|woff2|ttf|eot|ico)$/,
handler: 'CacheFirst',
options: {
cacheName: 'fonts',
expiration: {
maxEntries: 10,
maxAgeSeconds: 30 * 24 * 60 * 60
}
}
}
]
}
})
]
build: {
cssMinify: 'lightningcss'
}
}
})
Binary file modified bun.lockb
Binary file not shown.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,14 @@
"@midudev/tailwind-animations": "^0.0.7",
"@typescript-eslint/eslint-plugin": "latest",
"@typescript-eslint/parser": "latest",
"@vite-pwa/astro": "^0.3.1",
"eslint": "^8.56.0",
"eslint-config-preact": "^1.3.0",
"eslint-plugin-astro": "^0.31.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"husky": "^8.0.3",
"jest": "^29.7.0",
"lightningcss": "^1.24.1",
"postcss-nesting": "^12.1.1",
"prettier": "^3.1.1",
"prettier-config-standard": "^7.0.0",
Expand Down
Binary file added public/img/blog/computer.webp
Binary file not shown.
Binary file added public/img/this_is_fine.webp
Binary file not shown.
131 changes: 131 additions & 0 deletions public/offline.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jamerrq.dev - Offline Mode</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
font-family: inherit;
}

body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
font-family: 'Rubik Subset', sans-serif;
color: #6ee7b7;
}

main {
display: flex;
flex-direction: column;
place-items: center;
justify-content: center;
height: 100dvh;
width: 100dvw;
margin: 0;
font-family: 'Rubik Subset', sans-serif;
color: #6ee7b7;
font-size: 2em;
gap: 1em;
}

.background {
background-image: url('/pizarra.webp');
min-height: 100%;
width: 100vw;
background-position: center;
background-repeat: repeat;
position: fixed;
top: 0;
left: 0;
z-index: -50;
inset: 0;
filter: blur(5px);
}

@font-face {
font-family: 'Rubik Subset';
src: url('/fonts/rubik-doodle-shadow-latin-400-patched.woff2')
format('woff2');
}

/* HTML: <div class="loader"></div> */
.loader {
width: fit-content;
font-weight: bold;
font-size: 0.65em;
background: radial-gradient(circle closest-side, #000 94%, #0000)
right/calc(200% - 1em) 100%;
animation: l24 1s infinite alternate linear;
background-color: #34d399cc;
border-radius: 0.5em;
padding: 0.5em 0.5em;
}

.loader::before {
content: '* Checking your internet connection *';
color: #0000;
line-height: 1em;
background: inherit;
background-image: radial-gradient(circle closest-side, #fff 94%, #000);
-webkit-background-clip: text;
background-clip: text;
}

video {
border-radius: 0.125em;
}

span {
font-size: 2.5em;
color: #6ee7b7;
/* background-color: #0D9488cc; */
border-radius: 5px;
padding: 0.08em 0.125em;
}

@keyframes l24 {
100% {
background-position: left;
}
}
</style>
</head>
<body>
<div class="background"></div>
<main>
<span>You're offline!</span>
<a
href="https://killedbyapixel.github.io/TinyCode/256B/BitwiseLiminal/"
target="_blank"
rel="noopener noreferrer"
title="Bitwise Liminal by KilledByAPixel"
aria-label="Bitwise Liminal by KilledByAPixel"
>
<video
src="/movies/bitwise_liminal_compressed_240p.webm"
autoplay
style="width: 100%; height: 100%"
muted
loop
playsinline
preload="auto"
class="object-cover rounded"
></video>
</a>
<script>
window.addEventListener('online', () => {
// reload with cache busting
window.location.href = '/'
})
</script>
<div class="loader"></div>
</main>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@ const { lang = 'en' }: Props = Astro.props
<Bento>
<About lang={lang} />
<Buttons href={lang === 'en' ? '/es/destacados-y-proyectos' : '/featured'} />
<ProjectsPreact lang={lang} client:only />
<ResourcesPreact client:only />
<ProjectsPreact lang={lang} client:only='preact' />
<ResourcesPreact client:only='preact' />
</Bento>
25 changes: 25 additions & 0 deletions src/components/featured-and-projects/indexPicker.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
export default function IndexPicker({
n,
reference
}: {
n: number
reference: any
}) {
function goToIndex(i: number) {
reference.value = i
}
return (
<div className='absolute flex bottom-3 left-1/2 transform -translate-x-1/2'>
{Array.from(Array(n).keys()).map((i) => (
<button
key={i}
onClick={() => goToIndex(i)}
aria-label={`subpage ${i}`}
className={`w-3 h-3 rounded-full mx-1 ${
i === reference.value ? 'bg-cyan-300' : 'bg-cyan-950'
}`}
/>
))}
</div>
)
}
43 changes: 11 additions & 32 deletions src/components/featured-and-projects/projects.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { data } from '@data/projects.json'

import { shuffle } from '@utils'

const shuffledData = shuffle([...data])
const shuffledData = import.meta.env.DEV ? data : shuffle([...data])

// featured projects go first
const featured = shuffledData.filter((project) => project.featured)
Expand Down Expand Up @@ -83,42 +83,21 @@ const BUTTONS_STYLES = [
'shadow-md shadow-black/90'
].join(' ')

export function IndexPicker({
n,
reference
}: {
n: number
reference: typeof index
}) {
function goToIndex(i: number) {
reference.value = i
}
return (
<div className='absolute flex bottom-3 left-1/2 transform -translate-x-1/2'>
{Array.from(Array(n).keys()).map((i) => (
<button
key={i}
onClick={() => goToIndex(i)}
aria-label={`subpage ${i}`}
className={`w-3 h-3 rounded-full mx-1 ${
i === reference.value ? 'bg-cyan-300' : 'bg-cyan-950'
}`}
/>
))}
</div>
)
}
import IndexPicker from './indexPicker'

function ImageCarousel({ images }: { images: string[] }) {
const currentImage = images[imagesIndex.value]
return (
<div className='relative w-full h-full'>
<div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'>
<img
src={`/img/projects/${images[imagesIndex.value]}`}
alt='project'
class='w-full rounded-md border-2 shadow shadow-black'
loading='lazy'
/>
{currentImage && (
<img
src={`/img/projects/${images[imagesIndex.value]}`}
alt='project'
class='w-full rounded-md border-2 shadow shadow-black'
loading='lazy'
/>
)}
</div>
<IndexPicker n={images?.length ?? 0} reference={imagesIndex} />
</div>
Expand Down
Loading

0 comments on commit 228374d

Please sign in to comment.