forked from alekslovesdata/recipes-2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (105 loc) · 4.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html profile="http://www.w3.org/2005/10/profile">
<head>
<title>Singer Family Recipes</title>
<!-- basics -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
<!-- font and styles -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i,900" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!-- JQUERY -->
<!-- loads the recipes and adds the selected one below -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script>
// found here: https://gomakethings.com/fixing-safaris-back-button-browser-cache-issue-with-vanilla-js/
/**
* If browser back button was used, flush cache
* This ensures that user will always see an accurate, up-to-date view based on their state
* https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked
*/
(function () {
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
})();
// handy function to create links in the markdown text
// via: https://stackoverflow.com/a/3890175/1167783
function linkify(str) {
// urls starting with http://, https://, or ftp://
var httpPattern = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
str = str.replace(httpPattern, '<a href="$1" target="_blank">$1</a>');
// urls starting with "www." (without // before it, or it'd re-link the ones done above)
var wwwPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
str = str.replace(wwwPattern, '$1<a href="http://$2" target="_blank">$2</a>');
// change email addresses to mailto: links
var emailPattern = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
str = str.replace(emailPattern, '<a href="mailto:$1">$1</a>');
return str;
}
function nameToLink(fileName, name) {
var anchor = fileName.replace('.md', '');
return '<a href="recipe.html#' + anchor + '">' + name + '</a></li>';
}
// once document is loaded, load list of markdown files
// and generate table of contents, plus a quick-nav list
// at the top
$(document).ready(async function() {
var files = await (await fetch("recipelist.json")).json();
files.sort();
// https://stackoverflow.com/a/5915122
var randFile = files[Math.floor(Math.random() * files.length)];
var listOfRecipes = '';
var listOfLetters = '';
var prevLetter = '';
for (var i in files) {
var url = files[i];
var anchor = url.replace('.md', '');
var name = anchor.split('-').join(' ');
var firstLetter = name.charAt(0).toUpperCase();
if (firstLetter != prevLetter) {
listOfRecipes += '<li id="' + firstLetter + '">';
listOfLetters += '<a href="#' + firstLetter + '">' + firstLetter + ' </a>';
}
else {
listOfRecipes += '<li>';
}
listOfRecipes += '<a href="recipe.html#' + anchor + '">' + name + '</a></li>';
prevLetter = firstLetter;
}
$('#toc ul').html(listOfRecipes);
$('#navigation').html(listOfLetters);
$('#footer').prepend(nameToLink(randFile, 'Pick a recipe for me!') + '<br>');
});
</script>
</head>
<body>
<div id="wrapper" class="index">
<section id="toc">
<h1 id="mainTitle">Recipes</h1>
<p id="navigation"></p>
<ul> <!-- your recipes will go here --> </ul>
</section>
<section id="footer">
<ul>
<li>Singer Family Recipes</li>
<li><a href="https://github.com/alekslovesdata/recipes-2">Source code
<!-- via: https://fontawesome.com/icons/external-link-alt -->
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
</svg>
</a></li>
</ul>
</section>
</div>
</body>
</html>