Jay

.eslintrc.cjs

@@ -12,5 +12,6 @@ module.exports = {
     sourceType: 'module'
   },
   rules: {
-  }
+  },
+  ignorePatterns: ["**/*.jest.js"],
 }

.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: Unit Tests
+
+on: [push, pull_request]
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test

babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};

compose-dev.yaml

@@ -0,0 +1,12 @@
+services:
+  app:
+    entrypoint:
+    - sleep
+    - infinity
+    image: docker/dev-environments-javascript:stable-1
+    init: true
+    volumes:
+    - type: bind
+      source: /var/run/docker.sock
+      target: /var/run/docker.sock
+

design/dashboard.handlebars

@@ -1,43 +1,50 @@
 <div class="stream">
-<header>
-    <span>{{prefs.icons.latest}} Latest</span>
-    <a href="/private" id="newPosts" class="unread" hidden></a>
-</header>
-<div id="home_stream">
-    {{#if activitystream}}
-        {{#each activitystream}}
-            {{#with this}}
-                <div class="activity">
-                    {{#if boost}}
-                        <div class="boost">
-                        🚀 boosted by <a href="/private/feeds/{{getUsername booster.id}}">{{booster.name}}</a>
-                        </div>
-                    {{/if}}
-                    {{> note note=note me=../me}}
-                </div>
-            {{/with}}
-        {{/each}}
-    {{else}}
-        <div class="empty">
-            <p>Follow some people to fill your feed with posts.</p>
-            <p>I suggest following me! 
-                I'm <a href="/private/feeds/benbrown@hackers.town">benbrown@hackers.town</a>
-            </p>
-        </div>
+    <header class="stream-header">
+        <span>{{prefs.icons.latest}} Latest</span>
+        <a href="/private" id="newPosts" class="unread-link" hidden></a>
+    </header>
+    <main id="home_stream">
+        {{#if activitystream}}
+            {{#each activitystream}}
+                <article class="activity">
+                    {{#with this}}
+                        {{#if boost}}
+                            <section class="boost-notification">
+                                🚀 Boosted by 
+                                <a href="/private/feeds/{{getUsername booster.id}}">{{booster.name}}</a>
+                            </section>
+                        {{/if}}
+                        {{> note note=note me=../me}}
+                    {{/with}}
+                </article>
+            {{/each}}
+        {{else}}
+            <div class="empty-state">
+                <p>Follow some people to fill your feed with posts.</p>
+                <p>Suggestion: Follow 
+                    <a href="/private/feeds/benbrown@hackers.town">benbrown@hackers.town</a>
+                </p>
+            </div>
+        {{/if}}
+    </main>
+
+    {{#if next}}
+        <footer>
+            <a href="/private?offset={{next}}" class="more-link">More</a>
+        </footer>
     {{/if}}
 </div>
 
-
-{{#if next}}
-<a href="/private?offset={{next}}" class="moreLink">More</a>
-{{/if}}
-</div>
 <script>
-    // take note of the most recent post date
-    {{#isEq offset "0"}}
-    {{#each ../activitystream}} {{#if @first}} 
-    app.latestPost("{{or this.boost.published this.note.published}}");
-    {{/if}}{{/each}}
-    {{/isEq}}
-    app.pollForPosts();
+    document.addEventListener('DOMContentLoaded', () => {
+        // Take note of the most recent post date
+        {{#isEq offset "0"}}
+            {{#each ../activitystream}}
+                {{#if @first}}
+                    app.latestPost("{{or this.boost.published this.note.published}}");
+                {{/if}}
+            {{/each}}
+        {{/isEq}}
+        app.pollForPosts();
+    });
 </script>

design/dms.handlebars

@@ -1,27 +1,38 @@
-{{#if error}}
-<div class="error">
-    {{error.message}}
-</div>
-{{else}}
-    <div class="stream">
-        {{#if feed}}
-        <header><a href="/private/dms">Inbox</a> &raquo; Messages with <a href="/private/feeds/{{getUsername feed.id}}">{{feed.preferredUsername}}</a></header>
-        <div class="inbox">
-            <div class="messages" id="inbox_stream">
-                {{#each inbox}}
-                    {{> dm message=this me=../me}}
-                {{/each}}
-            </div>
-        {{> minicomposer inReplyTo=lastIncoming to=feed.id}}
-        </div>
-        {{else}}
-            <!-- TODO: empty state? -->
-            <div class="empty">
-                Select a conversation. To create a new one, navigate to a profile.
-            </div>
-        {{/if}}
-    </div>
-{{/if}}
+<article>
+    {{#if error}}
+        <aside class="notification error">
+            {{error.message}}
+        </aside>
+    {{else}}
+        <section class="stream">
+            {{#if feed}}
+                <header>
+                    <nav>
+                        <a href="/private/dms">Inbox</a> › 
+                        Messages with 
+                        <a href="/private/feeds/{{getUsername feed.id}}">{{feed.preferredUsername}}</a>
+                    </nav>
+                </header>
+                <div class="message-container">
+                    <ul class="messages-list" id="inbox_stream">
+                        {{#each inbox}}
+                            <li>
+                                {{> dm message=this me=../me}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                    {{> minicomposer inReplyTo=lastIncoming to=feed.id}}
+                </div>
+            {{else}}
+                <div class="empty-state">
+                    Select a conversation. To create a new one, navigate to a profile.
+                </div>
+            {{/if}}
+        </section>
+    {{/if}}
+</article>
 <script>
-    app.pollForPosts();
-</script>
+    document.addEventListener('DOMContentLoaded', () => {
+        app.pollForPosts();
+    });
+</script>

design/feeds.handlebars

@@ -1,40 +1,47 @@
-{{#if error}}
-<div class="error">
-    {{error.message}}
-</div>
-{{else}}
-    <div class="stream">
-        {{#if feed}} 
-        {{> profileHeader actor=feed nobio=true}}
-        {{/if}}
-        {{#if activitystream}}
-            {{#each activitystream}}
-                {{#with this}}
-                    <div class="activity">
-                        {{#if boost}}
-                            <div class="boost">
-                            🚀 boosted by <a href="/private/feeds/{{getUsername booster.id}}">{{booster.name}}</a>
-                            </div>
-                            {{> note note=note}}
-                        {{else}}
-                            {{> note note=note hidebyline=true}}
-                        {{/if}}
-                    </div>
-                {{/with}}
-            {{/each}}
-        {{else}}
-            <!-- TODO: empty state? -->
-            <div class="empty">
-                No posts. <a href="/private/feeds/{{getUsername feed.id}}">Reload</a>
-            </div>
-        {{/if}}
+<div class="content-area">
+    {{#if error}}
+        <aside class="error-message">
+            {{error.message}}
+        </aside>
+    {{else}}
+        <section class="stream">
+            {{#if feed}}
+                {{> profileHeader actor=feed nobio=true}}
+            {{/if}}
+
+            {{#if activitystream}}
+                {{#each activitystream}}
+                    {{#with this}}
+                        <article class="activity-post">
+                            {{#if boost}}
+                                <div class="boost-notice">
+                                    🚀 Boosted by 
+                                    <a href="/private/feeds/{{getUsername booster.id}}">{{booster.name}}</a>
+                                </div>
+                                {{> note note=note}}
+                            {{else}}
+                                {{> note note=note hidebyline=true}}
+                            {{/if}}
+                        </article>
+                    {{/with}}
+                {{/each}}
+            {{else}}
+                <div class="empty-state">
+                    No posts. <a href="/private/feeds/{{getUsername feed.id}}">Reload</a>
+                </div>
+            {{/if}}
 
-        {{#if next}}
-        <a href="?offset={{next}}" class="moreLink">More</a>
-        {{/if}}
+            {{#if next}}
+                <footer class="pagination">
+                    <a href="?offset={{next}}" class="more-link">More</a>
+                </footer>
+            {{/if}}
+        </section>
+    {{/if}}
+</div>
 
-    </div>
-{{/if}}
 <script>
-    app.pollForPosts();
-</script>
+    document.addEventListener('DOMContentLoaded', () => {
+        app.pollForPosts();
+    });
+</script>

design/findresults.handlebars

@@ -1,23 +1,34 @@
-<div class="stream">
+<section class="stream">
     <header>
-        <form method="get" action="/private/find">
-        <label for="lookup">Find People</label>
-        <input type="search" placeholder="user@instance.town" id="lookup" name="handle" value="{{query}}" />
+        <form method="get" action="/private/find" class="search-form">
+            <label for="lookup">Find People</label>
+            <input 
+                type="search" 
+                placeholder="user@instance.town" 
+                id="lookup" 
+                name="handle" 
+                aria-label="Search for people"
+                value="{{query}}" />
+            <button type="submit" class="search-button">Search</button>
         </form>
-
     </header>
+
     {{#if results}}
-        {{#each results}}
-            <div class="activity">
-                {{> personCard actor=this nobio=true}}
-            </div>
-        {{/each}}
+        <div class="results-container">
+            {{#each results}}
+                <div class="search-result">
+                    {{> personCard actor=this nobio=true}}
+                </div>
+            {{/each}}
+        </div>
     {{else}}
-        <div class="activity">
-            Nobody results
+        <div class="no-results">
+            No results found.
         </div>
     {{/if}}
-</div>
+</section>
 <script>
-    app.pollForPosts();
-</script>
+    document.addEventListener('DOMContentLoaded', () => {
+        app.pollForPosts();
+    });
+</script>

design/followers.handlebars

@@ -1,15 +1,21 @@
-<div class="stream">
-<header>
-    <span>🤷🏽‍♂️ Followers</span>
-</header>
+<div class="followers-stream">
+    <header class="followers-header">
+        <span>🤷🏽‍♂️ Followers</span>
+    </header>
 
-{{#each followers}}
-    <div class="activity">
-        {{> personCard actor=this}}
-    </div>
-{{/each}}
+    <section class="followers-list">
+        {{#each followers}}
+            <article class="follower">
+                {{> personCard actor=this}}
+            </article>
+        {{/each}}
+    </section>
 </div>
+
 {{> peopleTools}}
+
 <script>
-    app.pollForPosts();
-</script>
+    document.addEventListener('DOMContentLoaded', () => {
+        app.pollForPosts();
+    });
+</script>