lambdapaul/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add readme to home, fuzzy search instruction and make UI a tad bit better

Browse Source
This commit is contained in:
Paul 2021-09-22 23:53:57 -04:00
parent 9d0d4a4953
commit e2cfd0f266
6 changed files with 60 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -72,8 +72,24 @@
<h1 class="title">PaulW.XYZ</h1> <h1 class="title">PaulW.XYZ</h1>
<div class="fuzzynav"> <div class="fuzzynav">
<input class="search" type="text" id="search" placeholder="Navigate to ..."> <input class="search" type="text" id="search" placeholder="Go to ... (Try typing `help` or `?`)">
<div id="results" class="results"></div> <div id="results" class="results">
<p><strong>Using the search bar will clear this message and list responses based on your query.</strong></p>
<p>This is a draft of the rationale behind writing pages the way I have. I do not like the traditional web conventions so this is where I experiment the most with interfacing elements. The navigation pane-based design works when they are simple and easy to understand. When they get too complex, people rely on using search bars to get where they want. My goal is to find a method to eliminate the visual noise of the complex navigation panes and find a reasonable alternative them while being easy to use. </p>
<h2 id="page-categorization">Page Categorization</h2>
<p>The home page or the index page solely acts as a gateway to all the other pages on the site.
The accessible pages are categorized on a need-based system. Since I currently do not have multiple pages, I have them all under a single directory.</p>
<h2 id="design-principles">Design Principles</h2>
<p>The goal of my home page&rsquo;s design is to keep this minimal. There is no need for unnecessary content to waste people&rsquo;s time. The rule is simple: only waste one&rsquo;s time if they willingly do so.</p>
<p>Modern webpages tend to be bulky. This entire site should retain the modern design while being as minimal and static as possible.</p>
<ul>
<li>minimal: a page should not overly rely on programming logic unless the focus is programming logic</li>
<li>static: informational pages should not be dynamically changing as the focus is on the content itself</li>
</ul>
<h3 id="design-problems">Design Problems</h3>
<p>A new user would never understand how this site works.
My ideal navigation system would involve having as few navigation elements as possible. This is the reason why I chose to add solely the fuzzy-search bar. However, I have not been able to find a good way to give users of my pages a good way to interact in case they do not use the search bar. I previously used to list them all but it was not easy on the eyes and looked lazy. Maybe a command system that does not use symbols (considering touch devices do not support non-Latin character insertions easily). Maybe something similar to *nix commands. The site somewhat vaguely follows the basic file-system structure. However, this goes against my goal of &ldquo;ease-of-use&rdquo; which is why I have not done it yet.</p>
</div>
</div> </div>
</nav> </nav>

2
pages/grade-calc/index.html
View File

@ -45,6 +45,7 @@
<body> <body>
<h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Grade Calculator</h1> <h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Grade Calculator</h1>
<div class="block">
<div class="about-container"> <div class="about-container">
<h2>About</h2> <h2>About</h2>
Check out the <a href="https://github.com/lambdapaul/www/blob/master/pages/grade-calc/README.md">README.md</a> file Check out the <a href="https://github.com/lambdapaul/www/blob/master/pages/grade-calc/README.md">README.md</a> file
@ -74,6 +75,7 @@
</div> </div>
<div class="calculator-container"> <div class="calculator-container">
</div><span class="clear"></span>
</div> </div>
<script type="text/javascript" src="gc_client.js"></script> <script type="text/javascript" src="gc_client.js"></script>
<script> <script>

2
pages/recommended.html
View File

@ -9,7 +9,7 @@
<body> <body>
<!-- This page is really for me to not forget/revisit the good things I have read, seen, heard, and/or experienced. This list may change, just as my opinions. --> <!-- This page is really for me to not forget/revisit the good things I have read, seen, heard, and/or experienced. This list may change, just as my opinions. -->
<h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Recommended</h1> <h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Recommended</h1>
<section> <section class="block">
<p>If the one you're looking for is not on this list, it is most likely I haven't had the chance to read it yet or I may have put it on the Resources page, if it is freely available.</p> <p>If the one you're looking for is not on this list, it is most likely I haven't had the chance to read it yet or I may have put it on the Resources page, if it is freely available.</p>
<hr> <hr>
<h2>Books</h2> <h2>Books</h2>

2
pages/resources.html
View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Resources</h1> <h1 class="title"><a href="/">PaulW.XYZ</a> / <a href="/pages/">Pages</a> / Resources</h1>
<section> <section class="block">
<h2>Programming</h2> <h2>Programming</h2>
<ul> <ul>
<li><a href="http://aggregate.org/MAGIC/">The Aggregate Magic Algorithms</a></li> <li><a href="http://aggregate.org/MAGIC/">The Aggregate Magic Algorithms</a></li>

13
scripts/fuzzy.js
View File

@ -1,3 +1,4 @@
// good luck reading through this
(function () { (function () {
var client = new XMLHttpRequest(); var client = new XMLHttpRequest();
client.open("GET", "/pages.json"); client.open("GET", "/pages.json");
@ -6,6 +7,7 @@
fuzzyInit(client.responseText); fuzzyInit(client.responseText);
} }
client.send(); client.send();
document.querySelector("#search").focus();
})(); })();
function fuzzyInit(pagesFileName) { function fuzzyInit(pagesFileName) {
@ -39,11 +41,18 @@ function fuzzyInit(pagesFileName) {
break; break;
} }
if (document.querySelector("#search").value === ""){ // help
document.querySelector("#results").innerHTML = ""; if (document.querySelector("#search").value === "?" || document.querySelector("#search").value == "help") {
document.querySelector("#results").innerHTML = "Enter a page or directory name. If do not know any, clear the search field to list everything. Using the <code>Enter</code> key would take you to the first page in list, if it is not empty."
return; return;
} }
// if (document.querySelector("#search").value === ""){
// document.querySelector("#results").innerHTML = "Try entering something into the input field...";
// return;
// }
let results = []; let results = [];
for (const [i, [title, page]] of pages.entries()) { for (const [i, [title, page]] of pages.entries()) {
ret = fuzzySearch(title, document.querySelector("#search").value); ret = fuzzySearch(title, document.querySelector("#search").value);

42
stylesheets/persia.css
View File

@ -7,9 +7,6 @@ html {
line-height: 1.15; line-height: 1.15;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background: linear-gradient(to bottom right, #64a95a, #388c73) no-repeat
center center fixed;
background-size: cover;
height: 100%; height: 100%;
} }
@ -35,7 +32,11 @@ body {
color: #fff; color: #fff;
text-align: left; text-align: left;
height: 100%; height: 100%;
background-color: transparent; background: linear-gradient(to bottom right, #64a95a, #388c73) no-repeat
center center fixed;
background-color: #539c65;
background-size: cover;
margin-bottom: 1rem;
} }
[tabindex="-1"]:focus { [tabindex="-1"]:focus {
@ -94,7 +95,7 @@ p {
} }
a { a {
color: #002bff; color: #009dff;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
outline: none; outline: none;
@ -148,7 +149,7 @@ section {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 3rem; font-size: 3rem;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background: rgba(0,0,0,.3); background-color: rgba(0,0,0,0.5);
} }
.input { .input {
@ -161,7 +162,9 @@ section {
.nav-list { .nav-list {
margin: 1rem; margin: 1rem;
padding: 0; padding: 1rem;
box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.2);
background-color: rgba(0,0,0,0.5);
} }
.fuzzynav { .fuzzynav {
@ -187,23 +190,31 @@ section {
font-style: italic; font-style: italic;
} }
.block,
.fuzzynav div.results { .fuzzynav div.results {
margin: 1rem; margin: 1rem;
padding-bottom: 2rem; padding: 1rem;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-color: rgba(0,0,0,0.5);
}
span.clear {
clear: both;
display: block;
} }
.nav-list a, .nav-list a,
.fuzzynav div.results .hyperlink { .fuzzynav div.results .hyperlink {
color: #009dff; color: #009dff;
background-color: rgba(34, 34, 34, 0.616); background-color: #539c65;
display: block; display: block;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
padding: 0.5rem; padding: 0.5rem;
width: 100%; width: 100%;
margin: 0.5rem auto; margin: 0.5rem auto;
font-size: 1.4rem; font-size: 1.4rem;
transition: 300ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
text-decoration: none; text-decoration: none;
background: linear-gradient(to bottom right, #64a95a, #388c73) no-repeat
center center fixed;
} }
.nav-list a:hover, .nav-list a:hover,
@ -222,21 +233,22 @@ section {
} }
.fuzzynav div.results .hyperlink .link { .fuzzynav div.results .hyperlink .link {
color: #0000FE;
text-align: right; text-align: right;
font-size: 1.1rem; font-size: 1.1rem;
} }
.fuzzynav div.results .hyperlink .highlight { .fuzzynav div.results .hyperlink .highlight {
color: rgb(175, 175, 175) text-decoration: underline;
} }
footer { footer {
position: fixed; color: #fff;
background: rgb(0,0,0);
padding: 0.25rem;
bottom: 0; bottom: 0;
right: 0; right: 0;
color: #fff; position: fixed;
background: transparent;
padding: 0.25rem;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
} }