|
{% extends "base.html" %}
|
|
{% from "_macros.html" import modal %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{{ static_url('/static/css/feed.css') }}">
|
|
<link rel="stylesheet" href="{{ static_url('/static/css/sidebar.css') }}">
|
|
<link rel="stylesheet" href="{{ static_url('/static/css/post.css') }}">
|
|
{% endblock %}
|
|
{% block content %}
|
|
<h1 class="sr-only">Feed</h1>
|
|
<div class="feed-layout">
|
|
<aside class="sidebar-card" role="complementary" aria-label="Feed filters">
|
|
{% set _action = "/feed" %}{% set _placeholder = "Search posts..." %}{% set _hidden = {"tab": current_tab, "topic": current_topic} %}{% include "_sidebar_search.html" %}
|
|
|
|
<div class="sidebar-heading">Topics</div>
|
|
<div class="sidebar-nav">
|
|
<a href="/feed" class="sidebar-link {% if not current_topic %}active{% endif %}">
|
|
<span class="icon">📋</span>
|
|
All
|
|
</a>
|
|
<a href="/feed?topic=devlog" class="sidebar-link {% if current_topic == 'devlog' %}active{% endif %}" data-topic="devlog">
|
|
<span class="icon">📝</span>
|
|
Devlog
|
|
</a>
|
|
<a href="/feed?topic=showcase" class="sidebar-link {% if current_topic == 'showcase' %}active{% endif %}" data-topic="showcase">
|
|
<span class="icon">✨</span>
|
|
Showcase
|
|
</a>
|
|
<a href="/feed?topic=question" class="sidebar-link {% if current_topic == 'question' %}active{% endif %}" data-topic="question">
|
|
<span class="icon">❓</span>
|
|
Question
|
|
</a>
|
|
<a href="/feed?topic=rant" class="sidebar-link {% if current_topic == 'rant' %}active{% endif %}" data-topic="rant">
|
|
<span class="icon">💢</span>
|
|
Rant
|
|
</a>
|
|
<a href="/feed?topic=fun" class="sidebar-link {% if current_topic == 'fun' %}active{% endif %}" data-topic="fun">
|
|
<span class="icon">🎮</span>
|
|
Fun
|
|
</a>
|
|
<a href="/feed?topic=politics" class="sidebar-link {% if current_topic == 'politics' %}active{% endif %}" data-topic="politics">
|
|
<span class="icon">🏛</span>
|
|
Politics
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-heading">Resources</div>
|
|
<div class="sidebar-nav">
|
|
<a href="/docs" class="sidebar-link">
|
|
<span class="icon">📚</span>
|
|
Docs
|
|
</a>
|
|
<a href="/issues" class="sidebar-link">
|
|
<span class="icon">🐛</span>
|
|
Issues
|
|
</a>
|
|
<a href="/devii/" class="sidebar-link" data-devii-open>
|
|
<span class="icon">🤖</span>
|
|
Devii
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-section online-users" aria-label="Online now">
|
|
<div class="sidebar-heading">Online now <span class="online-count" data-online-count>{{ online_users|length }}</span></div>
|
|
<div class="online-users-list" data-online-users-list data-empty-text="No one online right now">
|
|
{% for ou in online_users %}
|
|
<a href="/profile/{{ ou['username'] }}" class="online-user" title="{{ ou['username'] }}">
|
|
<span class="avatar-badge"><img src="{{ avatar_url('multiavatar', avatar_seed(ou), 32) }}" class="avatar-img avatar-sm" alt="{{ ou['username'] }}" loading="lazy"><span class="presence-dot online" aria-hidden="true"></span>{% set _user = ou %}{% include "_award_badge.html" %}</span>
|
|
</a>
|
|
{% else %}
|
|
<span class="online-empty">No one online right now</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="feed-main">
|
|
<div class="feed-nav">
|
|
<a href="/feed?tab=all" class="feed-nav-btn {% if current_tab == 'all' or not current_tab %}active{% endif %}"><span class="icon">📋</span> All</a>
|
|
<a href="/feed?tab=trending" class="feed-nav-btn {% if current_tab == 'trending' %}active{% endif %}"><span class="icon">🔥</span> Trending</a>
|
|
<a href="/feed?tab=recent" class="feed-nav-btn {% if current_tab == 'recent' %}active{% endif %}"><span class="icon">🕐</span> Recent</a>
|
|
<a href="/feed?tab=following" class="feed-nav-btn {% if current_tab == 'following' %}active{% endif %}"><span class="icon">👥</span> Following</a>
|
|
<div class="feed-nav-actions">
|
|
<button type="button" class="btn-ghost btn-icon" title="Refresh" aria-label="Refresh" data-reload>↻</button>
|
|
<a href="/notifications" class="btn-ghost btn-icon" title="Notifications" aria-label="Notifications">🔔</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feed-posts" role="feed" aria-label="Posts">
|
|
{% for item in posts %}
|
|
{% set _author = item.author %}{% set _time = item.time_ago %}{% set _show_share = true %}{% set _show_comment_form = true %}{% include "_post_card.html" %}
|
|
{% else %}
|
|
<div class="empty-state">No posts yet. Be the first!</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% include "_load_more.html" %}
|
|
</div>
|
|
|
|
<aside class="feed-right" role="complementary" aria-label="Community">
|
|
<div class="daily-topic-card card-link-host">
|
|
{% if daily_topic.get('slug') %}
|
|
{% set _href = "/news/" ~ daily_topic['slug'] %}
|
|
{% set _label = daily_topic.get('title', '') %}
|
|
{% include "_card_link.html" %}
|
|
{% endif %}
|
|
<div class="daily-topic-label">Daily Topic</div>
|
|
{% if daily_topic.get('image_url', '') %}
|
|
<img src="{{ daily_topic['image_url'] }}" alt="{{ daily_topic.get('title', '') }}" loading="lazy" class="daily-topic-image">
|
|
{% endif %}
|
|
<h4 class="rendered-title">{{ render_title(daily_topic.get('title', '')) }}</h4>
|
|
<div class="rendered-content">{{ render_content(daily_topic.get('summary', '')) }}</div>
|
|
<div class="topic-links">
|
|
<a href="/news/{{ daily_topic.get('slug', '') }}">Read More</a>
|
|
{% if daily_topic.get('url', '') %}
|
|
<a href="{{ daily_topic['url'] }}" target="_blank" rel="noopener">Source</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="community-stats">
|
|
<h3>Community</h3>
|
|
<div class="stat-row">
|
|
<span class="label">Total Members</span>
|
|
<span class="value">{{ total_members }}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">Posts Today</span>
|
|
<span class="value">{{ posts_today }}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">Total Projects</span>
|
|
<span class="value">{{ total_projects }}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">Total Gists</span>
|
|
<span class="value">{{ total_gists }}</span>
|
|
</div>
|
|
<div class="top-authors-section">
|
|
<h3 class="top-authors-title">Top Authors</h3>
|
|
{% for author in top_authors %}
|
|
<div class="stat-row">
|
|
<span class="label">
|
|
{% set _user = author %}{% set _size = 20 %}{% set _size_class = "xs" %}{% include "_avatar_link.html" %}
|
|
{% set _user = author %}{% set _class = "top-author-name" %}{% include "_user_link.html" %}
|
|
</span>
|
|
<span class="value">{{ author.get('stars', 0) }}</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="no-authors-msg">No top authors yet</div>
|
|
{% endfor %}
|
|
<a href="/leaderboard" class="top-authors-link">View full leaderboard</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
{% if user %}
|
|
<a href="#" class="feed-fab" data-modal="create-post-modal" title="Create New Post" aria-label="Create New Post">+</a>
|
|
|
|
{% call modal('create-post-modal', 'Create New Post') %}
|
|
<form id="create-post-form" method="POST" action="/posts/create" enctype="multipart/form-data">
|
|
{% set _topics = TOPICS %}{% set _selected = 'random' %}{% include "_topic_selector.html" %}
|
|
|
|
<div class="auth-field auth-field-gap">
|
|
<label for="post-content">What are you sharing?</label>
|
|
<textarea id="post-content" name="content" required maxlength="125000" placeholder="What's on your mind?" class="min-h-120" data-mention></textarea>
|
|
<small class="hint-text"><span id="post-content-count">0/125000</span></small>
|
|
</div>
|
|
|
|
<div class="auth-field auth-field-gap">
|
|
<label for="post-title">Title (optional)</label>
|
|
<input type="text" id="post-title" name="title" maxlength="500" placeholder="Post title">
|
|
<small class="hint-text"><span id="post-title-count">0/500</span></small>
|
|
</div>
|
|
|
|
<div class="auth-field auth-field-gap">
|
|
<label for="project_uid">Link to Project (Optional)</label>
|
|
<select id="project_uid" name="project_uid">
|
|
<option value="">No project</option>
|
|
{% for p in get_user_projects(user['uid']) %}
|
|
<option value="{{ p['uid'] }}">{{ p['title'] }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="auth-field auth-field-gap">
|
|
<label>Attach files (images, video, audio, documents)</label>
|
|
{% include "_attachment_form.html" %}
|
|
</div>
|
|
|
|
<div class="auth-field auth-field-gap">
|
|
<button type="button" class="btn btn-secondary btn-sm" data-poll-toggle><span class="icon">📊</span> <span data-poll-toggle-label>Add poll</span></button>
|
|
</div>
|
|
<div class="poll-builder" data-poll-builder hidden>
|
|
<input type="text" name="poll_question" maxlength="200" placeholder="Poll question" aria-label="Poll question" class="poll-builder-question" disabled>
|
|
<div class="poll-builder-options" data-poll-options>
|
|
<div class="poll-builder-row"><input type="text" name="poll_options" maxlength="100" placeholder="Option 1" aria-label="Poll option 1" disabled></div>
|
|
<div class="poll-builder-row"><input type="text" name="poll_options" maxlength="100" placeholder="Option 2" aria-label="Poll option 2" disabled></div>
|
|
</div>
|
|
<button type="button" class="btn-ghost btn-sm" data-poll-add-option>+ Add option</button>
|
|
<p class="poll-builder-error" data-poll-error hidden></p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="modal-close btn btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Post</button>
|
|
</div>
|
|
</form>
|
|
{% endcall %}
|
|
{% else %}
|
|
<a href="/auth/login" class="feed-fab login-required" aria-label="Log in">+</a>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|