Tackled #1329 with [PurgeCSS](https://purgecss.com/).
Being talking with @varuniyer about using
[jekyll-uncss](https://github.com/episource/jekyll-uncss) to reduce css
file sizes by ditching unused classes. This approach have 3 main
problems:
1 - have some limitations as pointed
[here](https://github.com/alshedivat/al-folio/issues/1329#issuecomment-1546517327)
2 - last update to
[jekyll-uncss](https://github.com/episource/jekyll-uncss) was about 3
years ago, so it might have a few issues
3 - [uncss](https://github.com/uncss/uncss) haven't seem a new release
in a while, currently [lacking
maintenance](https://github.com/uncss/uncss/issues/459), and using some
deprecated libraries as seem here:
```
npm install -g uncss
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
```
I thought about giving PurgeCSS a go, since it has been more [actively
maintaned](https://github.com/FullHuman/purgecss), but
[jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) haven't.
For this, I needed to change to use some local libraries instead of
getting them via CDN. The good news is that it is quite effective in
reducing css file sizes. Comparing dir sizes with `du -hs
_site/assets/css/`:
| current | minify | PurgeCSS | PurgeCSS + minify |
| ------- | ------ | -------- | ----------------- |
| 1,1M | 988K | 456K | 420K |
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
When the WeChat icon in socials is clicked, a picture of your WeChat QR
code is shown in the center of the screen. The actual picture of your QR
code has to be uploaded.
Addressing #1395 but with a different solution from #1478, using
semantic versioning based on implementation found
[here](https://distresssignal.org/busting-css-cache-with-jekyll-md5-hash).
Implemented a way of calculating the hash for both a single file or
directory. This way we can calculate the hash for when there is a change
in the `_sass` dir, for example, or in the contents of a single file.
Examples of generated outputs of the plugin:
```
/al-folio/assets/css/main.css?d41d8cd98f00b204e9800998ecf8427e
/al-folio/assets/js/theme.js?96d6b3e1c3604aca8b6134c7afdd5db6
/al-folio/assets/js/dark_mode.js?9b17307bb950ffa2e34be0227f53558f
/al-folio/assets/js/no_defer.js?d633890033921b33e0ceb13d22340a9c
/al-folio/assets/js/common.js?acdb9690d7641b2f8d40529018c71a01
/al-folio/assets/js/copy_code.js?c9d9dd48933de3831b3ee5ec9c209cac
/al-folio/assets/img/prof_pic.jpg?974957d202f671e4fa6700c04e68deae
```
Signed-off-by: George Araujo <george.gcac@gmail.com>
This feature adds a horizontal bar under the top menu which tracks the
vertical scroll position. Such a feature can be useful to represent how
much is left to read on the current page more aesthetically.
As this is an optional feature, `enable_progressbar` must be set to
`true` in `_config.yml` to activate the functionality.
I am not the original author of this code. I just made it compatible
with the current version of the template at the time of this commit. The
original code was most likely authored by Pankaj Parashar in this
[post](https://css-tricks.com/reading-position-indicator/) made a few
years before the first inclusion in an `al-folio` site. Then, the code
was adapted for compatibility with the template at Anthony Plantanios'
site. Finally, I did
the last updates to have the code fit the new conventions used in the
project.
This was discussed in #557
Co-authored-by: rohandebsarkar <rohandebsarkar@gmail.com>
* Place js files after body tag
* Add Analytics to the end of script
* Minor nits and fixes
Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
* dark_mode.js was not being loaded on distill blog pages.
* Moved dark_mode.js and jquery.html to head.html to simplify/standardize dark mode/theming for other pages.
* Dark Mode + Theming
* Themes scss file created with default color scheme and dark color scheme.
* Logic for managing dark mode toggle added.
* Modified existing scss/html to work with theme toggling.
* Fixed hover issues
* Added enable_darkmode to configs.
* Added the requested option of disabling/enabling dark mode via config files.
George
Maruan
Johannes Hörner
Henry.W
Rohan Deb Sarkar
Carlos Morales
Rohan Deb Sarkar
Viraj Thakkar
José M. Requena Plens
Maruan Al-Shedivat
Amir Pourmand
JD
zt-chen
Mayank Kakodkar
Maruan Al-Shedivat
