rohandebsarkar / academic-folio

WIP: Hugo port of the popular Jekyll theme al-folio

academic-folio

Work in Progress: Hugo port of the popular Jekyll theme al-folio

Installation

To Install this theme for your own:

1. Fork this Repository
2. Clone it into your own system
3. Switch to branch publish_site
4. Make the changes and commit
5. Make sure your website is published correctly

We recommend not to change main branch as it would be harder to incorporate upstream changes into your repo.

Features

• Customizable Color palettes (see data/themes)
• Blog Section
• News Section

academic-folio's Issues

Use Partial Cached to improve build performance

• https://www.regisphilibert.com/blog/2019/12/hugo-partial-series-part-1-caching-with-partialcached/
• https://gohugo.io/functions/partialcached/
• https://gohugo.io/troubleshooting/build-performance/

Contribution Welcome!

Looking for maintainers to maintain this Hugo theme in the long run!

Enhacement: Toggle Dark / Light mode

Is there any reason for not having an icon for dark/light mode?

Blog page returns 404

This is what we see when go to /blog URL .

It shouldn't be the case. It should behave like here

Add Lighthouse integration

Add Lighthouse integration to constantly monitor page performance in each step.

GitHub action: https://github.com/marketplace/actions/lighthouse-check

Social icons

I will be adding social icons later. This issue is to collect which social icons we should include now.
Comment with the social icons you would like to see.

Add related posts section to blog posts

Related: alshedivat/al-folio#1168

Hugo has this implemented by default. Documentation: https://gohugo.io/content-management/related/

Add Makefile

check:
	pre-commit run --all-files

serve: 
	hugo server --port 8989

By adding a makefile like this, we can use make check or make serve for easier access to commands.

Add Custom Color Palette

We should take a look at these files. It has implemented this feature.

https://github.com/themefisher/academia-hugo/tree/master/data/themes

https://github.com/themefisher/academia-hugo/tree/master/layouts/partials/functions/parse_theme.html

https://github.com/themefisher/academia-hugo/blob/master/assets/sass/main.scss

Add SonarCloud integration

• https://www.sonarsource.com/

Find Appropriate formatter for html files

Currently, All files except HTML files are formatted automatically by pre-commit.

I should find an HTML formatted which understands go language to format our hugo website. I haven't found any which does our job well.

Add `README.md`

Add a standard README.md file to the project root to welcome users the this theme.

Add docs

Add a separate list docs to show users how to use the theme.

More Space for horizontal scrollbar

We should add more space for the horizontal scrollbars. It is inside the word. It should be farther.

Like this

Automatically Detect default Preferred mode

• https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript

Currently, we have only dark and light modes. But we should have three modes: system, Light, and Dark, like this website.

Add Table of content for blogs

https://github.com/adityatelange/hugo-PaperMod/blob/master/layouts/partials/toc.html

Right to left support

Background Color Problem

What I see from Brave:

What I see from Microsoft Edge:

Add Meta-lists instead of lists

So, I have an Idea. We should have three meta-list modules.

• First one: Only title
• Second one: Title + Description
• Third one: Title + Description + Image

Then the user can choose where to use each module. We would eventually need to have these three list modules. So let's write it somehow so that it is flexible. I think we should give the user the ability to choose if he wants to include the image or description in each of the sections of the website.

You can also take a look at here.

Only title Sample

Title + Description:

Title + Description + Image

Add more color palettes

We can add more color palettes from these websites.

• https://m2.material.io/resources/color/
• https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/
• https://alwane.io/palettes

Add Docker Image

I should add a docker image. This repo needs npm and hugo.

Add better font for the theme

This is what al-folio uses.

• https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CRoboto+Slab:100,300,400,500,700%7CMaterial+Icons

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CRoboto+Slab:100,300,400,500,700%7CMaterial+Icons">

Add dependabot

https://github.blog/2020-06-01-keep-all-your-packages-up-to-date-with-dependabot/

Add Navbar like papermod (Remove Hamburger menu)

Take a look at this theme. I like the overall look and feel and I think I will add a color-theme similar to this.

I always hated hamburger menus on mobile. They are not good for accessibility. This Hugo-papermod theme has done a good approach and I like it.

I think we can let the users have the option to choose if they want to have this hamburger menu or not.

Add Pre-commit hook Java

• https://github.com/Lucas-C/pre-commit-hooks-java

Improve Accessibility score (at LightHouse)

I have to investigate how to choose better colors from the color palette to improve accessibility score of the website.

Github Pages Deployment

Hi, Unfortunately, netlify service is censored in my country. Is there any problem with github pages? Why not have them both?

Submit our Theme in HugoThemes

We should submit our theme in these two places.

• https://github.com/gohugoio/hugoThemesSiteBuilder
• https://github.com/stackbit/jamstackthemes

Both of them require theme.toml file (not theme.yaml).

Add breadcrumbs

https://github.com/adityatelange/hugo-PaperMod/blob/master/layouts/partials/breadcrumbs.html

Add distill templates

Inspiration: https://github.com/activatedgeek/distillpub

Add collapsible section in hugo theme

• https://stackoverflow.com/questions/71691219/add-collapsible-section-in-hugo