Make HTML formatting consistent (bevyengine#1026)

Co-authored-by: BD103 <[email protected]>

.djlintrc

@@ -0,0 +1,5 @@
+{
+	"profile": "nunjucks",
+	"ignore": "H030,H031",
+	"indent": "2"
+}

.editorconfig

@@ -6,3 +6,8 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 quote_type = double
+
+[*.html]
+indent_style = space
+indent_size = 2
+insert_final_newline = true

.github/workflows/ci.yml

@@ -9,19 +9,17 @@ on:
       - 'trying'
 
 jobs:
-  super-linter:
+  mega-linter:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
         with:
-          # Full git history is needed to get a proper list of changed files within `super-linter`
+          # Full git history is needed to get a proper list of changed files within `mega-linter`
           fetch-depth: 0
-      - name: Run Super Linter
-        uses: docker://ghcr.io/github/super-linter:slim-v4
+      - name: Run Mega Linter
+        uses: oxsecurity/megalinter@v7
         env:
           VALIDATE_ALL_CODEBASE: false
-          VALIDATE_MARKDOWN: true
-          VALIDATE_EDITORCONFIG: true
           DEFAULT_BRANCH: main
 
   test-code-examples:
@@ -83,7 +81,7 @@ jobs:
           echo 'You can find the extension here: https://marketplace.visualstudio.com/items?itemName=tekumara.typos-vscode'
 
   generate-assets:
-    needs: [super-linter, test-code-examples, lint-tools, check-hide-lines]
+    needs: [mega-linter, test-code-examples, lint-tools, check-hide-lines]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -121,7 +119,7 @@ jobs:
           retention-days: 1
 
   generate-errors:
-    needs: [super-linter, test-code-examples, lint-tools, check-hide-lines]
+    needs: [mega-linter, test-code-examples, lint-tools, check-hide-lines]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -148,7 +146,7 @@ jobs:
           retention-days: 1
 
   generate-wasm-examples:
-    needs: [super-linter, test-code-examples, lint-tools, check-hide-lines]
+    needs: [mega-linter, test-code-examples, lint-tools, check-hide-lines]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -175,7 +173,7 @@ jobs:
           retention-days: 1
 
   generate-community:
-    needs: [super-linter, test-code-examples, lint-tools, check-hide-lines]
+    needs: [mega-linter, test-code-examples, lint-tools, check-hide-lines]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -203,7 +201,7 @@ jobs:
 
   build-website:
     runs-on: ubuntu-latest
-    needs: [super-linter, test-code-examples, lint-tools, check-hide-lines, generate-assets, generate-errors, generate-wasm-examples, generate-community]
+    needs: [mega-linter, test-code-examples, lint-tools, check-hide-lines, generate-assets, generate-errors, generate-wasm-examples, generate-community]
 
     steps:
       - uses: actions/checkout@v4

.mega-linter.yml

@@ -0,0 +1,4 @@
+ENABLE_LINTERS:
+  - HTML_DJLINT
+  - MARKDOWN_MARKDOWNLINT
+  - EDITORCONFIG_EDITORCONFIG_CHECKER

sass/components/_button.scss

@@ -28,6 +28,7 @@
 
   &__icon {
     height: 1.1em;
+    width: auto;
     vertical-align: middle;
     margin-left: 0.2em;
     font-size: 0.9em;

sass/components/_header.scss

@@ -73,6 +73,7 @@
 
       img {
         height: 30px;
+        width: auto;
 
         @media #{$bp-tablet-portrait-up} {
           height: 35px;

sass/components/_logo.scss

@@ -2,6 +2,7 @@
   $bp-icon: "(min-width: 440px)";
 
   height: 28px;
+  width: auto;
 
   @media #{$bp-tablet-landscape-up} {
     height: 40px;

sass/pages/_donate.scss

@@ -0,0 +1,5 @@
+div.donate-sponsor {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 0.8rem;
+}

sass/pages/_features.scss

@@ -78,6 +78,17 @@
   }
 }
 
+.feature-img.svg-ecs {
+  width: 100%;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.feature-img.svg-boat {
+  max-width: 95%;
+  max-height: 95%;
+}
+
 .feature-sublist {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -89,6 +100,8 @@
 .feature-img {
   max-height: 80%;
   max-width: 80%;
+  width: auto;
+  height: auto;
 }
 
 .features-whats-next {
@@ -127,3 +140,15 @@
   height: 7.0rem;
   margin: 1rem;
 }
+
+img.sponsors__logo.sponsors__foresight-spatial-labs {
+  height: 140px;
+}
+
+img.sponsors__logo.sponsors__encultured-ai {
+  max-height: 60px;
+}
+
+img.sponsors__logo.sponsors__roids {
+  max-height: 130px;
+}

sass/pages/_news.scss

@@ -31,6 +31,7 @@
 
 .news-social-icon {
   height: 1.3rem;
+  width: auto;
   vertical-align: middle;
 }
 

sass/site.scss

@@ -52,6 +52,7 @@
 @import "pages/people";
 @import "pages/assets";
 @import "pages/docs";
+@import "pages/donate";
 @import "pages/news";
 @import "pages/features";
 @import "pages/content";

templates/404.html

@@ -1,8 +1,11 @@
 {% extends "layouts/base.html" %}
 {% block content %}
-<div class="fourohfour">
+  <div class="fourohfour">
     <h1>404</h1>
     <p>Sorry, we couldn't find that page.</p>
-    <img src="/assets/bevy_icon_dark.svg" alt="Bevy logo">
-</div>
-{% endblock content %}
+    <img src="/assets/bevy_icon_dark.svg"
+          alt="Bevy logo"
+          width="176"
+          height="130">
+  </div>
+{% endblock content %}

templates/anchor-link.html

@@ -6,4 +6,4 @@
 This is configured by the `insert_anchor_links` front-matter option located on the markdown files.
 See documentation here: https://www.getzola.org/documentation/content/section/#front-matter
 #}
-<a class="anchor-link" href="#{{id}}">#</a>
+<a class="anchor-link" href="#{{ id }}">#</a>

templates/assets.html

@@ -1,81 +1,60 @@
 {% extends "layouts/page-with-menu.html" %}
 {% import "macros/assets.html" as assets_macros %}
-
-{% block page_name %}Bevy Assets{% endblock %}
-
-{% block mobile_page_menu %}
-{{assets_macros::assets_menu(prefix="mobile-menu", root=section)}}
-{% endblock %}
-
-{% block page_menu %}
-{{assets_macros::assets_menu(prefix="page-menu", root=section)}}
-{% endblock %}
-
+{% block page_name %}Bevy Assets{% endblock page_name %}
+{% block mobile_page_menu %}{{ assets_macros::assets_menu(prefix="mobile-menu", root=section) }}{% endblock mobile_page_menu %}
+{% block page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock page_menu %}
 {% block page_content %}
-<div class="assets">
-  {{ assets_macros::init_svg() }}
-
-  <div class="assets-search">
-    <input class="assets-search__input" type="text" id="assets-search" placeholder="Search (ie: 0.11 MIT)">
-  </div>
-
-  <div class="assets-filters">
-    <label>Bevy last supported version</label>
-    <select class="asset-version-select" id="assets-filter">
-      <option value="all_versions">All</option>
-    </select>
-  </div>
-
-  <div class="assets-intro media-content">
-    A collection of third-party Bevy assets, plugins, learning resources, and apps made by the community. If you
-    would like to
-    share what you're working on, <a href="https://github.com/bevyengine/bevy-assets">submit a pull request</a>!
-  </div>
-
-  {% for subsection in section.subsections %}
-  {% set section = get_section(path=subsection) %}
-
-  <h1 class="asset-section" id="{{ section.title | slugify }}">
-    {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
-  </h1>
-
-  {% if section.pages %}
-  <div class="item-grid item-grid--multi-cols">
-    {% set pages = section.pages %}
-    {% if section.extra.sort_order_reversed %}
-    {% set pages = section.pages | reverse %}
-    {% endif %}
-    {% for post in pages %}
-    {{ assets_macros::card(post=post) }}
-    {% endfor %}
-  </div>
-  {% endif %}
-
-  {% set subsections = section.subsections %}
-  {% if section.extra.sort_order_reversed %}
-  {% set subsections = section.subsections | reverse %}
-  {% endif %}
-  {% for subsection in subsections %}
-  {% set section = get_section(path=subsection) %}
-
-  <h3 class="asset-subsection" id="{{ section.title | slugify }}">
-    {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
-  </h3>
-  <div class="item-grid item-grid--multi-cols">
-    {% set pages = section.pages %}
-    {% if section.extra.sort_order_reversed %}
-    {% set pages = section.pages | reverse %}
-    {% endif %}
-    {% for post in pages %}
-    {{ assets_macros::card(post=post) }}
+  <div class="assets">
+    {{ assets_macros::init_svg() }}
+    <div class="assets-search">
+      <input class="assets-search__input"
+              type="text"
+              id="assets-search"
+              placeholder="Search (ie: 0.11 MIT)">
+    </div>
+    <div class="assets-filters">
+      <label>Bevy last supported version</label>
+      <select class="asset-version-select" id="assets-filter">
+        <option value="all_versions">All</option>
+      </select>
+    </div>
+    <div class="assets-intro media-content">
+      A collection of third-party Bevy assets, plugins, learning resources, and apps made by the community. If you
+      would like to
+      share what you're working on, <a href="https://github.com/bevyengine/bevy-assets">submit a pull request</a>!
+    </div>
+    {% for subsection in section.subsections %}
+      {% set section = get_section(path=subsection) %}
+      <h1 class="asset-section" id="{{ section.title | slugify }}">
+        {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
+      </h1>
+      {% if section.pages %}
+        <div class="item-grid item-grid--multi-cols">
+          {% set pages = section.pages %}
+          {% if section.extra.sort_order_reversed %}
+            {% set pages = section.pages | reverse %}
+          {% endif %}
+          {% for post in pages %}{{ assets_macros::card(post=post) }}{% endfor %}
+        </div>
+      {% endif %}
+      {% set subsections = section.subsections %}
+      {% if section.extra.sort_order_reversed %}
+        {% set subsections = section.subsections | reverse %}
+      {% endif %}
+      {% for subsection in subsections %}
+        {% set section = get_section(path=subsection) %}
+        <h3 class="asset-subsection" id="{{ section.title | slugify }}">
+          {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
+        </h3>
+        <div class="item-grid item-grid--multi-cols">
+          {% set pages = section.pages %}
+          {% if section.extra.sort_order_reversed %}
+            {% set pages = section.pages | reverse %}
+          {% endif %}
+          {% for post in pages %}{{ assets_macros::card(post=post) }}{% endfor %}
+        </div>
+      {% endfor %}
     {% endfor %}
   </div>
-
-  {% endfor %}
-  {% endfor %}
-</div>
-
-<script type="module">
-  import '/assets.js'
-</script>
-{% endblock %}
+  <script type="module">import '/assets.js'</script>
+{% endblock page_content %}

templates/community.html

@@ -1,21 +1,22 @@
 {% extends "layouts/base.html" %}
-
 {% block content %}
-{% set community_links = load_data(path="content/community/links.toml") %}
-<div class="padded-content item-grid item-grid--two-cols">
+  {% set community_links = load_data(path="content/community/links.toml") %}
+  <div class="padded-content item-grid item-grid--two-cols">
     {% for link in community_links.links %}
-        <a class="link-card" href="{{ link.url }}">
-            <div class="link-card__img-wrapper">
-                <img class="link-card__img link-card__img--small" src="{{ link.image }}" alt="{{ link.image_alt }}" />
-            </div>
-            <div class="link-card__content">
-                <h2 class="link-card__title">{{ link.title }}</h2>
-                {% if link.subtitle %}
-                    <div class="link-card__subtitle">{{ link.subtitle }}</div>
-                {% endif %}
-                <p class="link-card__description">{{ link.description }}</p>
-            </div>
-        </a>
+      <a class="link-card" href="{{ link.url }}">
+        <div class="link-card__img-wrapper">
+          <img class="link-card__img link-card__img--small"
+                src="{{ link.image }}"
+                alt="{{ link.image_alt }}"
+                width="80"
+                height="80" />
+        </div>
+        <div class="link-card__content">
+          <h2 class="link-card__title">{{ link.title }}</h2>
+          {% if link.subtitle %}<div class="link-card__subtitle">{{ link.subtitle }}</div>{% endif %}
+          <p class="link-card__description">{{ link.description }}</p>
+        </div>
+      </a>
     {% endfor %}
-</div>
+  </div>
 {% endblock content %}