Skip to content

Commit

Permalink
Merge pull request #8 from holysoles/implement-sidebar-timeline
Browse files Browse the repository at this point in the history 
Implement a sidebar timeline
  • Loading branch information
@holysoles
holysoles authored Apr 28, 2024
2 parents ca999e0 + f550a7c commit 4d8f78c
Show file tree
Hide file tree
Showing 5 changed files with 191 additions and 86 deletions.
57 changes: 46 additions & 11 deletions app.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
from flask import Flask, render_template
from flask import Flask, request, render_template
from werkzeug.middleware.proxy_fix import ProxyFix
from flask_minify import minify
import yaml
import re
from os import listdir
from os.path import isfile, join, splitext

Expand All @@ -14,29 +15,63 @@
app.wsgi_app, x_for=1, x_proto=1, x_host=1, x_prefix=1
)

@app.route("/")
def home():
yaml_path = './blog/posts/'
code_snippet_path = './blog/code_snippets/'
dir_files = [join(yaml_path, file) for file in listdir(yaml_path) if isfile(join(yaml_path, file))]
posts_dir = './blog/posts/'
code_snippet_path = './blog/code_snippets/'

def get_posts():
dir_files = listdir(posts_dir)
yaml_files = [file for file in dir_files if splitext(file)[1] == '.yaml']
yaml_files.sort(reverse=True)
timeline = {}
for yaml_file in yaml_files:
link_to_post = "/post?date=" + yaml_file
# collect datetime info
datetime_list = re.split('_|\.', yaml_file)
file_year = datetime_list[0]
file_month = datetime_list[1]
file_day = datetime_list[2]
if file_year in timeline:
if file_month in timeline[file_year]:
timeline[file_year][file_month][file_day] = link_to_post
else:
timeline[file_year][file_month] = {file_day: link_to_post}
else:
timeline[file_year] = {file_month: {file_day: link_to_post}}
return yaml_files, timeline

def load_post_data(yaml_files):
post_array = []
for yaml_file in yaml_files:
with open(yaml_file, 'r') as file:
# load in post text
with open(join(posts_dir, yaml_file), 'r') as file:
post_data = yaml.safe_load(file)

# parse and preload code snippet files
if post_data.get('body'):
for body in post_data['body']:
if body.get('code'):
with open(join(code_snippet_path, body['code']), 'r') as file:
code_snippet = file.read()
body['code'] = code_snippet

post_array.append(post_data)
return render_template('blog.html', post_array=post_array)
return post_array

@app.route("/", methods=['GET'])
def home():
yaml_files, timeline = get_posts()
post_array = load_post_data(yaml_files)
return render_template('blog.html', post_array=post_array, date_dict=timeline)

@app.route("/post", methods=['GET'])
def post():
req_post = request.args.get('date')
if req_post:
yaml_files, timeline = get_posts()
if req_post in yaml_files:
post = load_post_data([req_post])
return render_template('blog.html', post_array=post, date_dict=timeline)
return "Post not found", 404

@app.route("/contact")
@app.route("/contact", methods=['GET'])
def contact():
return render_template('contact.html')
30 changes: 30 additions & 0 deletions static/contact.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/* Style for contact page */
div.contact-container {
margin-top: 10px;
text-align: center;
}
ul.contact-links {
list-style-type: none;
line-height: 1.75;
}
.link-with-logo {
display: flex;
align-items: center;
justify-content: center;
white-space: pre;
}
.link-with-logo img {
width: 24px; /* Adjust the width as needed */
height: 24px; /* Adjust the height as needed */
margin-right: 8px;
}
.link-with-logo span {
font-weight: bold;
}
.link-with-logo a {
text-decoration: none;
color: #333; /* Change the color as needed */
}
.link-with-logo a:hover {
color: #0251ef;
}
72 changes: 43 additions & 29 deletions static/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,6 @@ a {
transition: color 0.3s ease-in-out;
}

footer {
margin-top: 20px;
padding: 10px 0;
background-color: #333;
color: #fff;
text-align: center;
}

.blog-image {
max-width:500px
}
Expand Down Expand Up @@ -199,33 +191,55 @@ code {
border-left: 5px solid #ffc000;
}

/* Style for contact page */
div.contact-container {
margin-top: 10px;
text-align: center;
.header {
background-color: #f5f5f5;
position: fixed; /* Set header position to fixed */
top: 0; /* Align it to the top of the page */
width: 100%; /* Set header width to full width */
z-index: 999; /* Ensure the header is above other content */
/* Your existing styles for header */
}
ul.contact-links {
list-style-type: none;
line-height: 1.75;

.content {
padding-top: 80px; /* Adjust padding to accommodate the fixed header */
/* Your existing styles for content */
}
.link-with-logo {
display: flex;
align-items: center;
justify-content: center;
white-space: pre;

/* Style for sidebar */
.sidebar {
height: 100%;
width: 130px;
left: 0;
position: fixed;
background-color: #b9b6b6;
overflow-x: hidden;
padding-top: 12px;
}
.link-with-logo img {
width: 24px; /* Adjust the width as needed */
height: 24px; /* Adjust the height as needed */
margin-right: 8px;

.sidebar-header {
font-size: 18px;
text-align: center;
}
.link-with-logo span {

.sidebar-section {
font-weight: bold;
color: #000000;
font-size: 18px;
padding: 8px;
}
.link-with-logo a {

.sidebar a {
padding: 2px 16px;
text-decoration: none;
color: #333; /* Change the color as needed */
display: block;
color: #3b3b3b;
}
.link-with-logo a:hover {
color: #0251ef;

.sidebar a:hover {
color: #f1f1f1;
}

.posts {
margin-left: 130px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
117 changes: 71 additions & 46 deletions templates/blog.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,78 @@
{% extends 'layout.html' %}
{% block content %}
<div>
<table>
{% for post in post_array %}
<tr>
<td>
<article>
{% if post['title'] %}
<h2>
{{ post['title'] }} - {{ post['date'] }}
</h2>
{% endif %}
{% for paragraph in post['body'] %}
<div>
{% if paragraph['section_title'] %}
<h3>
{{ paragraph['section_title'] }}
</h3>
{% endif %}
{% if paragraph['text'] %}
<p>
{{ paragraph['text'] }}
</p>
{% endif %}
{% if paragraph['code'] %}
<div class="code-container">
<div class="line-numbers line-numbers-background">
{% for line in paragraph['code'].splitlines() %}
<span>{{ loop.index }}</span>
<div class="main-wrapper">
<div class="sidebar-container">
<aside class="sidebar">
<div class="sidebar-header">
Blog Posts
</div>
<div class="sidebar-body">
<ol>
{% for year in date_dict %}
<li class="sidebar-section"> {{ year }} </li>
{% for month in date_dict[year] %}
{% for day in date_dict[year][month] %}
<li>
<a href="{{ date_dict[year][month][day] }}">
{{ month }}/{{ day }}
</a>
</li>
{% endfor %}
{% endfor %}
{% endfor %}
</ol>
</div>
</aside>
</div>
<div class="posts">
<table>
{% for post in post_array %}
<tr>
<td>
<article>
{% if post['title'] %}
<h2>
{{ post['title'] }} - {{ post['date'] }}
</h2>
{% endif %}
{% for paragraph in post['body'] %}
<div>
{% if paragraph['section_title'] %}
<h3>
{{ paragraph['section_title'] }}
</h3>
{% endif %}
{% if paragraph['text'] %}
<p>
{{ paragraph['text'] }}
</p>
{% endif %}
{% if paragraph['code'] %}
<div class="code-container">
<div class="line-numbers line-numbers-background">
{% for line in paragraph['code'].splitlines() %}
<span>{{ loop.index }}</span>
{% endfor %}
</div>
<code>
{% for line in paragraph['code'].splitlines() %}
<span class="line-highlight">
<pre class="code-text">{{line}}</pre>
</span>
{% endfor %}
</code>
</div>
<code>
{% for line in paragraph['code'].splitlines() %}
<span class="line-highlight">
<pre class="code-text">{{line}}</pre>
</span>
{% endfor %}
</code>
{% endif %}
{% if paragraph['image'] %}
<img class="blog-image" src="{{ url_for('static', filename=paragraph['image']) }}" />
{% endif %}
</div>
{% endif %}
{% if paragraph['image'] %}
<img class="blog-image" src="{{ url_for('static', filename=paragraph['image']) }}" />
{% endif %}
</div>
{% endfor %}
</article>
</td>
</tr>
{% endfor %}
</table>
{% endfor %}
</article>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<title>Patrick Evans</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='contact.css') }}" />
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
Expand Down

0 comments on commit 4d8f78c

Please sign in to comment.