Improve HTML structure

Usbac · Sep 7, 2024 · d876483 · d876483
1 parent e5f9748
commit d876483
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 106 deletions.
diff --git a/app/views/admin/base.php b/app/views/admin/base.php
@@ -63,33 +63,33 @@
     <?= $this->include('admin/partials/snackbar.php') ?>
     <?php $this->sectionStart('content') ?>
     <?php $this->sectionEnd() ?>
-</body>
-</html>
-<script>
-    window.addEventListener('load', () => {
-        updateMetaThemeColor(<?= js(($_COOKIE['theme'] ?? '') !== 'dark') ?>);
+    <script>
+        window.addEventListener('load', () => {
+            updateMetaThemeColor(<?= js(($_COOKIE['theme'] ?? '') !== 'dark') ?>);
 
-        document.querySelectorAll('.admin-options > a').forEach(el => {
-            if (location.pathname.startsWith(el.getAttribute('href'))) {
-                el.dataset.checked = true;
-            }
-        });
+            document.querySelectorAll('.admin-options > a').forEach(el => {
+                if (location.pathname.startsWith(el.getAttribute('href'))) {
+                    el.dataset.checked = true;
+                }
+            });
 
-        Dropdown.init();
-    });
+            Dropdown.init();
+        });
 
-    function updateMetaThemeColor(light) {
-        document.querySelector('meta[name="theme-color"]').setAttribute('content', light ? '#ffffff' : '#171821');
-    }
+        function updateMetaThemeColor(light) {
+            document.querySelector('meta[name="theme-color"]').setAttribute('content', light ? '#ffffff' : '#171821');
+        }
 
-    document.getElementById('toggle-theme').addEventListener('click', () => {
-        let is_light_enabled = get('#css-dark').toggleAttribute('disabled');
-        let theme = is_light_enabled ? 'light' : 'dark';
+        document.getElementById('toggle-theme').addEventListener('click', () => {
+            let is_light_enabled = get('#css-dark').toggleAttribute('disabled');
+            let theme = is_light_enabled ? 'light' : 'dark';
 
-        updateMetaThemeColor(is_light_enabled);
-        get('#toggle-theme').dataset.theme = theme;
-        document.cookie = 'theme=' + theme + ';path=/';
-    });
-</script>
-<?php $this->sectionStart('extra') ?>
-<?php $this->sectionEnd() ?>
+            updateMetaThemeColor(is_light_enabled);
+            get('#toggle-theme').dataset.theme = theme;
+            document.cookie = 'theme=' + theme + ';path=/';
+        });
+    </script>
+    <?php $this->sectionStart('extra') ?>
+    <?php $this->sectionEnd() ?>
+</body>
+</html>
diff --git a/app/views/admin/login.php b/app/views/admin/login.php
@@ -34,24 +34,24 @@
         <button type="submit"><?= t('get_new_password') ?></button>
         <button class="pointer light" onclick="get('#login-form').classList.remove('hidden'); get('#restore-form').classList.add('hidden');"><?= t('go_back') ?></button>
     </form>
-</body>
-</html>
-<script>
-    document.getElementById('login-form').addEventListener('submit', event => {
-        event.preventDefault();
-        Form.send('/admin/login', 'login-form', event.target.querySelector('[type="submit"]')).then(res => {
-            if (res.success) {
-                setTimeout(() => location.reload(), 3000);
-            }
+    <script>
+        document.getElementById('login-form').addEventListener('submit', event => {
+            event.preventDefault();
+            Form.send('/admin/login', 'login-form', event.target.querySelector('[type="submit"]')).then(res => {
+                if (res.success) {
+                    setTimeout(() => location.reload(), 3000);
+                }
+            });
         });
-    });
 
-    document.getElementById('restore-form').addEventListener('submit', event => {
-        event.preventDefault();
-        Form.send('/admin/send_password_restore', 'restore-form', event.target.querySelector('[type="submit"]')).then(res => {
-            if (res.success) {
-                get('#restore-email').value = '';
-            }
+        document.getElementById('restore-form').addEventListener('submit', event => {
+            event.preventDefault();
+            Form.send('/admin/send_password_restore', 'restore-form', event.target.querySelector('[type="submit"]')).then(res => {
+                if (res.success) {
+                    get('#restore-email').value = '';
+                }
+            });
         });
-    });
-</script>
+    </script>
+</body>
+</html>
diff --git a/app/views/admin/partials/media_header.php b/app/views/admin/partials/media_header.php
@@ -114,7 +114,6 @@
         </div>
     </div>
 </div>
-
 <script>
     let path = <?= js($_GET['path'] ?? \Aurora\Core\Kernel::config('content')) ?>;
     let file_name = null;

diff --git a/app/views/admin/password_restore.php b/app/views/admin/password_restore.php
@@ -19,15 +19,15 @@
         <input type="hidden" name="csrf" value="<?= e($this->csrfToken()) ?>"/>
         <button type="submit"><?= t('restore_your_password') ?></button>
     </form>
+    <script>
+        document.getElementById('restore-form').addEventListener('submit', event => {
+            event.preventDefault();
+            Form.send('/admin/password_restore', 'restore-form', event.target.querySelector('[type="submit"]')).then(res => {
+                if (res.success) {
+                    setTimeout(() => location.href = '/admin/dashboard', 2000);
+                }
+            });
+        });
+    </script>
 </body>
 </html>
-<script>
-    document.getElementById('restore-form').addEventListener('submit', event => {
-        event.preventDefault();
-        Form.send('/admin/password_restore', 'restore-form', event.target.querySelector('[type="submit"]')).then(res => {
-            if (res.success) {
-                setTimeout(() => location.href = '/admin/dashboard', 2000);
-            }
-        });
-    });
-</script>
diff --git a/app/views/themes/default/blog.php b/app/views/themes/default/blog.php
@@ -16,62 +16,62 @@
     <?= $this->include('themes/default/partials/header.php') ?>
     <main>
         <?php if (!empty($_GET['search'])): ?>
-            <section class="blog-title">
+            <div class="section blog-title">
                 <h2><?= t('searching') ?>: <?= e($_GET['search']) ?></h2>
-            </section>
+            </div>
         <?php endif ?>
         <?php if (isset($tag)): ?>
-            <section class="blog-title">
+            <div class="section blog-title">
                 <h2><?= t('tag') ?>: <?= e($tag['name']) ?></h2>
                 <span><?= e($tag['description']) ?></span>
-            </section>
+            </div>
             <script>var next_page_args = 'tag=' + <?= js($tag['id']) ?>;</script>
         <?php elseif (isset($user)): ?>
-            <section class="author">
-                <img src="<?= !empty($post['user_image']) ? e($this->getContentUrl($post['user_image'])) : '/public/assets/user.svg' ?>"/>
+            <div class="section author">
+                <img src="<?= !empty($post['user_image']) ? e($this->getContentUrl($post['user_image'])) : '/public/assets/user.svg' ?>" alt="<?= t('author') ?>"/>
                 <h2><?= e($user['name']) ?></h2>
-            </section>
+            </div>
             <script>var next_page_args = 'user=' + <?= e($user['id']) ?>;</script>
         <?php else: ?>
             <script>var next_page_args = '';</script>
         <?php endif ?>
-        <section id="posts" class="posts">
+        <div id="posts" class="section posts">
             <?= $this->include('themes/default/partials/posts_page.php') ?>
             <?php if (empty($posts)): ?>
                 <h3 class="empty"><?= t('no_results') ?></h3>
             <?php endif ?>
-        </section>
+        </div>
         <?php if ($next_page): ?>
             <button id="load-posts" class="load-more" onclick="loadNextPage(this, next_page_args)"><?= t('load_more') ?></button>
         <?php endif ?>
     </main>
     <?= $this->include('themes/default/partials/footer.php') ?>
-</body>
-</html>
-<script>
-    var next_page = <?= js($current_page + 1) ?>;
+    <script>
+        var next_page = <?= js($current_page + 1) ?>;
 
-    function loadNextPage(btn, args = '') {
-        if (!next_page) {
-            return;
-        }
+        function loadNextPage(btn, args = '') {
+            if (!next_page) {
+                return;
+            }
 
-        btn.classList.add('loading');
+            btn.classList.add('loading');
 
-        fetch('/api/posts?page=' + next_page + '&' + args)
-            .then(res => res.json())
-            .then(res => {
-                window.history.replaceState(null, null, window.location.pathname + '?page=' + next_page);
+            fetch('/api/posts?page=' + next_page + '&' + args)
+                .then(res => res.json())
+                .then(res => {
+                    window.history.replaceState(null, null, window.location.pathname + '?page=' + next_page);
 
-                if (!res.next_page) {
-                    document.getElementById('load-posts').remove();
-                    next_page = false;
-                } else {
-                    next_page++;
-                }
+                    if (!res.next_page) {
+                        document.getElementById('load-posts').remove();
+                        next_page = false;
+                    } else {
+                        next_page++;
+                    }
 
-                document.getElementById('posts').insertAdjacentHTML('beforeend', res.html);
-            })
-            .finally(() => btn.classList.remove('loading'));
-    }
-</script>
+                    document.getElementById('posts').insertAdjacentHTML('beforeend', res.html);
+                })
+                .finally(() => btn.classList.remove('loading'));
+        }
+    </script>
+</body>
+</html>
diff --git a/app/views/themes/default/partials/header.php b/app/views/themes/default/partials/header.php
@@ -9,13 +9,17 @@
         <?php $current_path = trim(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH), '/'); ?>
         <nav id="menu">
             <ul class="close">
-                <button class="pointer" onclick="document.body.toggleAttribute('nav-open')">
-                    <?= $this->include('icons/x.svg') ?>
-                </button>
+                <li>
+                    <button class="pointer" onclick="document.body.toggleAttribute('nav-open')">
+                        <?= $this->include('icons/x.svg') ?>
+                    </button>
+                </li>
             </ul>
             <?php foreach ($header_links as $link): ?>
                 <ul>
-                    <a href="<?= e($link['url']) ?>" <?php if ($current_path == trim($link['url'], '/')): ?> active <?php endif ?>><?= e($link['title']) ?></a>
+                    <li>
+                        <a href="<?= e($link['url']) ?>" <?php if ($current_path == trim($link['url'], '/')): ?> data-active <?php endif ?>><?= e($link['title']) ?></a>
+                    </li>
                 </ul>
             <?php endforeach ?>
         </nav>

diff --git a/app/views/themes/default/partials/posts_page.php b/app/views/themes/default/partials/posts_page.php
@@ -24,7 +24,7 @@
                     <div>
                         <?php $user_url = '/' . setting('blog_url') . '/author/' . $post['user_slug'] ?>
                         <a href="<?= e($user_url) ?>" class="pointer">
-                            <img src="<?= !empty($post['user_image']) ? e($this->getContentUrl($post['user_image'])) : '/public/assets/user.svg' ?>"/>
+                            <img src="<?= !empty($post['user_image']) ? e($this->getContentUrl($post['user_image'])) : '/public/assets/user.svg' ?>" alt="<?= t('author') ?>"/>
                         </a>
                         <a href="<?= e($user_url) ?>"><?= e($post['user_name']) ?></a>
                     </div>

diff --git a/app/views/themes/default/post.php b/app/views/themes/default/post.php
@@ -15,7 +15,7 @@
 <body>
     <?= $this->include('themes/default/partials/header.php') ?>
     <main class="post">
-        <section class="narrow post-top">
+        <div class="section narrow post-top">
             <div class="post-tags">
                 <?php foreach ($post['tags'] as $tag_slug => $tag_title): ?>
                     <a href="<?= e('/' . setting('blog_url') . '/tag/' . $tag_slug) ?>"><?= e($tag_title) ?></a>
@@ -33,25 +33,25 @@
                     <div>
                         <?php $user_url = '/' . setting('blog_url') . '/author/' . $post['user_slug'] ?>
                         <a href="<?= e($user_url) ?>" class="pointer">
-                            <img src="<?= !empty($post['user_image']) ? e($this->getContentUrl($post['user_image'])) : '/public/assets/user.svg' ?>"/>
+                            <img src="<?= !empty($post['user_image']) ? e($this->getContentUrl($post['user_image'])) : '/public/assets/user.svg' ?>" alt="<?= t('author') ?>"/>
                         </a>
                         <a href="<?= e($user_url) ?>"><?= e($post['user_name']) ?></a>
                     </div>
                 <?php endif ?>
                 <span><?= e($this->dateFormat($post['published_at'])) ?></span>
                 <span><?= e($this->getReadTime($post['html'])) ?> <?= t('minutes_read') ?></span>
             </div>
-        </section>
-        <section class="narrow post-html">
+        </div>
+        <div class="section narrow post-html">
             <article><?= $post['html'] ?></article>
-        </section>
+        </div>
         <?php if (!empty(setting('post_code'))): ?>
-            <section>
+            <div class="section">
                 <?= setting('post_code') ?>
-            </section>
+            </div>
         <?php endif ?>
         <?php if (!empty($related_posts)): ?>
-            <section class="post-related">
+            <div class="section post-related">
                 <h2><?= t('related_posts') ?></h2>
                 <div>
                     <?php foreach ($related_posts as $related): ?>
@@ -76,7 +76,7 @@
                         </div>
                     <?php endforeach ?>
                 </div>
-            </section>
+            </div>
         <?php endif ?>
     </main>
     <?= $this->include('themes/default/partials/footer.php') ?>

diff --git a/public/assets/css/themes/default/main.css b/public/assets/css/themes/default/main.css
@@ -45,6 +45,10 @@ header > * {
     margin: 0 40px;
 }
 
+header ul {
+    list-style-type: none;
+}
+
 .logo-img {
     display: flex;
     align-items: center;
@@ -92,11 +96,11 @@ header nav a {
     text-align: center;
 }
 
-header nav a[active] {
+header nav a[data-active] {
     color: var(--main-color);
 }
 
-header nav a[active]:before,
+header nav a[data-active]:before,
 header nav a:hover:before {
     width: 100%;
 }
@@ -318,7 +322,7 @@ button:not(.loading):hover {
     margin-bottom: 12px;
 }
 
-section {
+.section {
     min-width: var(--section-max-width);
     max-width: var(--section-max-width);
     margin: 0 auto;
@@ -495,7 +499,7 @@ article a {
         margin: 0 30px;
     }
 
-    section {
+    .section {
         min-width: initial;
         flex-direction: column;
         align-items: center;
@@ -504,7 +508,7 @@ article a {
         margin-right: var(--mobile-margin);
     }
 
-    section > img {
+    .section > img {
         max-width: 100%;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -114,7 +114,6 @@ @@
             </div>
         </div>
     </div>
     <script>
         let path = <?= js($_GET['path'] ?? \Aurora\Core\Kernel::config('content')) ?>;
         let file_name = null;
@@ Expand Down @@