Website related fixes (#5660)

* bench build --app app_name

* Use highlight.js as npm package

* Add fenced-code-blocks to markdown compiler

* Support for next-prev links

frappe/build.py

@@ -26,21 +26,25 @@ def setup():
 	app_paths = [os.path.dirname(pymodule.__file__) for pymodule in pymodules]
 
 def get_node_pacman():
-	pacmans = ['npm', 'yarn']
+	pacmans = ['yarn', 'npm']
 	for exec_ in pacmans:
 		exec_ = find_executable(exec_)
 		if exec_:
 			return exec_
 	raise ValueError('No Node.js Package Manager found.')
 
-def bundle(no_compress, make_copy=False, restore=False, verbose=False):
+def bundle(no_compress, app=None, make_copy=False, restore=False, verbose=False):
 	"""concat / minify js files"""
 	setup()
 	make_asset_dirs(make_copy=make_copy, restore=restore)
 
 	pacman = get_node_pacman()
+	mode = 'build' if no_compress else 'production'
+	command = '{pacman} run {mode}'.format(pacman=pacman, mode=mode)
+
+	if app:
+		command += ' --app {app}'.format(app=app)
 
-	command = '{pacman} run build'.format(pacman=pacman) if no_compress else '{pacman} run production'.format(pacman=pacman)
 	frappe_app_path = os.path.abspath(os.path.join(app_paths[0], '..'))
 	check_yarn()
 	frappe.commands.popen(command, cwd=frappe_app_path)

frappe/commands/utils.py

@@ -10,17 +10,18 @@ from frappe.utils import update_progress_bar
 from frappe.utils.response import json_handler
 
 @click.command('build')
+@click.option('--app', help='Build assets for app')
 @click.option('--make-copy', is_flag=True, default=False, help='Copy the files instead of symlinking')
 @click.option('--restore', is_flag=True, default=False, help='Copy the files instead of symlinking with force')
 @click.option('--verbose', is_flag=True, default=False, help='Verbose')
-def build(make_copy=False, restore = False, verbose=False):
+def build(app=None, make_copy=False, restore = False, verbose=False):
 	"Minify + concatenate JS and CSS files, build translations"
 	import frappe.build
 	import frappe
 	frappe.init('')
 	# don't minify in developer_mode for faster builds
 	no_compress = frappe.local.conf.developer_mode or False
-	frappe.build.bundle(no_compress, make_copy=make_copy, restore = restore, verbose=verbose)
+	frappe.build.bundle(no_compress, app=app, make_copy=make_copy, restore = restore, verbose=verbose)
 
 @click.command('watch')
 def watch():

frappe/public/build.json

@@ -4,7 +4,7 @@
 		"public/css/octicons/octicons.css",
 		"public/less/website.less",
 		"public/less/avatar.less",
-
+		"node_modules/highlight.js/styles/zenburn.css",
 		"public/less/chat.less"
 	],
 	"js/frappe-web.min.js": [
@@ -17,7 +17,6 @@
 		"public/js/frappe/misc/common.js",
 		"public/js/frappe/translate.js",
 		"public/js/frappe/misc/pretty_date.js",
-		"public/js/lib/highlight.pack.js",
 		"public/js/lib/microtemplate.js",
 		"public/js/frappe/query_string.js",
 		"website/js/website.js",

frappe/templates/autodoc/base_template.html

@@ -7,7 +7,6 @@
 	<title>{% block title %} {{ title }} {% endblock %}</title>
 	<meta name="generator" content="frappe">
     <link type="text/css" rel="stylesheet" href="/docs/assets/css/bootstrap.css">
-    <link type="text/css" rel="stylesheet" href="/docs/assets/css/hljs.css">
     <link type="text/css" rel="stylesheet" href="/docs/assets/css/font-awesome.css">
     <link type="text/css" rel="stylesheet" href="/docs/assets/css/octicons/octicons.css">
     <link type="text/css" rel="stylesheet" href="/docs/assets/css/docs.css">

frappe/website/js/website.js

@@ -2,6 +2,8 @@
 // MIT License. See license.txt
 /* eslint-disable no-console */
 
+import hljs from 'highlight.js';
+
 frappe.provide("website");
 frappe.provide("frappe.awesome_bar_path");
 window.cur_frm = null;
@@ -276,11 +278,9 @@ $.extend(frappe, {
 	},
 
 	highlight_code_blocks: function() {
-		if(window.hljs) {
-			$('pre code').each(function(i, block) {
-				hljs.highlightBlock(block);
-			});
-		}
+		$('pre code').each(function(i, block) {
+			hljs.highlightBlock(block);
+		});
 	},
 	bind_filters: function() {
 		// set in select

frappe/website/router.py

@@ -229,7 +229,7 @@ def setup_source(page_info):
 	html = ''
 
 	if page_info.template.endswith('.md'):
-		source = markdown(source)
+		source = markdown(source, extras=["fenced-code-blocks"])
 
 	# if only content
 	if page_info.template.endswith('.html') or page_info.template.endswith('.md'):
@@ -290,6 +290,10 @@ def load_properties(page_info):
 
 	if "<!-- no-header -->" in page_info.source:
 		page_info.no_header = 1
+
+	if "<!-- add-next-prev-links -->" in page_info.source:
+		page_info.add_next_prev_links = 1
+
 	# else:
 	# 	# every page needs a header
 	# 	# add missing header if there is no <h1> tag

package.json

@@ -21,6 +21,7 @@
     "frappe-datatable": "^0.0.6",
     "frappe-gantt": "^0.1.0",
     "fuse.js": "^3.2.0",
+    "highlight.js": "^9.12.0",
     "jsbarcode": "^3.9.0",
     "moment": "^2.20.1",
     "redis": "^2.8.0",
@@ -33,6 +34,7 @@
     "babel-runtime": "^6.26.0",
     "chalk": "^2.3.2",
     "less": "^3.0.4",
+    "node-sass": "^4.9.0",
     "rollup": "^0.55.3",
     "rollup-plugin-buble": "^0.19.2",
     "rollup-plugin-commonjs": "^8.3.0",

rollup/build.js

@@ -17,10 +17,17 @@ const {
 	get_options_for
 } = require('./config');
 
+const build_for_app = process.argv[2] === '--app' ? process.argv[3] : null;
+
 show_production_message();
 ensure_js_css_dirs();
 build_libs();
-build_assets_for_all_apps();
+
+if (build_for_app) {
+	build_assets_for_app(build_for_app)
+} else {
+	build_assets_for_all_apps();
+}
 
 function build_assets_for_all_apps() {
 	run_serially(
@@ -28,6 +35,10 @@ function build_assets_for_all_apps() {
 	);
 }
 
+function build_assets_for_app(app) {
+	build_assets(app)
+}
+
 function build_assets(app) {
 	const options = get_options_for(app);
 	if (!options.length) return Promise.resolve();

rollup/config.js

@@ -93,8 +93,12 @@ function get_rollup_options_for_css(output_file, input_files) {
 				paths: [
 					path.resolve(get_public_path('frappe'), 'less')
 				]
-			}]],
-			include: [path.resolve(bench_path, '**/*.less'), path.resolve(bench_path, '**/*.css')],
+			}], 'sass'],
+			include: [
+				path.resolve(bench_path, '**/*.less'),
+				path.resolve(bench_path, '**/*.scss'),
+				path.resolve(bench_path, '**/*.css')
+			],
 			minimize: minimize_css
 		})
 	];