Overview

The Eleven Labs blog is a Jamstack website built using 100% TypeScript and React SSR with Vite and Prerender. It utilizes the Eleven Labs Design System and requires certain technical and computer requirements for installation. The blog allows users to create their author and post pages, and provides templates for adding content in markdown format.

Features

• TypeScript: The blog is developed using TypeScript, providing type safety and improved developer experience.
• Jamstack Architecture: The website follows the Jamstack architecture, offering improved performance and scalability.
• React SSR with Vite and Prerender: The blog is built on the React Server-Side Rendering (SSR) boilerplate using Vite and Prerender, optimizing the rendering process.
• Eleven Labs Design System: The blog utilizes the Eleven Labs Design System, ensuring a consistent and visually appealing user interface.
• Author Pages: Users can create their own author pages by adding a markdown file and their avatar image.
• Post Pages: Users can create markdown files for their blog posts, including templates for content and the ability to add images.

Installation

To work on this project, the following technical and computer requirements must be met:

Technical Requirements

• TypeScript
• React
• React Router
• Vite
• Storybook

Computer Requirements

• Git (for local installation)
• Node Version Manager (for Docker installation)

Local Installation

1. Clone the project.
2. Run the project locally using the following URLs:
   • Storybook: http://localhost:6006
   • Website: http://localhost:5173

Docker Installation

1. Clone the project.
2. Run the project with Docker using the following URLs:
   • Storybook: http://localhost:6006
   • Website: http://localhost:5173

Create Your Author Page

1. Create a markdown file in the _authors folder with your username.
2. Add content to the file using the provided template.
3. Add your avatar to the _assets/authors/myusername.jpg folder.
4. Add your post to the file (note that a pull request must have an associated post to be allowed).

Create Your Post Page

1. Create a markdown file in the _posts folder with the name of your post, prefixed with the date.
2. Add content to the file using the provided template.
3. Write the content of the post in markdown format.
   • You can use solutions like StackEdit or Dillinger.
   • To add images, create the folder _assets/posts/YYYY-MM-DD-slug/ and add your images there.
   • In the markdown content, use the appropriate tags to insert images.
   • Specify the size of the image by adding arguments after the URL (width, height, maxWidth, maxHeight). Example: ![Alt Text](<url>){width=400 height=300}
   • Do not add HTML in your markdown to override the blog template.
4. Add your pull request.

Summary

The Eleven Labs blog is a TypeScript-based Jamstack website built using React SSR with Vite and Prerender. It leverages the Eleven Labs Design System and provides features such as author and post page creation. The installation process requires fulfilling certain technical and computer requirements, and users can add content to their author and post pages using markdown.