website

#astro#js#html#css

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

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


src/_includes/file-layout.njk
{% macro fileLayout(repo, filepath, filename, ext, tab) %}
{% set base = "/repos/" + repo + "/files/" + filepath %}
<div class="file-layout">
  <div class="title">{{ filename | fileIcon(ext) | safe }}<span>{{ filename }}</span></div>
  <div class="nav">
    <div><a href="{{ base }}/" hx-get="{{ base }}/" hx-select="#file-pane" hx-target="#file-pane" hx-swap="outerHTML" hx-push-url="true" aria-current="{% if tab == 'Contents' %}true{% else %}false{% endif %}">Contents</a></div>
    <div>|</div>
    <div><a href="{{ base }}/history/" hx-get="{{ base }}/history/" hx-select="#file-pane" hx-target="#file-pane" hx-swap="outerHTML" hx-push-url="true" aria-current="{% if tab == 'History' %}true{% else %}false{% endif %}">History</a></div>
    <div>|</div>
    <div><a href="{{ base }}/blame/" hx-get="{{ base }}/blame/" hx-select="#file-pane" hx-target="#file-pane" hx-swap="outerHTML" hx-push-url="true" aria-current="{% if tab == 'Blame' %}true{% else %}false{% endif %}">Blame</a></div>
  </div>
</div>
{% endmacro %}

{% macro fileContent(render, size, filepath) %}
<div id="file-content">
  {% if render.kind == "binary" %}
    <p>Binary file ({{ size }} bytes).</p>
  {% elif render.kind == "large" %}
    <p>File too large to display ({{ size }} bytes).</p>
  {% elif render.kind == "image" %}
    <img src="{{ render.src }}" alt="{{ filepath }}" />
  {% else %}
    <pre class="code-view" data-lang="{{ render.lang }}"><code class="language-{{ render.lang }}">{{ render.html | safe }}</code></pre>
  {% endif %}
</div>
{% endmacro %}