Fix autamations links and add a blog post about our frontend

src/content/posts/how-to-use-automations.mdx

@@ -20,16 +20,16 @@ This is an experimental feature that allows you to stay focused in your day by p
 
 You can try any of these out. Your time zone will automatically be inferred from your location. You can send yourself a Preview message to see what the Khoj output would look like before you commit to the schedule.
 
-<ClickableCard title={"Give me a summary of the latest news about marine biology."} link={"https://app.khoj.dev/automations?subject=Latest%20Marine%20Biology%20News%20Summary&crontime=45%2010%20*%20*%200&queryToRun=Give%20me%20a%20summary%20of%20the%20latest%20news%20about%20marine%20biology"} />
+<ClickableCard title={"Give me a summary of the latest news about marine biology."} link={"https://app.khoj.dev/automations?subject=Latest%20Marine%20Biology%20News%20Summary&crontime=45%2010%20*%20*%200&query=Give%20me%20a%20summary%20of%20the%20latest%20news%20about%20marine%20biology"} />
 
-<ClickableCard title={"Paint me a watercolor image depicting mountains, nature, futurism. Take into account the weather."} link={"https://app.khoj.dev/automations?subject=Watercolor%20Painting%3A%20Mountains%2C%20Nature%2C%20and%20Futurism%20with%20Weather%20Consideration&crontime=00%209%20*%20*%206&queryToRun=Paint%20me%20a%20watercolor%20image%20depicting%20mountains%2C%20nature%2C%20futurism.%20Take%20into%20account%20the%20weather."} />
+<ClickableCard title={"Paint me a watercolor image depicting mountains, nature, futurism. Take into account the weather."} link={"https://app.khoj.dev/automations?subject=Watercolor%20Painting%3A%20Mountains%2C%20Nature%2C%20and%20Futurism%20with%20Weather%20Consideration&crontime=00%209%20*%20*%206&query=Paint%20me%20a%20watercolor%20image%20depicting%20mountains%2C%20nature%2C%20futurism.%20Take%20into%20account%20the%20weather."} />
 
-<ClickableCard title={"Tell me about upcoming video game releases this month."} link={"https://app.khoj.dev/automations?subject=Upcoming%20Video%20Game%20Releases%20This%20Month&crontime=00%2010%201%20*%20*&queryToRun=Tell%20me%20about%20upcoming%20video%20game%20releases%20this%20month"} />
+<ClickableCard title={"Tell me about upcoming video game releases this month."} link={"https://app.khoj.dev/automations?subject=Upcoming%20Video%20Game%20Releases%20This%20Month&crontime=00%2010%201%20*%20*&query=Tell%20me%20about%20upcoming%20video%20game%20releases%20this%20month"} />
 
-<ClickableCard title={"Tell me if a Beyonce single dropped yesterday."} link={"https://app.khoj.dev/automations?subject=Beyonc%C3%A9%20Single%20Release%20Update&crontime=15%2010%20*%20*%20*&queryToRun=Tell%20me%20if%20a%20Beyonc%C3%A9%20single%20dropped%20yesterday"} />
+<ClickableCard title={"Tell me if a Beyonce single dropped yesterday."} link={"https://app.khoj.dev/automations?subject=Beyonc%C3%A9%20Single%20Release%20Update&crontime=15%2010%20*%20*%20*&query=Tell%20me%20if%20a%20Beyonc%C3%A9%20single%20dropped%20yesterday"} />
 
-<ClickableCard title={"Based on your general knowledge, give me the name of a 90s hip hop song I should listen to. It should vary everyday."} link={"https://app.khoj.dev/automations?subject=Daily%2090s%20Hip%20Hop%20Song%20Recommendation&crontime=00%201%20*%20*%20*&queryToRun=Based%20on%20your%20general%20knowledge%2C%20give%20me%20the%20name%20of%20a%2090s%20hip%20hop%20song%20I%20should%20listen%20to.%20It%20should%20vary%20everyday."} />
+<ClickableCard title={"Based on your general knowledge, give me the name of a 90s hip hop song I should listen to. It should vary everyday."} link={"https://app.khoj.dev/automations?subject=Daily%2090s%20Hip%20Hop%20Song%20Recommendation&crontime=00%201%20*%20*%20*&query=Based%20on%20your%20general%20knowledge%2C%20give%20me%20the%20name%20of%20a%2090s%20hip%20hop%20song%20I%20should%20listen%20to.%20It%20should%20vary%20everyday."} />
 
-<ClickableCard title={"Make a bedtime story that I can read to my 3 year old. It should just be five paragraphs long."} link={"https://app.khoj.dev/automations?subject=Five-Paragraph%20Bedtime%20Story%20for%20a%203-Year-Old&crontime=30%209%20*%20*%20*&queryToRun=Make%20a%20bedtime%20story%20that%20I%20can%20read%20to%20my%203%20year%20old.%20It%20should%20just%20be%20five%20paragraphs%20long."} />
+<ClickableCard title={"Make a bedtime story that I can read to my 3 year old. It should just be five paragraphs long."} link={"https://app.khoj.dev/automations?subject=Five-Paragraph%20Bedtime%20Story%20for%20a%203-Year-Old&crontime=30%209%20*%20*%20*&query=Make%20a%20bedtime%20story%20that%20I%20can%20read%20to%20my%203%20year%20old.%20It%20should%20just%20be%20five%20paragraphs%20long."} />
 
-<ClickableCard title={"Summarize market trends and forecast the week ahead for the Brazilian stock market."} link={"https://app.khoj.dev/automations?subject=Weekly%20Brazilian%20Stock%20Market%20Trends%20and%20Forecast&crontime=00%209%20*%20*%201&queryToRun=Summarize%20market%20trends%20and%20forecast%20the%20week%20ahead%20for%20the%20Brazilian%20stock%20market."} />
+<ClickableCard title={"Summarize market trends and forecast the week ahead for the Brazilian stock market."} link={"https://app.khoj.dev/automations?subject=Weekly%20Brazilian%20Stock%20Market%20Trends%20and%20Forecast&crontime=00%209%20*%20*%201&query=Summarize%20market%20trends%20and%20forecast%20the%20week%20ahead%20for%20the%20Brazilian%20stock%20market."} />

src/content/posts/new-ux-fresh.md

@@ -0,0 +1,42 @@
+---
+title: "Springing forward in our web stack"
+author: saba
+description: Khoj recently migrated to Next.js with static site generation, refreshing our front-end and paving the way for future scalability.
+tldr: Khoj transitioned from a bespoke web stack using FastAPI, Django, and plain HTML/CSS/JS to a modern framework with Next.js, Tailwind, and Shadcn. This migration addressed development bottlenecks, improved scalability, and resulted in a significant UI upgrade, demonstrating the importance of evolving technology choices as a product grows.
+heroImage: /abstract_orange_blue_dots.png
+pubDate: 2024-08-07
+keywords: ["front-end", "web stack", "UIUX"]
+---
+
+
+Our web stack at Khoj has been quite unique. We have a Python web server using FastAPI as our app layer and Django for ORM and admin pages. While this served us fine initially, it's led to some [performance issues](https://github.com/fastapi/fastapi/discussions/8009) that keep me up at night and deserve their own discussion.
+
+Our front-end journey is equally interesting. We recently launched [a brand new UX](https://app.khoj.dev) (we call it Spring UX), migrating our front-end code base in the process.
+
+For three years, we served pages using Jinja templates with FastAPI. This approach allowed for partial server-side rendering but meant building web components from scratch. Yes, we were using plain HTML, CSS, and JavaScript even after reaching 10,000 users! We chose this path of under-engineering for several reasons:
+
+1. Lightweight static HTML pages
+2. Simplified development without cross-OS compatibility issues
+3. Abundant solutions to common problems, making AI assistance more effective
+4. Avoiding time-consuming migration to modern frameworks while validating our product
+
+This strategy worked well initially, but as we grew, limitations became apparent. We faced development bottlenecks due to writing core code from scratch and struggled with code duplication. As we prepared for a major redesign, it became clear that our front-end needed an overhaul too.
+
+We needed a graceful migration path that minimized server-side changes. After considering options like [Svelte](https://kit.svelte.dev/) and [HTML Components](https://www.w3.org/TR/NOTE-HTMLComponents), we settled on Next.js with [static site generation](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation). This choice allows us to:
+
+- Leverage popular component libraries
+- Migrate without a complete overhaul
+- Minimize new technology risks
+- Potentially move our front-end entirely to a CDN in the future
+
+We adopted the startup starter pack ™️, aka [Next.js](https://nextjs.org/), [Tailwind](https://tailwindcss.com/), and [Shadcn](https://ui.shadcn.com/).
+
+An additional consideration was our [Python package on PyPI](https://pypi.org/project/khoj/). We needed the new front-end pages to work within this package. Our solution involves building files in our GitHub action, packaging them into a distribution directory, and serving them from a static directory.
+
+Since then, we've moved from a cartoon-like UX to a more colorful, modern interface we call "spring" – symbolizing both our visual refresh and a leap forward in user experience.
+
+This journey highlights the evolution of our tech stack, balancing simplicity with the need for scalability and "modern practices". Eventually, you do actually have to remove the stilts on your codebase as your product grows and user needs evolve. 
+
+| Before                                                                   | After                                                                   |
+| ------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
+| ![cartoon ux](https://s3.amazonaws.com/assets.khoj.dev/old_ux_still.png) | ![spring ux](https://s3.amazonaws.com/assets.khoj.dev/new_ux_still.png) |