Continuous dhdotcom Development
Testing
export const getAllPosts = cache(async (): Promise<MdxCompiled[]> => {
const files = (await fs.readdir(POSTS_FOLDER)).filter(
(file) => path.extname(file) === '.mdx'
)
const posts = await Promise.all(
files.map(async (file) => {
const fileContent = await fs.readFile(
path.join(POSTS_FOLDER, file),
'utf-8'
)
const { posts } = parseTheFrontmatter(fileContent)
return posts
})
)
return posts
})
Overview
This is a living document for the continuous development of derickhoskinson.com. I have been spending most of my free time coding rather than writing extensive blog entries. For now, I will just update this document as I change the site.
Updates
November 11 2024: Today I worked on fixing some layout issues. I decided that since I am primarily coding I won't stress about making individual blog posts for a while. Instead I'll do updates here. I am looking into creating a table (maybe sortable) where I can track my progress.
Refactor code that compiles my MDX files.
November 15 2024
-
Goals I am trying to optimize and better understand the code that I am using to generate my mdx compliations.
-
Issues:
I am using MDX remote Originally I was using MDXRemote on the client after retreiving the data. I moved that MDXRemote which contains the mdxCompile function to the server and experienced issues.
This shouldn't have been surprising. I am using <CldImage />
component from next-cloudinary. This component is responsive and uses state so it must be run client side.
To fix this issue I still serialize my mdx files on the server and add the compnoents that can be run on the server. Then, on the page I used <MDXRemote />
and passed the <CldImage />
at that point. This has worked.
I serialize
values on the server
Purpose
- Explore new technologies I am somewhat happy with how things are turning out in this app. But I'm about to enter a few weeks of focused working which will limit my timem to work on this project.
I think I may just try to write stream of concsiousness....but I really need to figure out how to turn off predictive text in vscode.
I want to learn how to generate metdatat for this site better. I started this site to learn Nextjs app router and use server actions and server components. It's been fun but a littl hectic. I would say I was a moder
important: Vately knowledgable remix coder. If you call my DIY apps as actual coding.
I am interested in exploring more aspects of genetics and variant classification. What's next for the field? I am actually not sure. While I have learned a great deal of things in my current position I haven't spent much time planning for the future. I will do that now.
But it looks like I did finally solve it
Code to turn off text prediction in vscode
"[mdx]": {
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
},
"editor.suggest.showWords": false,
"editor.inlineSuggest.enabled": false
}
TODos
- [x] Server rendering MDX
- [ ] Server rendering MDX with syntax highlighting
- [ ] Authentication: Magic Link
- [ ] Dummy MDX content
- [ ] Category bar and filtering
- [x] Used V0 to help me with some responsive design. I am not a designer but I do try to do most thing my self. I often search for a solution to understand how to accomplish it at a basic level. Usually my usecase isn't as basic.
- [ ] Add a category bar
- [ ] Add a search bar
- [ ] Scope a User Forums
- [ ] Find someone to help me with the design
- [x] Add a contact form
- [ ] Add a newsletter
- [x] Add a projects section
- [ ] Add a resume section
- [x] Add a blog section
- [x] Add a about section
- [ ] Add a contact section
- [ ] Add a footer
- [ ] Add an Overlay ba
- [ ] Add a forums section
Issues
- I just cannot find good free resources for Genetics and Genomics
- I MIGHT HAVE FOUND SOME OK ONES.
Categories
The categories are obtained from the top of the FrontMatter of the MDX files. During the initial development I thought that I would confirm that these are dynammic and can be made up of many different tags. I'm not sure about this approach.
Maybe I should not rely on static category tags but instead come up with a basic set and expand upon those in the future.
Search Bar
I could build this feature pretty easiliy but I suppose I should scope it more. Do I want it to search my entire database? Use case being search for resume words or blog post words.
Web Frameworks
I chose next JS for this iteration of my personal site. In the past I used Remix. I was pleased with Remix and I wanted to explore the usage of React Server Components. Remix announced that React Router V7 will replace Remix so I figured I would try out the newest features using NextJs.