Skip to content

Commit 738791a

Browse files
committed
Update README
1 parent 938b22e commit 738791a

13 files changed

+185
-49
lines changed

CONTRIBUTING.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Contributing to al-folio
2+
Thank you for considering to contribute to al-folio!
3+
4+
5+
## Pull Requests
6+
We welcome your pull requests (PRs).
7+
For minor fixes (e.g., documentation improvements), feel free to submit a PR directly.
8+
If you would like to implement a new feature or a bug, please make sure you (or someone else) has opened an appropriate issue first; in your PR, please mention the issue it addresses.
9+
10+
11+
## Issues
12+
We use GitHub issues to track bugs and feature requests.
13+
Before submitting an issue, please make sure:
14+
15+
1. You have read [the FAQ section](https://github.com/alshedivat/al-folio#faq) of the README and your question is NOT addressed there.
16+
2. You have done your best to ensure that your issue is NOT a duplicate of one of [the previous issues](https://github.com/alshedivat/al-folio/issues).
17+
3. Your issue is either a bug (unexpected/undesirable behavior) or a feature request.
18+
If it is just a question, please ask it on [gitter](https://gitter.im/alshedivat/al-folio).
19+
20+
When submitting an issue, please make sure to use the appropriate template.
21+
22+
23+
## License
24+
By contributing to al-folio, you agree that your contributions will be licensed
25+
under the LICENSE file in the root directory of the source tree.

LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2018 Maruan Al-Shedivat.
3+
Copyright (c) 2020 Maruan Al-Shedivat.
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy of
66
this software and associated documentation files (the "Software"), to deal in

README.md

+157-47
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,20 @@
55
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/alshedivat/al-folio/blob/master/LICENSE)
66
[![gitter](https://badges.gitter.im/alshedivat/al-folio.svg)](https://gitter.im/alshedivat/al-folio?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
77

8-
A simple and clean [Jekyll](https://jekyllrb.com/) theme for academics.
8+
A simple, clean, and responsive [Jekyll](https://jekyllrb.com/) theme for academics.
99

10-
[![Screenshot](assets/img/full-screenshot.png)](https://alshedivat.github.io/al-folio/)
10+
[![Preview](assets/img/al-folio-preview.png)](https://alshedivat.github.io/al-folio/)
1111

12-
Originally, **al-folio** was based on the [\*folio theme](https://github.com/bogoli/-folio) (published by [Lia Bogoev](http://liabogoev.com) and under the MIT license).
13-
Since then, it got a full re-write of the styles and many additional cool features.
14-
The emphasis is on whitespace, transparency, and academic usage: [theme demo](https://alshedivat.github.io/al-folio/).
1512

1613
## Getting started
1714

1815
For more about how to use Jekyll, check out [this tutorial](https://www.taniarascia.com/make-a-static-website-with-jekyll/).
1916
Why Jekyll? Read this [blog post](https://karpathy.github.io/2014/07/01/switching-to-jekyll/)!
2017

18+
2119
### Installation
2220

23-
Assuming you have [Ruby](https://www.ruby-lang.org/en/downloads/) and [Bundler](https://bundler.io/) installed on your system (*hint: for ease of managing ruby gems, consider using [rbenv](https://github.com/rbenv/rbenv)*), first fork the theme from `github.com:alshedivat/al-folio` to `github.com:<your-username>/<your-repo-name>` and do the following:
21+
Assuming you have [Ruby](https://www.ruby-lang.org/en/downloads/) and [Bundler](https://bundler.io/) installed on your system (*hint: for ease of managing ruby gems, consider using [rbenv](https://github.com/rbenv/rbenv)*), first [fork](https://guides.github.com/activities/forking/) the theme from `github.com:alshedivat/al-folio` to `github.com:<your-username>/<your-repo-name>` and do the following:
2422

2523
```bash
2624
$ git clone git@github.com:<your-username>/<your-repo-name>.git
@@ -43,80 +41,192 @@ Using `master` for deployment is a convention for [user and organization pages](
4341
**Note:** when deploying your user or organization page, make sure the `_config.yml` has `url` and `baseurl` fields as follows.
4442

4543
```
46-
url: # should be empty
44+
url: # should be empty
4745
baseurl: # should be empty
4846
```
4947

50-
### Usage
5148

52-
Note that `_pages/about.md` is built to index.html in the published site. There is therefore no need to have a separate index page for the project. If an index page does exist in the root directory then this will prevent `_pages/about.md` from being added to the built site.
49+
### Upgrading from a previous version
50+
51+
If you installed **al-folio** as described above, you can upgrade to the latest version as follows:
52+
53+
```bash
54+
# Assuming the current directory is <your-repo-name>
55+
$ git remote add upstream https://github.com/alshedivat/al-folio.git
56+
$ git fetch upstream
57+
$ git rebase upstream/v0.3
58+
```
59+
60+
If you have extensively customized a previous version, it might be trickier to upgrade.
61+
You can still follow the steps above, but `git rebase` may result in merge conflicts that must be resolved.
62+
See [git rebase manual](https://help.github.com/en/github/using-git/about-git-rebase) and how to [resolve conflicts](https://help.github.com/en/github/using-git/resolving-merge-conflicts-after-a-git-rebase) for more information.
63+
If rebasing is too complicated, we recommend to re-install the new version of the theme from scratch and port over your content and changes from the previous version manually.
64+
5365

5466
## Features
5567

56-
#### Ergonomic Publications
68+
### Publications
5769

5870
Your publications page is generated automatically from your BibTex bibliography.
5971
Simply edit `_bibliography/papers.bib`.
6072
You can also add new `*.bib` files and customize the look of your publications however you like by editing `_pages/publications.md`.
6173

6274
Keep meta-information about your co-authors in `_data/coauthors.yml` and Jekyll will insert links to their webpages automatically.
6375

64-
#### Collections
65-
This Jekyll theme implements collections to let you break up your work into categories.
66-
The example is divided into news and projects, but easily revamp this into apps, short stories, courses, or whatever your creative work is.
76+
<p align="center"><img src="assets/img/publications-screenshot.png" width=800></p>
6777

68-
> To do this, edit the collections in the `_config.yml` file, create a corresponding folder, and create a landing page for your collection, similar to `_pages/projects.md`.
6978

70-
Two different layouts are included: the blog layout, for a list of detailed descriptive list of entries, and the projects layout.
71-
The projects layout overlays a descriptive hoverover on a background image.
72-
If no image is provided, the square is auto-filled with the chosen theme color.
73-
Thumbnail sizing is not necessary, as the grid crops images perfectly.
79+
### Collections
7480

75-
#### Theming
76-
Six beautiful theme colors have been selected to choose from.
77-
The default is purple, but quickly change it by editing `$theme-color` variable in the `_sass/variables.scss` file (line 72).
78-
Other color variables are listed there, as well.
81+
This Jekyll theme implements `collections` to let you break up your work into categories.
82+
The theme comes with two default collections: `news` and `projects`.
83+
Items from the `news` collection are automatically displayed on the home page.
84+
Items from the `projects` collection are displayed on a responsive grid on projects page.
85+
86+
<p align="center"><img src="assets/img/projects-screenshot.png" width=700></p>
87+
88+
You can easily create your own collections, apps, short stories, courses, or whatever your creative work is.
89+
To do this, edit the collections in the `_config.yml` file, create a corresponding folder, and create a landing page for your collection, similar to `_pages/projects.md`.
90+
91+
92+
### Layouts
93+
94+
**al-folio** comes with stylish layouts for pages and blog posts.
95+
96+
#### The iconic style of Distill
97+
98+
The theme allows you to create blog posts in the [distill.pub](https://distill.pub/) style:
99+
100+
<p align="center"><a href="https://alshedivat.github.io/al-folio/blog/2018/distill/" target="_blank"><img src="assets/img/distill-screenshot.png" width=700></a></p>
101+
102+
For more details on how to create distill-styled posts using `<d-*>` tags, please refer to [the example](https://alshedivat.github.io/al-folio/blog/2018/distill/).
103+
104+
#### Full support for math & code
105+
106+
**al-folio** supports fast math typesetting through [KaTeX](https://katex.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes):
107+
108+
<p align="center">
109+
<a href="https://alshedivat.github.io/al-folio/blog/2015/math/" target="_blank"><img src="assets/img/math-screenshot.png" width=450></a>
110+
<a href="https://alshedivat.github.io/al-folio/blog/2015/code/" target="_blank"><img src="assets/img/code-screenshot.png" width=450></a>
111+
</p>
79112

80113
#### Photos
81-
Photo formatting is made simple using rows of a 3-column system.
82-
Make photos 1/3, 2/3, or full width.
83-
Easily create beautiful grids within your blog posts and projects pages:
114+
115+
Photo formatting is made simple using [Bootstrap's grid system](https://getbootstrap.com/docs/4.4/layout/grid/).
116+
Easily create beautiful grids within your blog posts and project pages:
84117

85118
<p align="center">
86119
<a href="https://alshedivat.github.io/al-folio/projects/1_project/">
87120
<img src="assets/img/photos-screenshot.png" width="75%">
88121
</a>
89122
</p>
90123

91-
#### Code Highlighting
92-
This theme implements Jekyll's built in code syntax highlighting with Pygments.
93-
Just use the liquid tags `{% highlight python %}` and `{% endhighlight %}` to delineate your code:
94124

95-
<p align="center">
96-
<a href="https://alshedivat.github.io/al-folio/blog/2015/code/">
97-
<img src="assets/img/code-screenshot.png" width="75%">
98-
</a>
99-
</p>
125+
### Other features
126+
127+
#### Theming
128+
Six beautiful theme colors have been selected to choose from.
129+
The default is purple, but you can quickly change it by editing `$theme-color` variable in the `_sass/variables.scss` file.
130+
Other color variables are listed there as well.
100131

101132
#### Social media previews
102-
The al-folio theme optionally supports preview images on social media.
103-
To enable this functionality you will need to set `serve_og_meta` to `true` in
104-
your `_config.yml`. Once you have done so, all your site's pages will include
105-
Open Graph data in the HTML head element.
106-
107-
You will then need to configure what image to display in your site's social
108-
media previews. This can be configured on a per-page basis, by setting the
109-
`og_image` page variable. If for an individual page this variable is not set,
110-
then the theme will fall back to a site-wide `og_image` variable, configurable
111-
in your `_config.yml`. In both the page-specific and site-wide cases, the
112-
`og_image` variable needs to hold the URL for the image you wish to display in
113-
social media previews.
133+
**al-folio** supports preview images on social media.
134+
To enable this functionality you will need to set `serve_og_meta` to `true` in your `_config.yml`.
135+
Once you have done so, all your site's pages will include Open Graph data in the HTML head element.
136+
137+
You will then need to configure what image to display in your site's social media previews.
138+
This can be configured on a per-page basis, by setting the `og_image` page variable.
139+
If for an individual page this variable is not set, then the theme will fall back to a site-wide `og_image` variable, configurable in your `_config.yml`.
140+
In both the page-specific and site-wide cases, the `og_image` variable needs to hold the URL for the image you wish to display in social media previews.
141+
114142

115143
## Contributing
116144

117-
Feel free to contribute new features and theme improvements by sending a pull request.
118-
Style improvements and bug fixes are especially welcome.
145+
Contributions to al-folio are very welcome!
146+
Before you get started, please take a look at [the guidelines](CONTRIBUTING.md).
147+
148+
If you would like to improve documentation, add your webpage to the list below, or fix a minor inconsistency or bug, please feel free to send a PR directly to `master`.
149+
For more complex issues/bugs or feature requests, please open an issue using the appropriate template.
150+
151+
152+
## Users of al-folio
153+
154+
The community of **al-folio** users is growing!
155+
Academics around the world use this theme for their homepages, blogs, lab pages, as well as webpages for courses, workshops, conferences, meetups, and more.
156+
Check out the community webpages below.
157+
Feel free to add your own page(s) by sending a PR.
158+
159+
<table>
160+
<tr>
161+
<td>Academics</td>
162+
<td>
163+
<a href="http://maruan.alshedivat.com" target="_blank">★</a>
164+
<a href="https://maithraraghu.com" target="_blank">★</a>
165+
<a href="http://platanois.org" target="_blank">★</a>
166+
<a href="https://otiliastr.github.io" target="_blank">★</a>
167+
<a href="https://www.maths.dur.ac.uk/~sxwc62/" target="_blank">★</a>
168+
<a href="http://jessachandler.com/" target="_blank">★</a>
169+
<a href="https://mayankm96.github.io/" target="_blank">★</a>
170+
<a href="https://markdean.info/" target="_blank">★</a>
171+
<a href="https://kakodkar.github.io/" target="_blank">★</a>
172+
<a href="https://sahirbhatnagar.com/" target="_blank">★</a>
173+
<a href="https://spd.gr/" target="_blank">★</a>
174+
<a href="https://jay-sarkar.github.io/" target="_blank">★</a>
175+
<a href="https://aborowska.github.io/" target="_blank">★</a>
176+
<a href="https://aditisgh.github.io/" target="_blank">★</a>
177+
<a href="https://alexhaydock.co.uk/" target="_blank">★</a>
178+
<a href="https://alixkeener.net/" target="_blank">★</a>
179+
<a href="https://andreea7b.github.io/" target="_blank">★</a>
180+
<a href="https://rishabhjoshi.github.io/" target="_blank">★</a>
181+
<a href="https://sheelabhadra.github.io/" target="_blank">★</a>
182+
<a href="https://giograno.me/" target="_blank">★</a>
183+
<a href="https://immsrini.github.io/" target="_blank">★</a>
184+
<a href="https://apooladian.github.io/" target="_blank">★</a>
185+
<a href="https://chinmoy-dutta.github.io/" target="_blank">★</a>
186+
</td>
187+
</tr>
188+
<tr>
189+
<td>Labs</td>
190+
<td>
191+
<a href="https://www.haylab.caltech.edu/" target="_blank">★</a>
192+
<a href="https://sjkimlab.github.io/" target="_blank">★</a>
193+
<a href="https://systemconsultantgroup.github.io/scg-folio/" target="_blank">★</a>
194+
</td>
195+
</tr>
196+
<tr>
197+
<td>Courses</td>
198+
<td>
199+
<a href="https://sailinglab.github.io/pgm-spring-2019/" target="_blank">CMU PGM 2019</a>
200+
</td>
201+
</tr>
202+
<tr>
203+
<td>Conferences/workshops</td>
204+
<td>
205+
ML Retrospectives (<a href="https://ml-retrospectives.github.io/neurips2019/" target="_blank">NeurIPS 2019</a>, <a href="https://ml-retrospectives.github.io/icml2020/" target="_blank">ICML 2020</a>)
206+
</td>
207+
</tr>
208+
</table>
209+
210+
211+
## FAQ
212+
213+
Here are some frequently asked questions.
214+
If you have a different question, please ask on [gitter](https://gitter.im/alshedivat/al-folio).
215+
216+
1. **Q:** When I preview my website locally everything looks great, but when I deploy it on GitHub bibliography Liquid tags are not recognized.
217+
How do I fix this? <br>
218+
**A:** GitHub Pages rendering does not support certain Jekyll plugins, and `jekyll-scholar` that we use to render bibliography is one of them. Please make sure you deploy your website to GitHub using `bin/deploy` script that circumvents the issue.
219+
220+
2. **Q:** When I deploy my fork of al-folio, it says `Deployed successfully!`
221+
But when I open `<my-github-username>.github.io`, I get `Page not found (404)` error.
222+
How do I fix this? <br>
223+
**A:** For personal webpages, please run `bin/deploy --user`.
224+
(See also relevant past issues: [#5](https://github.com/alshedivat/al-folio/issues/5), [#49](https://github.com/alshedivat/al-folio/issues/49), [#86](https://github.com/alshedivat/al-folio/issues/86).)
225+
119226

120227
## License
121228

122229
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
230+
231+
Originally, **al-folio** was based on the [\*folio theme](https://github.com/bogoli/-folio) (published by [Lia Bogoev](http://liabogoev.com) and under the MIT license).
232+
Since then, it got a full re-write of the styles and many additional cool features.

_sass/_layout.scss

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
body {
66
padding-bottom: 70px;
7+
color: $text-color;
78
}
89

910
body.fixed-top-nav {

_sass/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,4 @@ $grey-color-dark: darken($grey-color, 25%);
3232
$theme-color: $purple-color;
3333

3434
$link-color: $theme-color;
35-
$text-color: #111111 !default;
35+
$text-color: #111 !default;

assets/img/al-folio-preview.png

800 KB
Loading

assets/img/code-screenshot.png

135 KB
Loading

assets/img/distill-screenshot.png

186 KB
Loading

assets/img/full-screenshot.png

-595 KB
Binary file not shown.

assets/img/math-screenshot.png

188 KB
Loading

assets/img/photos-screenshot.png

-877 KB
Loading

assets/img/projects-screenshot.png

842 KB
Loading
211 KB
Loading

0 commit comments

Comments
 (0)