How to use the lit-html/directives/repeat.repeat function in lit-html

articleList(): TemplateResult {
    const { articles } = this.state;

    return html`
      ${repeat(articles, article => {
        const articleUri = `/article/${article.slug}`;

        return html`
          <a title="${translate('article_feed.read')} „ ${article.title} “" href="${articleUri}" class="card-link">
            <article class="card">
              <header class="card-header">
                <p class="card-header-inner">
                  <span class="left">
                    <span class="lang">[${article.lang.toUpperCase()}]</span>
                    ${article.published
                      ? format(new Date(article.publishedAt as string), 'dddd DD MMMM YYYY', {</span></p></header></article></a>

<div class="card">
      
    </div>
    <div class="card">
      
        
          All Games
          ${repeat(this._managers, (i) =&gt; html`${i.DisplayName}`)}
        
      
    </div>
    ${
      this._participatingActiveGames.length ? 
      html`
        <h2>Active</h2>
        ${repeat(this._participatingActiveGames, (i) =&gt; html``)}
      ` :
      html``
    }
    ${
      this._participatingFinishedGames.length ? 
      html`
        <h2>Finished</h2>
        ${repeat(this._participatingFinishedGames, (i) =&gt; html``)}
      ` :
      html``
    }
    ${
      this._visibleJoinableGames.length ? 
      html`
        <h2>Joinable</h2>
        ${repeat(this._visibleJoinableGames, (i) =&gt; html``)}

showTweets(): TemplateResult {
    return html`
      ${repeat(
        this.tweets.statuses,
        (tweet: any) => html`
          <article class="card">
            <div class="card-content">
              <header>
                <strong>${tweet.user.name}</strong>
                <a href="https://twitter.com/${tweet.user.screen_name.toLowerCase()}">
                  <small>@${tweet.user.screen_name.toLowerCase()}</small>
                </a>
                -
                <small>
                  Il y a
                  ${distanceInWordsToNow(new Date(tweet.created_at), {
                    locale: languageService.dateFnsLocale,
                  })}
                </small></header></div></article>

return html``;
    }

    const states: Array<[string, HassEntityBase]> = [];

    Object.keys(this.hass!.states).forEach((entityId) => {
      if (this._filterFunc!(entityId)) {
        const stateObj = this.hass!.states[entityId];
        states.push([computeStateName(stateObj), stateObj]);
      }
    });
    states.sort();

    return html`
      ${this.renderStyle()}
      ${repeat(
        states!,
        (stateInfo) => stateInfo[1].entity_id,
        (stateInfo) => html`
          <span>
            
            ${stateInfo[0]}
          </span>
        `
      )}
    `;
  }

? html`
                          
                        `
                      : ""}
                    <span>${column.title}</span>
                  
                `;
              })}
            
          
          
            ${repeat(
              this._filteredData!,
              (row: DataTableRowData) =&gt; row[this.id],
              (row: DataTableRowData) =&gt; html`
                
                  ${this.selectable
                    ? html`
                        

)}
                
              

              <div class="o-footer__main">
                <button class="o-footer__accordion-button">
                  
                  <span class="${classMap(accordionCaretState(1))}">
                    ${showCaret}
                  </span>
                </button>
                <ul class="${classMap(shortAccordionContent)}">
                  ${repeat(
                    new Array(
                      this.querySelectorAll('[slot^="column-1-item-"]').length
                    ),
                    (item, index) =&gt; _renderFooterLinks(1, index)
                  )}
                </ul>
              </div>
            
            <div class="o-footer__social-media">
              
              <ul class="o-footer__social-media-list">
                ${repeat(
                  new Array(</ul></div>

protected render () {
		return html`
			
			<div id="menu">
				${repeat(COMPONENTS_ROUTES.filter(route =&gt; route.path !== "**"), route =&gt; html`
					
						
							${route.data != null ? html`<img alt="Icon" src="${route.data.img}" class="img" slot="before">` : nothing}
							<span>${route.data != null ? route.data.title : route.path}</span>
						
					
				`)}
			</div>
			<div id="router">
				
				${this.currentRoute != null &amp;&amp; this.currentRoute.data != null ? html`
					<header id="header">
						<aside>
							${this.currentRoute.data.title}
							${this.currentRoute.data.desc}
						</aside></header></div>

${repeat(requiredColors, color => html`
					<div id="palette">
						${repeat(color == "shade" ? requiredShadeHues : requiredDefaultHues, hue =&gt; html`
							<div title="${color}-${hue}" class="color ${color}-${hue}">
								${color}-${hue}
							</div>
						`)}
					</div>
				`)}

protected render () {
		return html`
			${repeat(this.themes, theme => html`
				<div style="background: ${theme.baseColor}" tabindex="0" class="theme-button theme-${theme}">
					${theme.name === this.currentThemeName ? html`check` : ""}	 
				</div>
			`)}
		`;
	}
}

<select class="skottie-player-property-select" id="color-prop-select">
      ${repeat(ele._props.color.list, (c) =&gt; c.key, (c, index) =&gt; html`
        <option value="${index}">${c.key}</option>
      `)}
    </select>
    <input value="${hexColor(ele._props.color.current().value)}" id="color-picker" class="skottie-player-picker" type="color">
    <hr class="skottie-player-settings-divider">
  
  <div class="skottie-player-settings-row">
    <div class="skottie-player-settings-label">Opacity</div>
    <select class="skottie-player-property-select" id="opacity-prop-select">
      ${repeat(ele._props.opacity.list, (o) =&gt; o.key, (o, index) =&gt; html`
        <option value="${index}">${o.key}</option>
      `)}
    </select>
    <input value="${ele._props.opacity.current().value}" id="opacity-picker" class="skottie-player-picker" max="100" min="0" type="range">
    <hr class="skottie-player-settings-divider">
  </div>
  <div class="skottie-player-settings-row">
    <div class="skottie-player-settings-label">Segments</div>
    <select style="width: 100%" class="skottie-player-property-select" id="segment-prop-select">
      ${repeat(ele._props.segments, (s) =&gt; s.name, (s, index) =&gt; html`
        <option value="${index}">${segmentLabel(s)}</option>
      `)}
    </select></div>