Adding directories/folder for custom components

[rubenrivera]

The Obsidian Digital Garden about custom components might be hard for people new to web development and GitHub. Below, I will extend the explanation a bit. I'm assuming you have already read Obsidian Digital Garden docs, especially Adding custom components; if you still need to, please do it now.

A brief recap: Components are reusable bits of code and content that can be included on the homepage, notes, file three and the sidebar.

When creating this post, the Obisidan Digital Garden GitHub template doesn't include the full path of the component's directories. Still, they can be added easily to your digital garden's repository using the GitHub web app or a web browser.

1. Open your digital garden repository on GitHub. You should see something like this:

   

2. Click on the src folder. You should see something like this:

   

3. Click on the site folder, then the _includes folder, then the components folder. You should see something like this:

   

4. Click the More options buttons. This will open a menu

   

5. Click Create new file

   

6. In the name file box, type user/ followed by the namespace, e.g., index to add a component only to your digital garden homepage, then the slot name, e.g., header, and finally a file name with the .njk extension.

7. In the Enter files content here box, add the code/content that you want to be shown in the corresponding section.

8. Click the Commit Changes button. You should see something like this:
   

9. Click the Commit Changes button.

This will create a nested directory and a file inside /src/site/_includes/components/. For the next component, you can just navigate the corresponding directory; if it doesn't exist, open the parent directory and write the directory name as part of the file name as it was done in step 7.

Note: If you think you will do this frequently, it might be worth learning about GitHub Codespaces and/or a tool like Visual Studio Code.