Upgrade to Bootstrap 5(.3.3) (#243)

* bootstrap 5 in progress * buttons and stuff * more icons and buttons... * button positioning * removed bootstrap 3 * npm ci in github actions * node version 20 * no packagelog * npm install defaul
HaxeFlixel · Feb 29, 2024 · c51b9e9 · c51b9e9
1 parent ca5653c
commit c51b9e9
Show file tree

Hide file tree

Showing 214 changed files with 889 additions and 87,025 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ npm-debug.log*
 out
 debug.log
 .DS_Store
+package-log.json
diff --git a/11ty-source/_layouts/default.liquid b/11ty-source/_layouts/default.liquid
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 
 {% comment %} <%- @partial('head.html.eco', {title:@getPreparedTitle()}, {description:@getPreparedDescription()}, {keywords:@getPreparedKeywords()}, {author:@site.author or ''}, {styles:@getBlock("styles").add(["/styles/style.css", "/vendor/highlightjs/styles/an-old-hope.min.css"]).toHTML()} ) %> {% endcomment %}
@@ -12,7 +12,7 @@
 	{{ content }}
 </div>
 
-{% renderFile "./11ty-source/_layouts/partials/footer.html" %}
+{% renderFile "./11ty-source/_layouts/partials/footer.liquid" %}
 
 {% comment %} <%- @getBlock('scripts').add(@site.scripts).toHTML() %> {% endcomment %}
 

diff --git a/11ty-source/_layouts/demo.liquid b/11ty-source/_layouts/demo.liquid
@@ -2,9 +2,6 @@
 layout: default.liquid
 ---
 
-<br>
-<br>
-
 <div class="demo-container">
 {% if targets == "html5" %}
 
@@ -37,22 +34,23 @@ layout: default.liquid
             <br>
 
 			<h1 class="title">{{ title }}</h1>
-
-			<a href="https://github.com/HaxeFlixel/flixel-demos/tree/dev/{{source}}/source" target="_blank" style="float: right;">
-			    <span class="glyphicon glyphicon-book"></span>
+			<a class="btn icon-link float-end" href="https://github.com/HaxeFlixel/flixel-demos/tree/dev/{{source}}/source" target="_blank">
+				<i class="bi-box-seam" ></i>
 			    source code
-			</a>
-
+				</a>
 			{{ content }}
 
+
+			<br>
 			<hr>
-
-			<ul class="pager">
+			<div>
+				<ul class="pagination pagination-lg justify-content-between">
 
                 {% assign prevDemo = collections.demo-item | getPreviousCollectionItem %}
 				{% if prevDemo %}
-				<li class="previous">
-					<a href="{{prevDemo.url}}" title="Previous"> 
+				<li class="page-item">
+					<a class="page-link" href="{{prevDemo.url}}" title="Previous">
+						<i class="bi-arrow-left-square"></i>
 						{% capture imgURL %}src/files/images/demos/{{prevDemo.data.title}}.png{% endcapture %}
 						{% image imgURL, "Previous", 70, 70 %}
 					</a>
@@ -61,37 +59,46 @@ layout: default.liquid
 
 				{% unless prevDemo %}
 				{% assign lastDemo = collections.demo-item | last %}
-				<li class="previous">
-					<a href="{{lastDemo.url}}" title="Previous"> 
+				<li class="page-item">
+					<a class="page-link" href="{{lastDemo.url}}" title="Previous"> 
+						<i class="bi-arrow-left-square"></i>
 						{% capture imgURL %}src/files/images/demos/{{lastDemo.data.title}}.png{% endcapture %}
 						{% image imgURL, "Previous", 70, 70 %}
 					</a>
 				</li>
 				{% endunless  %}
+
 
                 {% assign nextDemo = collections.demo-item | getNextCollectionItem %}
 				{% if nextDemo %}
-				<li class="next">
-					<a href="{{ nextDemo.url }}" title="Next">
+				<li class="page-item">
+
+					<a class="page-link" href="{{ nextDemo.url }}" title="Next">
 						{% capture imgURL %}src/files/images/demos/{{ nextDemo.data.title }}.png{% endcapture %}
 						{% image imgURL, "Next", 70, 70 %}
+						<i class="bi-arrow-right-square"></i>
 					</a>
 				</li>
 				{% endif  %}
 
                 {% comment %} gets the first demo, if the "next" one doesn't exist {% endcomment %}
 				{% unless nextDemo %}
 				{% assign firstDemo = collections.demo-item | first %}
-				<li class="next">
-					<a href="{{ firstDemo.url }}" title="Next">
+				<li class="page-item">
+
+					<a class="page-link" href="{{ firstDemo.url }}" title="Next">
+
 						{% capture imgURL %}src/files/images/demos/{{ firstDemo.data.title }}.png{% endcapture %}
 						{% image imgURL, "Next", 70, 70 %}
+						<i class="bi-arrow-right-square"></i>
 						{% comment %} <img src="<%= @getThumbnail("/images/demos/#{@getFirst('demos').attributes.title}.png", "zoomcrop", { w:70, h:70 }) %>" alt="Next">
 						> {% endcomment %}
 					</a>
 				</li>
 				{% endunless  %}
 			</ul>
+			</div>
+
 
 		</div>
 	</div>

diff --git a/11ty-source/_layouts/home.liquid b/11ty-source/_layouts/home.liquid
@@ -12,7 +12,7 @@
 	{{ content }}
 
 
-{% renderFile "./11ty-source/_layouts/partials/footer.html" %}
+{% renderFile "./11ty-source/_layouts/partials/footer.liquid" %}
 
 {% comment %} <%- @getBlock('scripts').add(@site.scripts).toHTML() %> {% endcomment %}
 

diff --git a/11ty-source/_layouts/partials/footer.html → 11ty-source/_layouts/partials/footer.liquid b/11ty-source/_layouts/partials/footer.html → 11ty-source/_layouts/partials/footer.liquid
@@ -1,6 +1,6 @@
 <footer>
 	<div class="footer-main">
-		<div class=" container">
+		<div class="container">
 
 			<div class="footer-social">
 
@@ -29,8 +29,8 @@
 				} (document, "script", "twitter-wjs");</script>
 
 			</div>
-
-			<div class="footer-powered-by row">
+		
+			<div class="footer-powered-by d-flex float-end align-items-center">
 				<p>HaxeFlixel is powered by</p>
 				<a href="https://haxe.org"><img src="/images/haxe.svg" alt="Haxe" title="Haxe"></a>
 				+

diff --git a/11ty-source/_layouts/partials/head.liquid b/11ty-source/_layouts/partials/head.liquid
@@ -1,24 +1,21 @@
 <head>
 
-	<meta charset="utf-8"/>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+  <meta charset="utf-8" />
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
-	<title>{{ title }}</title> 
+  <title>{{ title }}</title>
 
-	<meta name="description" content="HaxeFlixel is a 2D Game Engine that lets you create cross-platform games easier with free, open source technology!"/>
-	<meta name="keywords" content="<%= @keywords %>"/>
-	<meta name="author" content="<%= @author %>"/>
-	<meta name="viewport" content="width=device-width"/>
+  <meta name="description" content="HaxeFlixel is a 2D Game Engine that lets you create cross-platform games easier with free, open source technology!" />
+  <meta name="keywords" content="<%= @keywords %>" />
+  <meta name="author" content="<%= @author %>" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
-	<link rel="icon" href="/images/haxeflixel.svg">
-	<link rel="shortcut icon" href="/images/favicon.ico">
+  <link rel="icon" href="/images/haxeflixel.svg">
+  <link rel="shortcut icon" href="/images/favicon.ico">
 
-	<!--[if lt IE 9]>
-	<script async src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-	<![endif]-->
-
-	{% comment %} <%- @styles %> {% endcomment %}
-	<link rel="stylesheet" href="/styles/style.css">
-
-</head>
+  <!-- [if lt IE 9]>
+  <script async src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif] -->
+  {% comment %} <%- @styles %> {% endcomment %}
+  <link rel="stylesheet" href="/styles/style.css">
+</head>
diff --git a/11ty-source/_layouts/partials/header-menu.liquid b/11ty-source/_layouts/partials/header-menu.liquid
@@ -1,63 +1,79 @@
 <header>
-	<nav>
-
-		<div class="navbar navbar-inverse navbar-fixed-top">
-			<div class="container">
-
-				<div class="navbar-header">
-					<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
-						<span class="icon-bar" />
-						<span class="icon-bar" />
-						<span class="icon-bar" />
-					</button>
-					<a href="/" class="navbar-brand"><img src="/images/haxeflixel-header.svg" height="31" alt="HaxeFlixel" /></a>
-				</div>
-
-				<div class="navbar-collapse collapse">
-
-					<ul class="nav navbar-nav">
-
-						<li class="dropdown {% dropdownActive 'demos' %}">
-							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Examples <span class="caret"></span></a>
-							<ul class="dropdown-menu inverse-dropdown">
-							  <li><a href="/demos">Demos</a></li>
-							  <li><a href="https://snippets.haxeflixel.com/">Snippets</a></li>
-							</ul>
-						</li>
-
-						<li class={% dropdownActive 'showcase' %}>
-							<a href="/showcase">Showcase</a>
-						</li>
-
-						{% comment %} <li <%= @ablog %>> {% endcomment %}
-						<li class={% dropdownActive 'blog' %}>
-							<a href="/blog">Blog</a>
-						</li>
-
-						{% comment %} <li <%= @adocs %>> {% endcomment %}
-						<li class={% dropdownActive 'documentation' %}>
-							<a href="/documentation">Docs</a>
-						</li>
-
-						<li >
-							<a href="http://api.haxeflixel.com">API</a>
-						</li>
-
-						{% comment %} <li <%= @aforum %>> {% endcomment %}
-						<li>
-							<a href="https://github.com/HaxeFlixel/flixel/discussions">Forum</a>
-						</li>
-
-					</ul>
-
-					{% renderFile "./11ty-source/_layouts/partials/search.html" %}
-					{% comment %} <%- @partial('search.html') %> {% endcomment %}
-
-				</div>
-
-			</div>
-
-		</div>
-
-	</nav>
+  <nav class="navbar navbar-expand-lg bg-body-tertiary">
+    <div class="container-fluid">
+
+      <a href="/" class="navbar-brand"><img
+          src="/images/haxeflixel-header.svg"
+          height="31"
+          alt="HaxeFlixel" /></a>
+
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+
+      <div class="collapse navbar-collapse" id="navbarNavDropdown">
+
+        <ul class="navbar-nav">
+
+          <li class="nav-item dropdown {% dropdownActive 'demos' %}">
+            <a
+              href="#"
+              class="nav-link dropdown-toggle"
+              data-bs-toggle="dropdown"
+              role="button"
+              aria-expanded="false">Examples
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu inverse-dropdown">
+              <li>
+                <a class="dropdown-item" href="/demos">Demos</a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="https://snippets.haxeflixel.com/">Snippets</a>
+              </li>
+            </ul>
+          </li>
+
+          <li class="nav-item {% dropdownActive 'showcase' %}">
+            <a class="nav-link" href="/showcase">Showcase</a>
+          </li>
+
+          {% comment %} <li <%= @ablog %>> {% endcomment %}
+          <li class="nav-item {% dropdownActive 'blog' %}">
+            <a class="nav-link" href="/blog">Blog</a>
+          </li>
+
+          {% comment %} <li <%= @adocs %>> {% endcomment %}
+          <li class="nav-item {% dropdownActive 'documentation' %}">
+            <a class="nav-link" href="/documentation">Docs</a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" href="http://api.haxeflixel.com">API</a>
+          </li>
+
+          {% comment %} <li <%= @aforum %>> {% endcomment %}
+          <li class="nav-item">
+            <a class="nav-link" href="https://github.com/HaxeFlixel/flixel/discussions">Forum</a>
+          </li>
+
+        </ul>
+
+        {% renderFile "./11ty-source/_layouts/partials/search.html" %}
+      {% comment %} <%- @partial('search.html') %> {% endcomment %}
+
+      </div>
+
+    </div>
+
+
+  </nav>
 </header>
diff --git a/11ty-source/cdn-scripts.liquid b/11ty-source/cdn-scripts.liquid
@@ -1,2 +1,5 @@
-<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
+<script
+  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+  crossorigin="anonymous"></script>
diff --git a/11ty-source/index.liquid b/11ty-source/index.liquid
@@ -3,7 +3,7 @@ layout: 'home'
 title: 'Home'
 ---
 
-<div class="container">
+<div class="container text-center">
     <div class="home-header home-section">
 
         <a href="/documentation/about" class="home-big-logo" title="About HaxeFlixel">
@@ -14,10 +14,10 @@ title: 'Home'
 
         <p class="lead-line">Create cross-platform games easier and free.<br> All with one codebase.</p>
 
-        <p>
-            <a class="home-button" href="/documentation/getting-started">Getting Started</a>
-            <a class="home-button" href="https://github.com/HaxeFlixel">GitHub</a>
-        </p>
+        <div class="d-flex justify-content-around">
+            <a role="button" class="btn btn-outline-primary btn-lg" href="/documentation/getting-started">Getting Started <i class="bi-list-ol" ></i></a>
+            <a role="button" class="btn btn-outline-primary btn-lg"  href="https://github.com/HaxeFlixel">GitHub <i class="bi-github" ></i></a>
+        </div>
 
         <hr class="backer-hr">
 
@@ -100,7 +100,7 @@ title: 'Home'
 
         <br/>
 
-        <a href="https://haxe.org"><img src="/images/haxe.svg" alt="Haxe Logo" title="Haxe" height="120"></a>
+        <a href="https://haxe.org" data-bs-toggle="tooltip" data-bs-title="Default tooltip"><img src="/images/haxe.svg" alt="Haxe Logo" title="Haxe" height="120"></a>
 
         <span><b>+</b></span>
 
@@ -146,7 +146,7 @@ title: 'Home'
 
         <br />
 
-        <a class="home-button sponsors-button" href="/sponsors">
+        <a class="btn btn-primary btn-lg" href="/sponsors">
             See all our Sponsors
         </a>
 

diff --git a/11ty-source/scripts.njk b/11ty-source/scripts.njk
@@ -1,7 +1,3 @@
 ---
 permalink: 11ty-bundle.js
 ---
-
-{% include "../src/files/vendor/twitter-bootstrap-3/js/dropdown.js"%}
-{% include "../src/files/vendor/twitter-bootstrap-3/js/transition.js"%}
-{% include "../src/files/vendor/twitter-bootstrap-3/js/collapse.js"%}