Skip to content

Commit

Permalink
Updating Github Pages Search Bar some more
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheWongLife
TheWongLife committed Jun 2, 2024
1 parent bbaf117 commit 29fbbc1
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 17 deletions.
26 changes: 24 additions & 2 deletions 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,17 @@
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
</div>
<div class="input-group ps-5">
<div id="navbar-search-autocomplete" class="form-outline" data-mdb-input-init>
<form action="https://google.com/search" method="GET">
<input type="hidden" name="sitesearch" value="https://thewonglife.is-a.dev" />
<input type="text" name="q" />
</form>
</div>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>
<i class="fa-solid fa-magnifying-glass fa-sm"></i>
</button>
</div>
</div>
</div>
</nav>
Expand Down Expand Up @@ -254,8 +265,19 @@ <h4 class="header404">404 <i class="fa-solid fa-magnifying-glass fa-sm"></i></h4
<script src="js/script.js"></script>
<script src="js/scroll.js"></script>
<script>
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
import { Autocomplete, Collapse, Dropdown, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Collapse, Dropdown, Input, Ripple });
const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
const navbarData = ['About', 'Contact', 'Resume'];
const navbarDataFilter = (value) => {
return navbarData.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};

new Autocomplete(navbarAutocomplete, {
filter: navbarDataFilter,
});
</script>
</body>

Expand Down
28 changes: 25 additions & 3 deletions html/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,17 @@
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
</div>
<div class="input-group ps-5">
<div id="navbar-search-autocomplete" class="form-outline" data-mdb-input-init>
<form action="https://google.com/search" method="GET">
<input type="hidden" name="sitesearch" value="https://thewonglife.is-a.dev" />
<input type="text" name="q" />
</form>
</div>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>
<i class="fa-solid fa-magnifying-glass fa-sm"></i>
</button>
</div>
</div>
</div>
</nav>
Expand Down Expand Up @@ -278,9 +289,20 @@ <h3 align="center">Senior @ University of Illinois Urbana-Champaign (UIUC) major
<script src="../js/script.js"></script>
<script src="../js/scroll.js"></script>
<script>
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
</script>
import { Autocomplete, Collapse, Dropdown, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Collapse, Dropdown, Input, Ripple });
const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
const navbarData = ['About', 'Contact', 'Resume'];
const navbarDataFilter = (value) => {
return navbarData.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};

new Autocomplete(navbarAutocomplete, {
filter: navbarDataFilter,
});
</script>
</body>

</html>
26 changes: 24 additions & 2 deletions html/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,17 @@
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
</div>
<div class="input-group ps-5">
<div id="navbar-search-autocomplete" class="form-outline" data-mdb-input-init>
<form action="https://google.com/search" method="GET">
<input type="hidden" name="sitesearch" value="https://thewonglife.is-a.dev" />
<input type="text" name="q" />
</form>
</div>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>
<i class="fa-solid fa-magnifying-glass fa-sm"></i>
</button>
</div>
</div>
</div>
</nav>
Expand Down Expand Up @@ -282,8 +293,19 @@ <h1 class="text-center mt-5">Let's start a conversation <i class="fa-solid fa-co
<script src="../js/script.js"></script>
<script src="../js/scroll.js"></script>
<script>
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
import { Autocomplete, Collapse, Dropdown, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Collapse, Dropdown, Input, Ripple });
const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
const navbarData = ['About', 'Contact', 'Resume'];
const navbarDataFilter = (value) => {
return navbarData.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};

new Autocomplete(navbarAutocomplete, {
filter: navbarDataFilter,
});
</script>
</body>

Expand Down
28 changes: 25 additions & 3 deletions html/resume.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,17 @@
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
</div>
<div class="input-group ps-5">
<div id="navbar-search-autocomplete" class="form-outline" data-mdb-input-init>
<form action="https://google.com/search" method="GET">
<input type="hidden" name="sitesearch" value="https://thewonglife.is-a.dev" />
<input type="text" name="q" />
</form>
</div>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>
<i class="fa-solid fa-magnifying-glass fa-sm"></i>
</button>
</div>
</div>
</div>
</nav>
Expand Down Expand Up @@ -234,9 +245,20 @@ <h1 class="text-center mt-5">Check out my resume <i class="fa-solid fa-file fa-s
<script src="../js/script.js"></script>
<script src="../js/scroll.js"></script>
<script>
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
</script>
import { Autocomplete, Collapse, Dropdown, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Collapse, Dropdown, Input, Ripple });
const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
const navbarData = ['About', 'Contact', 'Resume'];
const navbarDataFilter = (value) => {
return navbarData.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};

new Autocomplete(navbarAutocomplete, {
filter: navbarDataFilter,
});
</script>
</body>

</html>
26 changes: 24 additions & 2 deletions html/thanks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,17 @@
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
</div>
<div class="input-group ps-5">
<div id="navbar-search-autocomplete" class="form-outline" data-mdb-input-init>
<form action="https://google.com/search" method="GET">
<input type="hidden" name="sitesearch" value="https://thewonglife.is-a.dev" />
<input type="text" name="q" />
</form>
</div>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>
<i class="fa-solid fa-magnifying-glass fa-sm"></i>
</button>
</div>
</div>
</div>
</nav>
Expand Down Expand Up @@ -240,8 +251,19 @@ <h1 class="text-center mt-5">Thank You</h1>
<script src="../js/script.js"></script>
<script src="../js/scroll.js"></script>
<script>
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
import { Autocomplete, Collapse, Dropdown, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Collapse, Dropdown, Input, Ripple });
const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
const navbarData = ['About', 'Contact', 'Resume'];
const navbarDataFilter = (value) => {
return navbarData.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};

new Autocomplete(navbarAutocomplete, {
filter: navbarDataFilter,
});
</script>
</body>

Expand Down
29 changes: 24 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,17 @@
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
</div>
<div class="input-group ps-5">
<div id="navbar-search-autocomplete" class="form-outline" data-mdb-input-init>
<form action="https://google.com/search" method="GET">
<input type="hidden" name="sitesearch" value="https://thewonglife.is-a.dev" />
<input type="text" name="q" />
</form>
</div>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>
<i class="fa-solid fa-magnifying-glass fa-sm"></i>
</button>
</div>
</div>
</div>
</nav>
Expand Down Expand Up @@ -310,9 +321,6 @@ <h4>Visual Studio Code</h4>
></a>
</section>
</div>
<script async src="https://cse.google.com/cse.js?cx=14a0a888d87d644ac">
</script>
<div class="gcse-search"></div>
<div class="text-center p-3">
Copyright &copy; 2024
<a class="text-body" href="https://thewonglife.is-a.dev">Nicholas Wong</a>
Expand Down Expand Up @@ -347,8 +355,19 @@ <h4>Visual Studio Code</h4>
<script src="js/script.js"></script>
<script src="js/scroll.js"></script>
<script>
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
import { Autocomplete, Collapse, Dropdown, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Collapse, Dropdown, Input, Ripple });
const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
const navbarData = ['About', 'Contact', 'Resume'];
const navbarDataFilter = (value) => {
return navbarData.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};

new Autocomplete(navbarAutocomplete, {
filter: navbarDataFilter,
});
</script>
</body>

Expand Down

0 comments on commit 29fbbc1

Please sign in to comment.