cse210-works-on-my-machine · jacksonconte · Nov 30, 2023 · Nov 29, 2023 · Nov 30, 2023 · Nov 30, 2023
diff --git a/.github/workflows/jsdoc.yml b/.github/workflows/jsdoc.yml
@@ -4,39 +4,36 @@ on:
   push:
     branches:
       - main
-  pull_request:
-    branches:
-      - main  
 
 jobs:
   documentation:
     runs-on: ubuntu-latest
 
     permissions:
-        contents: write
+      contents: write
 
     strategy:
       matrix:
         node-version: [12.x, 14.x, 16.x]
 
     steps:
-    - name: Checkout Repository
-      uses: actions/checkout@v2
-
-    - name: Set up Node.js
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Install Dependencies
-      run: npm install
-
-    - name: Generate JSDoc Documentation
-      run: npm run generate-docs  
-
-    - name: Deploy Documentation to GitHub Pages
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./docs  
-        force_orphan: true
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Generate JSDoc Documentation
+        run: npm run generate-docs
+
+      - name: Deploy Documentation to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./docs
+          force_orphan: true
diff --git a/index.html b/index.html
@@ -3,9 +3,45 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="src/styles/index.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+    <title>Blend | What's happening across the Fediverse</title>
 </head>
 <body>
+    <header>
+        <h1>B L E N D</h1>
+        <button>
+            <img src="media/dropdown.svg" style="width: 36px; height: 36px;"></img>
+        </button>
+        <button>
+            <img src="media/refresh.svg" style="width: 36px; height: 36px;"></img>
+        </button>
+        <div class="flex-spacer"></div>
+        <button>
+            <img src="media/settings.svg" style="width: 36px; height: 36px;"></img>
+        </button>
+    </header>
+
+    <main id="featuredTagsPosts">
+        <fedi-post author-image-url="https://cse.ucsd.edu/sites/default/files/faculty/powellF17-115x150.jpg"
+            author-name="Thomas A. Powell" 
+            author-handle="[email protected]"
+            content="React sucks. It completely ruins your response time. I mean come on guys. It's bonkers. What are we even doing here?"
+            created-at="2023-11-30T10:00:00Z"></fedi-post>
+    </main>
+
+    <script type="module" src="src/scripts/index.js"></script>
+    <footer>
+        <button class="page-button">
+            <img src="media/previous-page.svg" style="width: 24px; height: 24px;"></img>
+        </button>
+        <span class="page-label">Page 2</span>
+        <button class="page-button">
+            <img src="media/next-page.svg" style="width: 24px; height: 24px;"></img>
+        </button>
+    </footer>
 
 </body>
 </html>

diff --git a/media/dropdown.svg b/media/dropdown.svg
diff --git a/media/next-page.svg b/media/next-page.svg
diff --git a/media/previous-page.svg b/media/previous-page.svg
diff --git a/media/refresh.svg b/media/refresh.svg
diff --git a/media/settings.svg b/media/settings.svg
diff --git a/src/scripts/Post.js b/src/scripts/Post.js
@@ -0,0 +1,110 @@
+export class Post extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    // Getter and Setter for id
+    get id() {
+        return this.getAttribute('id');
+    }
+
+    set id(value) {
+        this.setAttribute('id', value);
+    }
+
+    // Getter and Setter for content
+    get content() {
+        return this.getAttribute('content');
+    }
+
+    set content(value) {
+        this.setAttribute('content', value);
+    }
+
+    // Getter and Setter for authorName
+    get authorName() {
+        return this.getAttribute('author-name');
+    }
+
+    set authorName(value) {
+        this.setAttribute('author-name', value);
+    }
+
+    // Getter and Setter for createdAt
+    get createdAt() {
+        return this.getAttribute('created-at');
+    }
+
+    set createdAt(value) {
+        this.setAttribute('created-at', value);
+    }
+
+    // Getter and Setter for authorImageURL
+    get authorImageURL() {
+        return this.getAttribute('author-image-url');
+    }
+
+    set authorImageURL(value) {
+        this.setAttribute('author-image-url', value);
+    }
+
+    // Getter and Setter for authorHandle
+    get authorHandle() {
+        return this.getAttribute('author-handle');
+    }
+
+    set authorHandle(value) {
+        this.setAttribute('author-handle', value);
+    }
+
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    width: 80%;
+                    display: grid;
+                    grid-template-columns: auto 1fr;
+                    grid-template-rows: max-content max-content max-content;
+                    gap: 1em;
+                    padding-bottom: 1em;
+                    padding-top: 1em;
+                }
+
+                .post-header {
+                    display: flex;
+                    align-items: center
+                }
+
+                picture {
+                    width: max-content;
+                    height: max-content;
+                }
+
+                picture img{
+                    width: 100px;
+                    height: 100px;
+                    border: inset;
+                }
+
+                .post-content {
+                    grid-column: span 2;
+                }
+
+            </style>
+            <picture>
+                <img src=${this.authorImageURL}></img>
+            </picture>
+            <h2 class="post-header">${this.authorName}</h2>
+            <time>${this.createdAt}</time> <span>${this.authorHandle}</span>
+            <div class="post-content">${this.content}</div>
+        `;
+    }
+}
+
+customElements.define('fedi-post', Post);
diff --git a/src/scripts/apiUtils.js b/src/scripts/apiUtils.js
@@ -0,0 +1,35 @@
+/**
+ *
+ * @returns {Promise<Array>} - A promise that resolves to an array of trending tags
+ */
+export async function fetchTrendingTags(endpoint) {
+  try {
+    const response = await fetch(endpoint);
+    if (!response.ok) {
+      throw new Error(`Error: ${response.statusText}`);
+    }
+    return response.json();
+  } catch (error) {
+    console.error("Failed to fetch trending tags:", error);
+    return null;
+  }
+}
+
+/**
+ *
+ * @param {string} hashtag - The hashtag to fetch posts for
+ * @returns
+ */
+export async function fetchPostsByHashtag(prefix, hashtag) {
+  const endpoint  = prefix + hashtag;
+  try {
+    const response = await fetch(endpoint);
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    return response.json();
+  } catch (error) {
+    console.error(`Failed to fetch posts for hashtag #${hashtag}:`, error);
+    return null;
+  }
+}
diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -0,0 +1,37 @@
+import "../scripts/Post.js"; // Import the custom element
+import * as apiUtils from "../scripts/apiUtils.js";
+
+const tagsURL = "https://mastodon.social/api/v1/trends/tags";
+const postPrefix = "https://mastodon.social/api/v1/timelines/tag/:"
+
+document.addEventListener("DOMContentLoaded", function () {
+    displayPostsNew();
+});
+
+/**
+ * Functions that fetches trending tags and displays posts for each tag using 
+ * custom fedi-post HTML element
+ */
+async function displayPostsNew() {
+    const container = document.getElementById("featuredTagsPosts");
+    const hashtags = await apiUtils.fetchTrendingTags(tagsURL);
+    hashtags.forEach(async (tag) => {
+        const posts = await apiUtils.fetchPostsByHashtag(postPrefix, tag.name);
+        posts.forEach((post) => {
+            const postDiv = createNewFediPost(post);
+            container.appendChild(postDiv);
+        });
+    });
+}
+
+// this should go in some factory class
+function createNewFediPost(json_post) {
+    const newPost = document.createElement("fedi-post");
+    newPost.setAttribute('id', json_post.id);
+    newPost.setAttribute('content', json_post.content);
+    newPost.setAttribute('author-name', json_post.account.username);
+    newPost.setAttribute('created-at', json_post.created_at);
+    newPost.setAttribute('author-image-url', json_post.account.avatar);
+    newPost.setAttribute('author-handle', json_post.account.acct);
+    return newPost;
+}
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -0,0 +1,45 @@
+body {
+    font-family: 'Noto Sans', sans-serif;
+}
+header {
+    border: whitesmoke outset;
+    background-color:lightgrey;
+    padding: 5px 20px 5px 20px;
+    display: flex;
+    align-items: center;
+}
+
+header button {
+    /* border: none; leave this commented for windows 95 */
+    background: none;
+    width: max-content;
+    height: max-content;
+    padding: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.flex-spacer {
+    flex-grow: 1;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.page-button {
+    background: lightgray;
+    width: max-content;
+    height: max-content;
+    padding: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+}