Changed html to nunjucks and menu from js to html

CarlosLongarela · Nov 19, 2019 · 07e1c04 · 07e1c04
1 parent 27e2a99
commit 07e1c04
Show file tree

Hide file tree

Showing 52 changed files with 1,494 additions and 110 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -14,8 +14,11 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 2
 
-[*.{htm,html,php,js,ts,css,scss}]
+[*.{htm,html,njk,php,js,ts,css,scss}]
 end_of_line = lf
 insert_final_newline = true
 indent_style = tab
 indent_size = 4
+
+[*.njk]
+insert_final_newline = false
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,5 +1,6 @@
 var gulp         = require( 'gulp' ),
 	ts           = require( 'gulp-typescript' ),
+	nunjucks     = require( 'gulp-nunjucks' ),
 	uglify       = require( 'gulp-uglify' ),
 	sass         = require( 'gulp-sass' ),
 	autoprefixer = require( 'autoprefixer' ),
@@ -20,11 +21,30 @@ var SourceSCSS = [
 	'src/scss/*.scss',
 ];
 
+var SourceNJK = [
+	'src/templates/*.njk',
+];
+
 var plugins = [
 	autoprefixer( 'last 2 versions', '> 5%', 'not ie 6-9' ),
 	cssnano()
 ];
 
+/** Nunjucks Tasks */
+gulp.task( 'nunjucks', function() {
+	var njk_dest = 'html';
+
+	return gulp.src( SourceNJK )
+	.pipe( nunjucks.compile() )
+	.pipe( rename( { extname: '.html' } ) )
+	.pipe( gulp.dest( njk_dest ) )
+	.pipe( notify( {
+		title: 'Gulp NJK Task Result:',
+		message: 'Files from [/' + SourceNJK + '/] created in [/' + njk_dest + '/].',
+		onLast: true
+	} ) );
+  });
+
 /** Js Tasks */
 gulp.task( 'general-scripts', function() {
 	var js_dest = 'js';
@@ -66,6 +86,9 @@ gulp.task( 'general-scss', function() {
 } );
 
 gulp.task( 'watch', function() {
+	// Inspect changes in njk files.
+	gulp.watch( SourceNJK, gulp.series( 'nunjucks' ) );
+
 	// Inspect changes in ts files.
 	gulp.watch( SourceTS, gulp.series( 'general-scripts' ) );
 

diff --git a/html/home.html b/html/home.html
@@ -10,7 +10,39 @@
 <body id="best-wp-tools">
 
 	<div id="main">
-		<nav id="primary_menu"></nav>
+		<nav id="primary_menu">
+	<div id="menu_home" class="item">
+		<img src="../img/home-48.png">
+		</div>
+
+	<div id="menu_wpo" class="item">
+		<a href="wpo.html"><img src="../img/wpo-48.png"></a>
+		</div>
+
+	<div id="menu_web-server" class="item">
+		<a href="web-server.html"><img src="../img/web-server-48.png"></a>
+		</div>
+
+	<div id="menu_wp-tools" class="item">
+		<a href="wp-tools.html"><img src="../img/wp-tools-48.png"></a>
+		</div>
+
+	<div id="menu_wp-code" class="item">
+		<a href="wp-code.html"><img src="../img/wp-code-48.png"></a>
+		</div>
+
+	<div id="menu_wp-plugins" class="item">
+		<a href="wp-plugins.html"><img src="../img/wp-plugins-48.png"></a>
+		</div>
+
+	<div id="menu_wp-themes" class="item">
+		<a href="wp-themes.html"><img src="../img/wp-themes-48.png"></a>
+		</div>
+
+	<div id="menu_hosting" class="item">
+		<a href="hosting.html"><img src="../img/hosting-48.png"></a>
+		</div>
+</nav>
 
 		<div id="data">
 			<div id="notice"></div>
@@ -22,9 +54,11 @@ <h1><a href="https://tabernawp.com/best-wordpress-tools" target="_blank" rel="no
 
 			<div id="url_info"></div>
 			<div id="api_url_info"></div>
+
 		</div>
+
 	</div>
 
 	<script src="../js/home.min.js"></script>
 </body>
-</html>
+</html>
diff --git a/html/hosting.html b/html/hosting.html
@@ -10,11 +10,41 @@
 <body id="best-wp-tools">
 
 	<div id="main">
-		<nav id="primary_menu"></nav>
+		<nav id="primary_menu">
+	<div id="menu_home" class="item">
+		<a href="home.html"><img src="../img/home-48.png"></a>
+		</div>
 
-		<div id="data">
-			<h1>Hosting</h1>
+	<div id="menu_wpo" class="item">
+		<a href="wpo.html"><img src="../img/wpo-48.png"></a>
+		</div>
+
+	<div id="menu_web-server" class="item">
+		<a href="web-server.html"><img src="../img/web-server-48.png"></a>
+		</div>
+
+	<div id="menu_wp-tools" class="item">
+		<a href="wp-tools.html"><img src="../img/wp-tools-48.png"></a>
+		</div>
+
+	<div id="menu_wp-code" class="item">
+		<a href="wp-code.html"><img src="../img/wp-code-48.png"></a>
+		</div>
 
+	<div id="menu_wp-plugins" class="item">
+		<a href="wp-plugins.html"><img src="../img/wp-plugins-48.png"></a>
+		</div>
+
+	<div id="menu_wp-themes" class="item">
+		<a href="wp-themes.html"><img src="../img/wp-themes-48.png"></a>
+		</div>
+
+	<div id="menu_hosting" class="item">
+		<img src="../img/hosting-48.png">
+		</div>
+</nav>
+
+		<div id="data">
 			<div id="notice"></div>
 
 			<fieldset class="wpo_fieldset visible">
@@ -34,9 +64,11 @@ <h3>{{msg_siteground_title}}</h3>
 				</a>
 				<p>{{msg_siteground_text}}</p>
 			</fieldset>
+
 		</div>
+
 	</div>
 
 	<script src="../js/hosting.min.js"></script>
 </body>
-</html>
+</html>
diff --git a/html/web-server.html b/html/web-server.html
@@ -10,7 +10,39 @@
 <body id="best-wp-tools">
 
 	<div id="main">
-		<nav id="primary_menu"></nav>
+		<nav id="primary_menu">
+	<div id="menu_home" class="item">
+		<a href="home.html"><img src="../img/home-48.png"></a>
+		</div>
+
+	<div id="menu_wpo" class="item">
+		<a href="wpo.html"><img src="../img/wpo-48.png"></a>
+		</div>
+
+	<div id="menu_web-server" class="item">
+		<img src="../img/web-server-48.png">
+		</div>
+
+	<div id="menu_wp-tools" class="item">
+		<a href="wp-tools.html"><img src="../img/wp-tools-48.png"></a>
+		</div>
+
+	<div id="menu_wp-code" class="item">
+		<a href="wp-code.html"><img src="../img/wp-code-48.png"></a>
+		</div>
+
+	<div id="menu_wp-plugins" class="item">
+		<a href="wp-plugins.html"><img src="../img/wp-plugins-48.png"></a>
+		</div>
+
+	<div id="menu_wp-themes" class="item">
+		<a href="wp-themes.html"><img src="../img/wp-themes-48.png"></a>
+		</div>
+
+	<div id="menu_hosting" class="item">
+		<a href="hosting.html"><img src="../img/hosting-48.png"></a>
+		</div>
+</nav>
 
 		<div id="data">
 			<div id="notice"></div>
@@ -26,7 +58,7 @@ <h1>{{msg_webservers}}</h1>
 				Nginx
 			</div>
 
-			<!-- Apache Blocks -->
+
 			<div id="apache_div" style="display:block">
 
 				<h4>{{msg_basic_htaccess}}</h4>
@@ -657,11 +689,10 @@ <h4>{{msg_bad_bots}}</h4>
 RewriteRule .* - [F]
 # Block Emtpy and Spoofed User-Agents #
 RewriteCond %{HTTP_USER_AGENT} ^-?$
-RewriteRule .* - [F]
-</textarea>
+RewriteRule .* - [F]</textarea>
 			</div>
 
-			<!-- Nginx Blocks -->
+
 			<div id="nginx_div" style="display:none">
 					<h4>{{msg_basic_nginx}}</h4>
 					<img src="../img/copy.png" width="16" height="16" class="icon_copy copy_text" data-id2copy="basic_nginx" title="{{msg_text_copy}}" />
@@ -697,8 +728,9 @@ <h4>{{msg_gzip}}</h4>
 			</div>
 
 		</div>
+
 	</div>
 
 	<script src="../js/web-server.min.js"></script>
 </body>
-</html>
+</html>
diff --git a/html/wp-code.html b/html/wp-code.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Code</title>
+	<title>WordPress Code</title>
 	<meta charset="UTF-8"/>
 	<script src="../js/general.min.js"></script>
 	<script src="../js/analytics.js"></script>
@@ -10,7 +10,39 @@
 <body id="best-wp-tools">
 
 	<div id="main">
-		<nav id="primary_menu"></nav>
+		<nav id="primary_menu">
+	<div id="menu_home" class="item">
+		<a href="home.html"><img src="../img/home-48.png"></a>
+		</div>
+
+	<div id="menu_wpo" class="item">
+		<a href="wpo.html"><img src="../img/wpo-48.png"></a>
+		</div>
+
+	<div id="menu_web-server" class="item">
+		<a href="web-server.html"><img src="../img/web-server-48.png"></a>
+		</div>
+
+	<div id="menu_wp-tools" class="item">
+		<a href="wp-tools.html"><img src="../img/wp-tools-48.png"></a>
+		</div>
+
+	<div id="menu_wp-code" class="item">
+		<img src="../img/wp-code-48.png">
+		</div>
+
+	<div id="menu_wp-plugins" class="item">
+		<a href="wp-plugins.html"><img src="../img/wp-plugins-48.png"></a>
+		</div>
+
+	<div id="menu_wp-themes" class="item">
+		<a href="wp-themes.html"><img src="../img/wp-themes-48.png"></a>
+		</div>
+
+	<div id="menu_hosting" class="item">
+		<a href="hosting.html"><img src="../img/hosting-48.png"></a>
+		</div>
+</nav>
 
 		<div id="data">
 			<div id="notice"></div>
@@ -42,8 +74,9 @@ <h2 class="title-flex">{{msg_other_utils}}</h2>
 			</div>
 
 		</div>
+
 	</div>
 
 	<script src="../js/wp-code.min.js"></script>
 </body>
-</html>
+</html>
diff --git a/html/wp-plugins.html b/html/wp-plugins.html
@@ -10,7 +10,39 @@
 <body id="best-wp-tools">
 
 	<div id="main">
-		<nav id="primary_menu"></nav>
+		<nav id="primary_menu">
+	<div id="menu_home" class="item">
+		<a href="home.html"><img src="../img/home-48.png"></a>
+		</div>
+
+	<div id="menu_wpo" class="item">
+		<a href="wpo.html"><img src="../img/wpo-48.png"></a>
+		</div>
+
+	<div id="menu_web-server" class="item">
+		<a href="web-server.html"><img src="../img/web-server-48.png"></a>
+		</div>
+
+	<div id="menu_wp-tools" class="item">
+		<a href="wp-tools.html"><img src="../img/wp-tools-48.png"></a>
+		</div>
+
+	<div id="menu_wp-code" class="item">
+		<a href="wp-code.html"><img src="../img/wp-code-48.png"></a>
+		</div>
+
+	<div id="menu_wp-plugins" class="item">
+		<img src="../img/wp-plugins-48.png">
+		</div>
+
+	<div id="menu_wp-themes" class="item">
+		<a href="wp-themes.html"><img src="../img/wp-themes-48.png"></a>
+		</div>
+
+	<div id="menu_hosting" class="item">
+		<a href="hosting.html"><img src="../img/hosting-48.png"></a>
+		</div>
+</nav>
 
 		<div id="data">
 			<div id="notice"></div>
@@ -41,9 +73,11 @@ <h1>{{msg_wp_plugins}}</h1>
 				</a>
 				<p>{{msg_bloom_plugins}}</p>
 			</div>
+
 		</div>
+
 	</div>
 
 	<script src="../js/wp-plugins.min.js"></script>
 </body>
-</html>
+</html>