feat: initial project setup with implementation plan
- Add PLAN.md with 40-step checklist across 10 phases - Add CLAUDE.md with project-specific instructions - Set up nix flake with FastHTML/MonsterUI dependencies - Create Python package skeleton (src/animaltrack) - Vendor FastHTML and MonsterUI documentation - Add Docker build configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
310
docs/vendor/monsterui/api_ref/docs_cards.md
vendored
Normal file
310
docs/vendor/monsterui/api_ref/docs_cards.md
vendored
Normal file
@@ -0,0 +1,310 @@
|
||||
# Cards API Reference
|
||||
|
||||
### Example Usage
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
Header
|
||||
|
||||
A card with header and footer
|
||||
|
||||
Input
|
||||
|
||||
Range
|
||||
|
||||
Footer Submit Button
|
||||
|
||||
[code]
|
||||
|
||||
def ex_card():
|
||||
return Card(
|
||||
Form(LabelInput("Input"),
|
||||
LabelRange("Range")),
|
||||
header=Div(
|
||||
CardTitle("Header"),
|
||||
P("A card with header and footer",cls=TextPresets.muted_sm)),
|
||||
footer=DivLAligned(Button("Footer Submit Button")))
|
||||
|
||||
[/code]
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
#### Creating Custom FastHTML Tags for Markdown Rendering
|
||||
|
||||
A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles
|
||||
|
||||
Isaac Flath20-October-2024
|
||||
|
||||
FastHTMLHTMXWeb Apps
|
||||
|
||||
Read
|
||||
|
||||
[code]
|
||||
|
||||
def ex_card2_wide():
|
||||
def Tags(cats): return DivLAligned(map(Label, cats))
|
||||
|
||||
return Card(
|
||||
DivLAligned(
|
||||
A(Img(src="https://picsum.photos/200/200?random=12", style="width:200px"),href="#"),
|
||||
Div(cls='space-y-3 uk-width-expand')(
|
||||
H4("Creating Custom FastHTML Tags for Markdown Rendering"),
|
||||
P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
|
||||
DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted),
|
||||
DivFullySpaced(
|
||||
Tags(["FastHTML", "HTMX", "Web Apps"]),
|
||||
Button("Read", cls=(ButtonT.primary,'h-6'))))),
|
||||
cls=CardT.hover)
|
||||
|
||||
[/code]
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
#### Creating Custom FastHTML Tags for Markdown Rendering
|
||||
|
||||
A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles
|
||||
|
||||
Isaac Flath20-October-2024
|
||||
|
||||
FastHTMLHTMXWeb Apps
|
||||
|
||||
Read
|
||||
|
||||
[code]
|
||||
|
||||
def ex_card2_tall():
|
||||
def Tags(cats): return DivLAligned(map(Label, cats))
|
||||
|
||||
return Card(
|
||||
Div(
|
||||
A(Img(src="https://picsum.photos/400/200?random=14"), href="#"),
|
||||
Div(cls='space-y-3 uk-width-expand')(
|
||||
H4("Creating Custom FastHTML Tags for Markdown Rendering"),
|
||||
P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
|
||||
DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted),
|
||||
DivFullySpaced(
|
||||
Tags(["FastHTML", "HTMX", "Web Apps"]),
|
||||
Button("Read", cls=(ButtonT.primary,'h-6'))))),
|
||||
cls=CardT.hover)
|
||||
|
||||
[/code]
|
||||
|
||||
See Source
|
||||
|
||||
See Output
|
||||
|
||||
### Sarah Chen
|
||||
|
||||
Engineering Lead
|
||||
|
||||
San Francisco
|
||||
|
||||
### James Wilson
|
||||
|
||||
Senior Developer
|
||||
|
||||
New York
|
||||
|
||||
### Maria Garcia
|
||||
|
||||
UX Designer
|
||||
|
||||
London
|
||||
|
||||
### Alex Kumar
|
||||
|
||||
Product Manager
|
||||
|
||||
Singapore
|
||||
|
||||
### Emma Brown
|
||||
|
||||
DevOps Engineer
|
||||
|
||||
Toronto
|
||||
|
||||
### Marcus Johnson
|
||||
|
||||
Frontend Developer
|
||||
|
||||
Berlin
|
||||
|
||||
[code]
|
||||
|
||||
def ex_card3():
|
||||
def team_member(name, role, location="Remote"):
|
||||
return Card(
|
||||
DivLAligned(
|
||||
DiceBearAvatar(name, h=24, w=24),
|
||||
Div(H3(name), P(role))),
|
||||
footer=DivFullySpaced(
|
||||
DivHStacked(UkIcon("map-pin", height=16), P(location)),
|
||||
DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github")))))
|
||||
team = [
|
||||
team_member("Sarah Chen", "Engineering Lead", "San Francisco"),
|
||||
team_member("James Wilson", "Senior Developer", "New York"),
|
||||
team_member("Maria Garcia", "UX Designer", "London"),
|
||||
team_member("Alex Kumar", "Product Manager", "Singapore"),
|
||||
team_member("Emma Brown", "DevOps Engineer", "Toronto"),
|
||||
team_member("Marcus Johnson", "Frontend Developer", "Berlin")
|
||||
]
|
||||
return Grid(*team, cols_sm=1, cols_md=1, cols_lg=2, cols_xl=3)
|
||||
|
||||
[/code]
|
||||
|
||||
### API Reference
|
||||
|
||||
### Card
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
Card(*c, header: Union[fastcore.xml.FT, Iterable[fastcore.xml.FT]] = None, footer: Union[fastcore.xml.FT, Iterable[fastcore.xml.FT]] = None, body_cls='space-y-6', header_cls=(), footer_cls=(), cls=(), **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a Card with a header, body, and footer
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components that go in the body (Main content of the card such as a form, and image, a signin form, etc.)
|
||||
|
||||
* `header` Component(s) that goes in the header (often a `ModalTitle` and a subtitle)
|
||||
|
||||
* `footer` Component(s) that goes in the footer (often a `ModalCloseButton`)
|
||||
|
||||
* `body_cls` classes for the body
|
||||
|
||||
* `header_cls` classes for the header
|
||||
|
||||
* `footer_cls` classes for the footer
|
||||
|
||||
* `cls` class for outermost component
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Card component
|
||||
|
||||
### CardTitle
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
CardTitle(*c, cls=(), **kwargs)
|
||||
[/code]
|
||||
|
||||
> Creates a card title
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components (often a string)
|
||||
|
||||
* `cls` Additional classes on the div
|
||||
|
||||
* `kwargs`
|
||||
|
||||
* * *
|
||||
|
||||
### CardT
|
||||
|
||||
_Card styles from UIkit_
|
||||
|
||||
Option | Value | Option | Value
|
||||
---|---|---|---
|
||||
default | uk-card-default | primary | uk-card-primary
|
||||
secondary | uk-card-secondary | destructive | uk-card-destructive
|
||||
hover | uk-card hover:shadow-lg hover:-translate-y-1 transition-all duration-200 | |
|
||||
|
||||
The remainder of these are only needed if you're doing something really special. They are used in the `Card` function to generate the boilerplate for you.
|
||||
|
||||
### CardContainer
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
CardContainer(*c, cls=<CardT.default: 'uk-card-default'>, **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a card container
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components (typically `CardHeader`, `CardBody`, `CardFooter`)
|
||||
|
||||
* `cls` Additional classes on the div
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Container for a card
|
||||
|
||||
### CardHeader
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
CardHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a card header
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components that goes in the header (often a `ModalTitle` and description)
|
||||
|
||||
* `cls` Additional classes on the div
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Container for the header of a card
|
||||
|
||||
### CardBody
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
CardBody(*c, cls=(), **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a card body
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components that go in the body (Main content of the card such as a form, and image, a signin form, etc.)
|
||||
|
||||
* `cls` Additional classes on the div
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Container for the body of a card
|
||||
|
||||
### CardFooter
|
||||
|
||||
Source
|
||||
|
||||
[code]
|
||||
|
||||
CardFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT
|
||||
[/code]
|
||||
|
||||
> Creates a card footer
|
||||
|
||||
**Params**
|
||||
|
||||
* `c` Components that go in the footer (often a `ModalCloseButton`)
|
||||
|
||||
* `cls` Additional classes on the div
|
||||
|
||||
* `kwargs`
|
||||
|
||||
**Returns:** Container for the footer of a card
|
||||
|
||||
Reference in New Issue
Block a user