timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 02:53:51 +00:00
Code Issues 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

9
src/app/blog/[slug]/page.jsx
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>
);
}

27
src/app/blog/page.jsx
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>
);
}

66
src/app/blog/posts/corebooting-my-thinkpad.mdx Normal file
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>

9
src/app/blog/posts/my-perfect-dev-environment.mdx Normal file
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

74
src/app/blog/posts/ssg.mdx
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.

18
src/components/footer/content.jsx
View File

@@ -2,13 +2,15 @@
import Link from "next/link";
import { motion } from "framer-motion";
import ThemeToggle from "@/components/ui/theme-toggle";
const Items = [
{ id: 0, href: "https://add-later", label: "Contact", color: "green" },
{ id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow" },
{ id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue" },
{ id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple" },
{ id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua" },
{ id: 0, href: "https://add-later", label: "Contact", color: "green", component: false },
{ id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow", component: false },
{ id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue", component: false },
{ id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple", component: false },
{ id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua", component: false },
{ id: 6, color: "foreground", component: true },
];
const ItemColors = {
@@ -49,7 +51,11 @@ function Content() {
inline-block
${ItemColors[item.color]} dark:${ItemColors[item.color]}
`}>
<Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
{item.component ? (
<ThemeToggle />
) : (
<Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
)}
</motion.div>
))}
</div>

1
src/components/footer/index.jsx
View File

@@ -1,4 +1,3 @@
import Container from "@/components/ui/container";
import Content from "@/components/footer/content";
function Footer() {

2
src/components/ui/container.jsx
View File

@@ -2,7 +2,7 @@ import React from "react";
const Container = ({ children }) => {
return (
<div className="mx-auto w-full max-w-3xl">
<div className="mx-auto w-full max-w-5xl">
{children}
</div>
);

2
src/lib/mdx.js
View File

@@ -19,8 +19,6 @@ export async function getBlogBySlug(slug) {
},
},
});
console.log("Frontmatter:", frontmatter); // Debug log
console.log("Content:", content); // Debug log
return { frontmatter, content, slug };
}

98
src/style/mdxTheme.js Normal file
View File

@@ -0,0 +1,98 @@
// theme.js
// Define the light theme colors
const lightColors = {
text: '#000000',
background: '#ffffff',
foreground: '#ebdbb2',
red: {
1: '#cc241d',
2: '#fb4934',
},
orange: {
1: '#d65d0e',
2: '#fe8019',
},
green: {
1: '#98971a',
2: '#b8bb26',
},
yellow: {
1: '#d79921',
2: '#fabd2f',
},
blue: {
1: '#458588',
2: '#83a598',
},
purple: {
1: '#b16286',
2: '#d3869b',
},
aqua: {
1: '#689d6a',
2: '#8ec07c',
},
};
// Define the dark theme colors
const darkColors = {
text: '#ebdbb2',
background: '#000000',
foreground: '#ebdbb2',
red: {
1: '#cc241d',
2: '#fb4934',
},
orange: {
1: '#d65d0e',
2: '#fe8019',
},
green: {
1: '#98971a',
2: '#b8bb26',
},
yellow: {
1: '#d79921',
2: '#fabd2f',
},
blue: {
1: '#458588',
2: '#83a598',
},
purple: {
1: '#b16286',
2: '#d3869b',
},
aqua: {
1: '#689d6a',
2: '#8ec07c',
},
};
// Define the common styles for both light and dark themes
const commonStyles = {
fonts: {
body: "ComicCode",
heading: "ComicCode",
},
fontWeights: {
heading: 700,
},
// Add other common styles as needed
};
// Combine the light and dark themes
const theme = {
light: {
colors: lightColors,
...commonStyles,
},
dark: {
colors: darkColors,
...commonStyles,
},
};
export default theme;