feat: build out project dashboard (#2)
All checks were successful
Node.js CI / Lint and Test (push) Successful in 57s

### Explanation

This creates an interactive product directory to help potential consumers discover our works.

### Issue

_No response_

### Attestations

- [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [x] I have pinned the dependencies to a specific patch version.

### Style

- [x] I have run the linter and resolved any errors.
- [x] My pull request uses an appropriate title, matching the conventional commit standards.
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: #2
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit is contained in:
2025-07-04 20:05:20 -07:00
committed by Naomi Carrigan
parent 6b19de55f2
commit 6e8c048e25
17 changed files with 1190 additions and 22 deletions

View File

@ -1,3 +1,4 @@
<app-nav></app-nav>
<main> <main>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>

View File

@ -6,7 +6,11 @@
import { Routes } from "@angular/router"; import { Routes } from "@angular/router";
import { Home } from "./home/home.js"; import { Home } from "./home/home.js";
import { Products } from "./products/products.js";
import { Soon } from "./soon/soon.js";
export const routes: Routes = [ export const routes: Routes = [
{ component: Home, path: "", pathMatch: "full" }, { component: Home, path: "", pathMatch: "full" },
{ component: Products, path: "products" },
{ component: Soon, path: "**" },
]; ];

View File

@ -6,9 +6,10 @@
import { Component } from "@angular/core"; import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router"; import { RouterOutlet } from "@angular/router";
import { Nav } from "./nav/nav.js";
@Component({ @Component({
imports: [ RouterOutlet ], imports: [ RouterOutlet, Nav ],
selector: "app-root", selector: "app-root",
styleUrl: "./app.css", styleUrl: "./app.css",
templateUrl: "./app.html", templateUrl: "./app.html",

View File

@ -0,0 +1,473 @@
/**
* @copyright nhcarrigan
* @license Naomi's Public License
* @author Naomi Carrigan
*/
/* eslint-disable stylistic/max-len -- we are going to have long descriptions here. */
/* eslint-disable max-lines -- Big ol' config!*/
export const products: Array<{
name: string;
description: string;
url: string | null;
wip: boolean;
category: "community" | "websites" | "apps";
premium: boolean;
avatar: string | null;
}> = [
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/rosalia.png",
category: "websites",
description:
"Our global logging server, which pipes logs from all of our apps into a Discord webhook and our email inbox.",
name: "Rosalia Nightsong",
premium: false,
url: "https://rosalia.nhcarrigan.com",
wip: false,
},
{
avatar: null,
category: "websites",
description:
"Our self-hosted LibreTranslate instance, which powers some of our apps and is available for subscribers.",
name: "Translation Service",
premium: true,
url: "https://trans.nhcarrigan.com",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/aria.png",
category: "community",
description:
"A user-installable bot that allows you to translate any message into your preferred language.",
name: "Aria Iuvo",
premium: true,
url: "https://aria.nhcarrigan.com/",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/becca.png",
category: "community",
description:
"A user-installable Discord app that facilitates a solo Dungeons and Dragons experience in private messages.",
name: "Becca Lyria",
premium: true,
url: "https://becca.nhcarrigan.com",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/cordelia.png",
category: "community",
description:
"A user-installable Discord app that allows you to ask questions, generate alt text for images, evaluate code, and more.",
name: "Cordelia Taryne",
premium: true,
url: "https://cordelia.nhcarrigan.com/",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/gwen.png",
category: "community",
description: "A ticketing system for Discord servers.",
name: "Gwen Abalise",
premium: true,
url: "https://gwen.nhcarrigan.com/",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/maylin.png",
category: "community",
description: "A helpful and supportive Discord bot that allows you to have conversations with a virtual friend in private messages.",
name: "Maylin Taryne",
premium: true,
url: "https://maylin.nhcarrigan.com/",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/melody.png",
category: "community",
description: "A user-installable task management application for Discord.",
name: "Melody Iuvo",
premium: true,
url: "https://melody.nhcarrigan.com/",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/beccalia.png",
category: "apps",
description: "Originally planned as the story of Becca and Rosalia growing up, this game was only released as a demo.",
name: "Beccalia: Origins",
premium: false,
url: "https://beccalia.nhcarrigan.com/origins",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/beccalia.png",
category: "apps",
description: "An introductory story that sets the stage for the Beccalia universe, featuring Becca and Rosalia.",
name: "Beccalia: Prologue",
premium: false,
url: "https://beccalia.nhcarrigan.com/prologue",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/profile.png",
category: "apps",
description: "A quick game that introduces who Naomi is, and provides a glimpse into her life.",
name: "Life of a Naomi",
premium: false,
url: "https://loan.nhcarrigan.com",
wip: false,
},
{
avatar: null,
category: "apps",
description: "A game developed for our friend Ruu's game jam.",
name: "Ruu's Goblin Quest",
premium: false,
url: "https://goblin.nhcarrigan.com",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/profile.png",
category: "websites",
description: "The personal musings of our founder, Naomi Carrigan.",
name: "Naomi's Blog",
premium: false,
url: "https://blog.nhcarrigan.com",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/nymira.png",
category: "websites",
description: "A service that allows you to claim a custom <username>.naomi.party username for Bluesky.",
name: "Nymira",
premium: true,
url: "https://naomi.party",
wip: true,
},
{
avatar: null,
category: "websites",
description: "A website outlining our policies, legal agreements, community rules, and product information.",
name: "NHCarrigan Documentation",
premium: false,
url: "https://docs.nhcarrigan.com",
wip: true,
},
{
avatar: null,
category: "websites",
description: "A self-hosted Discourse instance for our community.",
name: "Fourm",
premium: false,
url: "https://forum.nhcarrigan.com",
wip: false,
},
{
avatar: null,
category: "websites",
description: "A self-hosted Gitea instance to hold all of our source code.",
name: "Gitea",
premium: false,
url: "https://git.nhcarrigan.com",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/hikari.png",
category: "websites",
description: "This dashboard!",
name: "Hikari",
premium: false,
url: "https://hikari.nhcarrigan.com",
wip: true,
},
{
avatar: null,
category: "community",
description: "A Discord, Slack, and Bluesky bot that provides you motherly love and encouragement.",
name: "Mommy Bot",
premium: false,
url: "https://mommy-bot.nhcarrigan.com",
wip: false,
},
{
avatar: null,
category: "websites",
description: "A quick web app that provides you motherly love and encouragements.",
name: "Mommy",
premium: false,
url: "https://mommy.nhcarrigan.com",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/lucinda.png",
category: "websites",
description: "A kanban-style task management site.",
name: "Lucinda",
premium: false,
url: "https://lucinda.nhcarrigan.com",
wip: false,
},
{
avatar: null,
category: "websites",
description: "Our homepage and marketing landing.",
name: "NHCarrigan",
premium: false,
url: "https://nhcarrigan.com",
wip: false,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/vitalia.png",
category: "websites",
description: "A full-featured nutrition tracker with community-driven nutrient data.",
name: "Vitalia",
premium: true,
url: "https://vitalia.nhcarrigan.com",
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/octavia.png",
category: "apps",
description: "Linux-native music player application with a focus on handling large libraries with minimal memory.",
name: "Octavia",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/maribelle.png",
category: "community",
description: "A Discord bot that allows you to configure daily progress huddle reminders for your server members.",
name: "Maribelle",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/sorielle.png",
category: "community",
description: "A Discord bot that allows servers to specify a venting channel for automatic deletion.",
name: "Sorielle",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/verena.png",
category: "community",
description: "A Discord bot that allows identity and age verification.",
name: "Verena",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/thalassa.png",
category: "apps",
description: "A rich presence application for Linux.",
name: "Thalassa",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/aeris.png",
category: "websites",
description: "An authentication service featuring magic links and support for multiple social media platforms",
name: "Aeris",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/liora.png",
category: "community",
description: "A Discord bot that allows your server members to specify 'highlight' words, which they'll get pinged on if a message contains that word.",
name: "Liora",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/thessalia.png",
category: "community",
description: "An RPG game on Discord",
name: "Thessalia",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/callista.png",
category: "community",
description: "A user-installable Discord bot that allows you to bookmark messages and save a link and copy in your DMs.",
name: "Callista",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/isolda.png",
category: "apps",
description: "Modern, sleek email client for the web or desktop",
name: "Isolda",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/meliora.png",
category: "websites",
description: "Embeddable chat widget, comment section, and full support flow utility.",
name: "Meliora",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/aurelia.png",
category: "websites",
description: "Blogging platform with markdown editor",
name: "Aurelia",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/eirene.png",
category: "community",
description: "Website and Discord activity that allows you to participate in code challenges competitively or collaboratively",
name: "Eirene",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/amirei.png",
category: "websites",
description: "A quick social link aggregator for 'link in bio' pages.",
name: "Amirei",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/zephra.png",
category: "websites",
description: "Microblogging social media platform.",
name: "Zephra",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/oriana.png",
category: "websites",
description: "Uptime monitoring tool with status pages",
name: "Oriana",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/lyra.png",
category: "websites",
description: "A web-based API mocking tool, allowing you to create temporary endpoints for a front-end to hit, test webhook payloads, and more!",
name: "Lyra",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/selene.png",
category: "apps",
description: "A local-only privacy-focused REST API client.",
name: "Selene",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/sybil.png",
category: "community",
description: "A Discord bot that syndicates forum threads to an indexable website and generates help articles based on resolved conversations.",
name: "Sybil",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/calenelle.png",
category: "websites",
description: "A group coordination app with event scheduling and such.",
name: "Calenelle",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/rowena.png",
category: "websites",
description: "Web app that allows you to create and share forms, and track responses in a user friendly table.",
name: "Rowena",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/alouette.png",
category: "websites",
description: "A web server that allows you to set up arbitrary webhooks and format them to post on Discord.",
name: "Alouette",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/clarion.png",
category: "community",
description: "A Discord bot with dashboard that allows server mangers to post and edit announcements, rules, and similar.",
name: "Clarion",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/elowyn.png",
category: "websites",
description: "A quick website that helps you format text.",
name: "Elowyn",
premium: false,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/evangeline.png",
category: "community",
description: "A Discord bot that allows you to configure canned replies, retrieve them anywhere on discord, and easily copy + paste them into chat.",
name: "Evangeline",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/theodora.png",
category: "community",
description: "A Discord bot that generates 100 days of code reminders.",
name: "Theodora",
premium: true,
url: null,
wip: true,
},
{
avatar: "https://cdn.nhcarrigan.com/new-avatars/vivienne.png",
category: "websites",
description: "An RSS feed reader/management site.",
name: "Vivienne",
premium: true,
url: null,
wip: true,
},
];

View File

@ -0,0 +1,94 @@
ul {
list-style: none;
padding: 0;
margin: 0;
}
#one {
transform: translateY(-200vh);
animation: slide-down 2s forwards;
font-size: 1.3rem;
}
#two {
transform: translateY(200vh);
animation: slide-up 2s forwards 2s;
}
#three {
transform: translateX(-200vw);
animation: slide-left 2s forwards 4s;
}
#four {
transform: translateX(200vw);
animation: slide-right 2s forwards 6s;
}
#five {
transform: translateX(-200vw);
animation: slide-left 2s forwards 8s;
}
#six {
transform: translateX(200vw);
animation: slide-right 2s forwards 10s;
}
#fade {
opacity: 0;
animation: fade-in 2s forwards 12s;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: var(--foreground);
color: var(--background);
text-decoration: none;
border-radius: 50px;
border: 2px solid white;
}
.btn:hover {
background-color: var(--background);
color: var(--foreground);
transition: background-color 0.3s, color 0.3s;
}
@keyframes slide-left {
100% { transform: translateX(0%); }
}
@keyframes slide-right {
100% { transform: translateX(0%); }
}
@keyframes slide-up {
100% { transform: translateY(0%); }
}
@keyframes slide-down {
100% { transform: translateY(0%); }
}
@keyframes fade-in {
100% { opacity: 1; }
}
@keyframes background-color {
0% { background-color: var(--foreground); }
100% { background-color: var(--background); }
}
@media screen and (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transform: none !important;
}
}

View File

@ -1,8 +1,20 @@
<h1>Hi there, I'm Hikari~!</h1> <h1>Hi there, I'm Hikari~!</h1>
<img src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png" alt="Hikari" height="250" /> <img
<p> src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png"
I am here to help you with all of NHCarrigan's products, including things like managing your subscriptions and configuring applications! alt="Hikari"
</p> height="250"
<p> />
Naomi is still hard at work bringing me to life! We would love to hear your thoughts in our <a href="https://chat.nhcarrigan.com" target="_blank">community</a>~! <p id="one">How may I help you today?</p>
</p> <p id="two">I can assist you with:</p>
<ul>
<li id="three">Finding a product to suit your needs</li>
<li id="four">Manage your account, subscriptions, and licenses</li>
<li id="five">Modifying settings for individual products</li>
<li id="six">Answering your specific questions with a chat assistant</li>
</ul>
<div id="fade">
<a href="/products" class="btn">Browse Products</a>
<a href="/account" class="btn">Manage Account</a>
<a href="/settings" class="btn">Modify Settings</a>
<a href="/chat" class="btn">Chat with Hikari</a>
</div>

View File

@ -0,0 +1,65 @@
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
color: var(--foreground);
background-color: var(--background);
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 15px;
padding-right: 15px;
}
nav a:not(#logo) {
text-decoration: none;
padding: 0 15px;
font-size: 1.2rem;
}
nav a:hover:not(#logo) {
text-decoration: underline;
color: var(--background);
background-color: var(--foreground);
}
img {
height: 30px;
width: auto;
margin-right: 15px;
}
hr {
width: 100%;
border: none;
border-top: 1px solid var(--foreground);
margin: 0;
}
.dropdown {
display: none;
}
.dropdown.open {
display: flex;
flex-direction: column;
position: absolute;
right: 0;
top: 40px;
background-color: var(--background);
color: var(--foreground);
border: 1px solid var(--foreground);
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#logo {
display: flex;
align-items: center;
justify-content: center;
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
text-decoration: none;
font-size: 2rem;
}

View File

@ -0,0 +1,19 @@
<nav>
<a href="/" id="logo"
><img src="https://cdn.nhcarrigan.com/logo.png" alt="Logo" /><span id="name"
>Hikari</span
></a
>
<div [class]="dropdownClass">
<a href="/products" class="nav-link">Products</a>
<hr />
<a href="/account" class="nav-link">Account</a>
<hr />
<a href="/settings" class="nav-link">Settings</a>
<hr />
<a href="/chat" class="nav-link">Chat</a>
<hr />
</div>
<i class="fa-solid fa-bars" *ngIf="!navOpen" (click)="toggleNav()"></i>
<i class="fa-solid fa-times" *ngIf="navOpen" (click)="toggleNav()"></i>
</nav>

28
client/src/app/nav/nav.ts Normal file
View File

@ -0,0 +1,28 @@
/**
* @copyright nhcarrigan
* @license Naomi's Public License
* @author Naomi Carrigan
*/
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
@Component({
imports: [ CommonModule ],
selector: "app-nav",
styleUrl: "./nav.css",
templateUrl: "./nav.html",
})
export class Nav {
public navOpen = false;
public dropdownClass = "dropdown";
public toggleNav(): void {
this.navOpen = !this.navOpen;
if (this.navOpen) {
this.dropdownClass = "dropdown open";
} else {
this.dropdownClass = "dropdown";
}
}
}

View File

@ -0,0 +1,85 @@
a.product {
text-decoration: none;
}
a.product:hover {
background-color: var(--background);
color: var(--foreground);
}
.product:not(a) {
cursor: default;
border: 2px dashed grey;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: var(--foreground);
color: var(--background);
text-decoration: none;
border-radius: 50px;
border: 2px solid white;
font-family: 'OpenDyslexic', monospace;
}
.btn:disabled {
background-color: var(--background);
color: var(--foreground);
}
.btn:hover {
background-color: var(--background);
color: var(--foreground);
transition: background-color 0.3s, color 0.3s;
}
.product {
display: grid;
grid-template-areas: "logo title icon" "logo description icon";
grid-template-columns: 100px 1fr auto;
background-color: var(--foreground);
color: var(--background);
border: 2px solid white;
border-radius: 50px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
padding-right: 20px;
align-items: center;
}
.icons {
grid-area: icon;
font-size: 2rem;
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
}
.title {
grid-area: title;
font-size: 1.5rem;
font-weight: bold;
}
.description {
grid-area: description;
font-size: 1rem;
margin-top: 10px;
}
.logo {
grid-area: logo;
width: 100px;
height: 100px;
border-radius: 50%;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}

View File

@ -0,0 +1,150 @@
<h1>Products</h1>
<img
src="https://cdn.nhcarrigan.com/new-avatars/hikari-thinking-full.png"
alt="Hikari"
height="250"
/>
<p>Excellent! What sort of product are you looking for?</p>
<div class="row">
<button
class="btn"
(click)="selectCategory('community')"
[disabled]="view === 'community' ? true : false"
>
Community Tooling and Integrations
</button>
<button
class="btn"
(click)="selectCategory('websites')"
[disabled]="view === 'websites' ? true : false"
>
Websites and APIs
</button>
<button
class="btn"
(click)="selectCategory('apps')"
[disabled]="view === 'apps' ? true : false"
>
Apps and Games
</button>
<button
class="btn"
(click)="selectCategory('all')"
[disabled]="view === 'all' ? true : false"
>
Show Me Everything!
</button>
</div>
<p>And would you like to apply a filter?</p>
<div class="row">
<button class="btn" (click)="toggleFilter('wip')">
<span *ngIf="filters.wip">Hide</span
><span *ngIf="!filters.wip">Show</span> WIP
</button>
<button class="btn" (click)="toggleFilter('prod')">
<span *ngIf="filters.prod">Hide</span
><span *ngIf="!filters.prod">Show</span> Production
</button>
<button class="btn" (click)="toggleFilter('paid')">
<span *ngIf="filters.paid">Hide</span
><span *ngIf="!filters.paid">Show</span> Paid
</button>
<button class="btn" (click)="toggleFilter('free')">
<span *ngIf="filters.free">Hide</span
><span *ngIf="!filters.free">Show</span> Free
</button>
</div>
<hr />
<p *ngIf="products.length === 0">
Oh dear, it appears there are no products in this category yet! Please check
back later.
</p>
<div id="products">
<div *ngFor="let product of products">
<!-- Render as <a> if product has a URL -->
<a
*ngIf="product.url"
[class]="product.wip ? 'product wip' : 'product'"
[href]="product.url"
target="_blank"
>
<h2 class="title">{{ product.name }}</h2>
<img
class="logo"
[src]="product.avatar ?? 'https://cdn.nhcarrigan.com/logo.png'"
alt="{{ product.name }} Logo"
/>
<p class="description">{{ product.description }}</p>
<div class="icons">
<i
title="Under construction"
*ngIf="product.wip"
class="fa-solid fa-wrench"
style="color: rgb(141, 23, 23)"
></i>
<i
title="Production Ready"
*ngIf="!product.wip"
class="fa-solid fa-check"
style="color: rgb(31, 117, 19)"
></i>
<i
title="Requires Subscription"
*ngIf="product.premium"
class="fa-solid fa-money-bill-1-wave"
style="color: rgb(145, 129, 40)"
></i>
<i
title="Free to Use"
*ngIf="!product.premium"
class="fa-solid fa-piggy-bank"
style="color: rgb(116, 37, 206)"
></i>
</div>
</a>
<!-- Render as <div> if no URL -->
<div *ngIf="!product.url" [class]="product.wip ? 'product wip' : 'product'">
<h2 class="title">{{ product.name }}</h2>
<img
class="logo"
[src]="product.avatar ?? 'https://cdn.nhcarrigan.com/logo.png'"
alt="{{ product.name }} Logo"
/>
<p class="description">{{ product.description }}</p>
<div *ngIf="product.wip || product.premium" class="icons">
<i
title="Under construction"
*ngIf="product.wip"
class="fa-solid fa-wrench"
style="color: rgb(141, 23, 23)"
></i>
<i
title="Production Ready"
*ngIf="!product.wip"
class="fa-solid fa-check"
style="color: rgb(31, 117, 19)"
></i>
<i
title="Requires Subscription"
*ngIf="product.premium"
class="fa-solid fa-money-bill-1-wave"
style="color: rgb(145, 129, 40)"
></i>
<i
title="Free to Use"
*ngIf="!product.premium"
class="fa-solid fa-piggy-bank"
style="color: rgb(116, 37, 206)"
></i>
</div>
</div>
</div>
</div>
<hr />
<a
href="https://forms.nhcarrigan.com/form/XRlQjeu8CbMrTA-v0IPOxlUPEPitLKXTWg70UUCIORA"
target="_blank"
class="btn"
>I want something custom...</a
>

View File

@ -0,0 +1,78 @@
/**
* @copyright nhcarrigan
* @license Naomi's Public License
* @author Naomi Carrigan
*/
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { products } from "../config/products.js";
@Component({
imports: [ CommonModule ],
selector: "app-products",
styleUrl: "./products.css",
templateUrl: "./products.html",
})
export class Products {
public view: (typeof products)[number]["category"] | "all"
= "all";
public products: typeof products = [];
public readonly filters: {
wip: boolean;
prod: boolean;
paid: boolean;
free: boolean;
} = {
free: true,
paid: true,
prod: true,
wip: true,
};
public constructor() {
this.selectCategory("all");
}
public selectCategory(
category: (typeof products)[number]["category"] | "all",
): void {
this.view = category;
const sortedProducts = products.sort((a, b) => {
return a.name.localeCompare(b.name);
});
if (this.view === "all") {
this.products = sortedProducts;
return;
}
this.products = sortedProducts.filter((product) => {
return product.category === this.view;
});
}
public toggleFilter(
filter: "wip" | "prod" | "paid" | "free",
): void {
this.filters[filter] = !this.filters[filter];
this.applyFilters();
}
private applyFilters(): void {
this.selectCategory(this.view);
this.products = this.products.filter((product) => {
if (!this.filters.wip && product.wip) {
return false;
}
if (!this.filters.prod && !product.wip) {
return false;
}
if (!this.filters.paid && product.premium) {
return false;
}
if (!this.filters.free && !product.premium) {
return false;
}
return true;
});
}
}

View File

@ -0,0 +1,15 @@
.btn {
display: inline-block;
padding: 10px 20px;
background-color: var(--foreground);
color: var(--background);
text-decoration: none;
border-radius: 50px;
border: 2px solid white;
}
.btn:hover {
background-color: var(--background);
color: var(--foreground);
transition: background-color 0.3s, color 0.3s;
}

View File

@ -0,0 +1,16 @@
<h1>Oh dear~!</h1>
<img
src="https://cdn.nhcarrigan.com/new-avatars/hikari-cry-full.png"
alt="Hikari"
height="250"
/>
<p>You appear to have become lost!</p>
<p>
Either this feature is still under construction, or you have tried to go
somewhere that does not exist.
</p>
<p>Do not worry, I can guide you back. Where would you like to go?</p>
<div id="fade">
<a href="javascript:history.back()" class="btn">Take me back!</a>
<a href="/" class="btn">Take me home!</a>
</div>

View File

@ -0,0 +1,17 @@
/**
* @copyright nhcarrigan
* @license Naomi's Public License
* @author Naomi Carrigan
*/
import { Component } from "@angular/core";
@Component({
imports: [],
selector: "app-soon",
styleUrl: "./soon.css",
templateUrl: "./soon.html",
})
export class Soon {
}

View File

@ -1,15 +1,24 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Hikari</title> <title>Hikari</title>
<meta name="description" content="Dashboard and account management platform for NHCarrigan's products."> <meta
<base href="/"> name="description"
<meta name="viewport" content="width=device-width, initial-scale=1"> content="Dashboard and account management platform for NHCarrigan's products."
<link rel="icon" type="image/x-icon" href="favicon.ico"> />
</head> <base href="/" />
<body> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root> <app-root></app-root>
</body> </body>
<script src="https://cdn.nhcarrigan.com/headers/index.js"></script> <script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
<script>
const styleElement = document.getElementById("nhcarrigan-global-styles");
if (styleElement) {
styleElement.remove();
}
</script>
</html> </html>

View File

@ -1 +1,102 @@
/* You can add global styles to this file, and also import other style files */ @font-face {
font-family: 'OpenDyslexic';
src: url('https://cdn.nhcarrigan.com/fonts/OpenDyslexicMono-Regular.otf') format('opentype');
}
:root {
--foreground: #2a0a18;
--background: #ffb6c1bb;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: 'OpenDyslexic', monospace;
cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto;
min-height: 100vh;
min-width: 100vw;
}
body::before {
background: url(https://cdn.nhcarrigan.com/background.png);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
z-index: -1;
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
pointer-events: none;
}
main {
color: var(--foreground);
background-color: var(--background);
text-align: center;
border-radius: 10px;
width: 100vw;
margin-bottom: 85px;
margin-top: 50px;
min-height: calc(100vh - 85px - 50px);
}
footer {
width: 100%;
color: var(--foreground);
background-color: var(--background);
position: fixed;
bottom: 0;
height: 75px;
padding: 0 10px;
}
#footer-inner-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 75px;
}
#footer-badge-container {
display: grid;
grid-template-columns: repeat(8, 1fr);
align-items: center;
justify-content: space-around;
}
#audio-theme-button, #theme-select-button {
background: none;
border: none;
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
color: var(--foreground);
}
a {
color: unset;
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
}
.btn:not(:disabled) {
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
}
#tree-nation-offset-website {
display: flex;
align-items: center;
}
.is-dark {
--foreground: #ffb6c1;
--background: #2a0a18bb;
}
@media screen and (max-width: 625px) {
#tree-nation-offset-website {
display: none;
}
footer, #footer-inner-container {
height: 50px;
justify-content: space-around;
}
main {
margin-bottom: 60px;
}
}