Tech Notes about this web site

Goals

A modern (responsive / mobile first) website
Simple to manage
As fast as it could be ; try to get high 90 in Google PageSpeed
Security maintain a “A” rating
Incorporate only those lines of code that we understand. No Blind copy paste from another website or tutorial
Be on bleeding latest branch 😁 it is always fun and good to learn when things get broken. More on this principle
maintain a decent GitHub repo with frequent commits ; so if things break always reverse quickly.

Approach

As we switched to Astro and Tailwind as base tools these are more specific to these.

use only pnpm ✅
tsconfig.json using alias @✅
Theme switch between dark and light mode ✅
404 custom error handling ✅
Use Astro’s ViewTransitions to have a smooth transition (seamless animations) between pages.
Active menu Implementation or selected item is highlighted ✅
ensure search pagefind is working
RSS , sitemap ✅
Modification time ✅
- We followed the Astro Documentation for this.
Different font for h1 and text and code ✅
ensure compress/minify is part of build before deploying to firebase ✅
ensure _blank for external site✅ ; ⚒️ add an icon to signify the same
container ✅
- Header and Footer not within container in BaseLayout, only slot is they have this
  - class=“max-w-[85rem] flex flex-wrap basis-full items-center w-full mx-auto px-4 sm:px-6 lg:px-8”
Footer ✅ ~~coffee part is missing ⚒️ ; rest done~~
- pay close attentions for icon line and its closing the last

Let’s start

INFO

pnpm create astro@latest v2-tailwind-astro
choose empty , strict/stricitest
pnpm astro add tailwind
pnpm astro add mdx
pnpm astro add sitemap
pnpm add —save-dev —save-exact prettier
pnpm add —save-dev —save-exact prettier-plugin-tailwindcss
pnpm install -D @tailwindcss/typography
~~pnpm install preline~~ ( Removed this package Build Issue )
pnpm astro add astro-icon
pnpm install sharp (had to install separately , to fix - build failed, could be related to preline and strict mode )
pnpm add @astrojs/rss
pnpm add dayjs ; to incorporate modify time of markdown

astro check fails

DANGER

2023 - February ; Looks like it was added sometime back in astro distribution; in package.json before build and that is where my builds are failing. This is due to poor JS/TS scripting.

TIP

2023 - March ; looked into each of them; they were mostly simple one ; Google Search and reading some tech forum fixed those issues.

Darkmode

First of all this is our corrent settings with Tailwind (3.4). We use class with darkMode: ‘selector’.

Plan is to move to media strategy as that is supported bu upcoming tailwind version 4 (currently in alpha as of March ‘23)

/** @type {import('tailwindcss').Config} */
// const colors = require("tailwindcss/colors");
// colors worked but we are still not using the variable name in our code - santm
module.exports = {
        content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
        darkMode: "class",
        theme: {
                extend: {
                        fontFamily: {
                                sans: [
                                        '"Inter var", sans-serif',
                                        {
                                          fontFeatureSettings: '"cv11", "ss01"',
                                          fontVariationSettings: '"opsz" 32'
                                        },
                                  ],
                          },
                },
        },
        plugins: [
                require('@tailwindcss/typography'),
        ],
}

This is the javascript we use for theme toggle

                const theme = (() => {
                        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
                                return localStorage.getItem('theme')
                        }
                        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                                return 'dark'
                        }
                        return 'light'
                })()

                if (theme === 'light') {
                        document.documentElement.classList.remove('dark')
                } else {
                        document.documentElement.classList.add('dark')
                }

                // Perform null check before setting localStorage
                if (typeof theme === 'string') {
                        window.localStorage.setItem('theme', theme)
                }

                const handleToggleClick = () => {
                        const element = document.documentElement
                        element.classList.toggle('dark')
                        const isDark = element.classList.contains('dark')

                        // Perform null check before using localStorage
                        if (window.localStorage) {
                                localStorage.setItem('theme', isDark ? 'dark' : 'light')
                        }
                }

                // Perform null check before adding event listener
                const themeToggle = document.getElementById('themeToggle')
                if (themeToggle) {
                        themeToggle.addEventListener('click', handleToggleClick)
                }

And have a button with to make this work with litte bit of css

/* dark light */
#themeToggle {
  border: 0;
  background: none;
}
.sun {
  fill: black;
}
.moon {
  fill: transparent;
}
:root .dark .sun {
  fill: transparent !important; /* Ensure high specificity */
}
:root.dark .moon {
  fill: white !important; /* Ensure high specificity */
}
/* dark light */

RSS

First of all we need to add the Astro addon for RSS, and RSS will be generated after we run first build.

pnpm i @astrojs/rss
Need to define site in our astro config astro.config.mjs for us.
The vanilla rss output is very boring and hard to read for human eyes.
- We added styled our rss with pretty-feed-v3.xsl This is our rss script with all the custom opion

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
export async function GET(context) {
    const blog = await getCollection('blog');
  return rss({
    stylesheet: "/pretty-feed-v3.xsl",
    title: 'Aashiyana of Pamela Santanu',
    description: 'Rumblings on life, travel, photography, wildlife, running, baking, cooking  or anything under sun',
    site: context.site,
    items: blog.reverse().map((post) => ({
        title: post.data.title,
        author: post.data.author,
        // category:post.data.category,
        description: post.data.description,
        pubDate: post.data.pubDate,
        link: `/blog/${post.slug}/`,
      })),
    // (optional) inject custom xml
    customData: `<language>en-us</language>`,
  });
}

Sitemap

First we need to install the astro package search engine can crawl our site more efficiently.

pnpm astro add sitemap And then we just need to modify our section to add this as by default while the build process creates the output in dist folder it will not be linked. So we need to add this in the head section.

<link rel="sitemap" href="/sitemap-index.xml">

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://santm.com/sitemap-0.xml</loc>
</sitemap>
</sitemapindex>

This https://santm.com/sitemap-0.xml contains the realy meat 😊 with all links from the web site.

Search

As Astro builds a static website by default and that is what we ae building for now; there is no server side code. All is html, js, css as output. So we need to rely on client side ( user browser ) to do the same. Pagefind UI looks like the one of the strong canditate among many, and as I have used pagefind with HUGO it was natural choice.

But implementing JS with astro is no fun, as by default astro builds page without any JS. From their documentation with zero JavaScript footprint added by default. These two web site really healped me along with few others.

https://scottwillsey.com/astro-pagefind/#main-nav ( for CSS)
https://minifloppy.it/posts/2024/adding-pagefind-search-astro-website/ (or code)
passing throughfixed JS
creating custom global css for search page - help form developer tool

TIP

Unfortunately pagefind ui needs script-src ‘self’ ‘unsafe-eval’ ‘unsafe-inline’; style-src ‘self’ ‘unsafe-inline’; for CSP (Content-Security-Policy)

Active

This was not so difficult to implement. Astro’s many Theme has that and once we understand the logic it is pretty simple.All we need to do was to have a logic for Astro.url.pathname.

I amm completely no happy wih the same. I would like to get something more… but that is work in proress.⚒️

<a
                    aria-current={Astro.url.pathname === href}
                    class:list={[
                      'link',
                      {
                        active:
                          Astro.url.pathname === href ||
                          (href !== '/' && Astro.url.pathname.startsWith(href))
                      }
                    ]}
                    href={href}
                  >
                    {label}
                  </a>

/* for nav */
.link.active {
  color: #ec4899; /*bg-pink-500;*/;
}
/* for nav */

Last Modified: 09 April 2024 13:18:29 UTC

Engine Room