Skip to content

Implements image page #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 20, 2022
Merged

Implements image page #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9509861
Differentiate between layout and document pugjs.
JohnnyIrvin Aug 20, 2022
a699c83
Implements feature #59
JohnnyIrvin Aug 20, 2022
5f2e2b0
Images generated by Dalle 2
JohnnyIrvin Aug 20, 2022
f636024
Update snapshots.
JohnnyIrvin Aug 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ python -m pytest tests/
If you would like to update the snapshot tests, you can use the following command.

```bash
python -m pytest tests/ --update-snapshot
python -m pytest tests/ --snapshot-update
```

# License
Expand Down
62 changes: 31 additions & 31 deletions tests/snapshots/goodbye-cruel-world.snapshot.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
<title>Goodbye Cruel World - Johnathan Irvin</title>
</head>
<body>
<div class="container">
<header class="d-flex flex-wrap justify-content-between align-items-center py-3 mb-4 border-bottom"><a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"><span class="fs-4">Johnathan Irvin</span></a>
</header>
</div>
<main id="main" class="container">
<div class="container">
<header class="d-flex flex-wrap justify-content-between align-items-center py-3 mb-4 border-bottom"><a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"><span class="fs-4">Johnathan Irvin</span></a><a href="/images" class="text-muted"><span>Images</span></a>
</header>
</div>
<main id="main" class="container">
<h1 class="post-title h1">Goodbye Cruel World</h1>
<p class="post-date">14 July 2022</p>
<article><p><a href="https://web.archive.org/web/20220623181137/https://johnathanirvin.com/">JohnathanIrvin.com</a> commits <a href="https://en.wikipedia.org/wiki/Seppuku">seppuku</a>. Now an <a href="https://en.wikipedia.org/wiki/Isekai">Isekai</a>, the website is reborn.</p>
Expand Down Expand Up @@ -295,31 +295,31 @@ <h2 id="other-changes">Other Changes</h2>
<h2 id="next-sprint">Next Sprint</h2>
<p>The manager said "Enjoy the weekend! Next sprint will be here on Monday."</p>
<p>The engineer grunted and said "I'll be back on Monday!"</p></article>
</main>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md 4 mb-0 text-muted">© 2020 - 2022 Johnathan Irvin</p>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a href="mailto:irvinjohnathan@gmail.com" target="_blank" class="text-muted"><img src="/static/img/envelope.svg" alt="Email"></a>
</li>
<li class="ms-3"><a href="https://github.com/JohnnyIrvin" target="_blank" class="text-muted"><img src="/static/img/github.svg" alt="Github"></a>
</li>
<li class="ms-3"><a href="https://twitter.com/_JohnnyIrvin" target="_blank" class="text-muted"><img src="/static/img/twitter.svg" alt="Twitter"></a>
</li>
<li class="ms-3"><a href="https://www.instagram.com/j0hnnyirvin/" target="_blank" class="text-muted"><img src="/static/img/instagram.svg" alt="Instagram"></a>
</li>
<li class="ms-3"><a href="https://www.linkedin.com/in/johnnyirvin/" target="_blank" class="text-muted"><img src="/static/img/linkedin.svg" alt="LinkedIn"></a>
</li>
</ul>
<ul class="nav list-unstyled d-flex col-md-12 justify-content-start d-flex">
<li class="ms-3"><a href="/rss.xml" class="text-muted">RSS Feed</a>
</li>
<li class="ms-3"><span>| </span>
</li>
<li class="ms-3"><a href="/sitemap.xml" class="text-muted">Sitemap</a>
</li>
</ul>
</footer>
</div>
</main>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md 4 mb-0 text-muted">© 2020 - 2022 Johnathan Irvin</p>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a href="mailto:irvinjohnathan@gmail.com" target="_blank" class="text-muted"><img src="/static/img/envelope.svg" alt="Email"/></a>
</li>
<li class="ms-3"><a href="https://github.com/JohnnyIrvin" target="_blank" class="text-muted"><img src="/static/img/github.svg" alt="Github"/></a>
</li>
<li class="ms-3"><a href="https://twitter.com/_JohnnyIrvin" target="_blank" class="text-muted"><img src="/static/img/twitter.svg" alt="Twitter"/></a>
</li>
<li class="ms-3"><a href="https://www.instagram.com/j0hnnyirvin/" target="_blank" class="text-muted"><img src="/static/img/instagram.svg" alt="Instagram"/></a>
</li>
<li class="ms-3"><a href="https://www.linkedin.com/in/johnnyirvin/" target="_blank" class="text-muted"><img src="/static/img/linkedin.svg" alt="LinkedIn"/></a>
</li>
</ul>
<ul class="nav list-unstyled d-flex col-md-12 justify-content-start d-flex">
<li class="ms-3"><a href="/rss.xml" class="text-muted">RSS Feed</a>
</li>
<li class="ms-3"><span>| </span>
</li>
<li class="ms-3"><a href="/sitemap.xml" class="text-muted">Sitemap</a>
</li>
</ul>
</footer>
</div>
</body>
</html>
62 changes: 31 additions & 31 deletions tests/snapshots/hello-world.snapshot.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
<title>Hello World - Johnathan Irvin</title>
</head>
<body>
<div class="container">
<header class="d-flex flex-wrap justify-content-between align-items-center py-3 mb-4 border-bottom"><a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"><span class="fs-4">Johnathan Irvin</span></a>
</header>
</div>
<main id="main" class="container">
<div class="container">
<header class="d-flex flex-wrap justify-content-between align-items-center py-3 mb-4 border-bottom"><a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"><span class="fs-4">Johnathan Irvin</span></a><a href="/images" class="text-muted"><span>Images</span></a>
</header>
</div>
<main id="main" class="container">
<h1 class="post-title h1">Hello World</h1>
<p class="post-date">10 October 2020</p>
<article><p>For many programmers, the first program they write in any given language is the "Hello World" program first found in <em><a href="https://www.bell-labs.com/usr/dmr/www/bintro.html">A Tutorial Introduction to the Language B by Bell Laboratories</a></em>. It seemed apt to label this article accordingly and incorporate "Hello World" into the content. As an homage to the history of programming, let's write this simple program.</p>
Expand All @@ -44,31 +44,31 @@ <h2 id="first-program">First Program</h2>
<h2 id="conclusion">Conclusion</h2>
<p>We've barely scratched the surface of programming. Ask yourself a few of the following questions: What exactly is <code>print</code>? Can I change <code>Hello World!</code> to any text I'd like? Try changing <code>Hello World!</code> to <code>Hello Johnny!</code> and rerunning the program. What happened? Is there a way that I could have a different output time I run the program? While the <code>Hello World!</code> program ensures that our environment is set up correctly; it doesn't do much.</p>
<p>What's next? I recommend researching variables in Python.</p></article>
</main>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md 4 mb-0 text-muted">© 2020 - 2022 Johnathan Irvin</p>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a href="mailto:irvinjohnathan@gmail.com" target="_blank" class="text-muted"><img src="/static/img/envelope.svg" alt="Email"></a>
</li>
<li class="ms-3"><a href="https://github.com/JohnnyIrvin" target="_blank" class="text-muted"><img src="/static/img/github.svg" alt="Github"></a>
</li>
<li class="ms-3"><a href="https://twitter.com/_JohnnyIrvin" target="_blank" class="text-muted"><img src="/static/img/twitter.svg" alt="Twitter"></a>
</li>
<li class="ms-3"><a href="https://www.instagram.com/j0hnnyirvin/" target="_blank" class="text-muted"><img src="/static/img/instagram.svg" alt="Instagram"></a>
</li>
<li class="ms-3"><a href="https://www.linkedin.com/in/johnnyirvin/" target="_blank" class="text-muted"><img src="/static/img/linkedin.svg" alt="LinkedIn"></a>
</li>
</ul>
<ul class="nav list-unstyled d-flex col-md-12 justify-content-start d-flex">
<li class="ms-3"><a href="/rss.xml" class="text-muted">RSS Feed</a>
</li>
<li class="ms-3"><span>| </span>
</li>
<li class="ms-3"><a href="/sitemap.xml" class="text-muted">Sitemap</a>
</li>
</ul>
</footer>
</div>
</main>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md 4 mb-0 text-muted">© 2020 - 2022 Johnathan Irvin</p>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a href="mailto:irvinjohnathan@gmail.com" target="_blank" class="text-muted"><img src="/static/img/envelope.svg" alt="Email"/></a>
</li>
<li class="ms-3"><a href="https://github.com/JohnnyIrvin" target="_blank" class="text-muted"><img src="/static/img/github.svg" alt="Github"/></a>
</li>
<li class="ms-3"><a href="https://twitter.com/_JohnnyIrvin" target="_blank" class="text-muted"><img src="/static/img/twitter.svg" alt="Twitter"/></a>
</li>
<li class="ms-3"><a href="https://www.instagram.com/j0hnnyirvin/" target="_blank" class="text-muted"><img src="/static/img/instagram.svg" alt="Instagram"/></a>
</li>
<li class="ms-3"><a href="https://www.linkedin.com/in/johnnyirvin/" target="_blank" class="text-muted"><img src="/static/img/linkedin.svg" alt="LinkedIn"/></a>
</li>
</ul>
<ul class="nav list-unstyled d-flex col-md-12 justify-content-start d-flex">
<li class="ms-3"><a href="/rss.xml" class="text-muted">RSS Feed</a>
</li>
<li class="ms-3"><span>| </span>
</li>
<li class="ms-3"><a href="/sitemap.xml" class="text-muted">Sitemap</a>
</li>
</ul>
</footer>
</div>
</body>
</html>
47 changes: 42 additions & 5 deletions website/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,67 @@
# LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
# OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import os

import flask
import markdown

from website.repositories import Repository, blog_repositories

app = flask.Flask(__name__)
app.jinja_env.add_extension('pypugjs.ext.jinja.PyPugJSExtension')
repo = blog_repositories.PostRepository('blog')
blog_repo = blog_repositories.PostRepository('blog')

@app.route('/')
def index() -> str:
return flask.render_template(
'index.pug',
posts=sorted(
repo.get_all(),
blog_repo.get_all(),
key=lambda post: post.date,
reverse=True,
)
)

@app.route('/images')
def images() -> str:
"""
Returns a list of all images in the images directory.

Returns:
str: The rendered template.
"""
images = []
directory = os.path.join('website', 'images')

for image in os.listdir(directory):
images.append(image.replace(' ', '_'))

return flask.render_template(
'images.pug',
images=images
)

@app.route('/images/<string:name>')
def image(name: str) -> str:
"""
Returns the image with the given name.

Args:
name: The name of the image.

Returns:
str: The rendered template.
"""
return flask.send_from_directory(
"images",
name.lower().replace('_', ' ')
)

@app.route('/articles/<int:year>/<int:month>/<int:day>/<string:description>')
def article(year: int, month: int, day: int, description: str) -> str:
try:
post = repo.get(f"{year}/{month}/{day}/{description}")
post = blog_repo.get(f"{year}/{month}/{day}/{description}")
except Repository.NotFound:
flask.abort(404)

Expand All @@ -62,7 +99,7 @@ def article(year: int, month: int, day: int, description: str) -> str:
@app.route('/feed')
def rss() -> str:
sorted_items = sorted(
repo.get_all(),
blog_repo.get_all(),
key=lambda post: post.date,
reverse=True,
)
Expand All @@ -83,7 +120,7 @@ def rss() -> str:
@app.route('/sitemap')
def sitemap() -> str:
sorted_items = sorted(
repo.get_all(),
blog_repo.get_all(),
key=lambda post: post.date,
reverse=True,
)
Expand Down
Binary file added website/images/attorney starship.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/dog 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/dog 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/dog 3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/dog 4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/engine 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/engine 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/engine 3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/engine 4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/engine 5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/engine 6.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/engine 7.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/engine 8.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/fenix 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/penguin bubble gum 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/penguin bubble gum 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/sheep 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/sheep 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/images/sheep 3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion website/templates/article.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ block title
block styles
link(href="{{ url_for('static', filename='css/article.css') }}", rel="stylesheet")

block body
block content
h1.post-title.h1 {{title}}
p.post-date {{date}}
article {{content}}
47 changes: 47 additions & 0 deletions website/templates/document.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
!!! 5
html
head
block meta
meta(charset="utf-8")
meta(name="viewport", content="width=device-width, initial-scale=1")
meta(name="description", content="Johnathan Irvin is a software engineer and researcher based in the Lehigh Valley, PA area.")
meta(name="keywords", content="Vue,JavaScript,HTML,CSS,Python,VueJS,Bootstrap,C#,Engineer,Software,Coding,Development")
meta(name="author", content="Johnathan Irvin")

link(rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}")
link(
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
)
script(
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
)

// {% if not config.DEBUG %}
// Global site tag (gtag.js) - Google Analytics
script(
async src="https://www.googletagmanager.com/gtag/js?id=G-TRBJKSZ5W1"
)
script.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-TRBJKSZ5W1');
// {% endif %}

block scripts
block styles
block title
title Engineer, Researcher, Entrepreneur - Johnathan Irvin

body
block header

block body
main#main.container

block footer
14 changes: 14 additions & 0 deletions website/templates/images.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
extends layout.pug

block title
title Images - Johnathan Irvin

block content
.d-flex.justify-content-center.flex-wrap
// {% for image in images %}
img.flex(
src='/images/{{ image }}',
width='200px',
height='200px'
)
// {% endfor %}
2 changes: 1 addition & 1 deletion website/templates/index.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
extends layout.pug

block body
block content
h1.d-none Johnathan Irvin's Blog
// {% for post in posts %}
.post
Expand Down
Loading