Initial version
This commit is contained in:
commit
da9428f059
GPG key ID:
7CC8056A5A04557E
49 changed files with 5506 additions and 0 deletions
199
src/routes/404Page.ts
Normal file
199
src/routes/404Page.ts
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
import { html, css, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import type { RouteParams } from "./router";
|
||||
|
||||
import "@components/EveLink";
|
||||
|
||||
@customElement("arx-404-page")
|
||||
export class FourOhFourPage extends LitElement {
|
||||
@property({ type: Object })
|
||||
params: RouteParams = {};
|
||||
|
||||
@property({ type: String })
|
||||
path = "";
|
||||
|
||||
@property({ type: Boolean })
|
||||
canGoBack = false;
|
||||
|
||||
static override styles = [
|
||||
css`
|
||||
.not-found {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Inter", sans-serif;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-container h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-container h1 * {
|
||||
position: relative;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
.spinning-gear {
|
||||
animation: spin 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.path-container {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.path-text {
|
||||
color: var(--secondary);
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.path {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
color: var(--primary);
|
||||
word-break: break-all;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 8rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.message-text .inline-icon {
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1.25rem;
|
||||
color: #94a3b8;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.inline-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: var(--secondary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
arx-eve-link::part(link) {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<div class="not-found">
|
||||
<div class="content">
|
||||
<div class="error-container">
|
||||
<h1>
|
||||
<span class="four">4</span>
|
||||
<iconify-icon
|
||||
icon="fluent-emoji:gear"
|
||||
class="spinning-gear"
|
||||
></iconify-icon>
|
||||
<span class="four">4</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="path-container">
|
||||
<div class="path-text">Path:</div>
|
||||
<div class="path">${this.path}</div>
|
||||
</div>
|
||||
<div class="message-text">
|
||||
<div class="status">Page not found.</div>
|
||||
<div class="sub-text">
|
||||
The page you are looking for does not exist.
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click="${() =>
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("go-back", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)}"
|
||||
class="primary-button"
|
||||
>
|
||||
<iconify-icon icon="material-symbols:arrow-back"></iconify-icon>
|
||||
Go back
|
||||
</a>
|
||||
<arx-eve-link href="home" class="primary-button">
|
||||
<iconify-icon icon="material-symbols:home"></iconify-icon>
|
||||
Home
|
||||
</arx-eve-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
252
src/routes/Home.ts
Normal file
252
src/routes/Home.ts
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
import { getNpub, getUserProfile } from "@/ndk";
|
||||
import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
|
||||
import { css, LitElement } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { html, literal } from "lit/static-html.js";
|
||||
import "@widgets/BitcoinBlockWidget";
|
||||
import "@components/AppGrid";
|
||||
|
||||
@customElement("arx-eve-home")
|
||||
export class Home extends LitElement {
|
||||
@state()
|
||||
private npub: string | undefined;
|
||||
@state()
|
||||
private profile: NDKUserProfile | undefined;
|
||||
@state()
|
||||
private username: string | undefined;
|
||||
|
||||
apps = [
|
||||
{
|
||||
id: 0,
|
||||
href: "letters",
|
||||
name: "Letters",
|
||||
color: "#FF33BB",
|
||||
icon: "bxs:envelope",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
href: "messages",
|
||||
name: "Messages",
|
||||
color: "#34C759",
|
||||
icon: "bxs:chat",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
href: "calendar",
|
||||
name: "Calendar",
|
||||
color: "#FF9500",
|
||||
icon: "bxs:calendar",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
href: "phora",
|
||||
name: "Phora",
|
||||
color: "#FF3B30",
|
||||
icon: "bxs:conversation",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
href: "agora",
|
||||
name: "Agora",
|
||||
color: "#5856D6",
|
||||
icon: "bxs:store",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
href: "wallet",
|
||||
name: "Wallet",
|
||||
color: "#007AFF",
|
||||
icon: "bxs:wallet",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
href: "consortium",
|
||||
name: "Consortium",
|
||||
color: "#FFCC00",
|
||||
icon: "bxs:landmark",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
href: "settings",
|
||||
name: "Settings",
|
||||
color: "#deadbeef",
|
||||
icon: "bxs:wrench",
|
||||
},
|
||||
];
|
||||
|
||||
widgets = [
|
||||
{
|
||||
title: "Bitcoin Block",
|
||||
content: literal`arx-bitcoin-block-widget`,
|
||||
},
|
||||
];
|
||||
|
||||
async loadProperties() {
|
||||
const npub = await getNpub();
|
||||
if (!npub) return alert("No npub?");
|
||||
this.npub = npub;
|
||||
this.profile = (await getUserProfile(this.npub)) as NDKUserProfile;
|
||||
this.username = this.profile?.name || this.npub.substring(0, 8);
|
||||
}
|
||||
|
||||
static override styles = [
|
||||
css`
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.home {
|
||||
min-height: calc(100vh - var(--font-2xl));
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.widgets-container {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.widget {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.content-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.widgets-container {
|
||||
width: calc(100vw - 40px);
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.widget {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.widgets-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.widget {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.welcome-text h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
|
||||
.welcome-text p {
|
||||
margin: 5px 0 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.loadProperties();
|
||||
}
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<div class="home">
|
||||
<div class="content-wrapper">
|
||||
<div class="home-container">
|
||||
<div class="welcome-section">
|
||||
<div class="avatar">
|
||||
<arx-nostr-profile
|
||||
.npub=${this.npub}
|
||||
render-type="avatar"
|
||||
></arx-nostr-profile>
|
||||
</div>
|
||||
<div class="welcome-text">
|
||||
<h1>Welcome, ${this.username}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<arx-app-grid .apps=${this.apps}></arx-app-grid>
|
||||
</div>
|
||||
<div class="widgets-container">
|
||||
${this.widgets.map(
|
||||
(widget) => html`
|
||||
<div class="widget">
|
||||
<h3>${widget.title}</h3>
|
||||
<${widget.content}></${widget.content}>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
126
src/routes/Phora/Home.ts
Normal file
126
src/routes/Phora/Home.ts
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { getSigner, ndk } from "@/ndk";
|
||||
import formatDateTime from "@utils/formatDateTime";
|
||||
import type { NDKSubscription } from "@nostr-dev-kit/ndk";
|
||||
|
||||
import "@components/Breadcrumbs";
|
||||
import "@components/PhoraForumCategory";
|
||||
import "@components/PhoraForumTopic";
|
||||
import "@components/PhoraButton";
|
||||
|
||||
interface ForumTopic {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string;
|
||||
description: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface ForumCategory {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
topics: ForumTopic[];
|
||||
}
|
||||
|
||||
@customElement("arx-phora-home")
|
||||
export class PhoraForum extends LitElement {
|
||||
@state()
|
||||
private categories: ForumCategory[] = [];
|
||||
|
||||
private categoriesQuery: NDKSubscription | undefined;
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
override async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await this.loadCategories();
|
||||
}
|
||||
|
||||
override disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
if (this.categoriesQuery) this.categoriesQuery.stop();
|
||||
}
|
||||
|
||||
private async loadCategories() {
|
||||
await getSigner();
|
||||
this.categoriesQuery = ndk
|
||||
.subscribe({
|
||||
kinds: [11],
|
||||
})
|
||||
.on("event", (event) => {
|
||||
const subject = event.tags.find(
|
||||
(tag: string[]) => tag[0] === "subject"
|
||||
);
|
||||
const parent = event.tags.find((tag: string[]) => tag[0] === "e");
|
||||
|
||||
if (!subject) return;
|
||||
|
||||
if (parent) {
|
||||
const categoryIndex = this.categories.findIndex(
|
||||
(category) => category.id === parent[1]
|
||||
);
|
||||
if (categoryIndex === -1) return;
|
||||
|
||||
const updatedCategories = [...this.categories];
|
||||
updatedCategories[categoryIndex].topics.push({
|
||||
id: event.id,
|
||||
title: subject[1],
|
||||
author: event.pubkey,
|
||||
created_at: formatDateTime((event.created_at || 0) * 1000),
|
||||
description: event.content,
|
||||
});
|
||||
|
||||
this.categories = updatedCategories;
|
||||
return;
|
||||
}
|
||||
|
||||
this.categories = [
|
||||
...this.categories,
|
||||
{
|
||||
id: event.id,
|
||||
name: subject[1],
|
||||
description: event.content.substring(0, 100),
|
||||
topics: [],
|
||||
},
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<arx-breadcrumbs
|
||||
.items=${[{ text: "Home", href: "/" }, { text: "Phora" }]}
|
||||
>
|
||||
</arx-breadcrumbs>
|
||||
|
||||
<arx-phora-button href="/phora/new-category">
|
||||
New Category
|
||||
</arx-phora-button>
|
||||
|
||||
${this.categories.map(
|
||||
(category) => html`
|
||||
<arx-phora-forum-category id=${category.id} title=${category.name}>
|
||||
${category.topics.map(
|
||||
(topic) => html`
|
||||
<arx-phora-forum-topic
|
||||
id=${topic.id}
|
||||
title=${topic.title}
|
||||
description=${topic.description}
|
||||
lastPostBy=${topic.author}
|
||||
lastPostTime=${topic.created_at}
|
||||
>
|
||||
</arx-phora-forum-topic>
|
||||
`
|
||||
)}
|
||||
</arx-phora-forum-category>
|
||||
`
|
||||
)}
|
||||
`;
|
||||
}
|
||||
}
|
||||
97
src/routes/Phora/NewCategory.ts
Normal file
97
src/routes/Phora/NewCategory.ts
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { getSigner, ndk } from "@/ndk";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
|
||||
@customElement("arx-phora-category-creator")
|
||||
export class PhoraCategoryCreator extends LitElement {
|
||||
@state()
|
||||
private newCategory = "";
|
||||
|
||||
@state()
|
||||
private categoryDescription = "";
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
`;
|
||||
|
||||
private async doCreateCategory() {
|
||||
if (this.newCategory.length < 3) {
|
||||
alert("Category name must be at least 3 characters long");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.categoryDescription.length < 10) {
|
||||
alert("Category description must be at least 10 characters long");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await getSigner();
|
||||
const event = new NDKEvent(ndk);
|
||||
event.kind = 11;
|
||||
event.tags = [["subject", this.newCategory]];
|
||||
event.content = this.categoryDescription;
|
||||
await event.sign();
|
||||
await event.publish();
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("category-created", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
|
||||
this.newCategory = "";
|
||||
this.categoryDescription = "";
|
||||
} catch (error) {
|
||||
console.error("Failed to create category:", error);
|
||||
alert("Failed to create category");
|
||||
}
|
||||
}
|
||||
|
||||
private handleCategoryInput(e: InputEvent) {
|
||||
this.newCategory = (e.target as HTMLInputElement).value;
|
||||
}
|
||||
|
||||
private handleDescriptionInput(e: InputEvent) {
|
||||
this.categoryDescription = (e.target as HTMLTextAreaElement).value;
|
||||
}
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<input
|
||||
type="text"
|
||||
placeholder="New Category"
|
||||
.value=${this.newCategory}
|
||||
@input=${this.handleCategoryInput}
|
||||
/>
|
||||
|
||||
<textarea
|
||||
placeholder="Category Description"
|
||||
.value=${this.categoryDescription}
|
||||
@input=${this.handleDescriptionInput}
|
||||
></textarea>
|
||||
|
||||
<arx-phora-button @click=${this.doCreateCategory}>
|
||||
Create
|
||||
</arx-phora-button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
150
src/routes/Phora/NewPost.ts
Normal file
150
src/routes/Phora/NewPost.ts
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { getSigner, ndk } from "@/ndk";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
|
||||
@customElement("arx-phora-post-creator")
|
||||
export class PhoraPostCreator extends LitElement {
|
||||
@property({ type: String })
|
||||
topicId = "";
|
||||
|
||||
@state()
|
||||
private postContent = "";
|
||||
|
||||
@state()
|
||||
private isCreating = false;
|
||||
|
||||
@state()
|
||||
private error: string | null = null;
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.topic-id {
|
||||
color: #666;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.5rem;
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color, #3b82f6);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`;
|
||||
|
||||
private async doCreatePost() {
|
||||
if (this.isCreating) return;
|
||||
|
||||
if (this.postContent.length < 10) {
|
||||
this.error = "Post content must be at least 10 characters long";
|
||||
return;
|
||||
}
|
||||
|
||||
this.error = null;
|
||||
this.isCreating = true;
|
||||
|
||||
try {
|
||||
await getSigner();
|
||||
const event = new NDKEvent(ndk);
|
||||
event.kind = 1111;
|
||||
event.tags = [["e", this.topicId]];
|
||||
event.content = this.postContent;
|
||||
await event.sign();
|
||||
await event.publish();
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("post-created", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
postId: event.id,
|
||||
topicId: this.topicId,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Reset form
|
||||
this.postContent = "";
|
||||
} catch (error) {
|
||||
console.error("Failed to create post:", error);
|
||||
this.error = "Failed to create post. Please try again.";
|
||||
} finally {
|
||||
this.isCreating = false;
|
||||
}
|
||||
}
|
||||
|
||||
private handleContentInput(e: InputEvent) {
|
||||
this.postContent = (e.target as HTMLTextAreaElement).value;
|
||||
if (this.error && this.postContent.length >= 10) {
|
||||
this.error = null;
|
||||
}
|
||||
}
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<div class="container">
|
||||
<div class="topic-id">Topic ID: ${this.topicId}</div>
|
||||
|
||||
<textarea
|
||||
placeholder="Post. You can use Markdown here."
|
||||
.value=${this.postContent}
|
||||
@input=${this.handleContentInput}
|
||||
?disabled=${this.isCreating}
|
||||
></textarea>
|
||||
|
||||
${this.error ? html` <div class="error">${this.error}</div> ` : null}
|
||||
|
||||
<div class="actions">
|
||||
<arx-phora-button
|
||||
@click=${() => this.dispatchEvent(new CustomEvent("cancel"))}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
Cancel
|
||||
</arx-phora-button>
|
||||
|
||||
<arx-phora-button
|
||||
@click=${this.doCreatePost}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
${this.isCreating ? "Creating..." : "Create"}
|
||||
</arx-phora-button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
143
src/routes/Phora/NewTopic.ts
Normal file
143
src/routes/Phora/NewTopic.ts
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { getSigner, ndk } from "@/ndk";
|
||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
|
||||
@customElement("arx-phora-topic-creator")
|
||||
export class PhoraTopicCreator extends LitElement {
|
||||
@property({ type: String })
|
||||
categoryId = "";
|
||||
|
||||
@state()
|
||||
private newTopic = "";
|
||||
|
||||
@state()
|
||||
private topicContent = "";
|
||||
|
||||
@state()
|
||||
private isCreating = false;
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 200px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category-id {
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
`;
|
||||
|
||||
private async doCreateTopic() {
|
||||
if (this.isCreating) return;
|
||||
|
||||
if (this.newTopic.length < 3) {
|
||||
alert("Topic title must be at least 3 characters long");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.topicContent.length < 10) {
|
||||
alert("Topic content must be at least 10 characters long");
|
||||
return;
|
||||
}
|
||||
|
||||
this.isCreating = true;
|
||||
|
||||
try {
|
||||
await getSigner();
|
||||
const event = new NDKEvent(ndk);
|
||||
event.kind = 11;
|
||||
event.tags = [
|
||||
["subject", this.newTopic],
|
||||
["e", this.categoryId],
|
||||
];
|
||||
event.content = this.topicContent;
|
||||
await event.sign();
|
||||
await event.publish();
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("topic-created", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
topicId: event.id,
|
||||
categoryId: this.categoryId,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
this.newTopic = "";
|
||||
this.topicContent = "";
|
||||
} catch (error) {
|
||||
console.error("Failed to create topic:", error);
|
||||
alert("Failed to create topic");
|
||||
} finally {
|
||||
this.isCreating = false;
|
||||
}
|
||||
}
|
||||
|
||||
private handleTopicInput(e: InputEvent) {
|
||||
this.newTopic = (e.target as HTMLInputElement).value;
|
||||
}
|
||||
|
||||
private handleContentInput(e: InputEvent) {
|
||||
this.topicContent = (e.target as HTMLTextAreaElement).value;
|
||||
}
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<div class="category-id">Category ID: ${this.categoryId}</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="New Topic"
|
||||
.value=${this.newTopic}
|
||||
@input=${this.handleTopicInput}
|
||||
?disabled=${this.isCreating}
|
||||
/>
|
||||
|
||||
<textarea
|
||||
placeholder="Topic. You can use Markdown here."
|
||||
.value=${this.topicContent}
|
||||
@input=${this.handleContentInput}
|
||||
?disabled=${this.isCreating}
|
||||
></textarea>
|
||||
|
||||
<div class="button-group">
|
||||
<arx-phora-button
|
||||
@click=${() => this.dispatchEvent(new CustomEvent("cancel"))}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
Cancel
|
||||
</arx-phora-button>
|
||||
|
||||
<arx-phora-button
|
||||
@click=${this.doCreateTopic}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
${this.isCreating ? "Creating..." : "Create"}
|
||||
</arx-phora-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
158
src/routes/Phora/TopicView.ts
Normal file
158
src/routes/Phora/TopicView.ts
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { getSigner, ndk } from "@/ndk";
|
||||
import type { NDKSubscription } from "@nostr-dev-kit/ndk";
|
||||
|
||||
import "@components/Breadcrumbs";
|
||||
import "@components/ForumPost";
|
||||
import "@components/PhoraButton";
|
||||
|
||||
interface ForumPost {
|
||||
id: string;
|
||||
npub: string;
|
||||
date: Date;
|
||||
content: string;
|
||||
}
|
||||
|
||||
@customElement("arx-phora-topic-view")
|
||||
export class PhoraTopicView extends LitElement {
|
||||
@property({ type: String })
|
||||
topicId = "";
|
||||
|
||||
@state()
|
||||
override title = "";
|
||||
|
||||
@state()
|
||||
private posts: ForumPost[] = [];
|
||||
|
||||
private subscription: NDKSubscription | undefined;
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topic {
|
||||
max-width: 1200px;
|
||||
padding: 1em;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 0.5rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: [column-1] auto [column-2] 1fr;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: var(--primary);
|
||||
color: oklch(100% 0 0);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.posts-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
override async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await this.loadTopic();
|
||||
}
|
||||
|
||||
override disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
if (this.subscription) {
|
||||
this.subscription.stop();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadTopic() {
|
||||
try {
|
||||
await getSigner();
|
||||
const event = await ndk.fetchEvent(this.topicId);
|
||||
|
||||
if (!event) {
|
||||
throw new Error("Could not load topic");
|
||||
}
|
||||
|
||||
this.title = event.tags.find((tag) => tag[0] === "subject")?.[1] || "";
|
||||
|
||||
this.posts = [
|
||||
{
|
||||
id: event.id,
|
||||
npub: event.pubkey,
|
||||
date: new Date((event.created_at || 0) * 1000),
|
||||
content: event.content,
|
||||
},
|
||||
];
|
||||
|
||||
// Subscribe to new posts
|
||||
this.subscription = ndk
|
||||
.subscribe({
|
||||
kinds: [1111],
|
||||
"#e": [this.topicId],
|
||||
})
|
||||
.on("event", (event) => {
|
||||
this.posts = [
|
||||
...this.posts,
|
||||
{
|
||||
id: event.id,
|
||||
npub: event.pubkey,
|
||||
date: new Date((event.created_at || 0) * 1000),
|
||||
content: event.content,
|
||||
},
|
||||
];
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to load topic:", error);
|
||||
alert("Could not load topic");
|
||||
}
|
||||
}
|
||||
|
||||
override render() {
|
||||
const breadcrumbItems = [
|
||||
{ text: "Home", href: "/" },
|
||||
{ text: "Phora", href: "/phora" },
|
||||
{ text: this.title },
|
||||
];
|
||||
|
||||
return html`
|
||||
<arx-breadcrumbs .items=${breadcrumbItems}></arx-breadcrumbs>
|
||||
|
||||
<div class="header">
|
||||
<span>${this.title}</span>
|
||||
</div>
|
||||
|
||||
<div class="posts-container">
|
||||
${this.posts.map(
|
||||
(post) => html`
|
||||
<arx-forum-post
|
||||
class="topic"
|
||||
id=${post.id}
|
||||
.topicId=${this.topicId}
|
||||
.npub=${post.npub}
|
||||
.date=${post.date}
|
||||
.content=${post.content}
|
||||
></arx-forum-post>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<arx-phora-button href="/phora/new-post/${this.topicId}">
|
||||
New Post
|
||||
</arx-phora-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
411
src/routes/Profile.ts
Normal file
411
src/routes/Profile.ts
Normal file
|
|
@ -0,0 +1,411 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { when } from "lit/directives/when.js";
|
||||
import { styleMap } from "lit/directives/style-map.js";
|
||||
import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
|
||||
import { getUserProfile } from "../ndk";
|
||||
|
||||
@customElement("arx-profile-route")
|
||||
export class NostrProfile extends LitElement {
|
||||
@property({ type: String })
|
||||
npub = "";
|
||||
|
||||
@state()
|
||||
private profile: NDKUserProfile | undefined;
|
||||
|
||||
@state()
|
||||
private error: string | null = null;
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
position: relative;
|
||||
height: 20rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: scale(1);
|
||||
transition: transform 700ms;
|
||||
}
|
||||
|
||||
.banner-image:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgba(0, 0, 0, 0.2),
|
||||
rgba(0, 0, 0, 0.4)
|
||||
);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.profile-container.with-banner {
|
||||
margin-top: -8rem;
|
||||
}
|
||||
|
||||
.profile-container.no-banner {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 1.5rem;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.profile-content {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-image-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 300ms;
|
||||
}
|
||||
|
||||
.profile-image:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.profile-image-placeholder {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom right, #e5e7eb, #d1d5db);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.profile-header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
color: #111827;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.verified-icon {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.nip05 {
|
||||
color: #4b5563;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.action-buttons {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-button {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 500;
|
||||
transition: all 300ms;
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.follow-button:hover {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.follow-button.following {
|
||||
background-color: #e5e7eb;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.follow-button.following:hover {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
padding: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background-color: #f3f4f6;
|
||||
transition: background-color 300ms;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.links-section {
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(300px, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f9fafb;
|
||||
transition: background-color 300ms;
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.link-icon.website {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.link-icon.lightning {
|
||||
color: #eab308;
|
||||
}
|
||||
|
||||
.bio {
|
||||
white-space: pre-line;
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin: 1rem 0;
|
||||
padding-top: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.animate-gradient {
|
||||
background-size: 200% 200%;
|
||||
animation: gradient 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
protected override async firstUpdated() {
|
||||
try {
|
||||
this.profile = await getUserProfile(this.npub);
|
||||
} catch (err) {
|
||||
this.error = "Failed to load profile";
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
private get displayName() {
|
||||
if (!this.profile) return this.npub;
|
||||
return (
|
||||
this.profile.displayName || this.profile.name || this.npub.substring(0, 8)
|
||||
);
|
||||
}
|
||||
|
||||
override render() {
|
||||
if (this.error) {
|
||||
return html`<arx-error-view .error=${this.error}></arx-error-view>`;
|
||||
}
|
||||
|
||||
if (!this.profile) {
|
||||
return html`<arx-loading-view></arx-loading-view>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
${when(
|
||||
this.profile.banner,
|
||||
() => html`
|
||||
<div class="banner-container">
|
||||
<div class="banner-image">
|
||||
<img src=${this.profile!.banner} alt="Banner" />
|
||||
</div>
|
||||
<div class="banner-overlay"></div>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
|
||||
<div
|
||||
class=${this.profile.banner
|
||||
? "profile-container with-banner"
|
||||
: "profile-container no-banner"}
|
||||
>
|
||||
<div class="profile-card">
|
||||
<div class="profile-content">
|
||||
<div class="profile-image-container">
|
||||
${when(
|
||||
this.profile.image,
|
||||
() =>
|
||||
html`<img
|
||||
src=${this.profile!.image}
|
||||
alt="Profile"
|
||||
class="profile-image"
|
||||
/>`,
|
||||
() => html`
|
||||
<div class="profile-image-placeholder">
|
||||
<svg-icon
|
||||
icon="mdi:account"
|
||||
class="placeholder-icon"
|
||||
></svg-icon>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="profile-info">
|
||||
<div class="profile-header">
|
||||
<div>
|
||||
<h1 class="display-name">
|
||||
${this.displayName}
|
||||
${when(
|
||||
this.profile.verified,
|
||||
() => html`
|
||||
<span class="verified-icon">
|
||||
<svg-icon icon="mdi:check-decagram"></svg-icon>
|
||||
</span>
|
||||
`
|
||||
)}
|
||||
</h1>
|
||||
${when(
|
||||
this.profile.nip05,
|
||||
() => html`
|
||||
<p class="nip05">
|
||||
<svg-icon icon="mdi:at"></svg-icon>
|
||||
${this.profile!.nip05}
|
||||
</p>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${when(
|
||||
this.profile.about,
|
||||
() => html` <p class="bio">${this.profile!.about}</p> `
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="links-section">
|
||||
${when(
|
||||
this.profile.website,
|
||||
() => html`
|
||||
<a
|
||||
href=${this.profile!.website}
|
||||
target="_blank"
|
||||
class="link-item"
|
||||
>
|
||||
<svg-icon icon="mdi:web" class="link-icon website"></svg-icon>
|
||||
<span>${this.profile!.website}</span>
|
||||
</a>
|
||||
`
|
||||
)}
|
||||
${when(
|
||||
this.profile.lud16,
|
||||
() => html`
|
||||
<a href="lightning:${this.profile!.lud16}" class="link-item">
|
||||
<svg-icon
|
||||
icon="mdi:lightning-bolt"
|
||||
class="link-icon lightning"
|
||||
></svg-icon>
|
||||
<span>${this.profile!.lud16}</span>
|
||||
</a>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
297
src/routes/router.ts
Normal file
297
src/routes/router.ts
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
import "@routes/404Page";
|
||||
import "@routes/Home";
|
||||
import "@routes/Profile";
|
||||
import "@routes/Phora/Home";
|
||||
import "@routes/Phora/NewCategory";
|
||||
import "@routes/Phora/NewTopic";
|
||||
import "@routes/Phora/TopicView";
|
||||
import "@routes/Phora/NewPost";
|
||||
import "@components/InitialSetup";
|
||||
|
||||
import { css, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { html, literal, type StaticValue } from "lit/static-html.js";
|
||||
import { spread } from "@open-wc/lit-helpers";
|
||||
|
||||
export interface RouteParams {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
interface Route {
|
||||
pattern: string;
|
||||
params: RouteParams;
|
||||
component: StaticValue;
|
||||
// component: typeof LitElement | ((params: RouteParams) => typeof LitElement);
|
||||
title?: string;
|
||||
meta?: Record<string, string>;
|
||||
}
|
||||
|
||||
@customElement("arx-eve-router")
|
||||
export default class EveRouter extends LitElement {
|
||||
private static routes: Route[] = [
|
||||
{
|
||||
pattern: "home",
|
||||
params: {},
|
||||
component: literal`arx-eve-home`,
|
||||
},
|
||||
{
|
||||
pattern: "profile/:npub",
|
||||
params: {},
|
||||
component: literal`arx-profile-route`,
|
||||
},
|
||||
{
|
||||
pattern: "phora",
|
||||
params: {},
|
||||
component: literal`arx-phora-home`,
|
||||
},
|
||||
{
|
||||
pattern: "phora/new-category",
|
||||
params: {},
|
||||
component: literal`arx-phora-category-creator`,
|
||||
},
|
||||
{
|
||||
pattern: "phora/new-topic/:categoryId",
|
||||
params: {},
|
||||
component: literal`arx-phora-topic-creator`,
|
||||
},
|
||||
{
|
||||
pattern: "phora/topics/:topicId",
|
||||
params: {},
|
||||
component: literal`arx-phora-topic-view`,
|
||||
},
|
||||
{
|
||||
pattern: "phora/new-post/:topicId",
|
||||
params: {},
|
||||
component: literal`arx-phora-post-creator`,
|
||||
},
|
||||
{
|
||||
pattern: "404",
|
||||
params: {},
|
||||
component: literal`arx-404-page`,
|
||||
},
|
||||
];
|
||||
|
||||
@state()
|
||||
private history: string[] = [];
|
||||
|
||||
@state()
|
||||
private currentIndex = -1;
|
||||
|
||||
@property()
|
||||
private ccnSetup = false;
|
||||
|
||||
private beforeEachGuards: ((to: Route, from: Route | null) => boolean)[] = [];
|
||||
private afterEachHooks: ((to: Route, from: Route | null) => void)[] = [];
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: 1px solid var(--border);
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.window {
|
||||
max-width: 1200px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.initializeRouter();
|
||||
}
|
||||
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
override disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
window.removeEventListener("hashchange", this.handleHashChange);
|
||||
window.removeEventListener("popstate", this.handlePopState);
|
||||
}
|
||||
|
||||
private initializeRouter(): void {
|
||||
const initialPath = this.currentPath;
|
||||
this.history = [initialPath];
|
||||
this.currentIndex = 0;
|
||||
this.navigate(initialPath);
|
||||
}
|
||||
|
||||
private setupEventListeners(): void {
|
||||
window.addEventListener("hashchange", this.handleHashChange.bind(this));
|
||||
window.addEventListener("popstate", this.handlePopState.bind(this));
|
||||
}
|
||||
|
||||
private handleHashChange(): void {
|
||||
const newPath = this.currentPath;
|
||||
if (newPath !== this.history[this.currentIndex]) {
|
||||
this.updateHistory(newPath);
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
private handlePopState(): void {
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private updateHistory(newPath: string): void {
|
||||
this.history = this.history.slice(0, this.currentIndex + 1);
|
||||
this.history.push(newPath);
|
||||
this.currentIndex = this.history.length - 1;
|
||||
}
|
||||
|
||||
private matchRoute(
|
||||
pattern: string,
|
||||
path: string
|
||||
): { isMatch: boolean; params: RouteParams } {
|
||||
const patternParts = pattern.split("/").filter(Boolean);
|
||||
const pathParts = path.split("/").filter(Boolean);
|
||||
const params: RouteParams = {};
|
||||
|
||||
if (patternParts.length !== pathParts.length) {
|
||||
return { isMatch: false, params };
|
||||
}
|
||||
|
||||
const isMatch = patternParts.every((patternPart, index) => {
|
||||
const pathPart = pathParts[index];
|
||||
if (patternPart.startsWith(":")) {
|
||||
const paramName = patternPart.slice(1);
|
||||
params[paramName] = decodeURIComponent(pathPart);
|
||||
return true;
|
||||
}
|
||||
return patternPart === pathPart;
|
||||
});
|
||||
|
||||
return { isMatch, params };
|
||||
}
|
||||
|
||||
get currentPath(): string {
|
||||
const hash = window.location.hash?.slice(1);
|
||||
return hash === "" ? "home" : hash;
|
||||
}
|
||||
|
||||
get currentRoute(): Route {
|
||||
const route = EveRouter.routes.find((route) => {
|
||||
const { isMatch, params } = this.matchRoute(
|
||||
route.pattern,
|
||||
this.currentPath
|
||||
);
|
||||
if (isMatch) {
|
||||
route.params = params;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return route || this.getNotFoundRoute();
|
||||
}
|
||||
|
||||
private getNotFoundRoute(): Route {
|
||||
return {
|
||||
pattern: "404",
|
||||
params: {},
|
||||
component: literal`arx-404-page`,
|
||||
};
|
||||
}
|
||||
|
||||
beforeEach(guard: (to: Route, from: Route | null) => boolean): void {
|
||||
this.beforeEachGuards.push(guard);
|
||||
}
|
||||
|
||||
afterEach(hook: (to: Route, from: Route | null) => void): void {
|
||||
this.afterEachHooks.push(hook);
|
||||
}
|
||||
|
||||
async navigate(path: string): Promise<void> {
|
||||
const from = this.currentRoute;
|
||||
window.location.hash = path;
|
||||
|
||||
const to = this.currentRoute;
|
||||
const canProceed = this.beforeEachGuards.every((guard) => guard(to, from));
|
||||
|
||||
if (canProceed) {
|
||||
this.requestUpdate();
|
||||
for (const hook of this.afterEachHooks) {
|
||||
hook(to, from);
|
||||
}
|
||||
|
||||
if (to.title) {
|
||||
document.title = to.title;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
if (this.currentIndex > 0) {
|
||||
this.currentIndex--;
|
||||
this.navigate(this.history[this.currentIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
goForward(): void {
|
||||
if (this.currentIndex < this.history.length - 1) {
|
||||
this.currentIndex++;
|
||||
this.navigate(this.history[this.currentIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
finishSetup() {
|
||||
this.ccnSetup = true;
|
||||
}
|
||||
|
||||
renderSetup() {
|
||||
return html`
|
||||
<div class="window">
|
||||
<div class="window-content">
|
||||
<arx-initial-setup
|
||||
@finish=${() => this.finishSetup()}
|
||||
></arx-initial-setup>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
override render() {
|
||||
if (!this.ccnSetup) return this.renderSetup();
|
||||
return html`
|
||||
<arx-header
|
||||
?canGoBack=${this.currentIndex > 0}
|
||||
?canGoForward=${this.currentIndex < this.history.length - 1}
|
||||
url="eve://${this.currentPath}"
|
||||
@navigate=${(e) => this.navigate(e.detail)}
|
||||
@go-back=${this.goBack}
|
||||
@go-forward=${this.goForward}
|
||||
title="Eve"
|
||||
></arx-header>
|
||||
<div class="window">
|
||||
<div class="window-content">
|
||||
<${this.currentRoute.component}
|
||||
${spread(this.currentRoute.params)}
|
||||
path=${this.currentPath}
|
||||
@navigate=${this.navigate}
|
||||
@go-back=${this.goBack}
|
||||
@go-forward=${this.goForward}
|
||||
></${this.currentRoute.component}>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue