Merge pull request #1 from wahyuwiyoko/improvement

Improved accessibility and SEO
you-apps · Nov 14, 2023 · 1939f8e · 1939f8e
2 parents 1d1b6f5 + 3878c3c
commit 1939f8e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/app.js b/app.js
@@ -1,43 +1,49 @@
-let $ = document.querySelector.bind(document);
+let element = document.querySelector.bind(document);
 
 const reposUrl = "https://api.github.com/orgs/you-apps/repos";
 const membersUrl = "https://api.github.com/orgs/you-apps/members";
 
-const fetchJson = async (url) => {
-  const resp = await fetch(url);
-  return await resp.json();
+async function fetchJson(url) {
+  const response = await fetch(url);
+  const json = await response.json();
+
+  return json;
 }
 
-const loadRepos = async () => {
+async function loadRepos() {
   const repos = await fetchJson(reposUrl);
   repos.sort((a, b) => a.stargazers_count < b.stargazers_count);
-  for (let repo of repos) {
+
+  for (const repo of repos) {
     if (!repo.name.includes("You")) continue;
 
-    let newHTML = `
+    const apps = `
       <a class="card" href="${repo.html_url}">
-        <img src="https://raw.githubusercontent.com/you-apps/${repo.name}/main/fastlane/metadata/android/en-US/images/icon.png">
+        <img src="https://raw.githubusercontent.com/you-apps/${repo.name}/main/fastlane/metadata/android/en-US/images/icon.png" alt="${repo.name} icon">
         <div>
           <h3>${repo.name}</h3>
           <p>${repo.description}</p>
         </div>
-        <span class="stars"><img src="assets/star.svg">${repo.stargazers_count}</span>
+        <span class="stars"><img src="assets/star.svg" alt="Star icon">${repo.stargazers_count}</span>
       </a>
     `;
-    $("#apps > div").innerHTML += newHTML;
+
+    element("#app-list").innerHTML += apps;
   }
 }
 
-const loadMembers = async () => {
+async function loadMembers() {
   const members = await fetchJson(membersUrl);
-  for (let member of members) {
-    let newHTML = `
-      <a class="card" href=${member.html_url}>
-        <img src=${member.avatar_url}>
+
+  for (const member of members) {
+    const team = `
+      <a class="card" href="${member.html_url}">
+        <img src="${member.avatar_url}" alt="${member.login} avatar">
         <h3>${member.login}</h3>
       </a>
     `;
-    $("#team > div").innerHTML += newHTML;
+
+    element("#member-list").innerHTML += team;
   }
 }
 

diff --git a/index.html b/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="A collection of open source Android apps, developed with privacy in mind and beautiful design."
+    />
     <title>You Apps</title>
     <link rel="stylesheet" href="style.css" />
     <link
@@ -17,6 +21,7 @@
       <a href="/"
         ><img
           src="https://raw.githubusercontent.com/you-apps/Artwork/main/app-icons/new/YouApps.svg"
+          alt="You Apps icon"
       /></a>
       <nav>
         <a href="#hero">About</a>
@@ -45,16 +50,17 @@ <h1>No Ads, no trackers, just You</h1>
       </div>
       <img
         src="https://raw.githubusercontent.com/you-apps/Artwork/main/app-icons/new/YouApps.svg"
+        alt="You Apps icon"
       />
     </section>
     <section id="apps">
       <h2>Apps</h2>
-      <div></div>
+      <div id="app-list"></div>
       <noscript>Enable JavaScript to view the apps</noscript>
     </section>
     <section id="team">
       <h2>Team</h2>
-      <div></div>
+      <div id="member-list"></div>
     </section>
     <section id="contributing">
       <div class="card">
@@ -67,8 +73,10 @@ <h1>Contribute now!</h1>
             for discussions about the app.
           </li>
           <li>
-            Bug reports and feature requests can be submitted
-            <a href="https://github.com/Bnyro/ConnectYou/issues">here</a>
+            Bug reports and feature requests can be submitted to
+            <a href="https://github.com/Bnyro/ConnectYou/issues"
+              >our repository</a
+            >
             (please make sure to fill out all the requested information
             properly!).
           </li>
@@ -86,10 +94,10 @@ <h1>Contribute now!</h1>
       <span>2023 You Apps GPL-3.0 LICENSED</span>
       <span id="social-links">
         <a href="https://github.com/you-apps"
-          ><img src="assets/github.svg"
+          ><img src="assets/github.svg" alt="GitHub icon"
         /></a>
         <a href="https://matrix.to/#/#you-apps:matrix.org"
-          ><img src="assets/matrix.svg"
+          ><img src="assets/matrix.svg" alt="Matrix icon"
         /></a>
       </span>
     </footer>