Only load JS when needed

laravel · Jul 10, 2024 · a661379 · a661379
1 parent fed919a
commit a661379
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 70 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,8 +1,6 @@
 import Alpine from 'alpinejs';
 import Focus from '@alpinejs/focus';
-
-import './clipboard';
-import './components/search';
+import docsearch from '@docsearch/js';
 
 import.meta.glob([
   '../images/**',
@@ -13,10 +11,12 @@ window.Alpine = Alpine;
 Alpine.plugin(Focus);
 Alpine.start();
 
-document.addEventListener('DOMContentLoaded', () => {
-    if (document.querySelector('#docsScreen')) {
-        import('./docs.js');
-    }
-
-    import('./components/accessibility');
+docsearch({
+    container: '#docsearch',
+    appId: algolia_app_id,
+    apiKey: algolia_search_key,
+    indexName: 'laravel',
+    searchParameters: {
+        facetFilters: ['version:' + window.version],
+    },
 });
diff --git a/resources/js/components/accessibility.js b/resources/js/components/accessibility.js
diff --git a/resources/js/components/search.js b/resources/js/components/search.js
diff --git a/resources/js/components/theme.js b/resources/js/components/theme.js
diff --git a/resources/js/docs.js b/resources/js/docs.js
@@ -1,7 +1,39 @@
-wrapHeadingsInAnchors();
-setupNavCurrentLinkHandling();
-replaceBlockquotesWithCalloutsInDocs();
-highlightSupportPolicyTable();
+import './clipboard';
+
+window.toDarkMode = () => {
+    localStorage.theme = 'dark';
+    window.updateTheme();
+}
+
+window.toLightMode = () => {
+    localStorage.theme = 'light';
+    window.updateTheme();
+}
+
+window.toSystemMode = () => {
+    localStorage.theme = 'system';
+    window.updateTheme();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    wrapHeadingsInAnchors();
+    setupNavCurrentLinkHandling();
+    replaceBlockquotesWithCalloutsInDocs();
+    highlightSupportPolicyTable();
+
+    const skipToContentLink = document.querySelector('#skip-to-content-link');
+    const mainContentWrapper = document.querySelector('#main-content');
+
+    skipToContentLink.addEventListener('click', (e) => {
+        e.preventDefault();
+        mainContentWrapper.setAttribute('tabindex', -1);
+        mainContentWrapper.focus();
+    });
+
+    mainContentWrapper.addEventListener('blur', () => {
+        mainContentWrapper.removeAttribute('tabindex');
+    });
+})
 
 function wrapHeadingsInAnchors() {
     [...document.querySelector('.docs_main').querySelectorAll('a[name]')].forEach(anchor => {
@@ -164,8 +196,3 @@ function highlightSupportPolicyTable() {
 function getCellDate(cell) {
     return Date.parse(cell.innerHTML.replace(/(\d+)(st|nd|rd|th)/, '$1'));
 }
-
-import { toDarkMode, toLightMode, toSystemMode } from './components/theme';
-window.toDarkMode = toDarkMode;
-window.toLightMode = toLightMode;
-window.toSystemMode = toSystemMode;
diff --git a/resources/views/partials/layout.blade.php b/resources/views/partials/layout.blade.php
@@ -49,7 +49,11 @@
     <link rel="preconnect" href="https://{{ config('algolia.connections.main.id') }}-dsn.algolia.net" crossorigin />
 
     <link rel="stylesheet" href="https://use.typekit.net/ins2wgm.css">
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @vite([
+        'resources/css/app.css',
+        'resources/js/app.js',
+        ...request()->is('docs/*') ? ['resources/js/docs.js'] : [],
+    ])
 
     @production
         <!-- Fathom - beautiful, simple website analytics -->

diff --git a/vite.config.js b/vite.config.js
@@ -4,7 +4,7 @@ import laravel from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
+            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/docs.js'],
             refresh: true,
         }),
     ],