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”
- Header and Footer not within container in BaseLayout, only slot is they have this
- 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)
This is the javascript we use for theme toggle
And have a button with to make this work with litte bit of css
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 configastro.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
- We added styled our rss with
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.
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 through
fixed 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.⚒️
Read Next
Chasing Miles in Kalimpong
Running Through Rain - my experience
A Ray of hope
Written dring December 2023 winter break