Kitchen Sink

This page contains examples and boilerplate content for future blog posts and website updates. It includes LaTeX examples, HTML formatting, and code snippets that can be copied and pasted.

Blog Post Template

Use this template when adding a new blog post to the blogData.ts file:

export const blogPost = {
  id: 'post-slug',
  title: 'Post Title',
  excerpt: `A brief excerpt that summarizes the post...`,
  date: 'Month DD, YYYY',
  readTime: 'X min read',
  image: '/images/posts/post-slug/featured.jpg',
  content: `
    <p>Introduction paragraph goes here...</p>
    
    <h2>First Section Heading</h2>
    <p>Content for the first section...</p>
    
    <figure>
      <img src="/images/posts/post-slug/image1.jpg" alt="Description of image" loading="lazy">
      <figcaption>Caption for the image</figcaption>
    </figure>
    
    <h2>Second Section Heading</h2>
    <p>Content for the second section...</p>
    
    <blockquote>
      <p>This is a blockquote for highlighting important text or quotes.</p>
    </blockquote>
    
    <h3>Subsection Heading</h3>
    <p>Content for the subsection...</p>
    
    <ul>
      <li>First list item</li>
      <li>Second list item</li>
      <li>Third list item</li>
    </ul>
    
    <p>Conclusion paragraph goes here...</p>
  `,
  tags: ['Tag1', 'Tag2', 'Tag3'],
};

LaTeX Examples

These examples show how to use LaTeX for mathematical expressions in your blog posts. The expressions are rendered using MathJax.

Inline Math

Code: \(E = mc^2\)

Rendered:

Display Math

Code: \[ \frac{d}{dx}(x^n) = nx^{n-1} \]

Rendered:

Complex Equation

Code: \[ \int_{a}^{b} f(x) \, dx = F(b) - F(a) \]

Rendered:

Matrix

Code: \[ \begin{pmatrix} a & b \\ c & d \end{pmatrix} \]

Rendered:

Pythagorean Theorem

Code: \[ a^2 + b^2 = c^2 \]

Rendered:

HTML Formatting Examples

These examples show how to format content in your blog posts using HTML.

Headings

<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Paragraphs

<p>This is a paragraph of text.</p>

Lists

Unordered List:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Ordered List:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Images

<figure>
  <img 
    src="/images/posts/post-slug/image.jpg" 
    alt="Description of the image" 
    loading="lazy"
  />
  <figcaption>Caption for the image</figcaption>
</figure>

Blockquotes

<blockquote>
  <p>This is a blockquote for highlighting important text or quotes.</p>
</blockquote>

Links

<a href="https://example.com" target="_blank" rel="noopener">Link text</a>

Text Formatting

<strong>Bold text</strong>
<em>Italic text</em>
<code>Inline code</code>

Adding a New Blog Post

Follow these steps to add a new blog post:

  1. Create a new directory for your post images: /public/images/posts/your-post-slug/
  2. Add your images to this directory, including a featured.jpg for the thumbnail
  3. Copy the blog post template from above
  4. Fill in the details and content for your post
  5. Add your new post object to the blogPosts array in src/lib/blogData.ts
  6. Test your post by running the development server and navigating to /blog/your-post-slug