Project Notebook / Parts Database

Hello All.

I have a bit of time during the holiday break and took some time to get more organized. I started creating a project notebook with a related parts bin tracker. I started out with Notion last week and got a pretty good build out. Then I started adding content, I quickly maxed out my storage. So now I discovered Obsidian. The only reason I heard of Notion was that a vendor that I worked with used it for documentation on their site.

So, I have a week’s experience with Notion, and a week with Obsidian. So far I love Obsidian (local storage and customization)!

I am looking for some best practices and guidance, I don’t want to get to far and find out I did it wrong. I want to get the framework right, then build in functionality for adding and presenting info.

I currently have three sections?

  • Idea Notebook
  • Project Gallery
  • Parts Bin

The Idea Notebook is a collection of web clippings and photo inspirations.

The Project Gallery is links to parts and images and misc notes.

One of the reason I started this was to track electronic parts. I would order them from overseas, which would take sometimes over 30 days and I would forget why I ordered the part. This way I can create a note for the new part and link it to a project.

I don’t know if I should use a data view or just a link.

The Parts Bin is a simple note with the meta information.

I am trying to get just the thumbnail to show, but the image is rendering twice.

Thanks for reading this far. I am excited to become more organized. Any suggestions are welcomed.

1 Like

Here is the meta for the parts page.

Buy Link:
Description: "Operating voltage: 3-12V DC The load current: 70 mA (3 V) (250 mA MAX) Maximum torque: 800 gf Turning speed: 1:48 This gear is equipped with EMC so the anti-interference ability is good. Color: yellow Material: Plastic Size: 7 x 2.2 x 1.8c"
Quantity: 10
  - "![[9b50d41e7e27899411dbd18ce951a63d_MD5.webp]]"
  - wide
  - Motor

var col1 = '';
var col2 = '';
let page = dv.current();

let coverString = String(page.Cover);

// Extract the attachment path
const attachmentReference = coverString.match(/\[\[([^|]+)\|/);

// Get the first item from the attachment path
let firstItem = attachmentReference ? attachmentReference[1] : null;

// dv puts a span around everything, so return the hole block

// First Column
col1 += '\n   <div class="parts-info">';
col1 += '\n\n   **Description:** ' + page.Description;
col1 += '\n\n   **Quantity:** ' + page.Quantity;
col1 += '\n\n   **Tags:** ' + page.tags;
col1 += '\n   </div>';

// Second Column
col2 += '\n   <div class="parts-cover">';
col2 += dv.span(`![Cover](${firstItem})`).outerHTML;
col2 += '\n   </div>';

dv.el("span", '\n   <div class="parts-header">' + col1 + col2 + '\n   </div>');

/* Custom CSS for two-column layout */
.parts-header {
display: grid;
grid-template-columns: 1fr 240px;
border: 1px solid #666;
border-radius: 5px;

.parts-info {
padding: 20px; /* Adjust padding for information column as needed */

.parts-cover {
max-width: 240px; /* Set the max width for the cover image */
margin-right: 20px;

.parts-cover img {
width: 100%; /* Make sure the image fills the container */

.parts-header p {
margin-top: 0;
font-size: smaller;

1 Like

For some reason dataview hardcodes the image. So I his the first one using

.block-language-dataviewjs.node-insert-event > span:first-of-type {
    display: none;
1 Like