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.git
2 - Run the project locally
nvm install
npx concurrently "yarn start:storybook" "yarn ts-node bin/dev"
Urls:
3 - Run the project with docker
docker-compose up -d
4 - Start Storybook :
docker-compose exec app yarn start:storybook
1 - Create the markdown file
In the _authors
folder add a markdown file with your username.
cd _authors && touch myusername.md
2 - 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.md
2 - 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 markdown
If 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](https://drive.google.com/drive/folders/1SLZRiqHSel3AWNSVbrblfg3ON_XwR5RU?usp=drive_link) 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](https://stock.adobe.com/fr/), [Pexels](https://www.pexels.com/fr-fr/), [Unsplash](https://unsplash.com/fr)
- 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:
- [StackEdit](https://stackedit.io)
- [Dillinger](http://dillinger.io)
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:
```md
![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png)
To add an image with a figure and a figcaption you just need to write this syntax:
![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png)
Figure: *Source Github*
And to specify a size on the image, you can add the arguments (width
, height
, maxWidth
, maxHeight
) after the url:
![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png?width=500)
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-slug
Once 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-slug
2 - 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 markdown
The 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-slug
Once your tutorial is finished and you want it to be published and add the label publication
to your pull request.