huge updates

app.py

@@ -14,16 +14,13 @@ class WikiApp(Flask):
         super().__init__(*args, **kwargs)
                 
         # Define routes
-        # self.route('/', methods=['GET'])(self.homepage)
         self.route('/', methods=['GET'])(self.home)
         self.route('/activities', methods=['GET'])(self.activities)
         self.route('/data', methods=['GET'])(self.data_int)
+        self.route('/generate-nl', methods=['GET'])(self.create_nl)
         self.route('/newsletter/<string:title>', methods=['GET'])(self.generate_newsletter)
-        self.route('/publications', methods=['GET'])(self.fetch_publications)
-        self.route('/meetups', methods=['GET'])(self.fetch_meetups)
         self.route('/<string:title>', methods=['GET'])(self.page_content)
         self.route('/favicon.ico')(self.favicon)
-        self.route('/archive/<string:collection>', methods=['GET'])(self.get_collection)
         
     # Return Homepage
     def home(self):    
@@ -37,8 +34,7 @@ class WikiApp(Flask):
             page_content = data['parse']['text']['*']
             page_content, table = self.fix_html(page_content)
             homepage_content += page_content
-        print(table)
-        return render_template('index.html', title=pages[0], cont=homepage_content, table=table)
+        return render_template('index.html', cont=homepage_content, table=table)
     
     def activities(self):
         # fetch publications as test
@@ -46,17 +42,23 @@ class WikiApp(Flask):
         return render_template('activities.html', title="Activities", activities=activity_list)
     
     def get_activities(self):
-        concepts = ['Newsletters', 'Projects']
-        publication_page_list = self.fetch_all_pages(concepts)
+        concepts = ['Activities']
+        publication_page_list = self.fetch_all_activies(concepts)
         updated_cat_list = self.fetch_pages_cat(publication_page_list)
-        projects = updated_cat_list.get('Projects', [])
-        sorted_prj = dict(sorted(projects.items(), key=lambda item: datetime.strptime(item[1]['date'], "%d.%m.%Y" ), reverse=True) )
-        newsletters = updated_cat_list.get('Newsletters', [])
-        sorted_nl = dict(sorted(newsletters.items(), key=lambda item: datetime.strptime(item[1]['date'], "%d.%m.%Y" ), reverse=True) )
-        return sorted_nl
+        activities = updated_cat_list.get('Activities', [])
+        srted_activities = dict(sorted(activities.items(), key=lambda item: datetime.strptime(item[1]['date'], "%d.%m.%Y" ), reverse=True) )
+        # projects = updated_cat_list.get('Projects', [])
+        # sorted_prj = dict(sorted(projects.items(), key=lambda item: datetime.strptime(item[1]['date'], "%d.%m.%Y" ), reverse=True) )
+        # newsletters = updated_cat_list.get('Newsletters', [])
+        # sorted_nl = dict(sorted(newsletters.items(), key=lambda item: datetime.strptime(item[1]['date'], "%d.%m.%Y" ), reverse=True) )
+        return srted_activities
        
     def data_int(self):
         return render_template('data.html')
+    
+    def create_nl(self):
+        # Function for generating a newsletter
+        pass
          
     def generate_newsletter(self, title):
         content, title, date = self.fetch_page(title)
@@ -65,7 +67,16 @@ class WikiApp(Flask):
         new_date_events = given_date + relativedelta(weeks=4)
         opportunites_dict = self.fetch_opportunities(given_date.date(), new_date_opp.date())
         events_dict = self.fetch_events(given_date.date(), new_date_events.date())
-        return render_template('newsletter.html', nav_elements=self.get_nav_menu(), content=content, title=title, events=events_dict, opportunities=opportunites_dict)
+        
+        spotlight = False
+        # Loop through the events and check the spotlight attribute
+        for category, events in events_dict.items():
+            for event in events:
+                if event['spotlight']:
+                    spotlight = True
+                    break
+        
+        return render_template('newsletter.html', nav_elements=self.get_nav_menu(), cont=content, title=title, events=events_dict, opportunities=opportunites_dict, spotlight=spotlight)
 
     def fetch_opportunities(self, pub_date, future_date):
         all_opportunities = self.fetch_all_opportunities(pub_date, future_date)
@@ -290,6 +301,24 @@ class WikiApp(Flask):
                             category_page_list[category][page_title].update({'pageid':pageid, 'title': title, 'source': source })
                             
         return category_page_list
+    
+    def fetch_all_activies(self, categories):
+        category_page_list = {} 
+        for category in categories:
+            response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'ask', 'query': '[[Concept:'+category+']]|?Activities:Date|?Activities:Draft', 'format': 'json', 'formatversion': '2'})
+            data = response.json()
+            page_title_timestamps = {}
+            for page_title, page_data in data['query']['results'].items():
+                if 'printouts' in page_data and 'Activities:Date' in page_data['printouts']:
+                    raw_timestamp = page_data['printouts']['Activities:Date'][0]['raw']
+                    raw_timestamp = raw_timestamp[2:]
+                    lol = datetime.strptime(raw_timestamp, "%Y/%m/%d")
+                    formatted_date = lol.strftime("%d.%m.%Y")
+                    if(page_data['printouts']['Activities:Draft'][0] == 'f'):
+                        page_title_timestamps[page_title] = {'date': formatted_date, 'draft': page_data['printouts']['Activities:Draft'][0]}
+                    
+            category_page_list[category] = page_title_timestamps
+        return category_page_list
       
     def fetch_all_pages(self, categories):
         category_page_list = {} 
@@ -327,10 +356,15 @@ class WikiApp(Flask):
         data = response.json()
         
         # Extract page title and content
-        page_title = data['parse']['title']
-        page_content = data['parse']['text']['*']
-        page_content, table = self.fix_html(page_content)
-        print(table)
+        try:
+            page_title = data['parse']['title']
+            page_content = data['parse']['text']['*']
+            page_content, table = self.fix_html(page_content)
+        except:
+            page_title = 'Page not found'
+            page_content = 'The page you are looking for does not exist.'
+            table = None
+        
         return render_template('index.html', title=page_title, cont=page_content, table=table)
         
     
@@ -341,14 +375,15 @@ class WikiApp(Flask):
         # Extract page title and content
         page_title = data['parse']['title']
         page_content = data['parse']['text']['*']
-        page_content = self.fix_html(page_content)
+        page_content, table = self.fix_html(page_content)
         page_date = re.search(r'\d{4}-\d{2}-\d{2}', data['parse']['text']['*'])
         
         if(page_date):
             date = page_date.group(0)
-            return page_content, page_title, date
         else:
-            return page_content, page_title
+            date = None
+            
+        return page_content, page_title, date
     
     def get_nav_menu(self):
         response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'ask', 'query': '[[Concept:MainNavigation]]', 'format': 'json', 'formatversion': '2'})

static/assets/styles.css

@@ -88,6 +88,7 @@ a {
     flex-direction: row;
     flex-wrap: wrap;
     gap: 20px;
+    justify-content: space-between;
 }
 
 #content-container {
@@ -97,7 +98,7 @@ a {
     width: 100%;
     padding: 40px;
     padding-top: 20px;
-    gap: 40px;
+    gap: 20px;
     overflow-y: scroll;
     overflow-x: hidden;
 }
@@ -119,12 +120,11 @@ a {
 }
 
 #content-body img{
-    width: 100%;
+    width: 60%;
     height: auto;
-    object-fit: contain;
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
     filter: grayscale(100%) contrast(1.75);
-}
+} 
 
 #wiki-box {
     border-style: dashed;
@@ -228,18 +228,24 @@ p {
 }
 
 .activity-image {
-    width: 60%;
+    width: 100%;
     height: 400px;
     overflow: hidden;
+    position: relative;
 }
 
 .activity-image img {
     width: 100%;
-    height: 100%;
+    height: 500px;
     object-fit: cover;
     object-position: center;
 }
 
+.opportunity-text-padding {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
 /* headers */
 h4 {
     font-size: 24px;
@@ -267,4 +273,105 @@ h1 {
 
 hr {
     border-top: 1px solid black; 
+}
+
+/* breakpoints */
+
+@media only screen and (max-width: 1440px) {
+    .ascii {
+        font-size: 9px;
+    }
+
+    #content-body img{
+        width: 80%;
+    }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (max-width: 1200px) {
+    .ascii {
+        font-size: 7px;
+    }
+}
+
+/* Tablets, iPads (portrait phones, less than 1024px) */
+@media only screen and (max-width: 1024px) {
+    .ascii {
+        font-size: 6px;
+    }
+
+    .astr-line {
+        font-size: 36px;
+    }
+
+    #index-content {
+        padding-left: 25px;
+        padding-right: 25px;
+    }
+
+    #index-links {
+        padding-left: 25px;
+        padding-right: 25px;
+    }
+
+    #index-link-list {
+        justify-content: center;
+    }
+
+    .list-container {
+        width: 100%;
+    }
+
+    .button-link {
+        width: -webkit-fill-available;
+    }
+
+    p {
+        font-size: 18px;
+    }
+
+    .title {
+        font-size: 50px;
+    }
+
+    h1 {
+        font-size: 28px;
+    }
+
+}
+
+/* Mobile devices (portrait phones, less than 768px) */
+@media only screen and (max-width: 768px) {
+    .ascii {
+        font-size: 7px;
+    }
+
+    #main-container {
+        flex-direction: column;
+    }
+
+    #index-header {
+        flex-direction: row;
+    }
+
+    #line-divider {
+        display: none;
+    }
+
+    #content-container {
+        width: auto;
+    }
+
+    #index-links {
+        display: none;
+    }
+
+    #index-content {
+        display: none;
+    }
+
+    #index-container {
+        flex: 0 0 20%;
+        padding-bottom: 0px;
+    }
 }

templates/_base.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/static/assets/styles.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
+    <link rel="icon" href="/static/assets/images/favicon.ico" type="image/x-icon">
 </head>
 <body>
     {% block content %}

templates/_list.html

@@ -1,6 +1,6 @@
 <div id="content-container" class="disable-scrollbar">
     <div id="content-title" class="title">{{ title | safe }}</div>
-    <p>This is our activities!</p>
+    <p>Announcements, Events, and Other CONCEPT NULL related activities ╰(*°▽°*)╯</p>
     <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
     <div id="content-body">
         <div id="activity-list">

templates/_nav.html

@@ -16,17 +16,16 @@ MM.         MM.      ,MP M   `MM.M MM.           MM   Y  ,   MM            MM
   M   `MM.M    MM       M    MM      ,   MM      , 
   M     YMM    YM.     ,M    MM     ,M   MM     ,M 
 .JML.    YM     `bmmmmd"'  .JMMmmmmMMM .JMMmmmmMMM </div> 
-        <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
     </div></a>
+    <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
     <div id="index-content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat dignissim justo, posuere imperdiet justo condimentum at.</p>
-                      
+        <p>A grassroot organisation of artists, creative technologist, designers, and educators focused on supporting a vibrant new media arts community in Ireland -- through our events, newsletter, and other activities.</p>         
     </div>
     <div id="index-links">
         <div id="index-link-list">
-            <div><a href="#" class="button-link">e-mail &#8595;</a></div>
-            <div><a href="/activities" class="button-link">activities &#8595;</a></div>
-            <div><a href="#" class="button-link">newsletter &#8595;</a></div>
+            <div class="list-container"><a href="/activities" class="button-link">activities &#8595;</a></div>
+            <div class="list-container"><a href="https://conceptnull.substack.com/subscribe" target="_blank" class="button-link">newsletter &#8595;</a></div>
+            <div class="list-container"><a href="#" class="button-link">instagram &#8595;</a></div>
         </div>
     </div>
 </div>

templates/_newsletter.html

@@ -0,0 +1,99 @@
+<div id="content-container" class="disable-scrollbar">
+    <div id="content-title" class="title">{{ title | safe }}</div>
+    <div id="content-body">
+        {{ cont | safe }}
+
+        <div class='event-cont'>
+            {% if spotlight %}
+                {% for key, value in events.items() %}
+                    <hr>
+                    <h2 class="opportunity-text-padding">🔦 Spotlight</h2>
+                    <hr>
+                    <div>
+                    <p>&#8203;</p>
+                    {% for data in value %}
+                        {% if data.spotlight %}
+                        <div>
+                            <a href='/{{ data.pagetitle }}' target="_blank"><h4><b>{{ data.name }}</b></h4></a>
+                            <p><b>Organiser/s: </b>{{ data.org }}</p>
+                            <p><b>Location: </b>{{ data.location }}</p>
+                            <p><b>Date: </b>{{ data.deadline }} &#8594; {{ data.endDate}}</p>
+                            <p class="opportunity-text-padding">{{ data.text }}</p>
+                            <a href={{ data.source }} target='_blank'><p><b>Source ↗</b></p></a>
+                        </div>
+                        <p>&#8203;</p>
+                        {% endif %}
+                    {% endfor %}
+                    </div>
+                {% endfor %}
+            {% endif %}
+    
+            {% for key, value in events.items() %}
+                <hr>
+                <h2 class="opportunity-text-padding">🎪 Events</h2>
+                <hr>
+                <div>
+                <p>&#8203;</p>
+                {% for data in value %}
+                    {% if not data.spotlight %}
+                        <div>
+                            <a href='/{{ data.pagetitle }}' target="_blank"><h4><b>{{ data.name }}</b></h4></a>
+                            <p><b>Organiser/s: </b>{{ data.org }}</p>
+                            <p><b>Location: </b>{{ data.location }}</p>
+                            <p><b>Date: </b>{{ data.deadline }} &#8594; {{ data.endDate}}</p>
+                            <p class="opportunity-text-padding">{{ data.text }}</p>
+                            <a href={{ data.source }} target='_blank'><p><b>Source ↗</b></p></a>
+                        </div>
+                        <p>&#8203;</p>
+                    {%endif%}
+                {% endfor %}
+                </div>
+            {% endfor %}
+        </div>
+    
+        <div>
+            {% for key, value in opportunities.items() %}
+                <hr>
+                <h2 class="opportunity-text-padding">{{ key }}</h2>
+                <hr>
+                <div>
+                <p>&#8203;</p>
+                {% for data in value %}
+                <div class='opp'>
+                    <a href='/{{ data.pagetitle }}' target="_blank"><h4><b>{{ data.name }}</b></h4></a>
+                    <p><b>Deadline:</b> {{ data.deadline }}</p>
+                    <p><b>Organiser/s: </b>{{ data.org }}</p>
+                    <p><b>Location: </b>{{ data.location }}</p>
+                    <p class="opportunity-text-padding">{{ data.text }}</p>
+                    <a href={{ data.source }} target='_blank'><p><b>Source ↗</b></p></a>
+                    <p>&#8203;</p>
+                </div>
+                
+                {% endfor %}
+                </div>
+            {% endfor %}
+            <hr>
+        </div>
+    
+        <div class='article-cont'>
+            <p>That’s it for now! The newsletter gets sent out 1st and 15th of every month and we post open calls and events as they come in on our <a href='https://www.instagram.com/conceptnull/' target='_blank'>Instagram</a> so be sure to follow us there.</p>
+            <p>&#8203;</p>
+            <p>Again, thank you for all of your support as we continue to grow our project with the help of a great community and, as we always say, we would love to hear your thoughts, projects, events or other open opportunities so drop us an email.</p>
+            <p>&#8203;</p>
+            <p>Chat soon, <a href='https://conceptnull.org/' target='_blank'>Concept NULL</a></p>      
+            <p>&#8203;</p>
+            <p>[[email protected]]</p>
+        </div>
+
+    </div>
+
+    <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
+    
+    <div id="content-metadata">
+        {%if table != None %}
+        <div id="wiki-box">
+            {{ table | safe }}
+        </div>
+        {%endif%}
+    </div>
+</div>

templates/data.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>CONCEPT NULL</title>
+
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/data-styles.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
+    <script src="{{ url_for('static', filename='assets/data/libraries/p5.sound.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='assets/data/libraries/quicksettings.js') }}"></script>
+    <script src="{{ url_for('static', filename='assets/data/libraries/p5.gui.js') }}"></script>
+    <script src="{{ url_for('static', filename='assets/data/libraries/p5.patgrad.js') }}"></script>
+	<script src="{{ url_for('static', filename='assets/js/gradient.js') }}"></script>
+	<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/images/favicon.png') }}">
+  </head>
+
+  <body onload="showAboutOnPageLoad()">
+    <div class="divider">
+      <div id="sketch" class="sketch"></div>
+	  <div id="text-view-button">
+		<div id="tv-button">
+			<img src = "{{ url_for('static', filename='assets/data/assets/okay.svg') }}" alt="text-view"/>
+		</div>
+	  </div>
+      <div class="break"></div>
+      <div class="text" id="text-view">
+        <div class="text-group">
+          <div class="text-header">
+			<div class="tool1">
+				<div class="t1-box">
+					<div class="t1-1" id="arrow-p">➜</div>
+					<div class="t1-1" id="percent">60%</div>
+				</div>
+			</div>
+            <div class="title">
+			  <p class="title2">THE BIG</p>
+              <p class="title2">D.A.T.A</p>
+			  <p class="title1" id="switch-to-network">INTERVIEW</p>
+            </div>
+			<div class="tool2">
+				<div class="t2-box">
+					<div class="t2-1" id="about-interview">💁</div>
+					<div class="t2-1" id="data-link"><a href="https://www.data.ie/datasite/" target="_blank">🔗</a></div>
+				</div>
+			</div>
+          </div>
+          <div id="text-body">
+            
+          </div>
+          
+        </div>
+        <div class="text-footer">
+        </div>
+		<div class="network-button" id="network-button">
+			<img src = "{{ url_for('static', filename='assets/data/assets/okay.svg') }}" alt="text-view"/>
+		</div>
+		<div class="mobile-about-button" id="mobile-about-button">
+			<img id="mobile-btn" src = "{{ url_for('static', filename='assets/data/assets/info.svg') }}" alt="text-view"/>
+		</div>
+		<div class="mobile-percent">
+			<div class="t1-am" id="percent-mobile"></div>
+		</div>
+		<div class="mobile-arrow">
+			<div class="t1-am" id="arrow-mobile">➜</div>
+		</div>
+        
+      </div>
+	  <div class="about-pop-up" id="about-section">
+		<div class="about-header">
+			About
+		</div>
+		<div class="about-body">
+			<p>At the start of the summer, we had the pleasure of chatting with Paul, Tom and Aisling who are current facilitators of the Dublin Art & Technology Association. D.A.T.A has created a platform for artists, makers and thinkers to share knowledge about digital cultures and practices in Ireland since its genesis in 2002.</p>
+			<p>In our conversation, we had the opportunity to touch on topics such as D.A.T.A's identity, how it has evolved over the years, and a deeper look into their approach behind the process of curating & organising events.</p>
+			<p>We hope you enjoy the deeply insightful conversation with D.A.T.A, while having some fun navigating its latent space!</p>
+			<p class="tech-about">The website has been designed to visualise the interview in a linear and non-linear format. The interview was processed through a machine/natural language processing algorithm, which ranked each segment of text against various topics that surfaced during the interview.</p>
+			<p class="tech-about">As a result, the algorithm created a high-dimensional version of the interview, which is commonly referred to as the latent space. Once created, the machine's multidimensional understanding of the text was flattened using a t-SNE algorithm, producing the 2D mapping of the interview.</p>
+		</div>
+		<div class="about-footer">
+		</div>
+	  </div>
+    </div>
+	
+    <script src="{{ url_for('static', filename='assets/js/sketch.js') }}"></script>
+	
+    
+  </body>
+</html>

templates/newsletter.html

@@ -0,0 +1,13 @@
+{% extends "_base.html" %}
+
+{% block title %}CONCEPT NULL{% endblock %}
+
+{% block content %}
+
+<div id="main-container">
+    {% include "_nav.html" %}
+    <div id="line-divider"></div>
+    {% include "_newsletter.html" %}
+</div>
+
+{% endblock %}