menav/templates/components/site-card.hbs

{{#if url}}
<a href="{{url}}" class="site-card{{#if style}} site-card-{{style}}{{/if}}"
   {{#if external}}target="_blank" rel="noopener"{{/if}}
   data-type="{{#if type}}{{type}}{{else}}site{{/if}}"
   data-name="{{name}}"
   data-url="{{url}}"
   data-icon="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"
   data-description="{{#if description}}{{description}}{{else}}{{extractDomain url}}{{/if}}"
   {{#if publishedAt}}data-published-at="{{publishedAt}}"{{/if}}
   {{#if source}}data-source="{{source}}"{{/if}}>
    {{!-- articles：首行图标+标题；下方“时间/来源 + 简介”全宽对齐，不被图标列缩进 --}}
    {{#ifEquals type "article"}}
      <div class="article-card-header">
        <div class="site-card-icon" aria-hidden="true">
          {{#ifEquals @root.icons.mode "favicon"}}
            {{#ifHttpUrl url}}
              <div class="icon-container">
                <i class="fas fa-circle-notch fa-spin icon-placeholder" aria-hidden="true"></i>
                <img
                  class="favicon-icon"
                  src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url={{encodeURIComponent url}}&size=32"
                  alt="{{name}} favicon"
                  loading="lazy"
                  onload="this.classList.add('loaded'); this.previousElementSibling.classList.add('hidden');"
                  onerror="this.classList.add('error'); this.previousElementSibling.classList.add('hidden'); this.nextElementSibling.classList.add('visible');"
                />
                <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} icon-fallback" aria-hidden="true"></i>
              </div>
            {{else}}
              <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} site-icon" aria-hidden="true"></i>
            {{/ifHttpUrl}}
          {{else}}
            <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} site-icon" aria-hidden="true"></i>
          {{/ifEquals}}
        </div>
        <div class="article-card-title">
          <h3>{{#if name}}{{name}}{{else}}未命名站点{{/if}}</h3>
        </div>
      </div>

      <div class="article-card-body">
        {{#ifCond publishedAt '||' source}}
          <div class="site-card-meta">
            {{#if publishedAt}}
              <span class="site-card-meta-date">{{formatDate publishedAt "YYYY-MM-DD"}}</span>
            {{/if}}
            {{#ifCond publishedAt '&&' source}}
              <span class="site-card-meta-sep">·</span>
            {{/ifCond}}
            {{#if source}}
              <span class="site-card-meta-source">{{source}}</span>
            {{/if}}
          </div>
        {{/ifCond}}
        <p>{{#if description}}{{description}}{{else}}{{extractDomain url}}{{/if}}</p>
      </div>
    {{else}}
      {{!-- projects：代码仓库风格卡片（保留 data-* 结构，便于扩展识别与写回） --}}
      {{#ifEquals style "repo"}}
        <div class="repo-header">
          <i class="{{#if icon}}{{icon}}{{else}}fas fa-code{{/if}} repo-icon" aria-hidden="true"></i>
          <div class="repo-title">{{#if name}}{{name}}{{else}}未命名项目{{/if}}</div>
        </div>

        <div class="repo-desc">{{#if description}}{{description}}{{else}}{{extractDomain url}}{{/if}}</div>

        {{#ifCond language '||' stars}}
          <div class="repo-stats">
            {{#if language}}
              <div class="stat-item">
                <span class="lang-dot" style="background-color: {{#if languageColor}}{{languageColor}}{{else}}#909296{{/if}};"></span>
                {{language}}
              </div>
            {{/if}}
            {{#if stars}}
              <div class="stat-item">
                <i class="far fa-star" aria-hidden="true"></i> {{stars}}
              </div>
            {{/if}}
            {{#if forks}}
              <div class="stat-item">
                <i class="fas fa-code-branch" aria-hidden="true"></i> {{forks}}
              </div>
            {{/if}}
            {{#if issues}}
              <div class="stat-item">
                <i class="fas fa-exclamation-circle" aria-hidden="true"></i> {{issues}}
              </div>
            {{/if}}
          </div>
        {{/ifCond}}
      {{else}}
      <div class="site-card-icon" aria-hidden="true">
        {{#ifEquals @root.icons.mode "favicon"}}
          {{#ifHttpUrl url}}
            <div class="icon-container">
              <i class="fas fa-circle-notch fa-spin icon-placeholder" aria-hidden="true"></i>
              <img
                class="favicon-icon"
                src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url={{encodeURIComponent url}}&size=32"
                alt="{{name}} favicon"
                loading="lazy"
                onload="this.classList.add('loaded'); this.previousElementSibling.classList.add('hidden');"
                onerror="this.classList.add('error'); this.previousElementSibling.classList.add('hidden'); this.nextElementSibling.classList.add('visible');"
              />
              <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} icon-fallback" aria-hidden="true"></i>
            </div>
          {{else}}
            <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} site-icon" aria-hidden="true"></i>
          {{/ifHttpUrl}}
        {{else}}
          <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} site-icon" aria-hidden="true"></i>
        {{/ifEquals}}
      </div>

      <div class="site-card-content">
        <h3>{{#if name}}{{name}}{{else}}未命名站点{{/if}}</h3>
        <p>{{#if description}}{{description}}{{else}}{{extractDomain url}}{{/if}}</p>
      </div>
      {{/ifEquals}}
    {{/ifEquals}}
</a>
{{/if}}