Star Ratings?

[latenitefilms]

Is there an existing way in Retype to do nice clean star rating like this?

https://www.w3schools.com/howto/howto_css_star_rating.asp

[latenitefilms]

I ended up solving with an included Markdown file:

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    .checked {
      color: orange;
    }
</style>
<span class="review-rating">
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star checked"></span>
</span>

[geoffreymcgill]

So this is not for visitors to leave a :star: rating, but for you to just add sequential star icons in your content?

[latenitefilms]

Yes, correct. You can see it in action here:

https://fcp.cafe/workflowextensions/#braw-toolbox

I wanted something that visually looks something like on the Mac App Store.

[geoffreymcgill]

Here are a few samples just using emojis and the included icons:

Rating: :star::star::star:

Rating: :star::star::star: /5

Rating: :star::star::star: of 5

Rating: :icon-star-fill::icon-star-fill::icon-star-fill::icon-star::icon-star:

Then I tried your Font-Awesome sample with a couple minor changes:

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    .fa-star {
        font-size: 20px;
        color: #ccc;
    }
    .fa-star.checked {
        color: orange;
    }
</style>

Rating: <span class="fa fa-star checked"></span><span class="fa fa-star checked"></span><span class="fa fa-star checked"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>

It would be best to put the CSS into the _includes/head.html template file:

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    .fa-star {
        font-size: 20px;
        color: #ccc;
    }
    .fa-star.checked {
        color: orange;
    }
</style>

Then on the individual pages, you would only need to include the HTML elements:

Rating: <span class="fa fa-star checked"></span><span class="fa fa-star checked"></span><span class="fa fa-star checked"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>

which renders as the following:

Then I thought, maybe the Retype templating and custom data variables could clean things up.

I added the following to the project retype.yml file:

data:
  star: "<span class=\"fa fa-star checked\"></span>"
  unstar: "<span class=\"fa fa-star\">"

Then in the .md pages, you can simplify to the following:

Rating: {{ star }}{{ star }}{{ star }}{{ unstar }}{{ unstar }}

which renders as the following:

Then I thought, how about componentizing each of the ratings into its own include. So I made _includes/rating3.md with the following syntax:

{{ star }}{{ star }}{{ star }}{{ unstar }}{{ unstar }}

and in the .md pages, you would add the following include statement:

Rating: {{ include "rating3" }}

which renders as the following:

You would make one rating include for each rating you would support, such as _includes/rating5.md:

{{ star }}{{ star }}{{ star }}{{ star }}{{ star }}

and include in the page using:

Rating: {{ include "rating5" }}

If using the template data variables and includes, in the future if you change how the HTML or CSS or whatever is configured, then you can easily update the templates, and then all rating components across the project would be instantly updated. Instead of having to update the content of all Pages.

Hope this helps.

[latenitefilms]

Thanks so much for all the information and experimentation!

I did actually already come up with something similar. I have five-stars.md:

https://github.com/CommandPost/FCPCafe/edit/main/docs/_includes/five-stars.md

And I have the CSS in the head.html:

https://github.com/CommandPost/FCPCafe/blob/main/docs/_includes/head.html

I will however "steal" your CSS color and sizing tweaks! Thank you!!

[latenitefilms]

This is where I ended up for anyone who's interested:

https://fcp.cafe/workflowextensions/#user-reviews

[latenitefilms]

@geoffreymcgill - is Retype templating and custom data variables documented anywhere?

Can I use markdown in custom data variables or just HTML?

[geoffreymcgill]

is Retype templating and custom data variables documented anywhere?

Unfortunately, there is still much work to be done with documenting the templating the data variables. It's on my list.

Can I use markdown in custom data variables

Yes, you can use Markdown in the data variables.

The following sample demonstrates:

data:
  sample: "Hello, is **this** working? :rocket:"

sample.md

# sample

{{ sample }}

And you can include the data variables inside of includes:

_includes/my-content.md

## Include

{{ sample }}

sample.md

# sample

{{ include "my-content" }}

Hope this helps.

[latenitefilms]

Legend, thanks for the fast reply! You beat me to even testing it myself! Appreciate it!

[latenitefilms]

Sorry, one more question... can you pass variables in?

For example, can I turn this:

[!badge variant="warning" target="blank" text="IMDB"](https://www.imdb.com/title/tt11881160/)

...into something like this:

{{ imdb url="https://www.imdb.com/title/tt11881160/" }}

[geoffreymcgill]

Yes, you can pass variables into an include. The following sample demonstrates:

sample.md

# Sample

{{ include "imdb" url:"https://www.imdb.com/title/tt11881160/" }}

_includes/imdb.md

[!badge variant="warning" target="blank" text="IMDB"]({{ $.url }})

The above creates the following page:

Hope this helps.