DEV Community

Cover image for Building jargons.dev [#1]: The Base Dictionary
Olabode Lawal-Shittabey
Olabode Lawal-Shittabey

Posted on • Edited on

1 1

Building jargons.dev [#1]: The Base Dictionary

Welcome to the second installment of our series on jargons.dev!

Let's get to it!

Following the initial commit, I started working on "the fork script" (wondering what that is?? You'll find out later in the series 😉) but I must confess and as you'll find in the commit history, that I took a long break (3 months+) from working on jargons.dev. Within these times I've had some opportunity to do some subconscious reflection that was great for the project.

Reflection Opportunity

I stopped work on jargons.dev for the while, not intentionally but because I was so embedded in the work I was doing on Hearts, that I didn't even think about jargons.dev. Well, over the course of those months, the new year came (with new goals of-course), I've also experienced and gotten exposed to some new technologies. One technology stood out to me and that was Astro.

Astro Resonating with jargons.dev

In January, I had a goal of "learning new technologies with docs", this was a challenge that got me started with Astro after hearing great stuff about it.

Fast forward March, I found myself working on another entirely different side project (wp-theme), I was watching a Eddie Jaoude YT Stream where I made this known to Eddie but his response would end up pushing me back to working on jargons.dev

You have quite a few side projects... I don't know which one.

This statement got me to think real hard, hence I decided to halt all the lots of side projects and focus on some that mattered right away, jargons.dev easily came back to mind.

At this point, I was already somewhat familiar with Astro, — being a framework for content-driven web apps, with a super simple file system, i18n-ready, SSG with great SEO (important for the project), performant, support for other frontend libraries like ReactJS with islands (I love this one especially); it was a tool made in heaven to build jargons.dev with.

Well, I quickly got to work the next available weekend I had to work on the base dictionary part of the project.

The Base Dictionary

I initialized a new Astro project for this one, as simple as running the command below and follow the prompts...

npm create astro@latest
Enter fullscreen mode Exit fullscreen mode

I also added the tailwindcss integration for styling; mdx integration for content; this was also super easy to config by just running the command respectively

npx astro add tailwind
npx astro add mdx
Enter fullscreen mode Exit fullscreen mode

I went on and completed the following tasks

  • Created a boilerplate homepage with static search form
  • Temporarily resolved to have the src/pages/word directory as the directory that should hold each word in the dictionary as a mdx file.
  • Implemented the word.astro layout, which serves as the frame within where all .mdx files' content for words inside of the src/pages/word/ directory can be rendered using frontmatter.
  • Also added a static mini search form to the word layout navbar.

With this feature, we are already able to view dictionary word on the jargons.dev/word/[word]route. This means when the file tuple.mdx is present in the src/pages/word/directory, we will be able to reach the page to get see the dictionary word with a visit to jargons.dev/word/tuple

The PR

feat: implement base dictionary #4

This Pull request implements the base dictionary app with AstroJS

Changes Made

  • Started new astro project
  • Created homepage
  • Implemented 2 layouts
    • Base - main primary wrapper for all pages and layouts
    • Word - layout to be used on the word pages
  • Implemented static search form triggers on homepage and in Word layout

Screenshots

Homepage

image

Word page

image

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay