Welcome to the [ElevenLabs] blog (https://blog.eleven-labs.com), this is Jamstack website.
This website is 100% TypeScript with Jamstack architecture.
It was developed based on the boilerplate React SSR with Vite and Prerender.
It uses Eleven Labs Design System.
Technical requirements to work on this project
Computer requirements to work on this project
For local installation:
For docker installation:
1 - Clone the project
git clone git@github.com:eleven-labs/blog.eleven-labs.com.git2 - Run the project locally
nvm install
npx concurrently "yarn start:storybook" "yarn ts-node bin/dev"Urls:
- Storybook: http://localhost:6006
- Website: http://localhost:5173
3 - Run the project with docker
docker-compose up -d4 - Start Storybook :
docker-compose exec app yarn start:storybook1 - Create the markdown file
In the _authors folder add a markdown file with your username.
cd _authors && touch myusername.md2 - Add content to the file
Here is the template of the file.
---
contentType: author
username: myusername
name: Name Lastname
github: mygithub
linkedin: mylinkedin
twitter: mytwitter
---
Some description about me...3 - Add your avatar
Add your avatar to the _assets/authors/myusername.jpg folder.
4 -Then add your article
You can't do a pull request just with your author markdown, because the deployment doesn't allow an author file without any associated articles
1 - Create the markdown file
In the folder _articles add a markdown file with the name of your article and prefixed with the date.
cd _articles && touch YYYY-MM-DD-slug.md2 - Add content to the file
Here is the template of the file.
---
contentType: article
lang: en | fr
date: YYYY-MM-DD
slug: slug of the article (No space dashes instead)
title: Title of the article
excerpt: Description of the article (Visible on the list pages)
cover:
alt: Alt image
path: /imgs/articles/YYYY-MM-DD-slug/cover.jpg
position: top | right top | right | right bottom | bottom | left bottom | left | left top | center | north | northeast | east | southeast | south | southwest | west | northwest // Default value is center
categories:
- javascript | php | agile | architecture
keywords:
- keyword (limited to 10, must not be identical to the categories, used for SEO and search)
authors:
- author's username
seo:
title: title
description: description
---
Content of your article in markdownIf your title or excerpt contains
:,"use the syntax>or add your content between quotes (")
If you want to add a 2 empty lines, you can use
\syntax: ex:
first paragraph.
\
second paragraph displayed after 2 empty lines.
3 - Adding Cover
To maintain graphic consistency, cover visuals should be in a photorealistic style and preferably related to the topics of your articles.
By "photorealistic style" we mean: no cartoons, no 3D visuals, no illustrations, no graphics, no logos, etc.
To choose your image, you have several options:
- Head to La Boîte à Outils de l'Astronaute to access ready-to-use image banks
- If you can't find what you're looking for, you can access free and royalty-free image banks like AdobeStock, Pexels, Unsplash
- If you still can't find an image despite these different solutions, you can ask Thomas Péjout to generate an image for you with MidJourney
In order to have a quality image, we ask you to integrate an image with a minimum width of 3000 px
4 - Write the content of the article
The content of the article be written in markdown. You can use one of the solutions:
To add images to your article, you will need to create the folder _assets/articles/YYYY-MM-DD-slug/ and add your images there.
Then in the markdown content, insert the tag:
To add an image with a figure and a figcaption you just need to write this syntax:
Figure: *Source Github*And to specify a size on the image, you can add the arguments (width, height, maxWidth, maxHeight) after the url:
If you need to add internal anchor links from your article to other article of our blog, use this syntax:
[title of destination article]({BASE_URL}/fr/destination-article-slug)Warning: Don't add html in your markdown, you don't have to override the blog template in the markdown.
This blog supports admonitions pannels warning ; info ; tip and note to generate colored panels.
When using <div> attribute markdown="1" text block is rendered as Markdown. The first line must be left empty, else the block will be rendered as html
<div class="admonition warning" markdown="1"><p class="admonition-title">Your Panel Title</p>
Your panel text.
</div>5 - Add your pull request
Create your branch and add your pull request.
git checkout -b feat/add-article-slugOnce your article is finished and you want it to be published and add the label publication to your pull request.
1 - Create the markdown file
In the folder _tutorials pick the subfolder fr or en depending on the translation, then create folder with the name of your tutorial and prefixed with the date (YYYY-MM-DD-slug).
cd _tutorials && mkdir YYYY-MM-DD-slug2 - Add content to the file
Inside the folder named YYYY-MM-DD-slug you created, add a file named index.md Here is the template of the file.
---
contentType: tutorial
lang: en | fr
date: YYYY-MM-DD
slug: Slug of the tutorial (No space dashes instead)
title: Title of the tutorial
excerpt: Description of the tutorial (Visible on the list pages)
categories:
- javascript | php | agile | architecture
keywords:
- keyword (limited to 10, must not be identical to the categories, used for SEO and search)
authors:
- author's username
steps:
- slug of your steps (No space dashes instead)
seo:
title: title
description: description
---If your title or excerpt contains
:,"use the syntax>or add your content between quotes (") The steps should be in the order you want them displayed
Then add a steps folder and add your steps there. Here is the template of the file.
Always inside the folder named YYYY-MM-DD-slug, create another folder called steps. Then create one file for each step.
Example:
YYYY-MM-DD-slug
├── index.md
└── steps/
├──introduction.md
├──installation-du-serveur-graphql.md
└── ...
Here is the template of the file:
---
contentType: tutorial-step
tutorial: slug of the tutorial (previously added in your index.md file)
slug: Slug of the step (No space dashes instead and previously added in your index.md file)
title: Title of the step
---
Content of your step in markdownThe files need to keep the same name as the steps declared in
index.md, using snake case.
3 - Add your pull request
Create your branch and add your pull request.
git checkout -b feat/add-tutorial-slugOnce your tutorial is finished and you want it to be published and add the label publication to your pull request.