Merge branch 'frontend-cleanup' into 'master'

Refactor front-end dependency management.

See merge request !4

.gitignore

 # Pelican
 output
 
-# Bower
-bower_components
-theme/static/lib
+# JS Modules from NPM
+node_modules
+
+# Compiled/minified JS artifacts from Webpack
+theme/static
 
 # Python
 *.py[cod]

Makefile

 html:
-	pelican content -o output -s pelicanconf.py
+	npm run build && pelican content -o output -s pelicanconf.py
 
 regenerate:
-	pelican -r content -o output -s pelicanconf.py
+	npm run build && pelican -r content -o output -s pelicanconf.py
 
 serve:
 	cd output && python -m pelican.server 5000

README.md

@@ -9,7 +9,7 @@ a static site generator written in Python.
 * `sudo apt install libjpeg-dev`
 * Create a [virtualenv](https://virtualenv.pypa.io/en/stable/)
 * `pip install -r requirements.txt` to install Python dependencies
-* `bower-installer` to install front-end dependencies
+* `npm run build` to install front-end (NPM) dependencies
 
 ## Generating HTML output
 

bower.json

-{
-  "name": "ant.sr",
-  "authors": [
-    "Anton Sarukhanov <code@ant.sr>"
-  ],
-  "description": "Anton Sarukhanov's personal website",
-  "private": true,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "normalize-css": "normalize.css#^4.1.1",
-    "autosize": "^3.0.18",
-    "jquery": "^3.1.1"
-  },
-  "install": {
-    "path": "theme/static/lib"
-  }
-}

package.json

+{
+  "name": "ant.sr",
+  "version": "1.0.0",
+  "private": true,
+  "description": "My personal website. Built with [Pelican](http://docs.getpelican.com/), a static site generator written in Python.",
+  "dependencies": {
+    "autosize": "^4.0.2",
+    "jquery": "^3.4.1",
+    "normalize.css": "^8.0.1"
+  },
+  "devDependencies": {
+    "css-loader": "^4.2.2",
+    "file-loader": "^6.0.0",
+    "fontsource-asap": "^3.0.5",
+    "fontsource-headland-one": "^3.0.5",
+    "mini-css-extract-plugin": "^0.10.0",
+    "style-loader": "^1.2.1",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.conf.js"
+  }
+}

pelicanconf.py

@@ -9,9 +9,9 @@ SITENAME = 'Anton Sarukhanov'
 SITESUBTITLE = 'Full-Stack Developer'
 SITEURL = os.environ.get('SITEURL')
 
-PLUGINS = ['advthumbnailer']
+PLUGINS = ['advthumbnailer', 'pelican_webassets']
 
-MD_EXTENSIONS = ['toc(permalink=🔗)', 'codehilite(linenums=False)', 'extra']
+MARKDOWN = {'extensions': ['toc(permalink=🔗)', 'codehilite(linenums=False)', 'extra']}
 
 PATH = 'content'
 THEME = 'theme'
@@ -77,6 +77,3 @@ FEED_DOMAIN = 'https://ant.sr'
 
 MENUITEMS = (('Resume', '/resume.pdf'),
              ('Code', 'https://git.xhost.io/users/anton/projects'),)
-
-PIWIK_URL = 'analytics.ant.sr'
-PIWIK_SITE_ID = 4

publishconf.py

@@ -14,7 +14,3 @@ FEED_ALL_ATOM = 'feeds/all.atom.xml'
 CATEGORY_FEED_ATOM = 'feeds/%s.atom.xml'
 
 DELETE_OUTPUT_DIRECTORY = True
-
-PIWIK_URL = "analytics.ant.sr"
-PIWIK_SITE_ID = 4
-

requirements.txt

 wheel
-pelican==3.6.3
+pelican==3.7.1
 Markdown==2.6.6
-pelican-advthumbnailer==0.5.0
+pelican-advthumbnailer==0.7.0
+pelican-webassets==1.0.0
 piexif==1.1.3
 Pillow==5.0.0

theme/static/css/style.css → theme/css/style.css

+/********** CSS Libraries **********/
+@import 'normalize.css';
+
+
 /********** Fonts **********/
-@font-face {
-    font-family: 'Asap';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Asap'),
-        local('Asap-Regular'),
-        url(../fonts/asap/Asap-Regular.ttf) format('truetype'),
-        url(../fonts/asap/Asap-Regular.woff) format('woff'),
-        url(../fonts/asap/Asap-Regular.eot) format('embedded-opentype');
-}
-@font-face {
-    font-family: 'Asap';
-    font-style: italic;
-    font-weight: 400;
-    src: local('Asap'),
-        local('Asap-Italic'),
-        url(../fonts/asap/Asap-Italic.ttf) format('truetype'),
-        url(../fonts/asap/Asap-Italic.woff) format('woff'),
-        url(../fonts/asap/Asap-Italic.eot) format('embedded-opentype');
-}
-@font-face {
-    font-family: 'Asap';
-    font-style: normal;
-    font-weight: 700;
-    src: local('Asap'),
-        local('Asap-Bold'),
-        url(../fonts/asap/Asap-Bold.ttf) format('truetype'),
-        url(../fonts/asap/Asap-Bold.woff) format('woff'),
-        url(../fonts/asap/Asap-Bold.eot) format('embedded-opentype');
-}
-@font-face {
-    font-family: 'Asap';
-    font-style: italic;
-    font-weight: 700;
-    src: local('Asap'),
-        local('Asap-BoldItalic'),
-        url(../fonts/asap/Asap-BoldItalic.ttf) format('truetype'),
-        url(../fonts/asap/Asap-BoldItalic.woff) format('woff'),
-        url(../fonts/asap/Asap-BoldItalic.eot) format('embedded-opentype');
-}
-@font-face {
-    font-family: 'Headland One';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Headland One'),
-        local('HeadlandOne-Regular'),
-        url(../fonts/headlandone/HeadlandOne-Regular.ttf) format('truetype'),
-        url(../fonts/headlandone/HeadlandOne-Regular.woff) format('woff'),
-        url(../fonts/headlandone/HeadlandOne-Regular.eot) format('embedded-opentype');
-}
+@import 'fontsource-headland-one';
+@import 'fontsource-asap';
+
+
+/********** CodeHilite color scheme **********/
+@import 'pygments-native.css';
 
 
 /********** General **********/

theme/static/js/script.js → theme/src/base.js

+/*
+ * Styles (for Webpack)
+ */
+
+// Site style (here for Webpack)
+import '../css/style.css';
+
 /* Responsive Navigation Menu
  *
  * Expand/collapse logic for hamburger menu.
@@ -65,10 +72,10 @@
                 triggers.push(trigger);
             }
         });
-    for (t in triggers) {
+    for (let t in triggers) {
         $(triggers[t]).on("keyup", function() {
             var deps = $(this).data('dependents');
-            for (d in deps) {
+            for (let d in deps) {
                 if ($(this).val()) {
                     $(deps[d]).show();
                 } else {

theme/src/textarea.js

+/*
+ * Auto-height textareas
+ */
+
+(function() {
+    var autosize = require('autosize/dist/autosize.js');
+    autosize($('textarea'));
+})();