Building jargons.dev [# 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

npm create astro@latest

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

npx astro add tailwind
npx astro add mdx

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

• 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

babblebey

posted on

Mar 24, 2024

This Pull request implements the base dictionary app with AstroJS

<script> // Detect dark theme var iframe = document.getElementById('tweet-1744263459867410930-456'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1744263459867410930&theme=dark" } </script>Changes Made<script> // Detect dark theme var iframe = document.getElementById('tweet-1768395047462981963-82'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1768395047462981963&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1771908483828363760-196'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1771908483828363760&theme=dark" } </script>

• 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

Word page

View on GitHub

The above is the detailed content of Building jargons.dev [# The Base Dictionary. For more information, please follow other related articles on the PHP Chinese website!