[FEATURE] Automatic size of grid for `resume-skill-item`

[vslavkin]

I wanted to write "programming languages" as a skill item, but it doesn't fit, so it does a not-so-pleasant line-break. While an argument with the column lengths could be passed, I wonder if there's a way to apply the max auto size of the column to the multiple grid one may have in a document. If that couldn't be done, then the function could instead receive a list of categories and a list of lists of items, and put everything in one big grid. (Basically, it would be just a very small wrapper around grid)

[vslavkin]

Now that I think of it, the items don't have to be in a list. They could be just content (Except if you wanted to parse them for something), and it would give more freedom to the user

[DeveloperPaul123]

Thanks for filing this. If you have any screenshots or images of what exactly you're envisioning, that would be very helpful.

[vslavkin]

Sorry, forgot about this, but made a small demo: This would be the desired result And this is what is currently happening:

I understand that some people will prefer the former and others the latter, but it would be great to offer an option in #resume-skill-item to toggle the feature

The code used for the former is this:

#grid(
    columns: (auto, auto),
    gutter: 10pt,
    [== Programming Languages],
    [*Python*, *C*, C++, Java, Lisp, Html, CSS, JavaScript, Rust, SQL, Pascal, Lua, Bash,],
    [== Spoken languages],
    [*Spanish (Native)*, *English (B2)*],
    [== Programs],
    [*Emacs*, *LaTeX*, git, Godot, Docker, Grafana, Unity, KiCad, Blender, DaVinci Resolve, Inkscape, OnShape])

While it works here, I don't know how to implement this, maintaining the width of the first column the same across all function calls.

The easy way is to add an optional argument to the #resume-skill-item function for setting the width of the first column, but I'd say that the best way is using the auto setting. If it was possible to save the width of the auto width to a variable, I think it may be doable, but I don't know enough typst yet.

[xd003]

This is must have imo, i was just about to open a github issue for this. I totally agree with the desired result mentioned in comment just above. Moreover, if i happen to remove the Spoken languages line from the default template, it looks totally weird

Would really appreciate to have this issue fixed

[DeveloperPaul123]

So I've started looking into this, but it's a bit tricky. I was able to quickly adjust the column size and alignment to achieve this:

But this still breaks if the skill category text is very long:

But I'm not sure what a happy medium would be. Another option would be to introduce a new function for this specific case where you would pass in all skill categories and skills together so they can be laid out in a grid directly.

What are your thoughts @xd003 @vslavkin ?

[vslavkin]

Yeah, it's indeed tricky. What you've got there looks good, is there a branch to test it out? The only other ways I can think of would be, doing it in a single function/grid, or measuring the size of the text every time the function is called and render it after all the function calls have been made, but I don't know if that's possible in typst

[DeveloperPaul123]

Yeah, it's indeed tricky. What you've got there looks good, is there a branch to test it out? The only other ways I can think of would be, doing it in a single function/grid, or measuring the size of the text every time the function is called and render it after all the function calls have been made, but I don't know if that's possible in typst

Thanks! And yes you can try it on this branch: https://github.com/DeveloperPaul123/modern-cv/tree/fix/resume-item-grid-alignment

I think you can save variables using state() but I'm not sure how you would force previously laid out items to be laid out again if you don't list your longest category first when using resume-skill-item. I think I'll have to introduce a new function for this specific case.

[DeveloperPaul123]

I was able to make a new function that lays everything out in a grid. Here's the result:

And the typst to generate it:

#resume-skill-grid(
  categories_with_values: (
    "Programming Languages": (
      strong("C++"),
      strong("Python"),
      "Rust",
      "Java",
      "C#",
      "JavaScript",
      "TypeScript",
    ),
    "Spoken Languages": (
      strong("English"),
      "Spanish",
      "Greek",
    ),
    "Programs": (
      strong("Excel"),
      "Word",
      "Powerpoint",
      "Visual Studio", 
      "git",
      "Zed"
    ),
    "Really Really Long Long Long Category": (
      "Thing 1",
      "Thing 2",
      "Thing 3"
    )
  ),
)

[DeveloperPaul123]

@vslavkin Would you be willing to review a PR that implements this?