Adds ids and classes for easier CSS/JS selectors

[samglover]

This PR adds ids and classes for easier CSS/JS selectors.

Added ids:

• #memo-list
• #memo-comments
• #home-sidebar

Added classes:

• .memo
  • .tagged-[tag] for all tags
  • .memo-header
  • .memo-content
• .memo-detail-sidebar

Closes #4481

[samglover]

I'm getting a formatting error, but I'm not sure there's actually a problem. And part of the error relates to existing code that I didn't feel comfortable modifying.

[johnnyjoygh]

I'm getting a formatting error, but I'm not sure there's actually a problem. And part of the error relates to existing code that I didn't feel comfortable modifying.

Try run pnpm lint --fix in your dev environment to solve these format errors.

[johnnyjoygh]

@samglover We should ideally standardize to a specific attribute, such as data-classname, instead of mixing in id and class. e.g.,

<div data-classname="header-sidebar"></div>

[samglover]

I'm not sure I understand why you'd want to add a data attribute instead of just adding ids and classes. Just makes it harder to write selectors for CSS. .memo-header is regular CSS and easier to write than [data-classname="memo-header"].

But it's not my project so feel free to do it the way you'd prefer. I just want to be able to add custom CSS, and currently it's not very easy to do that, so when you invited me to submit a PR, I did.

[johnnyjoygh]

@samglover Since memos uses Tailwind, the className is already occupied by things like px-2, so it shouldn't be a good place to save custom class. Additionally, IDs should not conflict, so a better approach is to place it in a data- attribute, and to avoid breaking the existing code style.

This is an open-source project, and I think that code maintainability is more important than the the convenience of code for custom styles.