Png poster maker

Reviewed-on: Decentrala/website#19

.gitignore

@@ -5,5 +5,7 @@ site/atom_blog.xml
 site/atom_events.xml
 poster.html
 poster.pdf
+poster_light.png
+poster_dark.png
 http.access.log
 http.error.log

dogadjaji.csv

@@ -61,3 +61,11 @@ datum, vreme, lokacija, tema
 22-08-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Autentifikacija na internetu
 28-08-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Podešavanje Mail servera
 29-08-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Prevođenje wiki-a
+04-09-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Hakaton
+05-09-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Cybersecurity - phishing
+11-09-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Radionica kreativnog pisanja
+12-09-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Tehno veče
+18-09-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Stop reklamama - diskusija
+19-09-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Cybersecurity - kako početi?
+25-09-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Email server E02
+26-09-2023, 19:00, DC Krov https://www.openstreetmap.org/node/10594728522, Lambda racun E02

image_poster.py

@@ -0,0 +1,89 @@
+#! /usr/bin/env python
+
+import freetype
+import io
+from PIL import Image, ImageDraw, ImageFont
+import csv
+import datetime as dt
+from dateutil import relativedelta
+
+CURRENT_TIME = dt.date.today()
+NEXT_MONTH = CURRENT_TIME
+DAYS_OF_WEEK_SR = ("PON", "UTO", "SRE", "ČET", "PET", "SUB", "NED")
+MONTHS_SR = ("Januar", "Februar", "Mart", "April", "Maj", "Jun", "Jul", "Avgust",\
+            "Septembar", "Oktobar", "Novembar", "Decembar")
+
+
+def load_events(csv_path:str) -> list[dict]:
+    events = []
+    with open(csv_path) as csv_file:
+        csv_reader = csv.reader(csv_file)
+        next(csv_reader, None)
+        for event in csv_reader:
+            event_date = event[0]
+            event_date_parsed = dt.datetime.strptime(event_date, "%d-%m-%Y").date()
+            event_time = event[1]
+            event_title = event[3]
+            current_event = {"date":event_date_parsed,
+                             "time":event_time,
+                             "title":event_title.strip()}
+            if event_date_parsed >= NEXT_MONTH:
+                events.append(current_event)
+        return events
+
+def drawPoster(events, bg, fg):
+    fontFacade = ImageFont.truetype('./site/font/Facade-Sud.woff', size=110)
+    fontIosevka = ImageFont.truetype('./site/font/iosevka-regular.woff', size=60)
+    fontIosevkaSmall = ImageFont.truetype('./site/font/iosevka-regular.woff', size=45)
+
+    W = 1200
+    H = 1500 
+    img = Image.new('RGB', (W, H), bg)
+    draw = ImageDraw.Draw(img)
+
+    header = "DECENTRALA"
+    _, _, w, _ = draw.textbbox((0, 0), header, font=fontFacade)
+    draw.text(((W-w)/2, 120), header, font=fontFacade, fill=fg)
+
+    subheader = f"Plan za {MONTHS_SR[NEXT_MONTH.month - 1]}"
+    _, _, w, _ = draw.textbbox((0, 0), subheader, font=fontIosevka)
+    draw.text(((W-w)/2, 240), subheader, font=fontIosevka, fill=fg)
+
+    height = 410
+
+    for event in events:
+        date = DAYS_OF_WEEK_SR[event["date"].weekday()]
+        day = event["date"].day
+        title = event["title"]
+        pad = " " if event["date"].day < 10 else ""
+        eventText = f"{date} {day}. {pad} {title}"
+        draw.text((120, height), eventText, font=fontIosevkaSmall, fill=fg)
+        height += 70
+
+    def drawCircle(x, y):
+        r = 10
+        draw.ellipse((x - r, y - r, x + r, y+r), fill=fg, outline=(0, 0, 0), width=0)
+
+    LCX = 950 # logo center x
+    LCY = 1200 # logo center y
+    d = 50 # delta
+    drawCircle(LCX - d, LCY)
+    drawCircle(LCX, LCY)
+    drawCircle(LCX, LCY - d)
+    drawCircle(LCX, LCY + d)
+    drawCircle(LCX + d, LCY)
+
+    draw.line([(LCX - d, LCY), (LCX + d, LCY)], fill=fg, width=5, joint=None)
+    draw.line([(LCX, LCY), (LCX, LCY + d), (LCX + d, LCY), (LCX, LCY - d)], fill=fg, width=5, joint=None)
+    draw.text((LCX - 1.7*d, LCY + 1.5*d), "dmz.rs", font=fontIosevka, fill=fg)
+
+    return img
+
+
+events = load_events("dogadjaji.csv")
+
+img = drawPoster(events, (0, 0, 0), (20, 250, 50))
+img.save('poster_dark.png')
+
+img = drawPoster(events, (255, 255, 255), (0, 0, 0))
+img.save('poster_light.png')

pages/en/account.html

@@ -1,3 +1,4 @@
+<h1>Account</h1>
 <p>If you have created an account on dmz.rs, you can use our XMPP and e-mail server, as well as other services that support LDAP login.<p>
 <p>For more on XMPP see <a href="https://wiki.dmz.rs/en/tutorial/conversations">this tutorial</a>. <p>
 <p>You can see settings for the <a href="https://thunderbird.org">Thundebird</a> mail client on this <a href="/img/mailsettings.png">image</a>.<p>

pages/en/events.html

@@ -1,2 +1,2 @@
 <h1>Events</h1>
-<p>Following list contains all forthcoming events. Held events are listed in <a href="/en/events_archive">archive</a></p>
+<p>Following list contains all forthcoming events. Held events are listed in <a href="/en/events_archive">archive</a></p><br>

pages/en/services.html

@@ -49,6 +49,6 @@
 <p>
   These are some of the services we currently maintain on our servers.
   To use these services, you can register for each service separately,
-  or you can create a unique <a href="/pages/account.html">account</a>
+  or you can create a unique <a href="/en/account">account</a>
   on our server and use all services with the same account.
 </p>

pages/en/webring.html

@@ -1,3 +1,4 @@
+<h1>Webring</h1>
 <ul>
   <li><a href="https://tilde.zone/explore">Tilde Zone</a></li>
 </ul>

pages/sr/account.html

@@ -1,3 +1,4 @@
+<h1>Nalog</h1>
 <p>Ako si napravio nalog na dmz.rs možeš koristiti naš XMPP i e-mail server, kao i ostale servise koji podržavaju LDAP login.<p>
 <p>Za više o XMPP-u pogledaj <a href="https://wiki.dmz.rs/en/tutorial/conversations">tutorial</a>. <p>
 <p>Podešavanja za <a href="https://thunderbird.org">Thundebird</a> mail klijent možeš pogledati na <a href="/img/mailsettings.png">slici</a>.<p>

pages/sr/events.html

@@ -1,2 +1,2 @@
 <h1>Događaji</h1>
-<p>Naredna lista sadrži sve predstojeće događaje. Za listu održanih događaja pogledajte <a href="/events_archive">arhivu</a></p>
+<p>Naredna lista sadrži sve predstojeće događaje. Za listu održanih događaja pogledajte <a href="/events_archive">arhivu</a></p><br>

pages/sr/services.html

@@ -54,5 +54,5 @@
   </tr>
 </table>
 <p>Ovo su neki od servisa koje trenutno održavamo na našim serverima. Da bi koristio ove servise, <em>možeš</em> da se
-  registuješ na svaki servis posebno, a možeš i da napraviš jedinstveni <a href="/pages/account.html">nalog</a> na našem
+  registuješ na svaki servis posebno, a možeš i da napraviš jedinstveni <a href="/account">nalog</a> na našem
   serveru i da koristiš sve servise sa istim nalogom.</p>

pages/sr/webring.html

@@ -1,3 +1,4 @@
+<h1>Webring</h1>
 <ul>
   <li><a href="https://tilde.zone/explore">Tilde Zone</a></li>
 </ul>

site/styles/account.css

@@ -1,4 +0,0 @@
-h1 {
-  margin-bottom: 2rem;
-  font-weight: normal;
-}

site/styles/contact.css

@@ -1,4 +0,0 @@
-h1 {
-  margin-bottom: 2rem;
-  font-weight: normal;
-}

site/styles/events.css

@@ -1,8 +1,3 @@
-h1 {
-  margin-bottom: 2rem;
-  font-weight: normal;
-}
-
 .event {
   display: flex;
   flex-direction: row;
@@ -17,7 +12,8 @@ h1 {
 }
 
 .event>div {
-  padding: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   white-space: nowrap;
 }
 
@@ -31,6 +27,8 @@ h1 {
 .title {
   border-left: 2px solid var(--border);
   font-weight: bold;
+  padding-left: 1rem;
+  padding-right: 0.5em;
 }
 
 .place {
@@ -41,7 +39,7 @@ h1 {
   .event {
     flex-direction: column;
     margin-bottom: 1rem;
-    border-left: 2px solid var(--border);
+    border-left: 3px solid var(--border);
   }
 
   .event > div {
@@ -57,6 +55,10 @@ h1 {
     padding-bottom: 0;
   }
 
+  .date {
+    width: 100%;
+  }
+
   .title {
     border-left: none;
   }

site/styles/home.css

@@ -1,8 +1,3 @@
-h1 {
-  margin-bottom: 2rem;
-  font-weight: normal;
-}
-
 dl {
   padding: 1rem 0;
 }

site/styles/services.css

@@ -20,8 +20,3 @@ td {
   padding: 0 1rem 1rem 1rem;
   vertical-align: top;
 }
-
-h1 {
-  margin-bottom: 2rem;
-  font-weight: normal;
-}

site/styles/style.css

@@ -68,6 +68,13 @@ main {
   overflow: auto;
 }
 
+main h1 {
+  margin-bottom: 2rem;
+  font-weight: normal;
+  font-size: 1.5em;
+  font-variant-caps: small-caps;
+}
+
 a,
 a:visited {
   text-decoration: none;

template/page-en.html

@@ -13,7 +13,7 @@
 </head>
 <body>
   <header>
-    <a id="logo" href="/en/"><img src="/img/logo-light.svg" alt="Logo"> Decentrala</a>
+    <a id="logo" href="/en/index"><img src="/img/logo-light.svg" alt="Logo"> Decentrala</a>
     <button id="theme-switcher"></button>
     <a class="lang" hreflang="sr" href="/PAGE_NAME">SR</a>
   </header>