From 40c5a848d8dc058f73b0e40d8deaa99f429adf2f Mon Sep 17 00:00:00 2001 From: Cailean Finn Date: Fri, 5 Apr 2024 01:58:42 +0100 Subject: [PATCH] homepage content added --- app.py | 17 +++++-- static/assets/styles.css | 105 +++++++++++++++++++++++++++++++++++++++ templates/homepage.html | 61 +++++++++++++++-------- 3 files changed, 159 insertions(+), 24 deletions(-) create mode 100644 static/assets/styles.css diff --git a/app.py b/app.py index 830c1ec..81c7c4e 100644 --- a/app.py +++ b/app.py @@ -1,4 +1,4 @@ -from flask import Flask, render_template +from flask import Flask, render_template, Response import requests from bs4 import BeautifulSoup @@ -13,6 +13,7 @@ class WikiApp(Flask): # Define routes self.route('/', methods=['GET'])(self.homepage) self.route('/', methods=['GET'])(self.page_content) + self.route('/favicon.ico')(self.favicon) def fetch_pages(self, category): # Make a request to MediaWiki API using ask action to get all pages in the specified category @@ -28,20 +29,23 @@ class WikiApp(Flask): articles = self.fetch_pages('Articles') projects = self.fetch_pages('Projects') newsletters = self.fetch_pages('Newsletters') + nav_elements = self.fetch_pages('MainNavigation') - return render_template('homepage.html', articles=articles, projects=projects, newsletters=newsletters) + + return render_template('homepage.html', articles=articles, projects=projects, newsletters=newsletters, nav_elements=nav_elements) def page_content(self, title): # 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': title, 'format': 'json'}) data = response.json() + print(title) # Extract page title and content page_title = data['parse']['title'] page_content = data['parse']['text']['*'] - page_content = self.fix_images(page_content) + page_content = self.fix_html(page_content) return render_template('page_content.html', title=page_title, content=page_content) - def fix_images(self, page_content): + def fix_html(self, page_content): soup = BeautifulSoup(page_content, 'html.parser') # Find all img tags @@ -72,6 +76,11 @@ class WikiApp(Flask): file_link.unwrap() return soup.prettify() + + # Route for favicon.ico to prevent Flask from raising an error + def favicon(self): + return Response('', status=200) + if __name__ == '__main__': app = WikiApp(__name__) diff --git a/static/assets/styles.css b/static/assets/styles.css new file mode 100644 index 0000000..1680268 --- /dev/null +++ b/static/assets/styles.css @@ -0,0 +1,105 @@ +@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); + +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: black; + color: white; + margin: auto; + padding: 20px; + font-family: "Space Mono", monospace; +} + +.main-cont { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + gap: 10px; +} + +.header-title { + font-size: 40px; +} + +.header-summary { + font-size: 15px; + font-style: italic; +} + +.nav-cont { + display: flex; + flex-direction: column; + width: 100%; + gap: 5px; +} + +.nav-element-cont { + display: flex; + flex-direction: row; + gap: 10px; + text-transform: lowercase; + font-size: 20px; +} + +.nav-element-cont a{ + text-decoration: none; + color: white; +} + +.nav-element { + display: flex; + flex-direction: row; + gap: 10px; +} + +.line { + background-color: white; + width: 100%; + height: 1px; +} + +.spinning-star { + transform-origin: center; /* Set the transform origin to the center */ + animation: spin 5s linear infinite; /* Apply the spin animation */ +} + +.section-cont { + width: 100%; + height: 100%; + min-height: 750px; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 10px; + background-color: rgb(54, 54, 255); /* Background color for demonstration */ + border-radius: 30% 70% 70% 30% / 46% 30% 70% 54% +} + +.section { + width: calc(100% / 3); /* Each div takes up one-third of the container */ + display: flex; + flex-direction: column; + gap: 10px; + height: 100%; +} + +.section-title { + +} + +.section-element { + text-transform: lowercase; +} + +.section-element a { + text-decoration: none; + color: white; +} + + +/* Keyframes for the spin animation */ +@keyframes spin { + 0% { transform: rotate(0deg); } /* Initial rotation */ + 100% { transform: rotate(360deg); } /* Final rotation */ +} \ No newline at end of file diff --git a/templates/homepage.html b/templates/homepage.html index 361a49e..930b5a9 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -3,27 +3,48 @@ - Homepage + concept null + -

Homepage

-

Articles

- -

Projects

- -

Newsletters

- +
+
+
+ CONCEPTNULL +
+
+ summary about us +
+
+ {% for nav_element in nav_elements %} +
{{ nav_element }}
🞱
+ {% endfor %} +
+
+ + +
+
+
articles 
+ {% for article in articles %} +
{{ article }} ↗
+ {% endfor %} +
+
+
newsletters
+ {% for newsletter in newsletters %} +
{{ newsletter }} ↗
+ {% endfor %} +
+
+
projects
+ {% for project in projects %} +
{{ project }} ↗
+ {% endfor %} +
+
+ +
hypertext connection𓆝 𓆟 𓆞 𓆝
+