|
{% extends "base.html" %}
|
|
{% from "_macros.html" import modal %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="/static/css/feed.css">
|
|
<link rel="stylesheet" href="/static/css/gists.css">
|
|
<link rel="stylesheet" href="/static/css/sidebar.css">
|
|
<link rel="stylesheet" href="/static/vendor/codemirror/codemirror.min.css">
|
|
<link rel="stylesheet" href="/static/vendor/codemirror/theme/monokai.min.css">
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="gists-layout">
|
|
<aside class="sidebar-card">
|
|
<div class="sidebar-heading">Languages</div>
|
|
<div class="sidebar-nav">
|
|
<a href="/gists" class="sidebar-link {% if not current_language %}active{% endif %}">
|
|
<span class="icon">📋</span>All
|
|
</a>
|
|
{% for code, name in languages %}
|
|
{% if code != 'plaintext' and code in gist_language_codes %}
|
|
<a href="/gists?language={{ code }}" class="sidebar-link {% if current_language == code %}active{% endif %}">
|
|
<span class="icon">📝</span>{{ name }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if 'plaintext' in gist_language_codes %}
|
|
<a href="/gists?language=plaintext" class="sidebar-link {% if current_language == 'plaintext' %}active{% endif %}">
|
|
<span class="icon">📝</span>Plain Text
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if user %}
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-heading">My Gists</div>
|
|
<a href="/gists?user_uid={{ user['uid'] }}" class="btn btn-secondary btn-sm full-width justify-center">
|
|
<span class="icon">👤</span>View My Gists
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</aside>
|
|
|
|
<div class="gists-main">
|
|
<div class="gists-header">
|
|
<div>
|
|
<h1>Gists</h1>
|
|
<span class="subtitle">Share and discover code snippets</span>
|
|
</div>
|
|
<div class="gists-count">{{ total_count }} gist{{ 's' if total_count != 1 else '' }}</div>
|
|
</div>
|
|
|
|
<div class="gists-grid">
|
|
{% for item in gists %}
|
|
<div class="gist-card fade-in card-link-host">
|
|
{% set _href = "/gists/" ~ (item.gist['slug'] or item.gist['uid']) %}
|
|
{% set _label = item.gist['title'] %}
|
|
{% include "_card_link.html" %}
|
|
<div class="gist-card-header">
|
|
<h3 class="gist-card-title">{{ item.gist['title'] }}</h3>
|
|
{% set _type = "gist" %}{% set _uid = item.gist['uid'] %}{% set _my_vote = item.my_vote %}{% set _count = item.gist.get('stars', 0) %}{% set _btn_class = "gist-card-star" %}{% set _stop = True %}{% include "_star_vote.html" %}
|
|
</div>
|
|
|
|
<div class="gist-card-meta">
|
|
<span class="gist-language-badge">📝 {{ language_name(item.gist['language']) }}</span>
|
|
</div>
|
|
|
|
{% if item.gist.get('description') %}
|
|
<div class="gist-card-desc">{{ item.gist['description'][:200] }}{% if item.gist['description']|length > 200 %}...{% endif %}</div>
|
|
{% endif %}
|
|
|
|
<div class="gist-card-footer">
|
|
<div class="gist-author">
|
|
{% set _size = 20 %}{% set _size_class = "sm" %}{% set _user = item.author %}{% include "_avatar_link.html" %}
|
|
<span>{{ item.author['username'] if item.author else 'Unknown' }}</span>
|
|
</div>
|
|
<span>{{ item.time_ago }}</span>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state empty-state-full">No gists found. Create one!</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if user %}
|
|
<button class="feed-fab" id="create-gist-btn" title="Create Gist" data-modal="create-gist-modal">+</button>
|
|
|
|
{% call modal('create-gist-modal', 'Create Gist', wide=true) %}
|
|
<form method="POST" action="/gists/create">
|
|
<div class="auth-field auth-field-gap">
|
|
<label for="gist-title">Title</label>
|
|
<input type="text" id="gist-title" name="title" required maxlength="200" placeholder="Gist title">
|
|
</div>
|
|
|
|
<div class="auth-field auth-field-gap">
|
|
<label for="gist-description">Description (optional)</label>
|
|
<textarea id="gist-description" name="description" maxlength="5000" placeholder="What does this snippet do?" class="min-h-80" data-mention></textarea>
|
|
</div>
|
|
|
|
<div class="auth-field auth-field-gap">
|
|
<label for="gist-language">Language</label>
|
|
<select id="gist-language" name="language">
|
|
{% for code, name in languages %}
|
|
<option value="{{ code }}">{{ name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="auth-field auth-field-gap-last">
|
|
<label for="gist-source-editor">Source Code</label>
|
|
<textarea id="gist-source-editor" name="source_code" class="hidden-textarea" data-language="plaintext"></textarea>
|
|
</div>
|
|
|
|
{% include "_attachment_form.html" %}
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="modal-close btn btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Create Gist</button>
|
|
</div>
|
|
</form>
|
|
{% endcall %}
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script defer src="/static/vendor/codemirror/codemirror.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/python/python.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/javascript/javascript.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/clike/clike.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/htmlmixed/htmlmixed.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/xml/xml.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/css/css.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/go/go.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/sql/sql.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/shell/shell.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/yaml/yaml.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/markdown/markdown.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/swift/swift.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/php/php.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/ruby/ruby.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/haskell/haskell.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/lua/lua.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/perl/perl.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/r/r.min.js"></script>
|
|
<script defer src="/static/vendor/codemirror/mode/dart/dart.min.js"></script>
|
|
<script type="module" src="/static/js/GistEditor.js"></script>
|
|
<script type="module">
|
|
const gistEditor = new window.GistEditor();
|
|
const gistModal = document.getElementById("create-gist-modal");
|
|
if (gistModal) {
|
|
const observer = new MutationObserver(() => {
|
|
if (gistModal.classList.contains("visible")) {
|
|
gistEditor.init();
|
|
gistEditor.refresh();
|
|
}
|
|
});
|
|
observer.observe(gistModal, { attributes: true, attributeFilter: ["class"] });
|
|
}
|
|
</script>
|
|
{% endblock %}
|