Files
pse.dev/data/projects/README.md
2024-09-19 02:47:06 +02:00

127 lines
3.6 KiB
Markdown

## Add new project to projects list
#### 1. Create a New Project File:
- Navigate to the [...]/data/projects folder within your project directory.
- Inside this folder, create a new file named [project_name].ts.
#### 2. Add Project Details:
- Open the newly created [project_name].ts file.
- To ensure all necessary parameters are included, use the ProjectInterface template. Here's a basic structure to get you started:
**Note**: The `description` and `tldr` are now managed through the respective translation file located in /i18n/locales. Refer to step #4 for more details.
```js
export const project_name: ProjectInterface = {
id: "project_name",
image: "",
name: "This is an example of the project",
tags: {
keywords: [],
themes: [],
types: [],
builtWith: [],
},
}
```
- Fill in the id, image, name, and tags fields as per your project's details. The tags object includes arrays for keywords, themes, types, and builtWith.
#### 3. Register the New Project:
- Open the projects.ts file located in the same directory or wherever your project's list is maintained.
- Add your new project to the projects array to make it visible:
```js
import { project_name } from './projects/[project_name].ts';
const projects: ProjectInterface[] = [
// other projects
project_name,
];
```
#### 4. Project Description and TLRD
With the project now supporting multiple languages, the description and content fields are managed in the internalization folder. Follow these steps:
- Create a new project_id.json file in /app/i18n/locales/${lang}/projects/${project_id}.json.
- Ensure the project_id defined in Step 2 matches the project_id.json file.
- In this new file, add the description and tldr for the project.
- Repeat these steps for each language you wish to support.
```json
{
"description": "project description content",
"tldr": "project tldr"
}
```
By following these steps, you will successfully add a new project and ensure it is correctly registered and visible.
## Show badges in the project card
Badges can be set by setting the `themes` params, by looking at this example
```js
export const example: ProjectInterface = {
id: "example",
image: "",
name: "This is an example of the project",
tags: {
themes: ["play", "build"],
},
}
```
This is the result
![Project card badge](/public/project/example-project-badge.png)
## Show links in project page detail
To add extra link to projects we need to add `extraLinks` for the projects we are going to add links for.
Make sure that for every "themes" value there is a specific "extraLinks" object will all the links.
```js
export const example: ProjectInterface = {
id: "example",
image: "",
name: "This is an example of the project",
projectStatus: '',
tags: {
themes: ["play", "buildWith"],
keywords: ["Anonymity/privacy", "Voting/governance"],
types: ["Lego sets/toolkits", "Infrastructure/protocol"],
builtWith: ["p0tion", "JubjubLib"],
},
extraLinks: {
buildWith: [
{
label: "Link to get started",
url: 'https://google.it"',
},
],
play: [
{
label: "Link to get started",
url: 'https://google.it"',
},
],
},
}
```
This is the result
![Project links](/public/project/example-project-extra-link.png)
### Project detail now supports markdown
For PSE members who wish to add more information to the project detail, you can now add to the "description" in the {project}.ts.
Supported format:
- Headings
- Table
- more to come in a later release.
Please note the keyword and theme is curated by the comms & design team. If you wish to change, please create a PR.