activity list added

app.py

@@ -15,7 +15,8 @@ class WikiApp(Flask):
                 
         # Define routes
         # self.route('/', methods=['GET'])(self.homepage)
-        self.route('/', methods=['GET'])(self.homepage_new)
+        self.route('/', methods=['GET'])(self.home)
+        self.route('/activities', methods=['GET'])(self.activities)
         self.route('/data', methods=['GET'])(self.data_int)
         self.route('/newsletter/<string:title>', methods=['GET'])(self.generate_newsletter)
         self.route('/publications', methods=['GET'])(self.fetch_publications)
@@ -23,6 +24,36 @@ class WikiApp(Flask):
         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):    
+        pages = ['Homepage']
+        homepage_content = ''
+        for page in pages:
+            # Make a request to MediaWiki API to get content of a specific page
+            response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'parse', 'page': page, 'format': 'json'})
+            data = response.json()
+            # Extract page title and content
+            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)
+    
+    def activities(self):
+        # fetch publications as test
+        activity_list = self.get_activities()
+        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)
+        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
        
     def data_int(self):
         return render_template('data.html')
@@ -298,8 +329,10 @@ 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)
-        return render_template('article.html', nav_elements=self.get_nav_menu(), title=page_title, content=page_content)
+        print(table)
+        return render_template('index.html', title=page_title, cont=page_content, table=table)
+        
     
     def fetch_page(self, title):
         # Make a request to MediaWiki API to get content of a specific page
@@ -348,7 +381,7 @@ class WikiApp(Flask):
         for link in links:
             # Add _blank to href
             link['target'] = '_blank'
-            link.string = link.string.strip() + " ↗"
+            link.string = link.string.strip()
             
         # Find all a tags with href containing 'index.php'
         links = soup.find_all('a', href=lambda href: href and 'index.php' in href)
@@ -372,23 +405,51 @@ class WikiApp(Flask):
             file_link.unwrap()
             
         soup = self.remove_thumbnail_img(soup)
-        # Locate the table and the comment
+        
+        # Locate the table and store it in an object
         table = soup.find('table')
+        
         # Remove inline styles by deleting the 'style' attribute
         if table and 'style' in table.attrs:
             del table['style']
         
-        # Add the class 'table-cont' to the table
+        # Add the class 'table-cont' to the table (if not already removed)
         if table:
             table['class'] = table.get('class', []) + ['table-cont']
+            
         comments = soup.find_all(string=lambda text: isinstance(text, Comment))
         comment = comments[-1] if comments else None
         
         # Insert the table before the comment
         if comment and table is not None:
             comment.insert_before(table.extract())
-    
+            
-        return soup.prettify()
+        table_html = str(table) if table else None  # Store the table HTML
+        
+        has_content = False
+        # Check if the table has meaningful rows
+        if table:
+            rows = table.find_all('tr')
+            has_content = False  # Assume no meaningful content
+
+            for row in rows:
+                cells = row.find_all(['td', 'th'])
+                # Check if any cell has non-empty text
+                if any(cell.get_text(strip=True) for cell in cells):
+                    has_content = True
+                    break
+                
+        if has_content is False:
+            table_html = None
+            
+        
+        # Remove the table from the main HTML
+        if table:
+            table.decompose()
+
+
+        # Return the modified HTML
+        return soup.prettify(), table_html
     
     def remove_thumbnail_img(self, soup):
         thumbnail = soup.find_all(attrs={"typeof": "mw:File/Thumb"})

static/assets/styles.css

@@ -1,671 +1,270 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+html {
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+    height: 100%;
-
+    width: 100%;
-/* styles.css */
-body {
-    font-family: "Source Sans 3", sans-serif;
-	background-color: white;
-	color: black;
-	margin: auto;
-	padding: 0px;
-	font-family: "Space Mono", monospace;
-	overflow: hidden;
-	height: 100vh;
-}
-
-.table-cont {
-	overflow-wrap: anywhere;
-}
-
-.main-cont {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	height: 100%;
 }
 
-.header-title {
+/* Reset some default styles */
-	font-size: 40px;
+body, h1, h2, h3, p, ul, li, a {
-	display: flex;
+    margin: 0;
-	background-color: white;
+    padding: 0;
-	width: fit-content;
+    box-sizing: border-box;
-	height: 100px;
-	padding-left: 40px;
-	padding-right: 40px;
-	align-items: center;
 }
 
-.header-logo {
+/* General body styling */
-	height: 100px;
+body {
-	max-width: 500px;
+    font-family: "Inter", serif;
-	padding-left: 40px;
+    font-optical-sizing: auto;
-	padding-right: 40px;
+    font-style: normal;
-	align-self: center;
+    line-height: 1.6;
-}
+    color: #333;
-
+    background-color: #f9f9f9;
-.header-logo img{
+    padding: 0px;
-	height: 100%;
+    height: 100vh;
-	width: 100%;
+    width: 100vw;
-}
+    overflow: hidden;
-
-.header-title a {
-	text-decoration: none;
-	color: black;
-}
-
-.header-summary {
-	font-size: 15px;
-	font-style: italic;
-	padding-left: 20px;
-}
-
-.nav-cont {
-	display: flex;
-	flex-direction: row;
-	width: 100%;
-	height: 100px;
-	gap: 0px;
-	/* margin-bottom: 10px; */
-	/* position: fixed; */
-	z-index: 100;
-}
-
-.nav-element-cont {
-	display: flex;
-	flex-direction: row;
-	gap: 20px;
-	text-transform: lowercase;
-	font-size: 25px;
-	width: 100%;
-	background-color: black;
-	height: 100px;
-	padding-left: 20px;
-	align-items: center;
-}
-
-.nav-element-cont a{
-	text-decoration: none;
-	color: white;
-}
-
-.nav-element {
-	display: flex;
-	flex-direction: row;
-	gap: 20px;
-}
-
-.line {
-	background-color: black;
-	width: 100%;
-	height: 1px;
-	padding: 0;
-	margin: 0;
-	margin-bottom: 20px;
-}
-
-.spinning-star {
-            transform-origin: center; /* Set the transform origin to the center */
-            animation: spin 5s linear infinite; /* Apply the spin animation */
-			color: red;
-}
-
-.content {
-	width: 100%;
-	display: flex;
-	height: calc(100% - 100px);
-	/* position: fixed; */
-}
-
-.content-cont {
-	overflow: scroll;
-	overflow-x: hidden;
-	height: calc(100vh - 100px);
-	margin-left: 40px;
-	width: 100%;
-	/* margin-top: 100px; */
-	/* margin-top: 100px; */
-	/* margin-bottom: 100px; */
-	/* margin-right: 40px; */
-}
-
-.article-cont {
-	width: 60%;
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	margin-bottom: 20px;
-}
-
-.article-cont big{
-	font-family: 'Space Mono', monospace;
-}
-
-.article-cont p {
-	font-family: "Source Sans 3", sans-serif;
-	font-size: 20px;
-	line-height: 30px;
-	margin-top: 0;
-}
-
-.content-cont h1{
-	font-size: 60px;
-	text-decoration: underline;
-	margin-bottom: 5px;
-}
-
-.content-cont h2{
-	font-size: 30px;
-	text-decoration: none;
-}
-
-.content-cont h3{
-	font-size: 25px;
-	text-decoration: none	;
-}
-
-.content-cont h4{
-	font-size: 20px;
-	
-}
-
-/* .content-cont p {
-	font-size: 17.5px;
-	line-height: 30px;
-} */
-
-.content-cont .article-cont a {
-	color: red;
-	text-decoration: none;
-	font-family: 'Space Mono', monospace;
-	font-size: 17.5px;
-}
-
-.content-cont .opp-cont p a {
-	color: red;
-	text-decoration: none;
 }
 
-.content-cont .event-cont p a {
+* {
-	color: red;
+    margin:0;
-	text-decoration: none;
+    padding:0;
+    border:0;
+    font-family: "Inter", serif;
+    -webkit-text-size-adjust:none;
 }
 
-.content-cont ul {
+a {
-	font-size: 20px;
+    text-decoration: none;
-	border-style: none;
+    color:black;
 }
 
-.content-cont li a{
+#main-container {
-	border-style: none;
+    height: 100%;
-	line-height: 40px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
 }
 
-.content-cont img{
+/* index */
-	height: 100%;
+#index-container {
-	width: auto;
+    display: flex;
-	max-width: 900px;
+    flex: 0 0 35%;
-	border: black;
+    flex-direction: column;
-    border-style: dashed;
+    width: 100%;
-	transition: transform 0.3s ease-in-out;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    gap: 40px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    align-items: center;   
 }
 
-.content-cont img:hover {
+#index-container::-webkit-scrollbar {
-	animation: rotate 1s steps(2) forwards infinite;
+    display: none;
 }
 
-
+#index-header {
-/* .content-cont::-webkit-scrollbar {
+    padding-left: 60px;
-	display: none;
+    padding-right: 60px;
-} */
+    display: flex;
-
+    justify-content: center;
-.content-header {
+    flex-direction: column;
-	/* padding-top: 160px; */
+    align-items: center;
+    gap: 20px;
 }
 
-.section-cont {
+#index-content {
-	width: 100vw;
+    padding-left: 60px;
-	height: calc(100vh - 100px);
+    padding-right: 60px;
-	display: flex;
+    text-align: justify;
-	flex-direction: row;
-	justify-content: space-around;
 }
 
-.collection-cont {
+#index-links {
-	width: 100% ;
+    padding-left: 60px;
-	height: 100vh;
+    padding-right: 60px;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-evenly;
-	align-content: baseline;
-	flex-wrap: wrap;
-	gap:60px;
 }
 
-.collection-title {
+#index-link-list {
-	border: 2px;
+    display: flex;
-	border-radius: 20px;
+    flex-direction: row;
-	border-style: solid;
+    flex-wrap: wrap;
-	border-color: black;
+    gap: 20px;
-	padding: 10px;
 }
 
-.collection-element {
+#content-container {
-	display: flex;
+    display: flex;
-	flex-direction: column;
+    flex-direction: column;
-	align-items: center;
+    flex-grow: 1;
-	row-gap: 20px;
+    width: 100%;
+    padding: 40px;
+    padding-top: 20px;
+    gap: 40px;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 
-.collection-header{
+#content-container a{
-	font-size: 20px;
+    text-decoration: underline;
-	margin-top: 40px;
+    color:blue;
 }
 
-.content-cont .collection-cont a {
+#content-title {
-	text-decoration: underline;
+    text-decoration: underline;
-    color: black;
 }
 
-.collection-cont .section-img{
+#content-body {
-	width: 100%;
+    display: flex;
-	padding-left: 0px;
+    flex-direction: column;
-	margin-bottom: 0px;
+    gap: 20px;
+    text-align: justify;
 }
 
-.collection-cont .section-img img{
+#content-body img{
-	width: 100%;
+    width: 100%;
     height: auto;
-    max-width: 200px;
     object-fit: contain;
-    border-radius: 0px;
+    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
-    border: black;
+    filter: grayscale(100%) contrast(1.75);
-    border-style: dashed;
-    transition: transform 0.3s ease-in-out;
-}
-
-
-.section {
-	width: calc(100% / 3); /* Each div takes up one-third of the container */
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	height: 100%;
-	z-index: 50;
-	overflow: scroll;
-	-ms-overflow-style: none;  /* IE and Edge */
-  	scrollbar-width: none;  /* Firefox */
-}
-
-
-.section-group {
-	
 }
 
-.section-object {
+#wiki-box {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-
-.section-element {
-	text-transform: uppercase;
-	font-size: 20px;
-	
-}
-
-.section-element a {
-	text-decoration: underline;
-	color: red;
-}
-
-.section-img img{
-	width: 100%;
-	height: 400px;
-	object-fit: cover;
-	border-radius: 0px;
-    border: black;
     border-style: dashed;
-	transition: transform 0.3s ease-in-out;
 }
 
-.section-img:hover img {
-    animation: rotate 1s steps(2) forwards infinite;
-  }
 
-.section-img {
+#line-divider {
-	width: 75%;
+    width: 2px; /* Thickness of the divider */
-	padding-left: 0px;
+    background-color: black; /* Color of the line */
-	padding-top: 10px;
 }
 
-.section-date {
+#activity-list {
-	padding-left: 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
 }
 
-.section-title {
+/*
-	display: flex;
+    table
-	margin-bottom: 40px;
+*/
-	padding-top: 80px;
-	align-items: center;
-}
 
-.section-header{
+table {
-	text-decoration: none;
+    display: table;
+    border-collapse: separate;
+    box-sizing: border-box;
+    text-indent: initial;
+    unicode-bidi: isolate;
+    border-spacing: 20px;
+    border-color: gray;
+    border-radius: 30px;
+    font-size: 20px;
+    text-align: left;
 }
 
-.footer {
+th {
-	position: absolute;
+    text-transform: uppercase;
-	right: 0px;
-	display: none;
-	top: 25px;
-	z-index: 500;
 }
 
-.foot {
+/*
-	height: 200px;
+    classes
-	width: auto;
+*/
-}
 
-/* Newsletter Styling*/
+.title {
-.event-cont {
+    font-size: 60px;
-	width: 60%;
+    font-weight: bold;
-	font-size: 17.5px;
+    text-transform: uppercase;
 }
 
-.event {
+p {
-	margin-bottom: 10px;
+    font-size: 20px;
-	display: block;
+    font-weight: normal;
 }
 
-.opp {
+.button-link {
-	margin-bottom: 10px;
+    display: inline-block;
-	display: block;
+    padding: 15px 30px;
+    background-color: #D9D9D9; /* Green background */
+    color: black;
+    text-decoration: none;
+    border-radius: 30px;
+    font-size: 20px;
+    font-weight: normal;
+    text-align: center;
+    text-transform: lowercase;
 }
 
-.list-events {
+.disable-scrollbar{
-	display: flex;
+    -ms-overflow-style: none;  /* IE and Edge */
-	flex-direction: column;
+    scrollbar-width: none;  /* Firefox */
-	gap: 10px;
 }
 
-.list-opp {
+.astr-line {
-	display: flex;
+    text-align: center;
-	flex-direction: column;
+    font-size: 48px;
-	gap: 10px;
 }
 
-.opp-cont{
+.mw-parser-output {
-	width: 60%;
+    display: flex;
-	font-size: 17.5px;
+    flex-direction: column;
-	margin-bottom: 25px;
+    gap: 20px;
 }
 
-.opp a {
+.ascii {
-	color: black;
+    font-family: 'Courier New', Courier, monospace;
-	text-decoration: none;
+    white-space: pre;
+    width: fit-content;
+    font-size: 12px;
+    font-weight: bold;
 }
 
-.opp-link {
+.activity {
-	color: red;
+    color: black;
-	text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    gap:20px;
 }
 
-.event a {
+.activity-title {
-	color: black;
+    text-decoration: underline;
-	text-decoration: none;
+    font-weight: bold;
 }
 
-.event-link {
+.activity-image {
-	color: red;
+    width: 60%;
-	text-decoration: none;
+    height: 400px;
+    overflow: hidden;
 }
 
-.event-text {
+.activity-image img {
-	font-family: "Source Sans 3", sans-serif;
+    width: 100%;
-	font-size: 20px;
+    height: 100%;
-	line-height: 30px;
+    object-fit: cover;
+    object-position: center;
 }
 
-.opp-text {
+/* headers */
-	font-family: "Source Sans 3", sans-serif;
+h4 {
-	font-size: 20px;
+    font-size: 24px;
-	line-height: 30px;
+    margin: 0;
+    color: black;
 }
 
-.pub-section {
+h3 {
-	display: flex;
+    font-size: 26px;
-	gap: 20px;
+    margin: 0;
-	flex-direction: column;
+    color: black;
-	width: 60%;
 }
 
-.pub-section-cont {
+h2 {
-	display: flex;
+    font-size: 28px;
-	flex-direction: column;
+    margin: 0;
-	padding: 40px;
+    color: black;
-	padding-top: 0px;
-	gap: 20px;
-	overflow-y: scroll;
-	width: 100%;
 }
 
-.pub-section-cont p{
+h1 {
-	font-family: "Source Sans 3", sans-serif;
+    font-size: 30px;
-    font-size: 20px;
+    margin: 0;
-    line-height: 30px;
+    color: black;
-    margin-top: 0;
 }
 
-.pub-section-cont h1 {
+hr {
-	font-size: 60px;
+    border-top: 1px solid black; 
-    text-decoration: underline;
-    margin-bottom: 5px;
-}
-
-#subscribe-button {
-	position: absolute;
-	bottom: 50px;
-	right:50px;
-	font-size: 40px;
-	text-transform: uppercase;
-	border: 1px solid red;
-	padding: 20px;
-	border-radius: 30px;
-	cursor: pointer;
-	background-color: black;
-	color: white;
-}
-
-.link-blank {
-	text-decoration: none;
-	color: black;
-}
-/* hr {
-	border: 0;
-	border-top: thin solid #243588;
-  	clear:both;
-  	display:block;
-  	width: 100%;               
-  	background-color:#000000;
-  	height: 1px;
-} */
-
-
-
-
-
-
-/* Keyframes for the spin animation */
-@keyframes spin {
-	0% { transform: rotate(0deg); } /* Initial rotation */
-	100% { transform: rotate(360deg); } /* Final rotation */
-}
-
-@keyframes rotate {
-    0% {
-      transform: rotate(0deg) scaleX(100%);
-    }
-    25% {
-      transform: rotate(2deg) scaleX(95%);
-    }
-	50% {
-		transform: rotate(0deg) scaleX(100%);
-	}
-	75% {
-		transform: rotate(-2deg) scaleX(95%);
-	}
-    100% {
-       transform: rotate(0deg) scaleX(100%);
-    }
-  }
-
-  /* Mobile */
-  @media screen and (max-width: 1024px){
-	.section-img img{
-		height: 200px;
-	}
-
-	.pub-section-cont {
-		padding: 0;
-		padding-right: 10px;
-		padding-bottom: 20px;
-		margin-left: 20px;
-	}
-
-	.pub-section-cont p {
-		font-size: 15px;
-	}
-
-	.pub-section-cont h1 {
-		font-size: 40px;
-	}
-
-	.pub-section {
-		width: 100%;
-	}
-
-	.content-cont .article-cont a {
-		font-size: 14px;
-	}
-
-	#subscribe-button {
-		font-size: 20px;
-		bottom: 10px;
-		right: 10px;
-		padding: 10px;
-		background-color: black;
-		color: white;
-	}
-
-    .nav-cont {
-		flex-direction: column;
-	}
-
-	.nav-element-cont {
-		overflow-x: scroll;
-		overflow-y: hidden;
-		width: auto;
-        padding-left: 20px;
-	}
-
-	.nav-element-cont::-webkit-scrollbar {
-		display: none;
-		
-	}
-
-	.header-title {
-		width: 100%;
-		justify-content: center;
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-	.section-cont {
-		flex-direction: column;
-		height: auto;
-	}
-
-	.section {
-		width: 100%;
-		overflow-x: scroll;
-		/* height: calc(50vh - 50px); */
-	}
-
-	.section-title {
-		padding-top: 40px;
-	}
-
-	.section-group {
-		padding-bottom: 0px;
-		display: flex;
-		flex-direction: row;
-	}
-
-	.section-object {
-		padding-bottom: 0px;
-	}
-
-	.article-cont {
-		width: 100%;
-	}
-
-	.content-cont {
-		padding-right: 40px;
-	}
-
-	.event-cont {
-		width: 100%;
-		font-size: 15px;
-	}
-
-	.opp-cont {
-		width: 100%;
-		font-size: 15px;
-	}
-
-	.content-cont img {
-		height: auto;
-		width: 95%;
-	}
-
-	.content-cont h1 {
-		font-size: 40px;
-	}
-
-	.content-cont h2 {
-		font-size: 20px;
-	}
-
-	.article-cont p {
-		font-size: 15px;
-	}
-
-	.main-cont {
-		height: 100vh;
-	}
-
-	.content {
-		height: 100vh;
-    	overflow-y: scroll;
-		overflow-x: hidden;
-	}
-
-	.content-cont h4 {
-		font-size: 17.5px;
-	}
-
-	.opp-text {
-		font-size: 15px;
-	}
-
-	.header-logo {
-		display: flex;
-	}
-
-	@media screen and (max-width: 640px){
-		.content-cont {
-			padding-right: 10px;
-			margin-left: 20px;
-		}
-	}
 }

templates/_activities.html

@@ -0,0 +1,5 @@
+<div id="main-container">
+    {% include "_nav.html" %}
+    <div id="line-divider"></div>
+    {% include "_list.html" %}
+</div>

templates/_article.html

@@ -0,0 +1,14 @@
+<div id="content-container" class="disable-scrollbar">
+    <div id="content-title" class="title">{{ title | safe }}</div>
+    <div id="content-body">
+        {{ cont | safe }}
+    </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/_base.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}CONCEPT NULL{% endblock %}</title>
+    <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">
+</head>
+<body>
+    {% block content %}
+    {% endblock %}
+</body>
+</html>

templates/_list.html

@@ -0,0 +1,25 @@
+<div id="content-container" class="disable-scrollbar">
+    <div id="content-title" class="title">{{ title | safe }}</div>
+    <p>This is our activities!</p>
+    <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
+    <div id="content-body">
+        <div id="activity-list">
+        {% for key, value in activities.items() %}
+            <a href="/{{key}}">
+                <div class="activity">
+                    <h1 class="activity-title"> {{ key }} ({{ value.date }})</h1>
+                    <div class="activity-image"><img src="{{ value.source }}"></div>
+                </div>
+            </a>
+        {% endfor %}
+        </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/_main.html

@@ -0,0 +1,5 @@
+<div id="main-container">
+{% include "_nav.html" %}
+<div id="line-divider"></div>
+{% include "_article.html" %}
+</div>

templates/_nav.html

@@ -0,0 +1,32 @@
+<div id="index-container" class="disable-scrollbar">
+    <a href="/"><div id="index-header">
+        <div class="ascii">  
+  .g8"""bgd   .g8""8q. `7MN.   `7MF' .g8"""bgd `7MM"""YMM  `7MM"""Mq. MMP""MM""YMM 
+.dP'     `M .dP'    `YM. MMN.    M .dP'     `M   MM    `7    MM   `MM.P'   MM   `7 
+dM'       ` dM'      `MM M YMb   M dM'       `   MM   d      MM   ,M9      MM      
+MM          MM        MM M  `MN. M MM            MMmmMM      MMmmdM9       MM      
+MM.         MM.      ,MP M   `MM.M MM.           MM   Y  ,   MM            MM      
+`Mb.     ,' `Mb.    ,dP' M     YMM `Mb.     ,'   MM     ,M   MM            MM      
+  `"bmmmd'    `"bmmd"' .JML.    YM   `"bmmmd'  .JMMmmmmMMM .JMML.        .JMML.  </div>       
+<div class="ascii">  
+`7MN.   `7MF'`7MMF'   `7MF'`7MMF'      `7MMF'      
+  MMN.    M    MM       M    MM          MM        
+  M YMb   M    MM       M    MM          MM        
+  M  `MN. M    MM       M    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 id="index-content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat dignissim justo, posuere imperdiet justo condimentum at.</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>
+    </div>
+</div>

templates/activities.html

@@ -0,0 +1,9 @@
+{% extends "_base.html" %}
+
+{% block title %}CONCEPT NULL{% endblock %}
+
+{% block content %}
+
+{% include "_activities.html" %}
+
+{% endblock %}

templates/article.html

@@ -1,11 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Ø | {{ title }}{% endblock %}
-{% block content %}
-<div class='content-cont'>
-	<h1 class='content-header'>{{ title }}</h1>
-    <div class='article-cont'>
-    	{{ content | safe }}
-	</div>
-</div>
-
-{% endblock %}

templates/base.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}{% endblock %}</title>
-	<link rel="stylesheet" href="{{ url_for('static', filename='assets/styles.css') }}">
-	<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/images/favicon.png') }}">
-<body>
-	<div class='main-cont'>
-		<div class='nav-cont'>
-			<div class='header-logo'>
-				<a href="/"><img src ="{{ url_for('static', filename='assets/images/cn-logo.svg') }}" alt="ConceptNULL"/></a>
-			</div>
-			<div class='nav-element-cont'>
-				{% for key, element in nav_elements.items() %}
-				<div class='nav-element'><a href="{{ url_for('page_content', title=element.title) }}">
-					{% if element.title == 'Concept Null' %}
-						About
-					{% else %}
-						{{ element.title }}
-					{% endif %}
-				</a><div class='spinning-star'>	&#10022;</div></div>
-				{% endfor %}
-			</div>
-			
-		</div>
-		<div class="content">
-		{% block content %}
-		{% endblock %}
-		</div>
-	</div>
-	<a class="link-blank" href="https://conceptnull.substack.com/subscribe" target="_blank"><span id="subscribe-button">Subscribe</span></a>
-</body>
-
-</html>

templates/cn-home.html

@@ -1,10 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Ø | CONCEPTNULL {% endblock %}
-{% block content %}
-<div class='content-cont'>
-	<br></br>	
-    <div class='article-cont'>
-    	{{ content | safe }}
-	</div>
-</div>
-{% endblock %}

templates/collection.html

@@ -1,21 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Ø | {{ title }}{% endblock %}
-{% block content %}
-<div class='content-cont'>
-	<div class='collection-header'>{{ '(' + title + ')'}}</div>
-	<div class='collection-cont'>
-    {% for key, values in collection.items() %}
-		
-		<div class='collection-element'>
-			<a href={{ '/' + key }}><div class='collection-title'> {{ key }} </div></a>
-			<div class='collection-date'> {{ values.date }} </div>
-			<a href={{ '/' + key }}><div class='section-img'><img src={{ values.source}}></div></a>
-		</div>
-		
-	{% endfor %}
-	
-	</div>
-	<div class='foot'></div>
-</div>
-
-{% endblock %}

templates/data.html

@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <title>Ø | D.A.T.A Interview</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/home.html

@@ -1,37 +0,0 @@
-{% extends "base.html" %}
-{% block title %} Ø | Home{% endblock %}
-{% block content %}
-<div class='section-cont'>
-	<div class='section'>
-		<a class='section-header' href='/archive/articles'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 25px; font-style: italic; object-fit: contain; font-family: monospace; color: white; text-shadow: white 0px 5px 5px; text-decoration: none; width: 100%;">articles&nbsp;<img src="https://i-love-everything.com/buttons/img/7.gif" style="max-height: 32px;"></div></div></a>
-		<div class='section-group'>
-		{% for key, values in articles.items() %}
-			<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title}}</a></div>
-			<div class='section-date'>🙿 {{ values.date }}</div>
-			<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
-		{% endfor %}
-		</div>
-	</div>
-	<div class='section'>
-		<a class='section-header' href='/archive/newsletters'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 2.2px; font-size: 25px; font-style: oblique; object-fit: contain; font-family: monospace;  color: white; text-shadow: red 0px 2px 5px; width: 100%;">newsletters<br><img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;"></div></div></a>
-		<div class='section-group'>
-			{% for key, values in newsletters.items() %}
-				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>🙿 {{ values.date }}</div>
-				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source}}"></a></div>
-			{% endfor %}
-			</div>
-	</div>
-	<div class='section'>
-		<a class='section-header' href='/archive/projects'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 25px; font-style: normal; object-fit: contain; font-family: monospace; color: white; border: 0px solid white; width: 100%;">projects<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;"></div></div></a>
-		<div class='section-group'>
-			{% for key, values in projects.items() %}
-				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>🙿 {{ values.date }}</div>
-				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
-			{% endfor %}
-			</div>
-	</div>
-</div>
-
-{% endblock %}

templates/index.html

@@ -0,0 +1,9 @@
+{% extends "_base.html" %}
+
+{% block title %}CONCEPT NULL{% endblock %}
+
+{% block content %}
+
+{% include "_main.html" %}
+
+{% endblock %}

templates/meetups.html

@@ -1,14 +0,0 @@
-{% extends "base.html" %}
-{% block title %} Ø | Meetups {% endblock %}
-{% block content %}
-
-<div class='content-cont'>
-	<h1 class='content-header'>Meetups</h1>
-    <div class='article-cont'>
-    	{{ content | safe }}
-	</div>
-	<div class='foot'></div>
-</div>
-
-
-{% endblock %}

templates/newsletter.html

@@ -1,87 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Ø | {{ title }}{% endblock %}
-{% block content %}
-<div class='content-cont'>
-	<h1 class='content-header'>{{ title }}</h1>
-    <div class='article-cont'>
-    	{{ content | safe }}
-	</div>
-	<p>&#8203;</p>
-	<div class='event-cont'>
-		{% for key, value in events.items() %}
-			<hr>
-			<h2 class='event-heading'>🔦 Spotlight</h2>
-			<hr>
-			<div class='list-events'>
-			{% for data in value %}
-				{% if data.spotlight %}
-				<div class='event'>
-					<a class='link' href='/{{ data.pagetitle }}' target="_blank"><h4 class='event-name'><b>{{ data.name }}</b></h4></a>
-					<p class='event-org'><b>Organiser/s: </b>{{ data.org }}</p>
-					<p class='event-location'><b>Location: </b>{{ data.location }}</p>
-					<p class='event-deadline'><b>Date: </b>{{ data.deadline }} &#8594; {{ data.endDate}}</p>
-					<p class='event-text'>{{ data.text }}</p>
-					<a href={{ data.source }} target='_blank'><p class='event-link'><b>Link ↗</b></p></a>
-				</div>
-				<p>&#8203;</p>
-				{% endif %}
-			{% endfor %}
-			</div>
-		{% endfor %}
-
-		{% for key, value in events.items() %}
-			<hr>
-			<h2 class='event-heading'>🎪 Events</h2>
-			<hr>
-			<div class='list-events'>
-			{% for data in value %}
-				{% if not data.spotlight %}
-					<div class='event'>
-						<a class='link' href='/{{ data.pagetitle }}' target="_blank"><h4 class='event-name'><b>{{ data.name }}</b></h4></a>
-						<p class='event-org'><b>Organiser/s: </b>{{ data.org }}</p>
-						<p class='event-location'><b>Location: </b>{{ data.location }}</p>
-						<p class='event-deadline'><b>Date: </b>{{ data.deadline }} &#8594; {{ data.endDate}}</p>
-						<p class='event-text'>{{ data.text }}</p>
-						<a href={{ data.source }} target='_blank'><p class='event-link'><b>Link ↗</b></p></a>
-					</div>
-					<p>&#8203;</p>
-				{%endif%}
-			{% endfor %}
-			</div>
-		{% endfor %}
-	</div>
-
-	<div class='opp-cont'>
-		{% for key, value in opportunities.items() %}
-			<hr>
-			<h2 class='opp-type-heading'>{{ key }}</h2>
-			<hr>
-			<div class='list-opp'>
-			{% for data in value %}
-			<div class='opp'>
-				<a class='link' href='/{{ data.pagetitle }}' target="_blank"><h4 class='opp-name'><b>{{ data.name }}</b></h4></a>
-				<p class='opp-deadline'><b>Deadline:</b> {{ data.deadline }}</p>
-				<p class='opp-location'><i>{{ data.location }}</i></p>
-				<p class='opp-text'>{{ data.text }}</p>
-				<a href={{ data.source }} target='_blank'><p class='opp-link'><b>Link ↗</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>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>Chat soon, <a href='https://conceptnull.org/' target='_blank'>Concept NULL</a></p>
-			
-		<p>[[email protected]]</p>
-	</div>
-</div>
-
-{% endblock %}

templates/publications-old.html

@@ -1,31 +0,0 @@
-{% extends "base.html" %}
-{% block title %} Ø | Publications{% endblock %}
-{% block content %}
-<div class='section-cont'>
-	<div class='section'>
-		<a class='section-header' href='/archive/newsletters'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 2.2px; font-size: 25px; font-style: normal; object-fit: contain; font-family: monospace;  color: black; width: 100%;">NEWSLETTERS<br><!--<img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;">--></div></div></a>
-		<div class='section-group'>
-			{% for key, values in newsletters.items() %}
-				<div class='section-object'>
-					<div class='section-element'><a href="/newsletter{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-					<div class='section-date'>{{ values.date }}</div>
-					<div class='section-img'><a href="/newsletter{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source}}"></a></div>
-				</div>
-			{% endfor %}
-			</div>
-	</div>
-	<div class='section'>
-		<a class='section-header' href='/archive/projects'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 25px; font-style: normal; object-fit: contain; font-family: monospace; color: black; border: 0px solid black; width: 100%;">PROJECTS<!--<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;">--></div></div></a>
-		<div class='section-group'>
-			{% for key, values in projects.items() %}
-			<div class='section-object'>
-				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>{{ values.date }}</div>
-				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
-			</div>
-			{% endfor %}
-			</div>
-	</div>
-</div>
-
-{% endblock %}

templates/publications.html

@@ -1,29 +0,0 @@
-{% extends "base.html" %}
-{% block title %} Ø | Publications{% endblock %}
-{% block content %}
-<div class='pub-section-cont'>
-	<div class='pub-section'>
-		<h1>Newsletter</h1>
-		<p>Currently, we run a bi-weekly newsletter that aims to highlight different types of events and opportunities centered around new media and digital culture in Ireland.</p>
-		<p>The newsletter is released on the <b>1st</b> and <b>15th</b> of every month through Substack - You can subcribe through Substack by clicking the **SUBSCRIBE** button, and receive it directly into your inbox~</p>
-		<p>If you wish to sumbit any opportunities, events, residences (...) that would be a good fit for the newsletter -- please feel free to reach out to us by emailing us at <i>[email protected]</i></p>
-		<p>***</p>
-		<p><i>The future plan we have for the platform is that users will have the ability to add their own entries into the upcoming newsletter through the Concept NULL wiki - acting as more of a decentralised noticeboard than just a newsletter. As for now, you can view our <a href="/newsletter{{ url_for('page_content', title=latest_title) }}">work-in-progress newsletter</a>, as we compile it for our Substack.</i></p>
-		<p>***</p>
-	</div>
-
-	<div class='pub-section'>
-		<h1>Projects</h1>
-		<div class='section-group'>
-			{% for key, values in projects.items() %}
-			<div class='section-object'>
-				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>{{ values.date }}</div>
-				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
-			</div>
-			{% endfor %}
-		</div>
-	</div>
-</div>
-
-{% endblock %}

templates/test.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>test</title>
-	<link rel="stylesheet" href="{{ url_for('static', filename='assets/styles.css') }}">
-<body>
-	<div class='main-cont'>
-		<div class='nav-cont'>
-			<div class='header-title'>
-				<a href="/">CØNCEPTNULL</a>
-			</div>
-			<div class='nav-element-cont'>
-				<p>test</p>
-			</div>
-			
-		</div>
-		<div class="content">
-		</div>
-	</div>
-	<div class="footer">
-		<a href="https://wiki.conceptnull.org/" target="_blank"><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 12px; font-style: normal; object-fit: contain; background: rgb(255, 255, 255); color: rgb(0, 0, 0); text-shadow: rgb(8, 0, 255) 0px 3px 3px; flex-wrap: wrap;"><span style="display:flex;">hypertext connection<img src="https://i-love-everything.com/buttons/img/67.gif" style="max-height: 32px;"></span><span style="width:100%;text-shadow:0 0 5px #fff">𓆝 𓆟 𓆞 𓆝</span></div></a>
-	</div> 
-</body>
-</html>