timmypidashev/timmypidashev.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Jumbo commit

Browse Source
This commit is contained in:
Timothy Pidashev
2024-06-07 17:29:08 -07:00
parent f96629a6b4
commit 73e6e2c354
10 changed files with 209 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/blog/[slug]/page.jsx
+4 -5
View File
@@ -10,14 +10,13 @@ export async function generateStaticParams() {
export default async function BlogPage({ params }) {
const blog = await getBlogBySlug(params.slug);
return (
<main className="prose mx-auto">
<section className="prose mx-auto">
<article>
<h1>{blog.frontmatter.title}</h1>
<p>{blog.frontmatter.author}</p>
<p>{blog.frontmatter.publishDate}</p>
<article>{blog.content}</article>
<p>{blog.frontmatter.date}</p>
<div>{blog.content}</div>
</article>
</main>
</section>
);
}
src/app/blog/page.jsx
+19 -8
View File
@@ -6,16 +6,27 @@ export default async function BlogsPage() {
const blogs = await Promise.all(slugs.map(({ slug }) => getBlogBySlug(slug)));
return (
<main>
<section className="py-9">
{blogs.map((blog) => (
<article key={blog.slug} className="grid grid-cols-4 text-3xl">
<h1>{blog.frontmatter.title}</h1>
<p>{blog.frontmatter.author}</p>
<p>{blog.frontmatter.publishDate}</p>
<Link href={`/blog/${blog.slug}`}>Read More</Link>
<article key={blog.slug} className="flex flex-col py-3">
<Link href={`/blog/${blog.slug}`}>
<div className="flex flex-col items-center pb-3 mb-3">
<h1 className="text-2xl font-bold mb-1">{blog.frontmatter.title}</h1>
<span className="text-light-yellow-1 dark:text-dark-yellow-1">{blog.frontmatter.description}</span>
<div className="text-lg text-gray-500">
{blog.frontmatter.tags && blog.frontmatter.tags.length > 0 && (
<>
<span className="mr-2 text-light-blue-1 dark:text-dark-blue-1">{blog.frontmatter.date}</span>
{blog.frontmatter.tags.map((tag, index) => (
<span key={index} className="mr-2 text-light-orange-1 dark:text-dark-orange-1">#{tag}</span>
))}
</>
)}
</div>
</div>
</Link>
</article>
))}
</main>
</section>
);
}
src/app/blog/posts/corebooting-my-thinkpad.mdx
+66
View File
@@ -0,0 +1,66 @@
---
title: "I corebooted my T440p, here's how I did it."
author: "Timothy Pidashev"
date: "2024/06/05"
description: "This is a sample MDX file."
tags: ["coreboot", "t440p", "dgpu"]
---
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
*Italic Text*
_Italic Text_
**Bold Text**
__Bold Text__
* Bullet List
* Item 1
* Item 2
* Subitem 1
* Subitem 2
1. Numbered List
1. Item 1
2. Item 2
- Subitem 1
- Subitem 2
[Link Text](https://example.com)
![Image Alt Text](https://example.com/image.jpg)
> Blockquote
>
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
`Inline Code`
| Table Header 1 | Table Header 2 |
|----------------|----------------|
| Table Row 1 | Table Row 1 |
| Table Row 2 | Table Row 2 |
<sup>Superscript Text</sup>
<sub>Subscript Text</sub>
<mark>Highlighted Text</mark>
<ins>Underlined Text</ins>
<del>Strikethrough Text</del>
<abbr title="Abbreviation">Abbreviation</abbr>
src/app/blog/posts/my-perfect-dev-environment.mdx
+9
View File
@@ -0,0 +1,9 @@
---
title: "My perfect development environment."
author: "Timothy Pidashev"
date: "2024/06/07"
description: "This is another sample mdx file."
tags: ["dwl", "wayland", "gruvbox"]
---
# FDSLKJFLKSFJL
src/app/blog/posts/ssg.mdx
-74
View File
@@ -1,74 +0,0 @@
---
title: 'When to Use Static Generation v.s. Server-side Rendering'
author: "Timothy Pidashev"
date: '2020-01-02'
---
We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
You can use Static Generation for many types of pages, including:
- Marketing pages
- Blog posts
- E-commerce product listings
- Help and documentation
```jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter;
```
You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.
```jsx
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter;
```
You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.