diff --git a/README.md b/README.md index 906892e9..520eb354 100644 --- a/README.md +++ b/README.md @@ -1,91 +1,62 @@ -# [Minimal Mistakes Jekyll theme](https://mmistakes.github.io/minimal-mistakes/) +# Personal Blog on Minimal Mistakes -[![LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/DiogoRibeiro7/DiogoRibeiro7.github.io/master/LICENSE) +[![LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![Hosted with GH Pages](https://img.shields.io/badge/Hosted_with-GitHub_Pages-blue?logo=github&logoColor=white)](https://pages.github.com/) [![Made with GH Actions](https://img.shields.io/badge/CI-GitHub_Actions-blue?logo=github-actions&logoColor=white)](https://github.com/features/actions) -[![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%204.3-blue.svg)](https://jekyllrb.com/) +This repository contains the source code for my website built with the +[Minimal Mistakes](https://mmistakes.github.io/minimal-mistakes/) Jekyll theme. +It also includes a few helper scripts to clean up Markdown front matter and +run tests. -[![Ruby Version](https://img.shields.io/badge/ruby-3.1-blue)](https://www.ruby-lang.org) -[![Ruby gem](https://img.shields.io/gem/v/minimal-mistakes-jekyll.svg)](https://rubygems.org/gems/minimal-mistakes-jekyll) +## Requirements - -Minimal Mistakes is a flexible two-column Jekyll theme, perfect for building personal sites, blogs, and portfolios. As the name implies, styling is purposely minimalistic to be enhanced and customized by you :smile:. - -## Setup - -This repository contains a few helper scripts for processing Markdown posts. -Install the Python dependencies listed in `requirements.txt` with: +The site relies on Ruby, Node and Python tooling. Install dependencies with: ```bash +# Python packages for helper scripts and tests pip install -r requirements.txt -``` -To work with the JavaScript that powers the theme you'll also need Node -dependencies. Install them with: - -```bash +# JavaScript dependencies npm install -``` - -This project uses **npm** for managing JavaScript dependencies and tracks -exact versions in `package-lock.json`. - -Bundled JavaScript is compiled from the source files in `assets/js/`. Run the -following to create `main.min.js` (minified with a banner) or watch for changes: - -```bash -npm run build:js # minify and add banner -npm run watch:js # optional: automatically rebuild on changes -``` - -## CSS linting - -Lint all SCSS files with [Stylelint](https://stylelint.io/): -```bash -npm run lint:css +# Ruby gems for Jekyll +bundle install ``` -## Local development +## Development -Install Ruby gems specified in the `Gemfile` with: +Use the following commands while working on the site: ```bash -bundle install -``` +# start a local server at http://localhost:4000/ +bundle exec jekyll serve -Serve the site locally with: +# rebuild JavaScript when files change +npm run watch:js -```bash -bundle exec jekyll serve +# lint stylesheets +npm run lint:css ``` +## Tests -## Running tests - -Install the Python dependencies and execute: +Front matter utilities are covered by a small `pytest` suite. Run the tests with: ```bash pytest ``` -GitHub Actions already runs these commands automatically during deployments. - -# ToDo - -~~Have a consistency in the font and font sizes (ideally you want to use 2 fonts. One for the header/subtitle and one for the text. You can use this kind of website https://fontjoy.com/ which allow you to pair fonts).~~ - -Choose a few main colours for your site (I would suggest black/white/grey but not in solid. You can also use this kind of site: https://coolors.co/palettes/popular/2a4849). -~~Reduce then size of the homepage top image (ideally you want your first articles to be visible on load and not hidden below the fold).~~ +GitHub Actions executes the same tests on every push. -~~Restyle your links (ideally the link should be back with no underline and you add a css style on hover)~~ +## Roadmap -~~Center pagination~~ +Planned improvements are organised as sprints in [ROADMAP.md](ROADMAP.md). +Highlights include: -~~Restyle your article detail page breadcrumbs. You want them to be less visible (I would suggest a light grey colour here)~~ +- refining typography and the colour palette +- restructuring the homepage with card‑style articles +- adding search and dark mode +- optimising performance and accessibility -Right now at the top of the detail page, you have your site breadcrumbs, a title then another title and the font sizes are a bit off and it is hard to understand the role of the second title. I would reorganise this to provide a better understanding to the reader -On the detail page, I would suggest you put the `You may also enjoy` straight at the end of the article. Right now it is after comments and you can lose engagement on your site. -I would suggest you remove your description from the detail page. I think having it on the home page is enough. You can have a smaller introduction if needed with a read more button or link that will take the reader to a full page description of yourself and your skillset. That will allow you to tell more about yourself and why you do what you do -I will create card article with a hover animation (add some shape and background colour and ideally a header image for the card. The graphs you show me last week for example.) +Contributions are welcome! diff --git a/_config.yml b/_config.yml index bcea374e..52175138 100644 --- a/_config.yml +++ b/_config.yml @@ -86,7 +86,7 @@ facebook: username : app_id : publisher : -og_image : # Open Graph/Twitter default site image +og_image : /assets/images/data-science.png # For specifying social profiles # - https://developers.google.com/structured-data/customize/social-profiles social: diff --git a/_includes/archive-single.html b/_includes/archive-single.html index 37b8ec0e..5ebed744 100644 --- a/_includes/archive-single.html +++ b/_includes/archive-single.html @@ -11,12 +11,12 @@ {% endif %}
-
- {% if include.type == "grid" and teaser %} -
- {{ post.title }} -
- {% endif %} +
+{% if teaser %} +
+ {{ post.title }} +
+{% endif %}

{% if post.link %} {{ title }} Permalink diff --git a/_includes/head.html b/_includes/head.html index 2e166797..415a0a7f 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -20,7 +20,7 @@ - + {% if site.head_scripts %} {% for script in site.head_scripts %} diff --git a/_includes/page__hero.html b/_includes/page__hero.html index add43650..8d1b94ac 100644 --- a/_includes/page__hero.html +++ b/_includes/page__hero.html @@ -23,16 +23,16 @@ > {% if page.header.overlay_color or page.header.overlay_image %}
- +

{% if page.tagline %}

{{ page.tagline | markdownify | remove: "

" | remove: "

" }}

- {% elsif page.header.show_overlay_excerpt != false and page.excerpt %} + {% elsif page.header.show_overlay_excerpt != false and page.excerpt and page.collection != 'posts' %}

{{ page.excerpt | markdownify | remove: "

" | remove: "

" }}

{% endif %} {% include page__meta.html %} diff --git a/_layouts/single.html b/_layouts/single.html index ce76b699..47bca170 100644 --- a/_layouts/single.html +++ b/_layouts/single.html @@ -22,10 +22,12 @@ {% include sidebar.html %}
+ {% unless page.header.overlay_color or page.header.overlay_image %} {% if page.title %}

{% endif %} + {% endunless %} {% if page.subtitle %}

{{ page.subtitle }}

{% endif %} {% if page.excerpt %} @@ -108,4 +110,4 @@

{{ site.data.ui-text[site.locale].related_label {% if jekyll.environment == 'production' and site.comments.provider and page.comments %} {% include comments.html %} {% endif %} -

\ No newline at end of file + diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss index 24d1b1b5..80bd9c6a 100644 --- a/_sass/minimal-mistakes/_navigation.scss +++ b/_sass/minimal-mistakes/_navigation.scss @@ -17,6 +17,16 @@ animation: $intro-transition; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; + color: $muted-text-color; + + a { + color: inherit; + text-decoration: none; + + &:hover { + color: $text-color; + } + } @include breakpoint($x-large) { max-width: $x-large; @@ -43,6 +53,7 @@ .current { font-weight: bold; + color: $text-color; } } diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss index 597f6a77..15781858 100644 --- a/_sass/minimal-mistakes/_variables.scss +++ b/_sass/minimal-mistakes/_variables.scss @@ -32,8 +32,8 @@ $calisto: "Calisto MT", serif !default; $garamond: Garamond, serif !default; // Setting the fonts -$global-font-family: "Roboto", Helvetica, Arial, sans-serif; -$header-font-family: "Lora", "Times New Roman", serif; +$global-font-family: 'Inter', system-ui, sans-serif; +$header-font-family: 'Nunito Sans', system-ui, sans-serif; $caption-font-family: "Cardo, serif"; /* type scale */ @@ -73,7 +73,13 @@ $border-color: $lighter-gray !default; $form-background-color: $lighter-gray !default; $footer-background-color: $lighter-gray !default; -$primary-color: #6f777d !default; +$color-primary: #2a4849 !default; +$color-secondary: #6c757d !default; +$color-background: #f7f9fa !default; +$color-surface: #ffffff !default; +$color-accent: #ffca00 !default; + +$primary-color: $color-primary !default; $success-color: #3fa63f !default; $warning-color: #d67f05 !default; $danger-color: #ee5f5b !default; diff --git a/_sass/minimal-mistakes/skins/_air.scss b/_sass/minimal-mistakes/skins/_air.scss index 0e5360c3..733404ec 100644 --- a/_sass/minimal-mistakes/skins/_air.scss +++ b/_sass/minimal-mistakes/skins/_air.scss @@ -3,13 +3,14 @@ ========================================================================== */ /* Colors */ -$background-color: #eeeeee !default; -$text-color: #222831 !default; -$muted-text-color: #393e46 !default; -$primary-color: #0092ca !default; -$border-color: mix(#fff, #393e46, 75%) !default; +$background-color: $color-background !default; +$text-color: #2a2a2a !default; +$muted-text-color: $color-secondary !default; +$primary-color: $color-primary !default; +$accent-color: $color-accent !default; +$border-color: mix(#fff, $text-color, 85%) !default; $footer-background-color: $primary-color !default; -$link-color: #393e46 !default; +$link-color: $primary-color !default; $masthead-link-color: $text-color !default; $masthead-link-color-hover: $text-color !default; $navicon-link-color-hover: mix(#fff, $text-color, 80%) !default; diff --git a/assets/css/main.scss b/assets/css/main.scss index 27ef9982..ec9ea68f 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -134,3 +134,16 @@ a:hover { max-height: 40vh; object-fit: cover; } + +/* Card styles for archive items */ +.archive__item.card { + background: $background-color; + border-radius: $border-radius; + padding: 1em; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: transform 0.2s, box-shadow 0.2s; +} +.archive__item.card:hover { + transform: translateY(-4px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} diff --git a/robots.txt b/robots.txt index 406218e4..e67e070b 100644 --- a/robots.txt +++ b/robots.txt @@ -1,5 +1,5 @@ User-agent: * Disallow: -# Sitemap location -Sitemap: https://diogoribeiro7.github.io/sitemap.xml \ No newline at end of file +# Sitemap +Sitemap: https://diogoribeiro7.github.io/sitemap.xml diff --git a/tests/test_fix_date.py b/tests/test_fix_date.py index 33cecd00..b727fd54 100644 --- a/tests/test_fix_date.py +++ b/tests/test_fix_date.py @@ -1,13 +1,14 @@ import os import sys import tempfile -import frontmatter -import pytest - -# Add the project root to sys.path -sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..'))) +# Add the project root to sys.path so local modules can be imported when +# running the tests via the `pytest` entry point (which doesn't prepend the +# working directory to `sys.path`). +sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))) +import frontmatter +import pytest import fix_date