Card

docs/src/components/SpecDefinition.astro

@@ -14,6 +14,7 @@ const getDescription = (text) => {
     : `${article} ${name.toLowerCase()}.`
   ;
 };
+console.log(definition);
 ---
 {sections.map((section) => (
   <>

docs/src/components/UIComponent.astro

@@ -1,8 +1,12 @@
 ---
 import {
   UIButton,
+  UIButtons,
+  UICard,
   UIContainer,
   UIIcon,
+  UIInput,
+  UILabel,
   UIMenu,
   MenuItem,
   UIInput,
@@ -18,17 +22,37 @@ const { name, attributes } = Astro.props;
     <slot />
   </UIButton>
 )}
+{name === 'UIButtons' && (
+  <UIButtons {...attributes} client:load>
+    <slot />
+  </UIButtons>
+)}
+{name === 'UICard' && (
+  <UICard {...attributes} client:load>
+    <slot />
+  </UICard>
+)}
+
 {name === 'UIContainer' && (
   <UIContainer {...attributes}>
     <slot />
   </UIContainer>
 )}
+
 {name === 'UIIcon' && (
   <UIIcon {...attributes} />
 )}
+
 {name === 'UIInput' && (
   <UIInput {...attributes} />
 )}
+
+{name === 'UILabel' && (
+  <UILabel {...attributes} client:load>
+    <slot />
+  </UILabel>
+)}
+
 {name === 'UIRail' && (
   <UIRail {...attributes}>
     <slot />

docs/src/helpers/menus.js

@@ -11,15 +11,14 @@ const componentPages = components.map(page => ({
 export const topbarMenu =  [
   {
     _id: 'framework',
-    name: 'Tech Guide',
+    name: 'Docs',
     url: '/introduction',
   },
   {
     _id: 'ui',
     name: 'UI Primitives',
     url: '/usage',
   },
-
   {
     _id: 'api',
     name: 'API Reference',

docs/src/layouts/Homepage.css

@@ -71,6 +71,7 @@
         background-image: linear-gradient(#000, transparent 300px), radial-gradient(100vw 1000px at 50% 50%, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.7) 500px, rgba(0, 0, 0, 0) 800px);
         background-image: linear-gradient(#000, transparent 300px), radial-gradient(100vw 1000px at 50% 50%, rgba(0, 0, 0, 0.8) 0, oklch(0.37 0.09 227.35) 500px, rgba(0, 0, 0, 0) 800px);
         background-image: linear-gradient(#000, transparent 300px), radial-gradient(50% 50% at 50% 50%, oklch(0 0 0) 0%, transparent 800px);
+        background-image: linear-gradient(#000, transparent 300px), radial-gradient(100vw 1000px at 50% 50%, rgb(0 0 0 / 0%) 0, rgba(0, 0, 0, 0.7) 500px, rgba(0, 0, 0, 0) 800px);
         pointer-events: none;
       }
 

docs/src/pages/api/helpers/index.mdx

@@ -4,6 +4,7 @@ title: Template Helpers
 icon: book-open
 description: Comprehensive index of all template helpers in Semantic UI
 ---
+import { UICards, UICard } from '@semantic-ui/core';
 
 
 
@@ -27,17 +28,61 @@ Template helpers can be used directly from any template
 
 
 ```sui
-{{formatDate myDate 'h:mm A'}}
+{formatDate myDate 'h:mm A'}
 ```
 
 ## Helper Categories
-* **[Array Helpers](/api/helpers/arrays)** - working with arrays and lists.
-* **[Comparison Helpers](/api/helpers/comparison)** - comparing values and making decisions.
-* **[CSS Helpers](/api/helpers/css)** - working with CSS classes and styles.
-* **[Date Helpers](/api/helpers/dates)** - formatting and manipulating dates.
-* **[Debug Helpers](/api/helpers/debug)** - debugging and logging within templates.
-* **[Logical Helpers](/api/helpers/logical)** - conditional checks and logical operations.
-* **[Numeric Helpers](/api/helpers/numeric)** - working with numbers.
-* **[Object Helpers](/api/helpers/objects)** - manipulating and transforming objects.
-* **[Reactivity Helpers](/api/helpers/reactivity)** - working with reactive computations.
-* **[String Helpers](/api/helpers/strings)** - string manipulation and formatting.
+
+
+<UICards two horizontal>
+  <UICard horizontal
+    header="Array Helpers"
+    href="/api/helpers/arrays"
+    description="working with arrays and lists."
+  ></UICard>
+  <UICard horizontal
+    header="Comparison Helpers"
+    href="/api/helpers/comparison"
+    description="comparing values and making decisions."
+  ></UICard>
+  <UICard horizontal
+    header="CSS Helpers"
+    href="/api/helpers/css"
+    description="working with CSS classes and styles."
+  ></UICard>
+  <UICard horizontal
+    header="Date Helpers"
+    href="/api/helpers/dates"
+    description="formatting and manipulating dates."
+  ></UICard>
+  <UICard horizontal
+    header="Debug Helpers"
+    href="/api/helpers/debug"
+    description="debugging and logging within templates."
+  ></UICard>
+  <UICard horizontal
+    header="Logical Helpers"
+    href="/api/helpers/logical"
+    description="conditional checks and logical operations."
+  ></UICard>
+  <UICard horizontal
+    header="Numeric Helpers"
+    href="/api/helpers/numeric"
+    description="working with numbers."
+  ></UICard>
+  <UICard horizontal
+    header="Object Helpers"
+    href="/api/helpers/objects"
+    description="manipulating and transforming objects."
+  ></UICard>
+  <UICard horizontal
+    header="Reactivity Helpers"
+    href="/api/helpers/reactivity"
+    description="working with reactive computations."
+  ></UICard>
+  <UICard horizontal
+    header="String Helpers"
+    href="/api/helpers/strings"
+    description="string manipulation and formatting."
+  ></UICard>
+</UICards>

docs/src/pages/api/index.mdx

@@ -4,3 +4,48 @@ icon: cpu
 title: API Reference
 description: An API reference documenting available packages
 ---
+import { UICards, UICard } from '@semantic-ui/core';
+
+## Reference Sections
+
+The API reference guides are designed to provide exhaustive documentation for the underlying `@semantic-ui` packages.
+
+
+<UICards two horizontal>
+  <UICard horizontal
+    header="UI Components"
+    icon="package"
+    href="/api/component"
+    description="A reference guide for functionality available in @semantic-ui/component"
+  ></UICard>
+  <UICard horizontal
+    header="Templating Helpers"
+    icon="book"
+    href="/api/helpers"
+    description="A reference guide to helpers available in templates."
+  ></UICard>
+  <UICard horizontal
+    header="Reactivity"
+    icon="cpu"
+    href="/api/reactivity"
+    description="A reference guide for using reactions and reactive variables."
+  ></UICard>
+  <UICard horizontal
+    header="Query"
+    icon="mouse-pointer"
+    href="/api/query"
+    description="A reference guide for functionality available in @semantic-ui/query."
+  ></UICard>
+  <UICard horizontal
+    header="Utils"
+    icon="tool"
+    href="/api/utils"
+    description="A guide to functions available in @semantic-ui/utils."
+  ></UICard>
+  <UICard horizontal
+    header="Template Compiler"
+    icon="table"
+    href="/api/utils"
+    description="A guide to compiling templates in the template compiler in @semantic-ui/templating."
+  ></UICard>
+</UICards>

docs/src/pages/introduction.mdx

@@ -4,19 +4,62 @@ icon: open book
 title: Introduction
 description: Learn About Semantic UI
 ---
+import { UICards, UICard } from '@semantic-ui/core';
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 import PlaygroundExample from '@components/PlaygroundExample/PlaygroundExample.astro';
 
-## What is Semantic UI?
+The two main ways to use Semantic UI
+* **Creating UI Components** - Semantic provides all the tools to build custom UI components whether your goal is to build an inhouse design system, build a website, or contribute UI components to the open source community.
+* **Use UI Components** - Semantic provides an out of the box set of ui components similar to the original version or other UI frameworks
 
-Semantic UI is a UI framework built for authoring websites using [web components](/web-components) with signals based reactivity, an expressive shadow DOM templating syntax, robust theming using css layers and  variables, and an integrated underlying UI component framework that  supports SSR by default.
+> Semantic UI's component framework is designed to provide the missing toolkit to make web components easy to author and ship at scale, with features like reactivity, templating, tools for events and keybindings, and a robust css framework for styling.
 
-### Key Features
 
-Semantic includes the following core libraries:
-* An underlying [UI component framework](/components) that includes things like popups, dropdowns, modals, and form controls.
-* A robust [reactive templating language](/templates) that compiles to web components.
-* A signals based [reactivity library](/reactivity).
-* A modern 3kb jQuery-like replacement called [Query](/query) to handle DOM APIs
-* A higly-performant [rendering engine](/rendering) powered by [Lit](https://lit.dev) under the hood.
+## Creating UI Components
 
+Semantic provides several core libraries to make it easy to ship custom UI as web components.
+
+<UICards two horizontal>
+  <UICard horizontal
+    header="@semantic-ui/component"
+    icon="package"
+    href="/components"
+    description="A standardized system for creating UI with web components."
+  ></UICard>
+  <UICard horizontal
+    header="@semantic-ui/templating"
+    icon="table"
+    href="/components"
+    description="A reactive templating language that compiles to an AST for rendering your component."
+  ></UICard>
+  <UICard horizontal
+    header="@semantic-ui/reactivity"
+    icon="cpu"
+    href="/components"
+    description="A signals based reactivity library built for ease of use."
+  ></UICard>
+  <UICard horizontal
+    header="@semantic-ui/query"
+    icon="mouse-pointer"
+    href="/query"
+    description="A modern standards-based chainable DOM querying API built for the shadow DOM."
+  ></UICard>
+  <UICard horizontal
+    header="@semantic-ui/utils"
+    icon="tool"
+    href="/api/utils"
+    description="A collection of utility functions designed to make your code more human readable."
+  ></UICard>
+</UICards>
+
+
+## Using UI Components
+
+If you prefer to use Semantic UI purely as a UI framework and not author your own custom UI, you can simply use web components directly wherever you write your code from `@semantic-ui/core`
+
+<UICard horizontal
+  header="@semantic-ui/core"
+  icon="layers"
+  href="/usage"
+  description="A robust set of primitives that provide components like card, button, menu, input, modal and more."
+></UICard>

docs/src/pages/ui/[...slug].astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
-import { each, toTitleCase, inArray, toTitleCase } from '@semantic-ui/utils';
+import { each, toTitleCase, inArray } from '@semantic-ui/utils';
 import Definition from '@layouts/Definition.astro';
 import SpecDefinition from '@components/SpecDefinition.astro';
 import * as SpecExports from '@semantic-ui/specs';
@@ -32,6 +32,7 @@ const definitionDisplayed = inArray(displayedTab, ['singular', 'definition', 'pl
 const { SpecReader, ...Specs } = SpecExports;
 const spec = Specs[data.specName];
 const componentSpec = new SpecReader(spec, { plural });
+console.log(componentSpec, plural);
 const componentName = componentSpec.getComponentName();
 const definition = componentSpec.getDefinition();
 

packages/specs/src/index.js

@@ -5,12 +5,13 @@ export { ContainerSpec, ContainerComponentSpec } from './specs/container/index.j
 export { RailSpec, RailComponentSpec } from './specs/rail/index.js';
 
 /* Primitives */
-export { ButtonSpec, ButtonComponentSpec } from './specs/button/index.js';
+export { ButtonSpec, ButtonPluralComponentSpec, ButtonComponentSpec } from './specs/button/index.js';
 export { IconSpec, IconComponentSpec } from './specs/icon/index.js';
 export { MenuSpec, MenuComponentSpec, MenuItemSpec, MenuItemComponentSpec } from './specs/menu/index.js';
 export { LabelSpec, LabelComponentSpec } from './specs/label/index.js';
 export { InputSpec, InputComponentSpec } from './specs/input/index.js';
 export { SegmentSpec, SegmentComponentSpec } from './specs/segment/index.js';
+export { CardSpec, CardPluralComponentSpec, CardComponentSpec } from './specs/card/index.js';
 
 /* Components */
 export { ModalSpec, ModalComponentSpec } from './specs/modal/index.js';