cailean
/
cn-py
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

homepage content added

main
Cailean Finn 9 months ago
parent
40b0be2cf0
commit
40c5a848d8
3 changed files with 159 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      app.py
  2. 105
      static/assets/styles.css
  3. 61
      templates/homepage.html

17
app.py
View File

@ -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('/<string:title>', 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__)

105
static/assets/styles.css
View File

@ -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 */
}

61
templates/homepage.html
View File

@ -3,27 +3,48 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<title>concept null</title>
<link rel="stylesheet" href="{{ url_for('static', filename='assets/styles.css') }}">
</head>
<body>
<h1>Homepage</h1>
<h2>Articles</h2>
<ul>
{% for article_title in articles %}
<li><a href="{{ url_for('page_content', title=article_title) }}">{{ article_title }}</a></li>
{% endfor %}
</ul>
<h2>Projects</h2>
<ul>
{% for project_title in projects %}
<li><a href="{{ url_for('page_content', title=project_title) }}">{{ project_title }}</a></li>
{% endfor %}
</ul>
<h2>Newsletters</h2>
<ul>
{% for newsletter_title in newsletters %}
<li><a href="{{ url_for('page_content', title=newsletter_title) }}">{{ newsletter_title }}</a></li>
{% endfor %}
</ul>
<div class='main-cont'>
<div class='nav-cont'>
<div class='header-title'>
CONCEPTNULL
</div>
<div class='header-summary'>
summary about us
</div>
<div class='nav-element-cont'>
{% for nav_element in nav_elements %}
<div class='nav-element'><a href="{{ url_for('page_content', title=nav_element) }}">{{ nav_element }}</a><div class='spinning-star'>🞱</div></div>
{% endfor %}
</div>
</div>
<span class='line'></span>
<div class='section-cont'>
<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>
{% for article in articles %}
<div class='section-element'><a href="{{ url_for('page_content', title=article) }}">{{ article }} ↗</a></div>
{% endfor %}
</div>
<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>
{% for newsletter in newsletters %}
<div class='section-element'><a href="{{ url_for('page_content', title=newsletter) }}">{{ newsletter }} ↗</a></div>
{% endfor %}
</div>
<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>
{% for project in projects %}
<div class='section-element'><a href="{{ url_for('page_content', title=project) }}">{{ project }} ↗</a></div>
{% endfor %}
</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>
</body>
</html>

Write Preview
Loading…
Cancel
Save