Update readme and branding

README.md

@@ -1,29 +1,48 @@
 # spartan
 
+<a href="https://spartan.ng" target="_blank">
 <img alt="A spartan shield" width="200px" src="./spartan.svg" title="Spartan logo"/>
+</a>
 
-##### Important: This is a work in progress. There are two main efforts in this repository:
+[![Discord server](https://dcbadge.vercel.app/api/server/EqHnxQ4uQr?style=flat-square)](https://discord.gg/EqHnxQ4uQr) [![Twitter](https://img.shields.io/twitter/follow/goetzrobin?color=%23DD0031&style=flat-square)](https://twitter.com/goetzrobin)
+
+Welcome to the spartan mono-repo. This Nx repository holds both the
+spartan/stack and spartan/ui libraries.
+
+##### Important: This is a work in progress, and we update the README as major development efforts are started.
+
+## The 300 spartans
+
+All of spartan is an MIT-licensed open source project with its ongoing development made possible by contributors and sponsors.
+
+Our initial 300 contributors or sponsors are featured on the front page of [spartan.ng](https://spartan.ng)
+
+[Become a spartan today!](https://github.com/sponsors/goetzrobin)
 
 ## spartan/ui
 
-An effort to port the incredible shadcn/ui project over to the Angular ecosystem.
+spartan/ui is our effort to port the incredible shadcn/ui project over to the Angular ecosystem.
 
-The idea is to create unstyled primitives similar to Radix with the help of the Angular Cdk and other proven community solutions
+The idea is to create un-styled primitives similar to Radix with the help of the Angular CDK and other proven community solutions
 And then add the beautiful shadcn styles with primitives (and components where necessary).
 
-You can find all UI primitives in the libs folder.
+You can find all UI primitives in the `libs/ui` folder.
 
-### storybook
+Each primitive is made up off a un-styled `brain` library, which provides all functionality and a `helm` library, which adds the styles.
 
-A storybook project is set up. You can run it with:
+There's also a `libs/nx` folder, which contains the Nx-plugin code that allows users to add spartan/ui to their Nx workspace in a simple way.
+
+### Development with storybook
+
+A storybook project is set up and is the primary way to develop UI components. You can run it with:
 
 ```
 yarn storybook
 ```
 
-#### Progress (30/41)
+At the root of each primitive's folder, e.g. `libs/ui/accordion` you will find a stories file, e.g, `accordion.stories.ts`.
 
-We finished porting over 30/41 UI primitives. See a more detailed breakdown [here!](./libs/ui/README.md)
+Use these files to add stories and drive development of the primitives.
 
 ### e2e testing
 
@@ -33,198 +52,84 @@ Cypress e2e testing is set up to run on the storybook. You can run it with:
 yarn e2e
 ```
 
+To add your own `e2e` tests add them to the `apps/ui-storybook-e2e` application.
+
+### Progress (30/41)
+
+We finished porting over 30/41 UI primitives. See a more detailed breakdown [here!](./libs/ui/README.md)
+
 ## spartan/stack
 
 An example application running
 on [Supabase](https://supabase.com/), [Drizzle](https://orm.drizzle.team/), [Analog](https://analogjs.org/),
 [tRPC](https://trpc.io/), [Tailwind](https://tailwindcss.com/), [Angular](https://angular.io/),
 and [Nx](https://nx.dev/). It also serves as the documentation page introducing the stack and UI library.
 
+Follow the directions in the official documentation to set up your own project:
+https://www.spartan.ng/stack/overview
+
+### Example App
+
+In the `apps` folder of this repository, you can also find an example application of the spartan stack.
+It also serves as the documentation page for this project.
+
+For now. The goal is to move the docs to Astro.
+
 Follow the directions below to get it up and running:
 
-### Prerequisites
+#### Prerequisites
 
 - You will need `yarn` (or a different package manager) installed.
 - You will need to set up a [Supabase](https://supabase.com/) account (it's free)
 - You will need [NodeJs](https://nodejs.org/en) installed. The version I have working is `18.13.0`.
 
-### Install Dependencies
+#### Install Dependencies
 
 Run `yarn` or `yarn install` to install the dependencies of this project.
 
-### Set up DB
-
-Your dependencies include Prisma, which is a great tool for managing your application's database.
-As a database provider, we use Supabase, an open-source Firebase alternative that comes with
-a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, and Storage.
-
-### Connect to DB
-
-There are two ways to get up and running with Supabase:
-
-1. Connecting directly to your managed instance on [supabase.com](https://supabase.com/)
-2. Locally using [Docker](https://www.docker.com/)
-
-#### Option 1: Connecting to supabase.com instance
-
-This way is super easy! Simply by creating your account, you will also have set up your first project.
-This means that you are ready to connect to your project's database already!
-
-Let's connect our application to our Supabase Postgres instance:
-
-Add a `.env` file at the root of your Nx workspace and add the following code snippet
-
-```
-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-SUPABASE-REFERENCE-ID].supabase.co:5432/postgres?schema=public"
-
-```
-
-#### Option 2: Connecting to local Supabase instance
-
-Supabase also allows you to run a version of their system locally!
-To get up and running, follow [this guide](https://supabase.com/docs/guides/cli/local-development)!
-They do a great job explaining how to get started, and there is plenty of resources to help you if you get stuck.
-
-If you want the quick and dirty way and are on a Mac. Here is what I did to get up and running:
-
-##### Install supabase CLI
-
-```shell
-brew install supabase/tap/supabase
-```
-
-##### Log into CLI
-
-```shell
-supabase login
-```
-
-Create your access token from https://app.supabase.com/account/tokens and paste it into your
-terminal window.
-
-##### Create a Supabase project
-
-```shell
-# If you are in the spartan directory, move UP!!!
-cd ..
-# create your project folder
-mkdir spartan-supabase
-
-# move into the new folder
-cd spartan-supabase
+#### Development server
 
-# start a new git repository — important, don't skip this step
-git init
-```
-
-##### Start Supabase services
-
-```shell
-supabase init
-```
-
-and
+Then you can run the following command:
 
 ```shell
-supabase start
+yarn nx serve app
 ```
 
-###### Important: Make sure Docker is running and configured correctly!
-
-I had Docker already installed and running. However, my setup is not compatible with the config Supabase expects by
-default.
-I ran the following command to get it to work for now:
+or
 
 ```shell
-DOCKER_HOST=unix:///Users/[YOUR_USER_ACCOUNT_NAME]/.docker/run/docker.sock supabase start
+yarn dev
 ```
 
-For more info, see [this issue on GitHub.](https://github.com/supabase/cli/issues/167)
-
-##### Connect to local DB
-
-The previous step can take a while as all the docker images must be downloaded first.
-However, once everything completes, you will see a console output that looks like this:
+for a dev server. Navigate to http://localhost:4200/. The app will automatically reload
+if you change any of the source files.
 
-```
-Started Supabase local development setup.
-
-         API URL: http://localhost:54321
-          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
-      Studio URL: http://localhost:54323
-    Inbucket URL: http://localhost:54324
-        anon key: eyJh......
-service_role key: eyJh......
-```
+#### Database
 
-Take your cyber-security hat off for a minute (we are working locally after all) and copy the connection string:
+We use Drizzle to connect to a Supabase instance for the example app.
 
-```
-postgresql://postgres:postgres@localhost:54322/postgres
-```
+Add an `.env` file to your repo with the following contents:
 
 Add a `.env` file at the root of your Nx workspace and add the connection string like so:
 
 ```
-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-DATABASE_URL="postgresql://postgres:postgres@localhost:54322/postgres?schema=public"
-
-```
-
-Perfect! You should be able to connect to your local Supabase Postgres instance now!
-
-##### Important: Stop at Database Migrations
-
-You can stop the guide when you get to "Database Migrations". We will take care of this in the next step!
-
-#### Initializing the DB
-
-Now that we have successfully set up our DB, we need to set up our database schema.
-Prisma makes this super easy!!
-
-- We can push the schema defined in our `schema.prisma` file to our DB running
-
-```shell
-yarn prisma db push
-```
-
-- Finally, we create our Prisma client by running
-
-```shell
-yarn prisma generate
-```
-
-That's it! Now our DB should be all set up and ready to go!
-
-### Development server
-
-Run
-
-```shell
-yarn nx serve app
+DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-SUPABASE-REFERENCE-ID].supabase.co:5432/postgres?schema=public"
 ```
 
-or
+And make sure to run the following script in your Supabase editor to set up the necessary tables:
 
-```shell
-yarn dev
+```sql
+create table
+  public.note (
+    id bigserial,
+    title text not null,
+    content text null,
+    created_at timestamp with time zone null default current_timestamp,
+    constraint notes_pkey primary key (id)
+  ) tablespace pg_default;
 ```
 
-for a dev server. Navigate to http://localhost:4200/. The app will automatically reload
-if you change any of the source files.
-
-### Understand this workspace
+## Understand this workspace
 
 Run `yarn nx graph` to see a diagram of the dependencies of the projects.
 

apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.page.ts

@@ -13,13 +13,7 @@ import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-head
 import { TabsComponent } from '~/app/shared/layout/tabs.component';
 import { defaultCode, defaultImports, defaultSkeleton, ScrollAreaPreviewComponent } from './scroll-area.preview';
 import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component';
-import {
-  HlmAlertDescriptionDirective,
-  HlmAlertDirective,
-  HlmAlertIconDirective,
-  HlmAlertTitleDirective,
-} from '@spartan-ng/ui-alert-helm';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/icon-helm';
+import { provideIcons } from '@spartan-ng/icon-helm';
 import { radixExclamationTriangle } from '@ng-icons/radix-icons';
 
 export const routeMeta: RouteMeta = {
@@ -43,11 +37,6 @@ export const routeMeta: RouteMeta = {
     PageBottomNavLinkComponent,
     ScrollAreaPreviewComponent,
     InstallationCsComponent,
-    HlmAlertDirective,
-    HlmAlertTitleDirective,
-    HlmAlertDescriptionDirective,
-    HlmIconComponent,
-    HlmAlertIconDirective,
   ],
   providers: [provideIcons({ radixExclamationTriangle })],
   template: `
@@ -64,20 +53,6 @@ export const routeMeta: RouteMeta = {
         <spartan-code secondTab [code]="defaultCode" />
       </spartan-tabs>
 
-      <div class="mt-4" hlmAlert variant="destructive">
-        <hlm-icon name="radixExclamationTriangle" hlmAlertIcon />
-        <p hlmAlertTitle>Known issue with AnalogJS: HTMLElement not defined</p>
-        <p hlmAlertDescription>
-          hlm-scroll-area uses the NgScrollbar library under the hood. Unfortunately, it depends on directly injecting
-          some underlying HTMLElement's. AnalogJS' development server is currently throwing an error because of this. It
-          does not affect the build. Build and production bundles work correctly.
-          <span class="block mt-2 font-medium">
-            Our ugly workaround right now: Comment out the NgScrollbarModule import and component in the HlmScrollArea
-            component during development.
-          </span>
-        </p>
-      </div>
-
       <spartan-section-sub-heading id="installation">Installation</spartan-section-sub-heading>
       <spartan-tabs class="mt-4" firstTab="Nx Plugin" secondTab="Manual">
         <spartan-code firstTab language="sh" code="npx nx g @spartan-ng/nx:ui scrollarea" />

apps/app/src/app/pages/(home)/components/th-item-placeholder.component.ts

@@ -8,7 +8,7 @@ import { SpartanLogoComponent } from '~/app/shared/spartan-logo.component';
   host: {
     class: 'inline-flex flex-col justify-center items-center',
   },
-  template: `<spartan-logo class="h-8 w-8 rounded-full bg-muted/40 [&>svg]:text-muted-foreground/50 p-1" />
+  template: `<spartan-logo class="-rotate-90 h-8 w-8 rounded-full bg-muted/40 [&>svg]:text-muted-foreground/50 p-1" />
     <div class="h-6"></div> `,
 })
 export class ThreeHundredItemPlaceholderComponent {}

apps/app/src/app/pages/(home)/components/th-item.component.ts

@@ -8,7 +8,7 @@ import { SpartanLogoComponent } from '~/app/shared/spartan-logo.component';
   host: {
     class: 'inline-flex flex-col justify-center items-center',
   },
-  template: `<spartan-logo class="h-8 w-8 rounded-full bg-primary [&>svg]:text-primary-foreground p-1" /><a
+  template: `<spartan-logo class="-rotate-90 h-8 w-8 rounded-full bg-primary [&>svg]:text-primary-foreground p-1" /><a
       class="hover:underline inline-block text-sm mt-1 font-medium"
       [href]="href"
       target="_blank"

apps/app/src/app/pages/(stack)/stack/installation.page.ts

@@ -124,7 +124,8 @@ export const routeMeta: RouteMeta = {
         <p hlmAlertDesc>
           <code class="${hlmCode}">postgres</code> is a CommonJs package, which directly exposes an augmented function.
           Therefore, we need to adjust our <code class="${hlmCode}">[YOUR_APP_NAME]/tsconfig.json</code> file to tell
-          the TS compiler how to deal with it properly. Add the following line to <code class="${hlmCode}">compilerOptions</code>:
+          the TS compiler how to deal with it properly. Add the following line to
+          <code class="${hlmCode}">compilerOptions</code>:
         </p>
         <spartan-code class="mt-3" language="sh" code='"allowSyntheticDefaultImports": true' />
       </div>

apps/app/src/app/shared/header/header.component.ts

@@ -30,8 +30,8 @@ import { SpartanLogoComponent } from '~/app/shared/spartan-logo.component';
   template: `
     <div class="flex justify-between items-center w-full max-w-screen-xl mx-auto">
       <nav class="flex items-center">
-        <a hlmBtn variant="ghost" class="hidden sm:block mr-3 rounded-full h-9 w-9 p-1.5" routerLink="/">
-          <spartan-logo />
+        <a hlmBtn variant="ghost" class="hidden sm:flex mr-3 w-12 p-1.5" routerLink="/">
+          <spartan-logo class="text-primary" />
           <span class="sr-only">spartan</span>
         </a>