Customization and Extension - helixml/demo-recipes

Customization and Extension in the demo-recipes project

The demo-recipes project is built using various technologies such as TypeScript, React, Material-UI, and others. To customize or extend the project, there are several options available. This document will explore those options with examples.

Customizing the Recipe Template

The recipe template is the foundation of the demo-recipes project. You can customize the template to suit your needs. To create a new recipe template, you can use the init.sh script provided in the project. Here’s an example:

./init.sh PROJECTNAME

This command will create a new recipe template with the specified project name. The generated template will include a README file with instructions on how to use it.

Source: Create demo project templates with one script

Adding a New Recipe Source

The demo-recipes project supports multiple recipe sources. You can add a new recipe source by creating a new file in the src/data/recipes directory. The file should be a JSON or YAML file containing the recipe data. Here’s an example:

[
{
"title": "My Recipe",
"ingredients": ["ingredient1", "ingredient2"],
"instructions": "Cook the ingredients."
}
]

You can then import the recipe file in the src/data/recipes/index.ts file and add it to the recipes array.

Creating a Custom Recipe Component

If you want to customize the way a recipe is displayed, you can create a custom recipe component. To do this, create a new file in the src/components/recipes directory. The file should export a new React component that takes a recipe as a prop and displays it. Here’s an example:

import React from 'react';

const CustomRecipe = ({ recipe }) => {
return (
<div>
<h1>{recipe.title}</h1>
<ul>
{recipe.ingredients.map((ingredient, index) => (
<li key={index}>{ingredient}</li>
))}
</ul>
<p>{recipe.instructions}</p>
</div>
);
};

export default CustomRecipe;

You can then use this component in the src/pages/Recipes.tsx file instead of the default recipe component.

Adding a New Dependency

If you want to add a new dependency to the project, you can use the yarn add command. Here’s an example:

yarn add new-dependency

This command will add the new-dependency package to the project and update the package.json file.

Creating a Custom Helix Client

If you want to customize the way the Helix client works, you can create a custom Helix client. To do this, create a new file in the src/clients directory. The file should export a new class that extends the HelixClient class. Here’s an example:

import { HelixClient } from 'helix-client-library';

export class CustomHelixClient extends HelixClient {
constructor() {
super();
// Customize the client here
}

// Add custom methods here
}

You can then use this custom client in the project instead of the default Helix client.

Creating a Custom Web Vitals Metric

If you want to add a custom web vital metric, you can use the web-vitals library. Here’s an example:

import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(onCLS);
getFID(onFID);
getLCP(onLCP);

function onCLS(cls) {
// Do something with the CLS metric
}

function onFID(fid) {
// Do something with the FID metric
}

function onLCP(lcp) {
// Do something with the LCP metric
}

You can then use these metrics to customize the way web vitals are measured in the project.

Sources: