Compare commits

...

3 Commits

Author SHA1 Message Date
OCram85 6a84cef6a2
Fetch upstream (#5)
* fix(#744): Escape special characters in title (#745)

* add matt artist as sponsor

* Fix margin top alignment issue on Safari (#750)

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Remove references to any public Staticman API instance (#775)

* Update CHANGELOG.md

* Adding option for Medium Social Link at footer  (#784)

* Itch.io social link (#788)

* Update CHANGELOG.md

* Add support for Cloudflare analytics (#798)

* Include Reddit in share options of posts (#815)

* add search to the navbar using 'post_search' config param

* Update CHANGELOG.md

* ui: make sure search results dont have underline until hovered

* search feature: make sure page scrollbar disappears when searching but a scrollbar for search items shows if needed

* update changelog

Co-authored-by: Dmitry <dmitry.b.danilov@gmail.com>
Co-authored-by: Dean Attali <dean@attalitech.com>
Co-authored-by: Amy Troschinetz <lexicalunit@lexicalunit.com>
Co-authored-by: Dean Attali <daattali@gmail.com>
Co-authored-by: Vincent Tam <VincentTam@users.noreply.github.com>
Co-authored-by: Diksha Verma <112dikshaverma@gmail.com>
Co-authored-by: Emaleth <Emaleth@protonmail.com>
Co-authored-by: Ari Kalfus <dev@artis3nal.com>
Co-authored-by: Leedan <l33d4n@gmail.com>
Co-authored-by: Marco Blessing <marco.blessing@komm.one>
2021-08-02 17:02:35 +02:00
OCram85 5e52982867
Merge/2021 02 15 (#3)
* fix(#744): Escape special characters in title (#745)

* add matt artist as sponsor

* Fix margin top alignment issue on Safari (#750)

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Remove references to any public Staticman API instance (#775)

* Update CHANGELOG.md

Co-authored-by: Dmitry <dmitry.b.danilov@gmail.com>
Co-authored-by: Dean Attali <dean@attalitech.com>
Co-authored-by: Amy Troschinetz <lexicalunit@lexicalunit.com>
Co-authored-by: Dean Attali <daattali@gmail.com>
Co-authored-by: Vincent Tam <VincentTam@users.noreply.github.com>
2021-02-15 19:33:32 +01:00
OCram85 05c08afee7
Merge upstream updates (#2)
* fix(#744): Escape special characters in title (#745)

* add matt artist as sponsor

* Fix margin top alignment issue on Safari (#750)

* Update README.md

* Update README.md

* Update README.md

* Update README.md

Co-authored-by: Dmitry <dmitry.b.danilov@gmail.com>
Co-authored-by: Dean Attali <dean@attalitech.com>
Co-authored-by: Amy Troschinetz <lexicalunit@lexicalunit.com>
Co-authored-by: Dean Attali <daattali@gmail.com>
2021-01-23 20:40:54 +01:00
14 changed files with 271 additions and 32 deletions

View File

@ -1,3 +1,7 @@
## v5.0.0 (2020-11-21)
## 📅 21-08-08
Initial version of this SA edition implemented. It's based on `beautiful-jekyll 5.0.0` -> commit `8b41236`.
- 📌 Merge upstream changes to commit `30a757d
`
## 📅 v5.0.0 (2020-11-21)
- Initial version of this SA edition implemented. It's based on `beautiful-jekyll 5.0.0` -> commit `8b41236`.

View File

@ -1,11 +1,17 @@
## Unreleased version
- Added `post_search` config setting that creates a Search button in the navbar (older websites need to set `post_search: true` to enable this feature) (#770)
- Slightly reworked margins and position for avatar image to resolve an alignment issue on Safari.
- Changed the width at which the navbar collapses to a higher threshold because most modern non-mobile browsers are >1000px
- Fixed bug where navbar secondary level dropdown items didn't inherit te same colour as the primary navbar links
- Fixed bug where navbar secondary level dropdown items didn't inherit the same colour as the primary navbar links
- Fixed bug where the navbar "burger" collapsed button didn't always revert back to a light colour
- Fixed bug where using an image as a navbar title did not render in GitHub Project pages that did not have a custom domain
- Fixed issue where image thumbnails on the feed page were always forced into a square rather than maintaining a proper image aspect ratio
- Added support for Patreon in the social network links in the footer
- Added support for Patreon, Medium, and Itch.io in the social network links in the footer (#783, #788)
- Fixed bug where special characters in the title led to broken share tags (#744)
- Updated staticman from using v2 (public servers) to v3 (private servers) due to the public servers becoming obsolete (#775)
- Added support for Cloudflare Analytics (#797)
- Added Reddit in share options of posts (#815)
## v5.0.0 (2020-09-15)

View File

@ -31,7 +31,7 @@ with the hosting in [GDPR](https://gdpr.eu/) affected countries.
# Features
Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.
__Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.__
- **SIMPLE**: The primary goal of Beautiful Jekyll is to allow literally *anyone* to create a website in a few minutes.
- **Modern**: Uses the latest best practices and technologies to achieve nearly perfect scores on Google Chrome's Audit.
@ -41,20 +41,24 @@ Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the lates
- **Battle-tested**: By using Beautiful Jekyll, you'll be joining 50,000+ users enjoying this theme since 2015.
- **SEO and social media support**: Customize how your site looks on Google and when shared on social media.
- **Comments support**: Add comments to any page using either [Disqus](https://disqus.com/), [Facebook comments](https://developers.facebook.com/docs/plugins/comments), [Utterances](https://utteranc.es/), or [Staticman](https://staticman.net).
- **Tags**: Any blog post can be tagged with keywords, and an index page showing all the tags is automatically generated.
- **Tags**: Any blog post can be tagged with keywords, and an index page is automatically generated.
- **Analytics**: Easily integrate Google Analytics, or other analytics platforms, to track visits to your website.
- **Search**: Let users easily find any page using a Search button in the navigation bar.
- **Photos support**: Any page can have a full-width cover photo and thumbnail.
- **RSS**: An RSS feed is automatically created, so you can even host a podcast easily with Beautiful Jekyll.
<h2 id="sponsors">Sponsors 🏆</h2>
> There are no sponsors yet
Developing and maintaining Beautiful Jekyll takes a lot of time and effort - thank you to anyone who helps fund this effort!
[Become the first sponsor for Beautiful Jekyll and unlock special rewards\!](https://github.com/sponsors/daattali/sponsorships?tier_id=39856)
- [Matt Artist](https://mja00.dev/)
- [\_hyp3ri0n](https://hyperiongray.com)
[Become a sponsor for Beautiful Jekyll and unlock special rewards\!](https://github.com/sponsors/daattali/sponsorships?tier_id=39856)
# Build your website in 3 steps
There's a very easy way to use this theme, and there's a hard way. For most people (including myself!), I suggest going the easy route. If you're an advanced user and want to tinker with the hard way (using ruby gems), then [skip the easy way](https://github.com/daattali/beautiful-jekyll#the-hard-way-using-ruby-gems) if you know what you're doing.
There's a very easy way to use this theme, and there's a hard way. For most people (including myself!), the easy route is recommended. If you're an advanced user and want to tinker with the hard way (using ruby gems), then [skip the easy way](https://github.com/daattali/beautiful-jekyll#the-hard-way-using-ruby-gems) if you know what you're doing.
## The easy way (recommended!)
@ -74,9 +78,9 @@ Click on __*Settings*__ at the top (the cog icon) and on that page you'll have a
### 3. Customize your website settings
Edit the `_config.yml` file to change any settings you want. To edit the file, click on it to view the file and then click on the pencil icon to edit it (watch the video tutorial above if you're confused). The settings in the file are self-explanatory and I added comments inside the file to help you understand what each setting does. Any line that begins with a hashtag (`#`) is a comment, and the other lines are actual settings.
Edit the `_config.yml` file to change any settings you want. To edit the file, click on it to view the file and then click on the pencil icon to edit it (watch the video tutorial above if you're confused). The settings in the file are self-explanatory and there are comments inside the file to help you understand what each setting does. Any line that begins with a hashtag (`#`) is a comment, and the other lines are actual settings.
Note that in the video above I only edited one setting in the `_config.yml` file. **You should actually go through the rest of the settings as well. Don't be lazy, go through all the settings!**
Note that in the video above only one setting in the `_config.yml` file is edited. **You should actually go through the rest of the settings as well. Don't be lazy, go through all the settings!**
### 4. Congratulations! You have a website!
@ -90,11 +94,11 @@ If you followed the easy method above, then you already have your site and you c
# Plans
Beautiful Jekyll is, and always will be, free. But if you want to remove the Beautiful Jekyll ad from your website, use a Dark Mode skin, unlock other special rewards, or simply support my development efforts, [check out the different plans](https://beautifuljekyll.com/plans).
Beautiful Jekyll is, and always will be, free. But if you want to remove the Beautiful Jekyll ad from your website, use a Dark Mode skin, unlock other special rewards, or simply support the development efforts, [check out the different plans](https://beautifuljekyll.com/plans).
# Add your own content
To add pages to your site, you can either write a markdown file (`.md`) or you can write an HTML file. It's much easier to write markdown than HTML, so I suggest you do that ([here's a great tutorial](https://markdowntutorial.com/) if you need to learn markdown in 5 minutes).
To add pages to your site, you can either write a markdown file (`.md`) or you can write an HTML file. It's much easier to write markdown than HTML, so that's the recommended approach ([here's a great tutorial](https://markdowntutorial.com/) if you need to learn markdown in 5 minutes).
To see an example of a markdown file, click on any file that ends in `.md`, for example [`aboutme.md`](./aboutme.md). On that page you can see some nicely formatted text (there's a word in bold, a link, a few bullet points), and if you click on the pencil icon to edit the file, you'll see the markdown code that generated the pretty text. Very easy!
@ -208,7 +212,7 @@ Visit the [official FAQ page](https://beautifuljekyll.com/faq) for answers to co
Beautiful Jekyll is used by 50,000+ people with wildly varying degrees of web skills, so it's impossible to answer all the questions that may arise. For any question that's not specifically related to Beautiful Jekyll and is more about Jekyll or web development in general, the answer can often be found on Google, in the [Jekyll documentation](https://jekyllrb.com/), or on the [Jekyll support forum](https://talk.jekyllrb.com/).
To receive support, select one of the [different plans](https://beautifuljekyll.com/plans) Beautiful Jekyll offers.
To receive support, select one of the [different plans](https://beautifuljekyll.com/plans) Beautiful Jekyll offers. You can also use the [Discussions](https://github.com/daattali/beautiful-jekyll/discussions) area to try to get help from the community.
# Contributions

View File

@ -45,6 +45,7 @@ social-network-links:
twitter: daattali
patreon: DeanAttali
youtube: c/daattali
# medium: yourname
# reddit: yourname
# linkedin: daattali
# xing: yourname
@ -88,6 +89,9 @@ feed_show_excerpt: true
# Whether or not to show a list of tags below each post preview in the feed page
feed_show_tags: true
# Add a search button to the navbar
post_search: true
# The keywords to associate with your website, for SEO purposes
#keywords: "my,list,of,keywords"
@ -132,6 +136,9 @@ footer-link-col: "#404040"
# Fill in your Google Analytics ID to track your website using Google Analytics
#google_analytics: ""
# Fill in your Cloudflare Analytics beacon token to track your website using Cloudflare Analytics
#cloudflare_analytics: ""
# Google Tag Manager ID
#gtm: ""
@ -161,19 +168,19 @@ footer-link-col: "#404040"
# theme: github-light # Utterances theme
# label: blog-comments # Label that will be assigned to GitHub Issues created by Utterances
# To use Staticman comments, first invite `staticmanlab` as a collaborator to your repository and
# accept the invitation by going to `https://staticman3.herokuapp.com/v3/connect/github/<username>/<repo-name>`.
# Then uncomment the following section and fill in "repository" and "branch".
# If you want to use reCaptcha for staticman (optional for spam protection), then fill
# in the "siteKey" and "secret" parameters below and also in `staticman.yml`.
# See more details at https://staticman.net/
# To use Staticman comments, uncomment the following section. You may leave the reCaptcha
# section commented if you aren't using reCaptcha for spam protection.
# Using Staticman requires advanced knowledge, please consult
# https://github.com/eduardoboucas/staticman/ and https://staticman.net/ for further
# instructions. For any support with staticman please direct questions to staticman and
# not to BeautifulJekyll.
#staticman:
# repository : # GitHub username/repository eg. "daattali/beautiful-jekyll"
# branch : master # If you're not using `master` branch, then you also need to update the `branch` parameter in `staticman.yml`
# endpoint : # (optional) URL of your own deployment, with a trailing slash eg. https://<your-api>/v3/entry/github/ (will fallback to a public GitLab instance)
# reCaptcha:
# siteKey : # Use your own site key, you need to apply for one on Google
# secret : # ENCRYPT your password by going to https://staticman3.herokuapp.com/v3/encrypt/<your-site-secret>
# endpoint : # URL of your deployment, with a trailing slash eg. "https://<your-api>/v3/entry/github/"
# reCaptcha: # (optional, set these parameters in `staticman.yml` as well)
# siteKey : # You need to apply for a site key on Google
# secret : # Encrypt your password by going to https://<your-own-api>/v3/encrypt/<your-site-secret>
# --- Misc --- #

View File

@ -0,0 +1,8 @@
{% if site.cloudflare_analytics %}
<!-- Cloudflare Web Analytics -->
<script defer
src='https://static.cloudflareinsights.com/beacon.min.js'
data-cf-beacon='{"token": "{{ site.cloudflare_analytics}}"}'>
</script>
<!-- End Cloudflare Web Analytics -->
{% endif %}

View File

@ -4,19 +4,19 @@
{% capture title %}
{%- if page.share-title -%}
{{ page.share-title }}
{{ page.share-title | strip_html | xml_escape }}
{%- elsif page.title -%}
{{ page.title }}
{{ page.title | strip_html | xml_escape }}
{%- else -%}
{{ site.title }}
{{ site.title | strip_html | xml_escape }}
{%- endif -%}
{% endcapture %}
{% capture description %}
{%- if page.share-description -%}
{{ page.share-description }}
{{ page.share-description | strip_html | xml_escape }}
{%- elsif page.subtitle -%}
{{ page.subtitle }}
{{ page.subtitle | strip_html | xml_escape }}
{%- else -%}
{%- assign excerpt_length = site.excerpt_length | default: 50 -%}
{{ page.content | strip_html | xml_escape | truncatewords: excerpt_length | strip }}
@ -44,6 +44,7 @@
{% include gtag.html %}
{% include gtm_head.html %}
{% include google_analytics.html %}
{% include cloudflare_analytics.html %}
{% if layout.common-ext-css %}
{% for css in layout.common-ext-css %}

View File

@ -30,6 +30,14 @@
</li>
{%- endif -%}
{%- endfor -%}
{% if site.post_search %}
<li class="nav-item">
<a class="nav-link" id="nav-search-link" href="#" title="Search">
<span id="nav-search-icon" class="fa fa-search"></span>
<span id="nav-search-text">Search</span>
</a>
</li>
{%- endif -%}
</ul>
</div>
@ -50,3 +58,5 @@
{% endif %}
</nav>
{% include search.html %}

39
_includes/search.html Normal file
View File

@ -0,0 +1,39 @@
{% if site.post_search %}
<div id="beautifuljekyll-search-overlay">
<div id="nav-search-exit" title="Exit search"></div>
<input type="text" id="nav-search-input" placeholder="Search">
<ul id="search-results-container"></ul>
<script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
<script>
var searchjson = '[ \
{% for post in site.posts %} \
{ \
"title" : "{% if post.title != "" %}{{ post.title | escape }}{% else %}{{ post.excerpt | strip_html | escape | strip }}{%endif%}", \
"category" : "{{ post.tags | join: \', \' }}", \
"url" : "{{ site.baseurl }}{{ post.url }}", \
"date" : "{{ post.date | date: "%B %e, %Y" | default: "January 1, 1970" }}" \
}, \
{% endfor %} \
{% for page in site.html_pages %}{% if page.title != "{title}" and page.title != "404 - Page not found" %} \
{ \
"title" : "{% if page.title != "" %}{{ page.title | escape }}{% else %}{{ page.excerpt | strip_html | escape | strip }}{% endif %}", \
"category" : "{% if page.tags %}{{ page.tags | join: \', \' }}{% else %}page{% endif %}", \
"url" : "{{ site.baseurl }}{{ page.url }}", \
"date" : "{{ page.date | date: '%B %e, %Y' | default: "January 1, 1970" }}" \
}{% unless forloop.last %},{% endunless %} \
{% endif %}{% endfor %} \
]';
searchjson = JSON.parse(searchjson);
var sjs = SimpleJekyllSearch({
searchInput: document.getElementById('nav-search-input'),
resultsContainer: document.getElementById('search-results-container'),
json: searchjson
});
</script>
</div>
{% endif %}

View File

@ -275,5 +275,29 @@
</a>
</li>
{%- endif -%}
{%- if site.social-network-links.medium -%}
<li class="list-inline-item">
<a href="https://medium.com/@{{ site.social-network-links.medium }}" title="Medium">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-medium fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Medium</span>
</a>
</li>
{%- endif -%}
{%- if site.social-network-links.itchio -%}
<li class="list-inline-item">
<a href="https://{{ site.social-network-links.itchio }}.itch.io/" title="Itchio">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-itch-io fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Itchio</span>
</a>
</li>
{%- endif -%}
</ul>

View File

@ -42,6 +42,14 @@
</a>
{% endif %}
{% if site.share-links-active.reddit %}
<a href="https://www.reddit.com/submit?url={{ page.url | absolute_url | url_encode }}"
class="btn btn-social-icon btn-reddit" title="Share on Reddit">
<span class="fab fa-fw fa-reddit" aria-hidden="true"></span>
<span class="sr-only">Reddit</span>
</a>
{% endif %}
</section>
{% endif %}

View File

@ -311,7 +311,7 @@ img {
position: absolute;
left: 50%;
width: 3.125rem;
margin-top: 3.1rem;
bottom: -1.5rem;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
@ -349,6 +349,7 @@ img {
@media (min-width: 1200px) {
.navbar-custom.top-nav-regular .avatar-container {
width: 6.25rem;
bottom: -1.9375rem;
}
.navbar-custom.top-nav-regular .avatar-container .avatar-img-border {
@ -992,3 +993,104 @@ pre {
display: block;
margin: 0 auto;
}
/* Search bar */
#beautifuljekyll-search-overlay {
display: none;
z-index: 999999;
position: fixed;
background: rgba(0,0,0,0.9);
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
padding: 1rem;
}
#nav-search-exit {
position: absolute;
top: 1.5rem;
cursor: pointer;
right: 25%;
margin-right: 2rem;
color: #555;
font-size: 2rem;
line-height: 2rem;
font-weight: bold;
}
#nav-search-exit:hover {
color: #000;
}
#nav-search-input {
text-align: center;
background: #e7edee;
margin: auto;
display: block;
font-size: 2rem;
width: 50%;
transition: width 300ms ease;
color: #222;
border-radius: 5rem;
outline: none;
border: none;
padding: 0 3rem;
}
@media (max-width: 1199px) {
#nav-search-input {
width: 75%;
}
#nav-search-exit {
right: 12.5%;
}
}
@media (max-width: 767px) {
#nav-search-input {
width: 100%;
}
#nav-search-exit {
right: 0;
}
}
#nav-search-input:focus {
background: #f3f8fe;
box-shadow: 0px 0.15rem 1rem #e7f4ff;
outline: none;
}
#nav-search-input::placeholder {
color: #777;
}
#search-results-container {
list-style: none;
padding-left: unset;
margin-top: 1.5rem;
color: #fff;
font-size: 1.5rem;
max-height: calc(100vh - 6.5rem);
overflow-y: auto;
}
#search-results-container a {
color: #fff;
text-decoration: none;
}
#search-results-container a:hover {
color: #fff;
text-decoration: underline;
}
#nav-search-icon {
display: inline-block;
}
#nav-search-text {
display: none;
}
@media (max-width: 1199px) {
#nav-search-icon {
display: none;
}
#nav-search-text {
display: inline-block;
}
}

View File

@ -27,6 +27,8 @@ var BeautifulJekyllJS = {
// show the big header image
BeautifulJekyllJS.initImgs();
BeautifulJekyllJS.initSearch();
},
initNavbar : function() {
@ -108,6 +110,30 @@ var BeautifulJekyllJS = {
} else {
$(".img-desc").hide();
}
},
initSearch : function() {
if (!document.getElementById("beautifuljekyll-search-overlay")) {
return;
}
$("#nav-search-link").click(function(e) {
e.preventDefault();
$("#beautifuljekyll-search-overlay").show();
$("#nav-search-input").focus().select();
$("body").addClass("overflow-hidden");
});
$("#nav-search-exit").click(function(e) {
e.preventDefault();
$("#beautifuljekyll-search-overlay").hide();
$("body").removeClass("overflow-hidden");
});
$(document).on('keyup', function(e) {
if (e.key == "Escape") {
$("#beautifuljekyll-search-overlay").hide();
$("body").removeClass("overflow-hidden");
}
});
}
};

View File

@ -11,7 +11,7 @@ layout: null
$(form).addClass('disabled');
{% assign sm = site.staticman -%}
var endpoint = '{{ sm.endpoint | default: "https://staticman3.herokuapp.com/v3/entry/github/" }}';
var endpoint = '{{ sm.endpoint }}';
var repository = '{{ sm.repository }}';
var branch = '{{ sm.branch }}';

View File

@ -5,7 +5,7 @@
# To encrypt strings use the following endpoint:
# https://{STATICMAN API INSTANCE}/v3/encrypt/{TEXT TO BE ENCRYPTED}
# {STATICMAN API INSTANCE} should match the `endpoint` in the theme config
# file. It defaults to "staticman3.herokuapp.com".
# file.
comments:
# (*) REQUIRED