Styling questions, feedback and possible improvements.

[MarkoSagadin]

Hello!

first of all: this is really a cool project ❤️

I am amazed at how well-documented it is, how well the code is structured and how much you have tried (and I think succeeded) to make this project useful for non-programming/technical people. Really, great job!

Full disclosure: I deal mostly with embedded systems so I know C, Python, and GitHub Actions quite well, however, I do not know much JS, CSS, Sass and HTML. I know the general purpose of technologies in this project (due to your docs), but not the specifics.

Questions/items:

1. I noticed that there is some issue when switching between light and dark mode in the Card Type preview screen in Anki. I played around and figured out what is the problem. I opened a PR where I fixed that: Fix nightMode in Card Type template preview #14
2. Is it possible to make tabs functionality optional? I did not have a use case where I needed them and would prefer if they could be disabled.
3. Better mobile interface: I feel that with the current styling/formatting the cards on the mobile feel very cramped.

Below is a default example, as rendered on an iPhone 12/13 Pro screen (I used Firefox's Responsive Design mode for this).

I understand that some code snippets will always wrap as they are too long to fit on a narrow screen (line numbers help with visibility in that case), however, I think that we could improve readability with a generally smaller font on mobile devices, and some modifications in the margins/paddings.

4. Support for tags: I would like to specify one or more tags in the markdown and have this information attached and visible on the cards.
   One project that does this well is this one: https://github.com/pranavdeshai/anki-prettify

5. One instruction in the theme builder is insufficient, specifically this one: https://github.com/Mochitto/Markdown2Anki/tree/main/theme_builder#adding-the-theme-to-anki. For example, if you just create a custom theme from the template files and try to copy the contents of the CSS to Anki's card styling, not everything will work as you would be missing some styling that is provided by the base.sass, layout.sass and others. So you would need to build the themes with npm to get that.

6. This project could do well with some release automation and development tooling. I am quite familiar with this as I have this implemented on the Python project that I work on: https://github.com/IRNAS/irnas-east-software, check docs/development_guide.md

Support:

I can help to implement all items from 2. to 6. I am comfortable with Python, however, I would require some assistance with frontend-related stuff.
Specifically:

• I am not sure that you can make tabs optional with the current frontend, probably some adjustments are needed.
• And also, I would require some input regarding the better mobile interface.

[Mochitto]

Hey there! Thank you so much for the interest and wanting to help with the project :)
This has been my first "real project" and hearing that you found it tidy and the docs helpful truly made me happy and proud of what I've built ❤️

Sadly (in a way ahah) after completing the project I landed my first job in tech and am still figuring stuff out my routine to get back to this project and add things (or OSS in general); a couple of things that are in your message were already on my mind, so I'm super happy to use them as motivation to get back to the project and improve it ^^

Thank you for that :)

Answers/feedback on the RFC

1. I'll take a look to the fix and proceed with the code review tonight, thank you so much for finding a bug, reporting it and even fixing it; I'm glad you found your way through the codebase!
2. (and 4.) One of the features that I was working on and that I'd like to give priority to (as it will improve UX a lot) is to allow users to add metadata to the markdown files in the form of YAML frontmatters, similarly to what Obsidian does. See issue Adding metadata to markdown input files #11. They would function in a way similar to a per-file configuration. We could add different kinds of "templates" using specific labels, one of which could remove the "tabs" functionality :)
   I have to look into the CSS and HTML structure, but it shouldn't be too hard to simply hide the buttons, thus removing the tabs functionality. There would also need to be extra guards when parsing a markdown document that uses this "option" to make sure only one tab is used.
3. Absolutely agree on the issues on mobile! I'd love to brainstorm together on possible better designs to improve on the current one. Accessibility issues are to be taken into consideration when switching to smaller fonts tho; I'd be more prone to working with line numbers, margins, paddings and possibly line colors (something that could maybe improve code readability is having odd lines with different backgrounds, kind of like an excell table..?).
4. In addition to what was said in 2., we could add a custom parsing step to check for tags in the card in the form of #MyTag as well :) Although that could pollute people's Obsidian's tags systems maybe. The safe option is still to have a "Tags" property in the frontmatter I think, but I'm happy to discuss solutions!
5. Thanks for the heads up :) It would be nice to make a quick and small script that builds the final CSS file using also the base and layouts I think.
6. In my company we are just starting to tackle CI, so I have no experience with it, but I'd love to learn and it would be an awesome addition to have! ^^

---

I'd be happy to have a coffe-chat together one of these days to discuss all doubts and possibilities together, if you'd also be open to that :)

In the meanwhile I wanted to say thanks again for the support and your interest in the project ❤️

Have a nice day!

[MarkoSagadin]

Hey,

congrats on getting your first job!

I would be happy to chat. Write me on [email protected] and we can decide on the time.