Merge pull request #15 from elboulangero/bunch-of-improvements

Bunch of improvements

README.md

@@ -8,3 +8,47 @@ You can see a live demo [here](http://jvanz.github.io/)
 ![Screenshot](screenshot.png)
 
 Pull requests are welcome
+
+
+## Settings
+
+List of Pelican's settings that are supported by this theme. Refer to the
+[Pelican's documentation](https://docs.getpelican.com/en/stable/settings.html)
+for more details.
+
+- `FEED_*` and `*_FEED_*`
+- `DISPLAY_PAGES_ON_MENU`
+- `DISQUS_SITENAME`
+- `GOOGLE_ANALYTICS`
+- `GA_COOKIE_DOMAIN`
+- `SITESUBTITLE`
+- `MENUITEMS`
+- `SOCIAL`
+
+Additional settings:
+
+- `BIO` - short biography to display in the sidebar, eg. `Hello world`
+- `PROFILE_IMAGE` - image to display in the sidebar, eg. `avatar.png`
+- `FOOTER_TEXT` - footer to display in the sidebar, eg. `(C) 2020 Foo Bar`
+- `COLOR_THEME` - base colors for the theme, choose from `08` to `0f`,
+  refer to <https://github.com/poole/hyde> for details.
+- `FONT_AWESOME_CSS` - URL to get Font Awesome as CSS
+- `FONT_AWESOME_JS` - URL to get Font Awesome as Javascript
+- `FONT_ACADEMICONS` - set to `True` to fetch the [Academicons font](https://jpswalsh.github.io/academicons/)
+
+By default, the theme uses **Fork Awesome**, which is fetched from
+`cdn.jsdelivr.net`. Fork Awesome is a drop-in replacement for Font Awesome v4,
+but is not compatible with Font Awesome v5 and later, so if you want to use
+Font Awesome v5+, setting `FONT_AWESOME_CSS` is not enough, you will also need
+to modify the templates.
+
+
+## Authors
+
+- Original theme by [Mark Otto](https://github.com/mdo): <https://github.com/poole/hyde>
+- Ported to Pelican by [José Guilherme Vanz](https://github.com/jvanz)
+
+
+## License
+
+Released under the [MIT license](LICENSE)

static/css/hyde.css

@@ -91,39 +91,49 @@ html {
 .sidebar-about .profile-picture {
   margin: 0 auto;
   border-radius: 50%;
-  border: 2px solid #5b8da2;
+  border: 2px solid #0001;
   max-width: 5rem;
 }
 
 /* Sidebar nav */
 .sidebar-nav {
   margin-bottom: 1rem;
+  list-style: none;
+  padding-left: 0;
 }
-.sidebar-nav-item {
+.sidebar-social {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.sidebar-social-item {
   display: block;
-  padding: .25rem 0.5rem;
+  padding: .25rem 0.8rem;
-  background: #7dafc4;
+  background: #fff2;
   margin: 0 .2rem;
   border-radius: .25rem;
   text-transform: uppercase;
   font-size: .8rem;
   font-weight: bold;
-  float: left;
-  width: 17%;
 }
-a.sidebar-nav-item:hover,
+a.sidebar-social-item:hover,
-a.sidebar-nav-item:focus {
+a.sidebar-social-item:focus {
-  background: #6096ac;
+  background: #0001;
   text-decoration: none;
 }
-.sidebar-nav-item.active {
+.sidebar-social-item.active {
-  color: #6096ac;
+  color: #0001;
   background: #fff;
 }
-a.sidebar-nav-item.active:hover,
+a.sidebar-social-item.active:hover,
-a.sidebar-nav-item.active:focus {
+a.sidebar-social-item.active:focus {
   color: #fff;
 }
+.sidebar-footer {
+  font-size: .7rem;
+  margin-bottom: 0;
+  margin-top: .5rem;
+}
 
 /* Sticky sidebar
  *

templates/base.html

@@ -27,19 +27,25 @@
 		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/poole.css" />
 		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/hyde.css" />
 		<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/syntax.css" />
-		<link rel="stylesheet" href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css">
+		{% if FONT_AWESOME_JS %}
-		{% if FONT_AWESOME %}
+			<script src="{{ FONT_AWESOME_JS }}" crossorigin="anonymous"></script>
-			<script src="https://kit.fontawesome.com/{{ FONT_AWESOME }}.js" crossorigin="anonymous"></script>
+		{% elif FONT_AWESOME_CSS %}
+			<link rel="stylesheet" href="{{ FONT_AWESOME_CSS }}" crossorigin="anonymous">
 		{% else %}
-			<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" crossorigin="anonymous"></script>
+			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" crossorigin="anonymous">
+		{% endif %}
+		{% if FONT_ACADEMICONS %}
+			<link rel="stylesheet" href="https://cdn.rawgit.com/jpswalsh/academicons/master/css/academicons.min.css">
 		{% endif %}
 
-		<!-- Atom feed -->
+		<!-- Feeds -->
-		<link rel="alternate" type="application/atom+xml" title="{{ SITENAME }} (Feed)" href="{{ FEED_ALL_ATOM }}" />
+		{% include 'fragments/feeds.html' %}
+
+		<!-- Analytics -->
 		{% include 'fragments/google_analytics.html' %}
 	</head>
 
-	<body class="theme-base-0d">
+	<body class="theme-base-{{ COLOR_THEME if COLOR_THEME else '0d' }}">
 		{% include 'sidebar.html' %}
 		<div class="content container">
 			{% block content %}

templates/fragments/disqus.html

@@ -3,9 +3,10 @@
 <script type="text/javascript">
 	var disqus_shortname = '{{ DISQUS_SITENAME }}';
 	(function() {
-	 			var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+		var d = document, s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;
-	 			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+		s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
-	 			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+		s.setAttribute('data-timestamp', +new Date());
+		(d.head || d.body).appendChild(s);
 	})();
 </script>
 <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

templates/fragments/feeds.html

@@ -0,0 +1,24 @@
+{% if FEED_ALL_ATOM %}
+<link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
+{% endif %}
+{% if FEED_ALL_RSS %}
+<link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Full RSS Feed" />
+{% endif %}
+{% if FEED_ATOM %}
+<link href="{{ FEED_DOMAIN }}/{%if FEED_ATOM_URL %}{{ FEED_ATOM_URL }}{% else %}{{ FEED_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
+{% endif %}
+{% if FEED_RSS %}
+<link href="{{ FEED_DOMAIN }}/{% if FEED_RSS_URL %}{{ FEED_RSS_URL }}{% else %}{{ FEED_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
+{% endif %}
+{% if CATEGORY_FEED_ATOM and category %}
+<link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_ATOM_URL %}{{ CATEGORY_FEED_ATOM_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_ATOM.format(slug=category.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Categories Atom Feed" />
+{% endif %}
+{% if CATEGORY_FEED_RSS and category %}
+<link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_RSS_URL %}{{ CATEGORY_FEED_RSS_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_RSS.format(slug=category.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" />
+{% endif %}
+{% if TAG_FEED_ATOM and tag %}
+<link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_ATOM_URL %}{{ TAG_FEED_ATOM_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_ATOM.format(slug=tag.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Tags Atom Feed" />
+{% endif %}
+{% if TAG_FEED_RSS and tag %}
+<link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
+{% endif %}

templates/fragments/google_analytics.html

@@ -3,8 +3,9 @@
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- 			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-			ga('create', '{{ GOOGLE_ANALYTICS }}', 'auto');
+
+ga('create', '{{ GOOGLE_ANALYTICS }}', '{{ GA_COOKIE_DOMAIN if GA_COOKIE_DOMAIN else 'auto' }}');
 ga('send', 'pageview');
 </script>
 {% endif %}

templates/index.html

@@ -4,8 +4,8 @@
 	<div class="posts">
 		{% for article in articles_page.object_list %}
 			<div class="post">
-				<h1 class="post-title" href="{{ SITEURL }}/{{ article.url }}#{{ article.slug }}">
+				<h1 class="post-title" href="{{ SITEURL }}/{{ article.url }}">
-					<a href="{{ SITEURL }}/{{ article.url }}#{{ article.slug }}">{{ article.title }}</a>
+					<a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
 				</h1>
 				<span class="post-date">{{ article.locale_date }}</span>
 				<p>

templates/sidebar.html

@@ -12,11 +12,25 @@
 			<p class="lead">{{ BIO }} </p>
 			<p></p>
 		</div>
-		<nav class="sidebar-nav">
+		{% if MENUITEMS or DISPLAY_PAGES_ON_MENU %}
+			<ul class="sidebar-nav">
+			{% if MENUITEMS %}
+				{% for title, url in MENUITEMS %}
+					<li><a href="{{ SITEURL }}/{{ url }}">{{ title }}</a></li>
+				{% endfor %}
+			{% endif %}
+			{% if DISPLAY_PAGES_ON_MENU %}
+				{% for p in pages %}
+					<li><a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
+				{% endfor %}
+			{% endif %}
+			</ul>
+		{% endif %}
+		<nav class="sidebar-social">
 			{% for name, link in SOCIAL %}
 				{% if name == 'email' %}
-					<a class="sidebar-nav-item" href="mailto:{{ link }}">
+					<a class="sidebar-social-item" href="mailto:{{ link }}">
-						<i class="fas fa-envelope"></i>
+						<i class="fa fa-envelope"></i>
 					</a>
 				{% elif name in ['academia', 'acclaim', 'acm', 'acmdl', 'ads', 'arxiv',
 						 'biorxiv', 'ceur', 'coursera', 'cv', 'dataverse',
@@ -26,18 +40,21 @@
 						 'osf', 'overleaf', 'philpapers', 'piazza', 'publons',
 						 'pubmed', 'researcherid', 'scirate', 'semantic-scholar',
 						 'springer', 'zotero'] %}
-					<a class="sidebar-nav-item" href="{{ link }}">
+					<a class="sidebar-social-item" href="{{ link }}">
 						<i class="ai ai-{{ name }}"></i>
 					</a>
 				{% else %}
-					<a class="sidebar-nav-item" href="{{ link }}">
+					<a class="sidebar-social-item" href="{{ link }}">
-						<i class="fab fa-{{ name }}"></i>
+						<i class="fa fa-{{ name }}"></i>
 					</a>
 				{% endif %}
 			{% endfor %}
-			<a class="sidebar-nav-item" href="{{ FEED_ALL_ATOM }}">
+			<a class="sidebar-social-item" href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM if FEED_ALL_ATOM else FEED_ALL_RSS }}">
-				<i class="fas fa-rss"></i>
+				<i class="fa fa-rss"></i>
 			</a>
 		</nav>
+		{% if FOOTER_TEXT %}
+			<p class="sidebar-footer">{{ FOOTER_TEXT }}</p>
+		{% endif %}
 	</div>
 </div>