website

#astro#js#html#css

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.


src/_includes/repo-layout.njk
{% macro repoLayout(repo, title, desc, tags, tab, version) %}
<div class="repo">
  <div class="header">
    <h1><span style="view-transition-name:repo-title-{{ title }}">{{ title }}</span>{% if version %} <span class="repo-version">v{{ version }}</span>{% endif %}</h1>
    <div class="tags">{% for tag in tags %}<span class="tag">#{{ tag }}</span>{% endfor %}</div>
  </div>
  <h3 class="clone-cmd">
    <p>git clone <span class="tag">https://git.pyrossh.dev/{{ title }}</span></p>
    <button type="button" class="copy-btn" data-clone="git clone https://git.pyrossh.dev/{{ title }}" aria-label="Copy clone command">
      <svg class="icon-copy" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
      <svg class="icon-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
    </button>
  </h3>
  <div class="headerExtension"><h2>{{ desc }}</h2></div>
  <hr />
  <div class="nav">
    <div><a href="/repos/{{ repo }}/" hx-get="/repos/{{ repo }}/" hx-select="#repo-page" hx-target="#repo-page" hx-swap="outerHTML" hx-push-url="true" class="{% if tab == 'Readme' %}active-tab{% endif %}">Readme</a><span>|</span></div>
    <div><a href="/repos/{{ repo }}/files/" hx-get="/repos/{{ repo }}/files/" hx-select="#repo-page" hx-target="#repo-page" hx-swap="outerHTML" hx-push-url="true" class="{% if tab == 'Files' %}active-tab{% endif %}">Code</a><span>|</span></div>
    <div><a href="/repos/{{ repo }}/commits/" hx-get="/repos/{{ repo }}/commits/" hx-select="#repo-page" hx-target="#repo-page" hx-swap="outerHTML" hx-push-url="true" class="{% if tab == 'Commits' %}active-tab{% endif %}">Commits</a></div>
  </div>
</div>
{% endmacro %}