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>
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>
Since, a image file will always contain a dot and a three letter
extension at least (ex: `.jpg`, `.png`, `.jpeg`, etc). Therefore we can
safely set the limit up to 4.
fixes#1096
The default setting `media="none"` disables code highlighting. This
works OK when we have `enable_darkmode: true` in `config.yml` as the
code handling the dark/light theme switching takes care of setting
`media=""` for the preferred theme.
However, setting `enable_darkmode: false` prevents importing `theme.js`
which in turn prevents said change thus the default highlighting stays
disabled.
Setting `media=""` by default enables the default highlighting when
`enable_darkmode` is false.
Fixes#929
* 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.
* Enable preview images on social media
This commit adds support for serving Open Graph meta tags inside the HTML head. When enabled, links to the page on social media will display a preview.
NB: twitter behaves somewhat differently and may require twitter card meta tags in addition to Open Graph.
https://ogp.me/
* Remove trailing whitespaces
* Support page-specific open graph social media previews
* Document open graph support in the readme
* Improve open graph support
George
Rohan Deb Sarkar
Carlos Morales
Maruan Al-Shedivat
Amir Pourmand
Viraj Thakkar
Rohan Deb Sarkar
José M. Requena Plens
Maruan
jkmacc-LANL
Roger Iyengar
JD
Dinesh Natesan
zt-chen
Maruan Al-Shedivat
George Oikonomou
