Browse Source

added dates to homepage

main
Cailean Finn 9 months ago
parent
commit
fd6a422a82
  1. 27
      app.py
  2. 48
      static/assets/styles.css
  3. 24
      templates/homepage.html

27
app.py

@ -1,6 +1,7 @@
from flask import Flask, render_template, Response from flask import Flask, render_template, Response
import requests import requests
from bs4 import BeautifulSoup from bs4 import BeautifulSoup
from datetime import datetime
class WikiApp(Flask): class WikiApp(Flask):
@ -22,7 +23,7 @@ class WikiApp(Flask):
'titles': all_pages_string, 'titles': all_pages_string,
'format': 'json', 'format': 'json',
'prop': 'pageimages', 'prop': 'pageimages',
'pithumbsize': 700 'pithumbsize': 700,
}) })
thumb_data = thumb_resp.json() thumb_data = thumb_resp.json()
pages_thumb_data = thumb_data.get('query', {}).get('pages', {}) pages_thumb_data = thumb_data.get('query', {}).get('pages', {})
@ -32,20 +33,32 @@ class WikiApp(Flask):
pageid = value.get('pageid') pageid = value.get('pageid')
source = value.get('thumbnail', {}).get('source') source = value.get('thumbnail', {}).get('source')
for category, pages in category_page_list.items(): for category, pages in category_page_list.items():
# print(category, pages)
if title in pages: if title in pages:
for index, page_title in enumerate(category_page_list[category]):
if title == page_title:
category_page_list[category][page_title].update({'pageid':pageid, 'title': title, 'source': source })
category_page_list[category][pages.index(title)] = {'title': title, 'pageid': pageid, 'source': source}
return category_page_list return category_page_list
def fetch_all_pages(self, categories): def fetch_all_pages(self, categories):
category_page_list = {} category_page_list = {}
for category in categories: for category in categories:
response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'ask', 'query': '[[Concept:'+category+']]', 'format': 'json', 'formatversion': '2'}) response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'ask', 'query': '[[Concept:'+category+']]|?Article:Date', 'format': 'json', 'formatversion': '2'})
data = response.json() data = response.json()
page_titles = [page['fulltext'] for page in data['query']['results'].values()] page_title_timestamps = {}
category_page_list[category] = page_titles for page_title, page_data in data['query']['results'].items():
if 'printouts' in page_data and 'Article:Date' in page_data['printouts']:
raw_timestamp = page_data['printouts']['Article:Date'][0]['raw']
raw_timestamp = raw_timestamp[2:]
lol = datetime.strptime(raw_timestamp, "%Y/%m/%d")
formatted_date = lol.strftime("%d.%m.%Y")
page_title_timestamps[page_title] = {'date': formatted_date}
category_page_list[category] = page_title_timestamps
return category_page_list return category_page_list
@ -53,11 +66,9 @@ class WikiApp(Flask):
# Fetch pages for articles, projects, and newsletters # Fetch pages for articles, projects, and newsletters
categories = ['Articles', 'Projects', 'Newsletters', 'MainNavigation'] categories = ['Articles', 'Projects', 'Newsletters', 'MainNavigation']
category_page_list = self.fetch_all_pages(categories) category_page_list = self.fetch_all_pages(categories)
print(category_page_list)
updated_cat_list = self.fetch_pages_cat(category_page_list) updated_cat_list = self.fetch_pages_cat(category_page_list)
print(updated_cat_list)
articles = updated_cat_list.get('Articles', []) articles = updated_cat_list.get('Articles', [])
print(articles)
projects = updated_cat_list.get('Projects', []) projects = updated_cat_list.get('Projects', [])
newsletters = updated_cat_list.get('Newsletters', []) newsletters = updated_cat_list.get('Newsletters', [])
nav_elements = updated_cat_list.get('MainNavigation', []) nav_elements = updated_cat_list.get('MainNavigation', [])

48
static/assets/styles.css

@ -31,6 +31,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 120px;
gap: 5px; gap: 5px;
} }
@ -57,6 +58,8 @@ body {
background-color: white; background-color: white;
width: 100%; width: 100%;
height: 1px; height: 1px;
padding: 0;
margin: 0;
} }
.spinning-star { .spinning-star {
@ -65,15 +68,14 @@ body {
} }
.section-cont { .section-cont {
width: 100%; width: 100% ;
height: 100%; height: 75vh;
min-height: 750px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-top: 10px; margin-top: 10px;
background-color: rgb(54, 54, 255); /* Background color for demonstration */ background-color: rgb(54, 54, 255); /* Background color for demonstration */
border-radius: 30% 70% 70% 30% / 46% 30% 70% 54% border-radius: 30% 70% 70% 30% / 46% 30% 70% 54% ;
} }
.section { .section {
@ -82,14 +84,32 @@ body {
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
height: 100%; height: 100%;
margin-left: 60px;
overflow: hidden;
} }
.section-title { .section::-webkit-scrollbar {
display: none;
}
.section-group::-webkit-scrollbar {
display: none;
}
.section-group {
overflow: scroll;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
display: flex;
flex-direction: column;
gap: 10px;
} }
.section-element { .section-element {
text-transform: lowercase; text-transform: uppercase;
font-size: 20px;
padding-left: 20px;
} }
.section-element a { .section-element a {
@ -97,6 +117,22 @@ body {
color: white; color: white;
} }
.section-img img{
max-width: 100%;
border-radius: 10px;
}
.section-img {
width: 50%;
height: auto;
padding-left: 20px;
margin-bottom: 20px;
}
.section-date {
padding-left: 20px;
}
/* Keyframes for the spin animation */ /* Keyframes for the spin animation */
@keyframes spin { @keyframes spin {

24
templates/homepage.html

@ -17,7 +17,7 @@
</div> </div>
<div class='nav-element-cont'> <div class='nav-element-cont'>
{% for nav_element in nav_elements %} {% for nav_element in nav_elements %}
<div class='nav-element'><a href="{{ url_for('page_content', title=nav_element.title) }}">{{ nav_element.title }}</a><div class='spinning-star'>🞱</div></div> <div class='nav-element'><a href="{{ url_for('page_content', title=nav_elements[nav_element]['title']) }}">{{ nav_elements[nav_element]['title'] }}</a><div class='spinning-star'>🞱</div></div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@ -26,23 +26,35 @@
<div class='section-cont'> <div class='section-cont'>
<div class='section'> <div class='section'>
<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: 20px; font-style: italic; object-fit: contain; font-family: monospace; color: white; text-shadow: white 0px 5px 5px; text-decoration: none;">articles&nbsp;<img src="https://i-love-everything.com/buttons/img/7.gif" style="max-height: 32px;"></div></div> <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: 20px; font-style: italic; object-fit: contain; font-family: monospace; color: white; text-shadow: white 0px 5px 5px; text-decoration: none;">articles&nbsp;<img src="https://i-love-everything.com/buttons/img/7.gif" style="max-height: 32px;"></div></div>
<div class='section-group'>
{% for article in articles %} {% for article in articles %}
<div class='section-element'><a href="{{ url_for('page_content', title=article.title) }}">{{ article.title }} ↗</a></div> <div class='section-element'><a href="{{ url_for('page_content', title=articles[article]['title']) }}">↘ {{ articles[article]['title'] }}</a></div>
<div class='section-date'>🙿 {{ articles[article]['date'] }}</div>
<div class='section-img'><a href="{{ url_for('page_content', title=articles[article]['title']) }}"><img src="{{ articles[article]['source'] }}"></a></div>
{% endfor %} {% endfor %}
</div> </div>
</div>
<div class='section'> <div class='section'>
<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: 20px; font-style: oblique; object-fit: contain; font-family: monospace; color: white; text-shadow: red 0px 2px 5px;">newsletters<br><img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;"></div></div> <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: 20px; font-style: oblique; object-fit: contain; font-family: monospace; color: white; text-shadow: red 0px 2px 5px;">newsletters<br><img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;"></div></div>
{% for newsletter in articles %} <div class='section-group'>
<div class='section-element'><a href="{{ url_for('page_content', title=newsletter.title) }}">{{ newsletter.title }} ↗</a></div> {% for newsletter in newsletters %}
<div class='section-element'><a href="{{ url_for('page_content', title=newsletters[newsletter]['title']) }}">↘ {{ newsletters[newsletter]['title'] }}</a></div>
<div class='section-date'>🙿 {{ newsletters[newsletter]['date'] }}</div>
<div class='section-img'><a href="{{ url_for('page_content', title=newsletters[newsletter]['title']) }}"><img src="{{ newsletters[newsletter]['source'] }}"></a></div>
{% endfor %} {% endfor %}
</div> </div>
</div>
<div class='section'> <div class='section'>
<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: 20px; font-style: normal; object-fit: contain; font-family: monospace; color: white; border: 1px solid white;">projects<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;"></div></div> <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: 20px; font-style: normal; object-fit: contain; font-family: monospace; color: white; border: 1px solid white;">projects<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;"></div></div>
{% for project in articles %} <div class='section-group'>
<div class='section-element'><a href="{{ url_for('page_content', title=project.title) }}">{{ project.title }} ↗</a></div> {% for project in projects %}
<div class='section-element'><a href="{{ url_for('page_content', title=projects[project]['title']) }}">↘ {{ projects[project]['title'] }}</a></div>
<div class='section-date'>🙿 {{ projects[project]['date'] }}</div>
<div class='section-img'><a href="{{ url_for('page_content', title=projects[project]['title']) }}"><img src="{{ projects[project]['source'] }}"></a></div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div>
<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(0, 0, 0); color: rgb(255, 255, 255); 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> <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(0, 0, 0); color: rgb(255, 255, 255); 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>
</div> </div>

Loading…
Cancel
Save