blog

{% load i18n %}

{% load static %}

{% block stylesheets %}

    {{ block.super }}

    <style>

    img {

    width: 80%;

     display: block;

  margin-left: auto;

  margin-right: auto;

    }

    video {

    width: 80%;

    } 

    </style>

     <link href="{% static "website/blog.css" %}" rel="stylesheet" media="screen, projection" />

{% block title %}{% trans "Maarten's blog" %}{% endblock title %}

{% block description %}{% blocktrans %}The always coherently put together, yet

fuzzy blog of whatever sprouts in my mind.{% endblocktrans %}

{% endblock description %}

{% block header %}

<header>                                                                                                                                                                                         

    <h1>{% trans "Notepad of a student" %}</h1>  

    <label for="nav-drawer-toggle">≡</label>

</header>

{% endblock header %}

{% block nav %}

<input id="nav-drawer-toggle" type="checkbox" />

<nav>

    <label for="nav-drawer-toggle"><!--🡨-->🡠</label>

    <h2>{% trans "Navigation" %}</h2>

    {% for title, date, blog_text, link in posts %}

    <a class="nav-link" href="{{ link }}">{{ title }}</a>

    {% endfor %}

    <hr class="half" />

    <a class="nav-link" href="{% url 'about-index' %}">{% trans "Front page" %}</a>

  </nav>

{% endblock nav %}

{% block main %}

<section class="emphasis">

    <h1>{% trans "Blog" %}</h1>

    <p>

        {% blocktrans %}Welcome to my blog. Here, I write

        about things that interest me. Politics, coding,

        studying, life, or anything else I fancy rambling

        about. If you're in luck, I may've written it in a

        language that you understand better than English.

        {% endblocktrans %}

    </p>

</section>

<!--<div class="fab">

    <a href="{% url 'blog-feed' %}" id="feed-fab"> 

    <i class="large material-icons">rss_feed</i>

    <b>RSS</b>

    </a>

</div>-->

<section>

    <h1>Monthly</h1>

    <a class="btn fill" href="{% url "monthly-archive" %}"> {% trans "Open archive" %}</a>

    {% include "blog/monthly.html" %}

</section>

<div class="cards">

    {% for title, date, blog_text, link in posts %}

        <div class="card">

            <h3>{{ title }}</h3>

            <h4>{{ date|date:"DATE_FORMAT" }}</h4>

        <p>{{ blog_text|safe|truncatewords_html:100 }}</p>

        <a class="btn outline" href="{{link}}">📚 {% trans "Read on" %}</a>

        </div>

    {% endfor %}

</div>

{% endblock main %}

{% load humanize %}

{% load i18n %}

{% load static %}

{% block stylesheets %}

{{ article|safe|truncatewords_html:10 }}

{% endblock description %}

{% block title %}📚 {{ navbar_title }}{% endblock title %}

{% block header %}

<header>

<h1>{{ navbar_title }}</h1>

</header>

{% endblock header %}

{% block main %}

<section style="font-family: serif;">

    <!--<article style="font-family:serif;">-->

        {{ article|safe }}

    <!--</article>-->

</section>

<h5 class="white-text">{% trans "This article in other languages" %}</h5>

{% get_language_info for 'nl' as LANG %}

<a {% if dutch_link %} href="{{dutch_link}}" {% endif %}

   class="btn fill

   {% if not dutch_link %}disabled{% endif %}">

    🇧🇪 {{ LANG.name_translated}} 🇳🇱

</a>

{% get_current_language as lang %}

{% get_language_info for 'fr' as LANG %}

<a {% if french_link %} href="{{french_link}}" {% endif %}

   class="btn fill

   {% if not french_link %}disabled{% endif %}">

    🇧🇪 {{ LANG.name_translated}} 🇫🇷

</a>

{% get_language_info for 'en' as LANG %}

<a {% if english_link %} href="{{english_link}}" {% endif %}

   class="btn fill

   {% if not english_link %}disabled{% endif %}">

    🇬🇧 {{ LANG.name_translated}} 🇺🇸

</a>

{% comment %}

{% get_language_info for 'de' as LANG %}

<a {% if german_link %} href="{{german_link}}" {% endif %}

   class="btn fill

   {% if not german_link %}disabled{% endif %}">

    🇧🇪 {{ LANG.name_translated}} 🇩🇪

</a>

{% comment %}

{% get_language_info for 'es' as LANG %}

<a {% if spanish_link %} href="{{spanish_link}}" {% endif %}

   class="btn

   {% if not spanish_link %}disabled{% endif %}">

    🇪🇸 {{ LANG.name_translated}} 🇲🇽

</a>

<h5 class="white-text">{% trans "Comments" %}</h5>

{% for comment in comments %} {# Whoops =P #}

    <span class="white-text">{{ comment.name|title }} | </span>

    <time class="grey-text" datetime="{{ comment.date|date:'c' }}">{{ comment.date|naturaltime }}</time>

    <br />

    <p class="white-text">{{ comment.text|urlize }}</p>

    <hr />

{% endfor %}

    {# Form for new comment #}

    <form action="" method="POST">

        {% csrf_token %}

        {{ form.name.label_tag }}

        <input class="white-text browser-default" type="text" id="id_name" name="name" maxlength="64" required />

        {{ form.text.label_tag }}

        <textarea id="id_text" class="white-text" name="text" maxlength="1000" required></textarea>

        <input type="submit" value="{% trans "Submit" %}" />

    </form>

{% comment %}

<a href="{% url 'blog-post' post_slug %}" class="btn {{accent_color}} accent-4 black-text tooltipped" data-position="bottom" data-delay="50" data-tooltip="{% trans "Multilingual link. Links to the version in the viewer's preferred language." %}">🏳️‍🌈 {% trans "All available languages" %}</a>

    {# TODO: Change to rainbow flag when possible #}

{% endcomment %}

    </div>

</div>

<div class="container">

    {% for title, date, description, link in post_links %}

        <h2 class="{{ color}}-text">{{ title }}</h2>

        {# FIXME: Date is in all languages of the same format. Fix for each language #}

        <span class="grey-text">{{ date|date:"l j F Y" }}</span>

        {#<p class="hide-on-small-only">{{ description }}</p>#}

        <p class="hide-on-small-only">{% lorem %}</p>

        <a class="btn {{accent_color}} accent-3" href="{{link}}">

            {% trans "Read on"%}

        </a>

        <hr />

    {% endfor %}

</div>

{% endblock main %}