chore(release): 0.1.2

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.2](https://gitea.cor.bz/corbz/relay/compare/v0.1.1...v0.1.2) (2025-04-22)
+
+
+### Features
+
+* basic table on feeds view ([78ab28e](https://gitea.cor.bz/corbz/relay/commit/78ab28e73c8df021ce88b6f1ac9dbb5b46dce84b))
+
 ### [0.1.1](https://gitea.cor.bz/corbz/relay/compare/v0.1.0...v0.1.1) (2025-04-22)
 
 

esbuild.mjs

@@ -15,5 +15,5 @@ build({
     format: "iife",
     sourcemap: false,
     loader: {".ts": "ts"},
-    minify: true
+    minify: false
 }).catch(() => process.exit(1));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

src/client/typescript/guild/feeds.ts

@@ -0,0 +1,62 @@
+import $ from "jquery";
+import HSDropdown from "@preline/dropdown";
+import HSDataTable, { IDataTableOptions } from "@preline/datatable";
+import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
+
+const emptyTableHtml: string = `
+    <div class="max-w-md w-full min-h-[400px] flex flex-col justify-center mx-auto px-6 py-4">
+        <div class="flex justify-center items-center size-[46px] bg-gray-100 rounded-lg dark:bg-neutral-800">
+            <svg class="shrink-0 size-6 text-gray-600 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+        </div>
+        <h2 class="mt-5 font-semibold text-gray-800 dark:text-white">
+            No results found
+        </h2>
+        <p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
+            Create a subscription and it will appear here.
+        </p>
+
+        <div class="mt-5 flex flex-col sm:flex-row gap-2">
+            <button type="button" class="openSubModal-js py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#subModal">
+                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
+                Create a subscription
+            </button>
+            <button type="button" onclick="alert('not implemented');" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+                Use a Template
+            </button>
+        </div>
+    </div>
+`;
+
+const columnDefs: ConfigColumnDefs[] = [];
+
+const ajaxSettings: AjaxSettings = {
+    url: ``,
+    dataSrc: "data",
+    data: (data: unknown) => {
+        if (data === undefined) return;
+        // TODO
+    }
+};
+
+const tableOptions: IDataTableOptions = {
+    ajax: ajaxSettings,
+    serverSide: true,
+    processing: true,
+    columnDefs: columnDefs,
+    pagingOptions: { pageBtnClasses: "hidden" },
+    rowSelectingOptions: { selectAllSelector: "#selectAllBox" },
+    language: {
+        zeroRecords: emptyTableHtml,
+        emptyTable: emptyTableHtml,
+        loadingRecords: "Placeholder loading message..."
+    },
+    drawCallback: () => HSDropdown.autoInit(),
+    rowCallback: (row: HTMLTableRowElement) => {
+        $(row).addClass("bg-white dark:bg-neutral-900");
+    }
+};
+
+const table: HSDataTable = new HSDataTable(
+    $("#table").get(0),
+    tableOptions
+);

src/client/typescript/main.ts

@@ -1,3 +1,4 @@
+import $ from "jquery";
 $(document).ready(() => {
     console.log("ready!");
 });

src/client/views/guild/feeds.ejs

@@ -2,4 +2,109 @@
 
 <%- include("header") -%>
 
-Feeds page placeholder
+<div id="table" class="--prevent-on-load-init max-w-full overflow-hidden px-4 sm:px-6">
+    <div class="flex flex-col">
+        <div class="-m-1.5">
+            <div class="max-w-full min-w-full p-1.5 inline-block align-middle">
+                <div class="bg-white border border-gray-200 rounded-lg shadow-xs overflow-hidden dark:bg-neutral-900 dark:border-neutral-700">
+
+                    <!-- Header -->
+                    <div>
+
+                    </div>
+
+                    <!-- Table -->
+                     <div class="min-w-full overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
+                            <thead class="border-none bg-gray-50 dark:bg-neutral-800">
+                                <tr>
+                                    <th scope="col" class="ps-6 py-3 text-start --exclude-from-ordering">
+                                        <label for="selectAllBox" class="">
+                                            <input type="checkbox" id="selectAllBox" class="form-checkbox shrink-0 border-gray-300 rounded-sm text-blue-600 focus:ring-blue-500 disabled:opacity-50 dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
+                                            <span class="sr-only">Checkbox</span>
+                                        </label>
+                                    </th>
+                                    <th scope="col" data-dt-column="name" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between item-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Name
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                URL
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-start --exclude-from-ordering">
+                                        <div class="flex justify-between items-center gap-x-2">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Channels
+                                            </span>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-start --exclude-from-ordering">
+                                        <div class="flex justify-between items-center gap-x-2">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Filters
+                                            </span>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Style
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap">
+                                                Created at
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-start">
+                                        <div class="flex justify-between items-center gap-x-2 cursor-pointer">
+                                            <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
+                                                Status
+                                            </span>
+                                            <svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
+                                                <path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+
+                            </tbody>
+                        </table>
+                     </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<% block("scripts").append('<script src="/static/bundles/guild/feeds.js"></script>'); %>

tailwind.config.js

@@ -2,7 +2,7 @@
 module.exports = {
     darkMode: "selector",
     content: [
-        "./src/client/**/*.{html,js,ejs}",
+        "./src/client/**/*.{html,js,ejs,ts}",
         "./node_modules/preline/dist/*.js"
     ],
     theme: {