From 7276ac1579f98f8ba814f9f98dc7d9570753fb7f Mon Sep 17 00:00:00 2001 From: Curtis Allan Date: Fri, 20 Sep 2024 15:49:15 +1000 Subject: [PATCH] Experimenting with v0 prompt + llms.txt --- component_list.txt | 63 ++++++++++++++++++++++++ llms.txt | 26 ++++++++++ main.py | 4 ++ shad4fast/v0-prompt.txt => v0-prompt.txt | 0 4 files changed, 93 insertions(+) create mode 100644 component_list.txt rename shad4fast/v0-prompt.txt => v0-prompt.txt (100%) diff --git a/component_list.txt b/component_list.txt new file mode 100644 index 0000000..a3377b0 --- /dev/null +++ b/component_list.txt @@ -0,0 +1,63 @@ +# Shad4FastHtml Component Documentation + +## Setup + +Make sure the relevant packages are installed, and setup the imports as shown below. + +> [!NOTE] +> If you wish to seperately import components you can do so too. Make sure to import and setup `ShadHead()` as well. + +```python +from fasthtml import * +from shad4fast import * + +app, rt = fast_app(pico=False, hdrs=(ShadHead(),)) +``` + +## Components + +- [Alert](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/alert_template.md): Displays a short, important message in a way that attracts the user's attention. + +- [Button](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/button_template.md): A button that can be used to trigger actions in your app. + +- [Card](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/card_template.md): A flexible container that can be used to display content in a variety of ways. + +- [Dialog](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/dialog_template.md): A dialog is a type of modal that appears in front of an app's content to provide critical information or ask for a decision. + +- [Input](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/input_template.md): An input is a component that allows users to enter text into a form. + +- [Label](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/label_template.md): A label is a component that provides a name or title for an input. + +- [Select](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/select_template.md): A select is a component that allows users to select an option from a list of options. + +- [Sheet](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/sheet_template.md): A sheet is a component that appears from the bottom of the screen and can be used to display content in a variety of ways. + +- [AspectRatio](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/aspect_ratio_template.md): An aspect ratio is a component that ensures a container maintains a specific aspect ratio. + +- [Textarea](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/textarea_template.md): A textarea is a component that allows users to enter text into a form. + +- [Separator](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/separator_template.md): A separator is a component that separates content in a variety of ways. + +- [Switch](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/switch_template.md): A switch is a component that allows users to toggle a boolean value. + +- [Slider](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/slider_template.md): A slider is a component that allows users to select a value from a range of values. + +- [Table](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/table_template.md): A table is a component that allows users to display and interact with tabular data. + +- [Tabs](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/tabs_template.md): A tab is a component that allows users to switch between different views or content. + +- [Toast](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/toast_template.md): A toast is a component that displays a short message to the user. + +- [Carousel](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/carousel_template.md): A carousel is a component that allows users to scroll through a list of items. + +- [Checkbox](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/checkbox_template.md): A checkbox is a component that allows users to select one or more options from a list. + +- [Avatar](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/avatar_template.md): An avatar is a component that displays a user's profile picture. + +- [Radio](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/radio_template.md): A radio is a component that allows users to select one option from a list of options. + +- [Progress](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/progress_template.md): A progress is a component that displays the progress of a task. + +- [ScrollArea](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/scroll_area_template.md): A scroll area is a component that allows users to scroll through content. + +- [Badge](https://raw.githubusercontent.com/curtis-allan/shadcn-fasthtml-framework/refs/heads/main/docs/md/badge_template.md): A badge is a component that displays a small amount of information. diff --git a/llms.txt b/llms.txt index e69de29..1065334 100644 --- a/llms.txt +++ b/llms.txt @@ -0,0 +1,26 @@ +# Shad4FastHtml + +> Shad4FastHtml is a python package that integrates Shadcn/UI components with FastHtml. It provides the same styling as the Shadcn/UI library, but doesn't require using React/ Radix UI primitives. + This is done by using vanilla javascript to add functionality to the components. This library aims to be functionally equivalent to Shadcn/UI, but some caveats apply. + +Things to remember when using Shad4FastHtml components: + +- Before using a Shad4FastHtml component, make sure the `ShadHead()` function is added to the app headers. +- Ensure that the `pico` parameter is set to `False` when creating the app (i.e. `app, rt = fast_app(pico=False, hdrs=(ShadHead(),))`). +- TailwindCSS styles must be included in the app headers. There are scripts available in the package to assist with local setup if needed. Otherwise, the tailwind cdn is available. +- Component implementation differs from one to another, so refer to the documentation for each component to see how it should be used. +- When using a component in the standard Shadcn/UI layout, make sure the top component has the attribute `standard` set to `True` so it renders correctly. + +## Docs + +- [Shad4FastHtml getting started](https://shad4fasthtml.com/docs/getting_started.md): A brief overview of installing and setting up Shad4FastHtml +- [FastHTML quick start](https://docs.fastht.ml/tutorials/quickstart_for_web_devs.html.md): A brief overview of many FastHTML features + +## API + +- [Component List](https://shad4fasthtml.com/component_list.txt): A succint list of all current Shad4FastHtml components, with links to their documentation. + +## Examples + +- [Shad4FastHtml Todo list application](https://shad4fasthtml.com/docs/shad4fast_example.md): Detailed walk-thru of a complete CRUD app in FastHTML showing idiomatic use of FastHTML and HTMX patterns. +- [Component demos](https://shad4fasthtml.com/docs/demos/comp_demos.py): A series of demos for each component, with code snippets. Provides an `alt` snippet for certain components that have multiple implementation methods. diff --git a/main.py b/main.py index 9b85a48..5ead25c 100644 --- a/main.py +++ b/main.py @@ -94,6 +94,10 @@ htmlkw={"lang": "en"}, ) +app.static_route(".md", prefix="/docs",static_path="docs/md") + +app.static_route(".py", prefix="/docs/demos", static_path="docs") + toast_setup(app) diff --git a/shad4fast/v0-prompt.txt b/v0-prompt.txt similarity index 100% rename from shad4fast/v0-prompt.txt rename to v0-prompt.txt