Skip to content

Commit

Permalink
Merge pull request #89 from mathesar-foundation/blog
Browse files Browse the repository at this point in the history
Add Blog Page
  • Loading branch information
kgodey authored Mar 8, 2024
2 parents 3c16959 + c26ca3e commit c4a05e8
Show file tree
Hide file tree
Showing 46 changed files with 1,989 additions and 623 deletions.
1 change: 1 addition & 0 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ GEM
PLATFORMS
arm64-darwin-21
arm64-darwin-22
arm64-darwin-23
x86_64-darwin-18
x86_64-linux

Expand Down
78 changes: 76 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ This repository is a Jekyll website that powers https://mathesar.org. It is host
- [Local setup](#local-setup)
- [Installation](#installation)
- [Running locally](#running-locally)
- [Publishing to the Blog](#publishing-to-the-blog)
- [Creating a new blog post](#creating-a-new-blog-post)
- [Creating Author Pages](#creating-author-pages)
- [Creating Tag Pages](#creating-tag-pages)
- [Updating Author Pages](#updating-author-pages)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

Expand All @@ -31,6 +36,75 @@ This repository is a Jekyll website that powers https://mathesar.org. It is host

### Running locally

Run `bundle exec jekyll serve`
1. Run:

Browse to `http://localhost:4000/`
```
bundle exec jekyll serve --port 4000 --livereload
```
1. Browse to http://localhost:4000/
## Publishing to the Blog
To publish a new post on the Mathesar blog, follow these steps.
### Creating a new blog post
1. **Create a new Markdown file in the `_posts` directory.** The file name should follow this format: `YYYY-MM-DD-title-of-the-post.md`.
2. **Fill out the front matter for your post.** At the beginning of your Markdown file, include the following:
```yaml
---
layout: post
title: "Title of Your Post"
tags: tag1 tag2 tag3
date: YYYY-MM-DD
author: author_id
description: "Brief description of the post."
image: /path/to/featured/image.jpg
---
```
3. **Write your blog post.** After the front matter, use regular Markdown syntax to write your post.
### Creating Author Pages
If author_id does not exist in `_data/authors.yml`:
1. **Add author details to `_data/authors.yml`.** If your author ID does not exist, create a new entry with your details.
```yaml
your_author_id:
name: Author Name
role: Author Role
bio: >
"A brief bio about the author. This can be a few sentences long."
image: /path/to/your/image.jpg
```
### Creating Tag Pages
If you've added new tags:
1. **Run the tag generator script.** From the root directory, execute:
```
python scripts/tag_generator.py
```
This will generate pages for the new tags.
### Updating Author Pages
If you've added yourself as a new author:
1. **Run the author generator script.** From the root directory, execute:
```
python scripts/author_generator.py
```
This will generate a page for your author profile.
Remember to run the above scripts if you're introducing new tags or authors to ensure the website accurately reflects these changes.
1 change: 1 addition & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ baseurl: ""
url: "https://mathesar.org" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: mathesar_org
github_username: mathesar
permalink: /blog/:categories/:year/:month/:day/:title:output_ext

# Build settings
theme: minima
Expand Down
12 changes: 12 additions & 0 deletions _data/authors.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
sean_colsen:
name: Sean Colsen
role: Engineer at Mathesar
bio: >
Sean Colsen is an engineer on the Mathesar Maintainers team, focusing mostly on front end work. As a self-taught coder, he's been building cool stuff with web tech since 2007.
image: /assets/sean.jpg
kriti_godey:
name: Kriti Godey
role: Project Lead at Mathesar
bio: >
Kriti Godey is the project lead of Mathesar and works on most aspects of the project. She first started working on open source as head of engineering at Creative Commons, and worked at various startups before that.
image: /assets/kriti.jpg
18 changes: 18 additions & 0 deletions _includes/author_details.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="author-details space-y-4 p-8 rounded bg-stone-200">
<div>
<h3 class="text-2xl font-bold">{{ include.author.name }}</h3>
<p>
{{include.author.role}}
</p>
</div>
<div class="flex items-center space-x-4">
<img
src="{{ include.author.image }}"
alt="{{ include.author.name }}"
class="rounded-full w-16 h-16 object-cover"
/>
<div class="space-y-2 italic">
<p>{{ include.author.bio | markdownify }}</p>
</div>
</div>
</div>
46 changes: 46 additions & 0 deletions _includes/blog_card.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{% assign size = include.size | default: 'regular' %} {% assign author =
site.data.authors[include.post.author] %}

<li
class="mb-4 {% if size == 'small' %}space-y-2 rounded p-4 lg:w-1/3{% else %}space-y-4 text-lg rounded p-8{% endif %} bg-white"
>
<div class="space-y-2">
<h2
class="{% if size == 'small' %}text-xl hover:text-blue-600 font-semibold{% else %}lg:text-4xl hover:text-blue-600 font-semibold{% endif %}"
>
<a href="{{ include.post.url }}">{{ include.post.title }}</a>
</h2>
<p class="text-gray-500 text-sm">
Posted on {{ include.post.date | date: "%b %d, %Y" }} by
<a class="font-bold" href="/blog/authors/{{ include.post.author }}">
{{author.name }}
</a>
</p>
</div>
{% include tag_cloud.html %}

<div
class="border {% if size == 'small' %} h-40 {% else %} lg:h-80 h-40 {% endif %} overflow-hidden w-full rounded-lg mb-6 relative"
>
<div
class="absolute inset-0 w-full h-full bg-cover bg-center blur-md filter brightness-75"
style="background-image: url({{include.post.image}});"
></div>
<img
src="{{include.post.image}}"
alt=""
class="h-full object-cover object-center relative mx-auto"
/>

</div>

<div class="{% if size == 'small' %} truncate {% endif %}">
{{ include.post.excerpt | strip_html }}
</div>

<a
href="{{ include.post.url }}"
class="text-blue-600 bg-blue-600 text-white hover:bg-blue-700 rounded px-2 mt-4 inline-block"
>Continue Reading »</a
>
</li>
18 changes: 18 additions & 0 deletions _includes/collecttags.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{% assign rawtags = "" %}
{% for post in site.posts %}
{% assign ttags = post.tags | join:'|' | append:'|' %}
{% assign rawtags = rawtags | append:ttags %}
{% endfor %}
{% assign rawtags = rawtags | split:'|' | sort %}

{% assign site.tags = "" %}
{% for tag in rawtags %}
{% if tag != "" %}
{% if tags == "" %}
{% assign tags = tag | split:'|' %}
{% endif %}
{% unless tags contains tag %}
{% assign tags = tags | join:'|' | append:'|' | append:tag | split:'|' %}
{% endunless %}
{% endif %}
{% endfor %}
20 changes: 13 additions & 7 deletions _includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@
<div class="space-x-2">
<a
class="text-gray-100 hover:text-gray-600"
href="privacy.html"
href="{{ 'privacy.html' | relative_url }}"
aria-label="Privacy Policy"
>Privacy Policy</a
>

<a
class="text-gray-100 hover:text-gray-600"
href="mailing-list.html"
href="{{ 'mailing-list.html' | relative_url }}"
aria-label="Mailing List"
>Mailing List</a
>
Expand All @@ -64,40 +64,46 @@
aria-label="Visit Mathesar on Github"
target="_blank"
>
<img class="invert" src="assets/github-logo.svg" alt="" />
<img class="invert" src="{{ '/assets/github-logo.svg' | relative_url }}" alt="" />
</a>
<a
href="https://twitter.com/mathesar_org"
class="hover:opacity-70 text-2xl transition-colors icon-link"
aria-label="Visit Mathesar on Twitter"
target="_blank"
>
<img class="invert" src="assets/x-logo.svg" alt="" />
<img class="invert" src="{{ '/assets/x-logo.svg' | relative_url }}" alt="" />
</a>
<a
href="https://www.youtube.com/@mathesar_org"
class="hover:opacity-70 text-2xl transition-colors icon-link"
aria-label="Visit Mathesar's YouTube Channel"
target="_blank"
>
<img class="invert" src="assets/youtube-logo.svg" alt="" />
<img class="invert" src="{{ '/assets/youtube-logo.svg' | relative_url }}" alt="" />
</a>
<a
href="https://discord.gg/enaKqGn5xx"
class="hover:opacity-70 text-2xl transition-colors icon-link"
aria-label="Join Mathesar on Discord"
target="_blank"
>
<img class="invert" src="assets/discord-logo.svg" alt="" />
<img class="invert" src="{{ '/assets/discord-logo.svg' | relative_url }}" alt="" />
</a>
<a
href="https://www.reddit.com/r/mathesar_org/"
class="hover:opacity-70 text-2xl transition-colors icon-link"
aria-label="Visit the Mathesar subreddit"
target="_blank"
>
<img class="invert" src="assets/reddit-logo.svg" alt="" />
<img class="invert" src="{{ '/assets/reddit-logo.svg' | relative_url }}" alt="" />
</a>

<a href="/feed.xml" class="rss-feed-link" title="Subscribe to RSS Feed">

<img class="invert" src="{{ '/assets/rss-icon.svg' | relative_url }}" alt="" />
</a>

</div>
</nav>
</div>
Expand Down
32 changes: 32 additions & 0 deletions _includes/head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="keywords"
content="mathesar, database, data, postgresql, postgres, open source, free, software, data management, data analysis, data visualization"
/>

{% if page.description %}
<meta name="description" content="{{ page.description | strip_html }}" />
{% endif %} {% if page.image %}
<meta property="og:image" content="{{ page.image }}" />
{% endif %} {% seo %}
<meta
name="twitter:description"
content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}"
/>

<title>{{ page.title }}</title>

<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | relative_url }}" />
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'favicon-32x32.png' | relative_url }}" />
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'favicon-16x16.png' | relative_url }}" />

<link
rel="stylesheet"
type="text/css"
href="{{ 'assets/main.css' | relative_url }}"
/>
{% if site.tags != "" %} {% include collecttags.html %} {% endif %}
</head>

2 changes: 1 addition & 1 deletion _includes/hero.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div
class="hero px-4 lg:py-16 py-8 max-w-screen-xl mx-auto lg:mt-8 lg:grid lg:grid-cols-2 gap-[4rem] space-y-4 lg:space-y-0"
class="hero px-4 py-8 max-w-screen-xl mx-auto lg:mt-8 lg:grid lg:grid-cols-2 gap-[4rem] space-y-4 lg:space-y-0"
>
<div class="space-y-4 max-w-2xl">
<div class="mx-auto">
Expand Down
22 changes: 22 additions & 0 deletions _includes/latest-blog-post.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{% assign latest_post = site.posts.first %}
<div class="max-w-screen-xl mt-8 -mb-2 mx-auto px-4">

<a
href="{{ latest_post.url }}"
class="flex items-center block bg-blue-100 rounded space-x-2 hover:bg-blue-200 transition-colors
overflow-hidden shadow-sm
"
>
<h4 class="font-bold uppercase whitespace-nowrap text-xs bg-blue-500 text-white p-2">New on Our Blog</h4>
<div class="bg-stone-50 w-max rounded-full shrink-0 text-sm px-2 font-bold">
{{ latest_post.date | date: "%b %d, %Y" }}
</div>

<h4 class="font-bold whitespace-nowrap truncate lg:overflow-visible">{{ latest_post.title }}</h4>

<div class="truncate hidden lg:block">
{{ latest_post.excerpt | strip_html }}
</div>

</a>
</div>
22 changes: 22 additions & 0 deletions _includes/latest-posts.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<section class="angled lighter py-0">
<div class="space-y-8 px-4">
<div class="text-center space-y-4 max-w-2xl mx-auto">
<h3 class="text-4xl font-bold">Recent Blog Posts</h3>
</div>

{% assign post_count = site.posts | where_exp: "post", "post.url != page.url" | size %}
{% if post_count > 0 %}
<ul class="latest-posts-list mx-auto gap-4 lg:flex justify-center">
{% for post in site.posts limit:3 %}
{% if post.url != page.url %}
{% include blog_card.html post=post size='small' %}
{% endif %}
{% endfor %}
</ul>
{% else %}
<div class="text-center">
<p>No recent posts available.</p>
</div>
{% endif %}
</div>
</section>
Loading

0 comments on commit c4a05e8

Please sign in to comment.