Skip to content

Commit

Permalink
feat: add post
Browse files Browse the repository at this point in the history
  • Loading branch information
minikin committed Dec 2, 2024
1 parent 851a003 commit 794fafc
Show file tree
Hide file tree
Showing 5 changed files with 393 additions and 292 deletions.
68 changes: 45 additions & 23 deletions source/_includes/layouts/post.jinja
Original file line number Diff line number Diff line change
@@ -1,38 +1,60 @@
<!doctype html>
<html lang="en">

<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Latest updates and news from Catalyst Voices">

<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
<link rel="manifest" href="/images/favicon/site.webmanifest">
<link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/images/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

<link href="/styles/styles.css" rel="stylesheet">
<link href="/styles/post.css" rel="stylesheet">
{{ components.favicon() }}

<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/header.css">
<link rel="stylesheet" href="/styles/post.css">
<link rel="stylesheet" href="/styles/footer.css">
</head>

<body>
<div id="NavBar">
<a href="/" class="title">Catalyst Voices Updates</a>
</div>
{{ components.header() }}

<main class="post-container">
<article>
<header class="post-header">
{% if publishDate %}
<time class="publish-date" datetime="{{ publishDate }}">
PUBLISHED: {{ publishDate }}
</time>
{% endif %}

<h1 class="post-title">{{ title }}</h1>

{% if header %}
<header style="background-image: url('{{ header }}'); background-repeat: none; background-size: cover;"></header>
{% endif %}
<div class="post-meta">
{% if author %}
<div class="author">
<img src="/images/authors/{{ author | lower | replace(" ", " -") }}.jpg" alt="{{ author }}">
<div class="author-info">
<div class="name">{{ author }}</div>
<div class="role">{{ role | default("Contributor") }}</div>
</div>
</div>
{% endif %}

<main>
{{ content }}
<div class="share">
<a href="https://twitter.com/share?url={{ url }}" target="_blank">Twitter</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}" target="_blank">Facebook</a>
<a href="https://www.linkedin.com/shareArticle?url={{ url }}" target="_blank">LinkedIn</a>
</div>
</div>
</header>

<div class="post-content">
{{ content }}
</div>
</article>
</main>

{{ components.footer() }}
{{ components.footer() }}
</body>

</html>
120 changes: 63 additions & 57 deletions source/index.jinja
Original file line number Diff line number Diff line change
Expand Up @@ -23,71 +23,77 @@ title: Catalyst Voices Updates
<body>
{{ components.header() }}

<!-- Hero section -->
<header class="hero-section" id="heroSection">
<h1 class="hero-title">
Catalyst Voices: What's <span class="accent">New</span>
</h1>
<p class="hero-subtitle">
Learn from our experts and read the latest news on our blog.
</p>
</header>
<div class="main-container">
<!-- Hero section -->
<header class="hero-section" id="heroSection">
<h1 class="hero-title">
Catalyst Voices: What's <span class="accent">New</span>
</h1>
<p class="hero-subtitle">
Learn from our experts and read the latest news on our blog.
</p>
</header>

<!-- Main content -->
<div class="wrapper">
<div class="post-list">
{% if pages and pages.byTag %}
{% for page in pages.byTag("posts", sortBy="publishDate=desc") %}
<article class="post">
<!-- Left column with metadata -->
<div class="post-meta">
{% if page.data['publishDate'] %}
<time class="date" datetime="{{ page.data['publishDate'] }}">
{{ page.data['publishDate'] }}
</time>
{% endif %}
<!-- Main content -->
<div class="wrapper">
<div class="post-list">
{% if pages and pages.byTag %}
{% for page in pages.byTag("posts", sortBy="publishDate=desc") %}
<article class="post">
<!-- Left column with metadata -->
<div class="post-meta">
{% if page.data['publishDate'] %}
<time class="date" datetime="{{ page.data['publishDate'] }}">
{{ page.data['publishDate'] }}
</time>
{% endif %}

{% if page.data['title'] %}
<h2 class="title">{{ page.data['title'] }}</h2>
{% endif %}
{% if page.data['title'] %}
<h2 class="title">{{ page.data['title'] }}</h2>
{% endif %}

{% if page.data['platforms'] %}
<div class="platform-tags">
{% for platform in page.data['platforms'] %}
<span class="platform-tag">{{ platform }}</span>
{% endfor %}
{% if page.data['platforms'] %}
<div class="platform-tags">
{% for platform in page.data['platforms'] %}
<span class="platform-tag">{{ platform }}</span>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
</div>

<!-- Right column with content -->
<div class="post-content">
{% if page.data['coverImage'] %}
<div class="post-media {% if page.data['isVideo'] %}video-container{% endif %}">
{% if page.data['isVideo'] %}
<video controls playsinline poster="{{ page.data['videoPoster'] }}">
<source src="{{ page.data['coverImage'] }}" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
{% else %}
<img src="{{ page.data['coverImage'] }}" alt="{{ page.data['title'] }}" loading="lazy">
<!-- Right column with content -->
<div class="post-content">
{% if page.data['coverImage'] %}
<div class="post-wrapper">
<div class="post-media {% if page.data['isVideo'] %}video-container{% endif %}">
{% if page.data['isVideo'] %}
<div class="video-container">
<video controls playsinline poster="{{ page.data['videoPoster'] }}">
<source src="{{ page.data['coverImage'] }}" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
</div>
{% else %}
<img src="{{ page.data['coverImage'] }}" alt="{{ page.data['title'] }}" loading="lazy">
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endif %}

{% if page.data['description'] %}
<div class="description">
<p>{{ page.data['description'] }}</p>
</div>
{% endif %}
{% if page.data['description'] %}
<div class="description">
<p>{{ page.data['description'] }}</p>
</div>
{% endif %}

{% if page.data['url'] %}
<a href="{{ page.data['url'] }}" class="read-more">Read the blog post</a>
{% endif %}
</div>
</article>
{% endfor %}
{% endif %}
{% if page.data['url'] %}
<a href="{{ page.data['url'] }}" class="read-more">Read the blog post</a>
{% endif %}
</div>
</article>
{% endfor %}
{% endif %}
</div>
</div>
</div>

Expand Down
Loading

0 comments on commit 794fafc

Please sign in to comment.