Browse Source

Webpage is now static

pull/30/head
Jure Šorn 6 years ago
parent
commit
73127e3795
3 changed files with 1838 additions and 6 deletions
  1. 1567
      index.html
  2. 114
      parse.js
  3. 163
      web/template.html

1567
index.html
File diff suppressed because it is too large
View File

114
parse.js

@ -0,0 +1,114 @@
#!/usr/bin/env node
// Usage: node test.js
// Script that creates index.html out of web/template.html and README.md.
// It is written in JS because this code used to be executed on the client side.
// To install dependencies run:
// $ npm install -g jsdom jquery showdown highlightjs
// If running on mac and modules cant be found after instalation add:
// export NODE_PATH=/usr/local/lib/node_modules
// to the ~/.bash_profile or ~/.bashrc file and run '$ bash'.
const fs = require('fs');
const jsdom = require('jsdom');
const showdown = require('showdown');
const hljs = require('highlightjs');
const TOC =
'<br>' +
'<h2 id="toc">Contents</h2>\n' +
'<pre><code class="hljs bash"><strong>ToC</strong> = {\n' +
' <strong><span class="hljs-string">\'1. Collections\'</span></strong>: [<a href="#list">List</a>, <a href="#dictionary">Dict</a>, <a href="#set">Set</a>, <a href="#range">Range</a>, <a href="#enumerate">Enumerate</a>, <a href="#namedtuple">Namedtuple</a>, <a href="#iterator">Iterator</a>, <a href="#generator">Generator</a>],\n' +
' <strong><span class="hljs-string">\'2. Types\'</span></strong>: [<a href="#type">Type</a>, <a href="#string">String</a>, <a href="#regex">Regex</a>, <a href="#format">Format</a>, <a href="#numbers">Numbers</a>, <a href="#combinatorics">Combinatorics</a>, <a href="#datetime">Datetime</a>ᴺᴱᵂ],\n' +
' <strong><span class="hljs-string">\'3. Syntax\'</span></strong>: [<a href="#arguments">Arguments</a>, <a href="#splatoperator">Splat</a>, <a href="#inline">Inline</a>, <a href="#closure">Closure</a>, <a href="#decorator">Decorator</a>, <a href="#class">Class</a>, <a href="#enum">Enum</a>, <a href="#exceptions">Exceptions</a>],\n' +
' <strong><span class="hljs-string">\'4. System\'</span></strong>: [<a href="#print">Print</a>, <a href="#input">Input</a>, <a href="#commandlinearguments">Command_Line_Arguments</a>, <a href="#open">Open</a>, <a href="#path">Path</a>ᴺᴱᵂ, <a href="#commandexecution">Command_Execution</a>],\n' +
' <strong><span class="hljs-string">\'5. Data\'</span></strong>: [<a href="#csv">CSV</a>, <a href="#json">JSON</a>, <a href="#pickle">Pickle</a>, <a href="#sqlite">SQLite</a>, <a href="#bytes">Bytes</a>, <a href="#struct">Struct</a>, <a href="#array">Array</a>, <a href="#memoryview">MemoryView</a>, <a href="#deque">Deque</a>],\n' +
' <strong><span class="hljs-string">\'6. Advanced\'</span></strong>: [<a href="#threading">Threading</a>, <a href="#introspection">Introspection</a>, <a href="#metaprograming">Metaprograming</a>, <a href="#operator">Operator</a>, <a href="#eval">Eval</a>, <a href="#coroutine">Coroutine</a>],\n' +
' <strong><span class="hljs-string">\'7. Libraries\'</span></strong>: [<a href="#progressbar">Progress_Bar</a>, <a href="#plot">Plot</a>, <a href="#table">Table</a>, <a href="#curses">Curses</a>, <a href="#logging">Logging</a>ᴺᴱᵂ, <a href="#scraping">Scraping</a>, <a href="#web">Web</a>, <a href="#profile">Profile</a>,\n' +
' <a href="#numpy">NumPy</a>, <a href="#image">Image</a>, <a href="#audio">Audio</a>]\n' +
'}\n' +
'</code></pre>\n';
function main() {
const html = getMd();
initDom(html);
modifyPage();
const template = readFile('web/template.html');
const tokens = template.split('<div id=main_container></div>');
const text = `${tokens[0]} ${document.body.innerHTML} ${tokens[1]}`;
writeToFile('index.html', text);
}
function initDom(html) {
const { JSDOM } = jsdom;
const dom = new JSDOM(html);
const $ = (require('jquery'))(dom.window);
global.$ = $;
global.document = dom.window.document;
}
function getMd() {
const readme = readFile('README.md');
const converter = new showdown.Converter();
return converter.makeHtml(readme);
}
function modifyPage() {
removeOrigToc();
addToc();
insertLinks();
unindentBanner();
$('code').not('.python').not('.text').not('.bash').addClass('python');
$('code').each(function(index) {
hljs.highlightBlock(this);
});
}
function removeOrigToc() {
const headerContents = $('#contents');
const contentsList = headerContents.next();
headerContents.remove();
contentsList.remove();
}
function insertLinks() {
$('h2').each(function() {
const aId = $(this).attr('id');
const text = $(this).text();
const line = `<a href="#${aId}" name="${aId}">#</a>${text}`;
$(this).html(line);
});
}
function unindentBanner() {
const montyImg = $('img').first();
montyImg.parent().addClass('banner');
const downloadPraragrapth = $('p').first();
downloadPraragrapth.addClass('banner');
}
function addToc() {
const headerMain = $('#main');
const nodes = $.parseHTML(TOC);
headerMain.before(nodes);
}
function readFile(filename) {
try {
return fs.readFileSync(filename, 'utf8');
} catch(e) {
console.error('Error:', e.stack);
}
}
function writeToFile(filename, text) {
try {
return fs.writeFileSync(filename, text, 'utf8');
} catch(e) {
console.error('Error:', e.stack);
}
}
main();

163
web/template.html

@ -0,0 +1,163 @@
<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>Comprehensive Python Cheatsheet</title>
<link rel="icon" href="web/favicon.png">
<link rel="stylesheet" href="web/default.min.css">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Comprehensive Python Cheatsheet">
<meta name="twitter:description" content="Exhaustive, simple, beautiful and concise. A truly pythonic cheat sheet about Python programming language.">
<meta name="twitter:image" content="https://gto76.github.io/python-cheatsheet/web/image_twitter_card_2.jpeg">
</head>
<style>
@import url(web/style.css);
.join,
.link,
.node rect {
fill: none;
stroke: #636363;
stroke-width: 1.5px;
}
.link {
stroke: #969696;
}
.node rect {
fill: white;
}
.link path,
.node rect,
.node text,
.join {
-webkit-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
-moz-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
-ms-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
-o-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
}
.node .element rect {
fill: #bdbdbd;
stroke: none;
}
.node .null rect {
fill: none;
stroke: none;
}
.node .null text {
fill: #636363;
}
.node .selection rect {
stroke: #e6550d;
}
.node .data rect {
stroke: #3182bd;
}
.node .datum rect {
fill: #d9d9d9;
stroke: none;
}
.node .code text {
font-family: monospace;
}
.node .key rect {
fill: #a1d99b;
stroke: none;
}
.link .to-key,
.join {
stroke: #a1d99b;
}
.join {
stroke-dasharray: 2,2;
}
.link .to-null {
stroke-dasharray: .5,3.5;
stroke-linecap: round;
}
.link .from-data {
stroke: #3182bd;
}
.play circle {
fill: #fff;
stroke: #000;
stroke-width: 3px;
}
.play:hover path {
fill: #f00;
}
.play.mousedown circle {
fill: #f00;
}
.play.mousedown path {
fill: #fff;
}
.play rect {
fill: none;
pointer-events: all;
cursor: pointer;
}
code span {
-webkit-transition: background 250ms linear;
-moz-transition: background 250ms linear;
-ms-transition: background 250ms linear;
-o-transition: background 250ms linear;
transition: background 250ms linear;
}
pre.prettyprint, code.prettyprint {
background-color: #222;
border-radius: 8px;
font-size: 15px;
}
pre.prettyprint {
width: 90%;
margin: 0.5em;
padding: 1em;
white-space: pre-wrap;
}
</style>
<body>
<header>
<aside>March 14, 2018</aside>
<a href="../" rel="author">Jure Šorn</a>
</header>
<div id=main_container></div>
<footer>
<aside>March 14, 2018</aside>
<a href="../" rel="author">Jure Šorn</a>
</footer>
<br>
<br>
<br>
</body>
</html>
Loading…
Cancel
Save