-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1bb3614
commit 41962ed
Showing
46 changed files
with
1,521 additions
and
749 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,136 @@ | ||
{ | ||
"cells": [ | ||
{ | ||
"cell_type": "markdown", | ||
"id": "e79166fd", | ||
"metadata": {}, | ||
"source": [ | ||
"# Utils\n", | ||
"\n", | ||
"> Utilities for building the docs page that don't belong anywhere else" | ||
] | ||
}, | ||
{ | ||
"cell_type": "code", | ||
"execution_count": null, | ||
"id": "2535ee4e", | ||
"metadata": {}, | ||
"outputs": [], | ||
"source": [ | ||
"#| default_exp utils" | ||
] | ||
}, | ||
{ | ||
"cell_type": "code", | ||
"execution_count": 3, | ||
"id": "4783d9ce", | ||
"metadata": {}, | ||
"outputs": [], | ||
"source": [ | ||
"#| export\n", | ||
"from IPython.display import display, HTML\n", | ||
"from fasthtml.common import *\n", | ||
"from fh_frankenui.core import *\n", | ||
"from fasthtml.jupyter import *\n", | ||
"from uuid import uuid4" | ||
] | ||
}, | ||
{ | ||
"cell_type": "code", | ||
"execution_count": 4, | ||
"id": "b2943fa8", | ||
"metadata": {}, | ||
"outputs": [], | ||
"source": [ | ||
"#| export\n", | ||
"def HShow(comp, iframe_height=\"auto\", app=None, port=8000):\n", | ||
" route = f'/{uuid4()}'\n", | ||
" app.get(route)(lambda: comp)\n", | ||
" display(HTML(f'<a href=\"http://localhost:{port}{route}\" target=\"_blank\">Open in new tab</a>'))\n", | ||
" return HTMX(route,port=port,iframe_height=iframe_height)" | ||
] | ||
}, | ||
{ | ||
"cell_type": "code", | ||
"execution_count": 5, | ||
"id": "bfa48e0b", | ||
"metadata": {}, | ||
"outputs": [], | ||
"source": [ | ||
"#| export\n", | ||
"def create_server(app, stop_server=True,server_varname='server'):\n", | ||
" if stop_server and server_varname in globals(): globals()[server_varname].stop()\n", | ||
" for port in range(8000,8030): \n", | ||
" if is_port_free(port):\n", | ||
" server = JupyUvi(app, port=port)\n", | ||
" Show = partial(HShow, app=app, port=port)\n", | ||
" return server, Show" | ||
] | ||
}, | ||
{ | ||
"cell_type": "code", | ||
"execution_count": 6, | ||
"id": "b8e1807f", | ||
"metadata": {}, | ||
"outputs": [], | ||
"source": [ | ||
"#| export\n", | ||
"hjs = (Style('html.dark .hljs-copy-button {background-color: #e0e0e0; color: #2d2b57;}'),\n", | ||
" Link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.css', disabled=True),\n", | ||
" Link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-light.css', disabled=True),\n", | ||
" Script(src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js'),\n", | ||
" Script(src='https://cdn.jsdelivr.net/gh/arronhunt/highlightjs-copy/dist/highlightjs-copy.min.js'),\n", | ||
" Link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/arronhunt/highlightjs-copy/dist/highlightjs-copy.min.css'),\n", | ||
" Style('.hljs-copy-button {background-color: #2d2b57;}'),\n", | ||
" Script(src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/python.min.js'),\n", | ||
" Script(\"hljs.addPlugin(new CopyButtonPlugin());\\r\\nhljs.configure({'cssSelector': 'pre code'});\\r\\nhtmx.onLoad(hljs.highlightAll);\", type='module'),\n", | ||
" Script('''const observer = new MutationObserver(mutations => {\n", | ||
" mutations.forEach(mutation => {\n", | ||
" if (mutation.target.tagName === 'HTML' && mutation.attributeName === 'class') {\n", | ||
" const isDark = mutation.target.classList.contains('dark');\n", | ||
" document.querySelector('link[href*=\"atom-one-dark.css\"]').disabled = !isDark;\n", | ||
" document.querySelector('link[href*=\"atom-one-light.css\"]').disabled = isDark;\n", | ||
" }\n", | ||
" });\n", | ||
" });\n", | ||
"\n", | ||
" observer.observe(document.documentElement, { attributes: true });\n", | ||
"\n", | ||
" // Initial setup\n", | ||
" const isDark = document.documentElement.classList.contains('dark');\n", | ||
" document.querySelector('link[href*=\"atom-one-dark.css\"]').disabled = !isDark;\n", | ||
" document.querySelector('link[href*=\"atom-one-light.css\"]').disabled = isDark;\n", | ||
" '''))" | ||
] | ||
}, | ||
{ | ||
"cell_type": "code", | ||
"execution_count": null, | ||
"id": "e6a70a7a", | ||
"metadata": {}, | ||
"outputs": [], | ||
"source": [] | ||
} | ||
], | ||
"metadata": { | ||
"kernelspec": { | ||
"display_name": "Python 3 (ipykernel)", | ||
"language": "python", | ||
"name": "python3" | ||
}, | ||
"language_info": { | ||
"codemirror_mode": { | ||
"name": "ipython", | ||
"version": 3 | ||
}, | ||
"file_extension": ".py", | ||
"mimetype": "text/x-python", | ||
"name": "python", | ||
"nbconvert_exporter": "python", | ||
"pygments_lexer": "ipython3", | ||
"version": "3.12.4" | ||
} | ||
}, | ||
"nbformat": 4, | ||
"nbformat_minor": 5 | ||
} |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,239 @@ | ||
"""Reference to all FrankenUI Components""" | ||
|
||
# AUTOGENERATED! DO NOT EDIT! File to edit: ../API Reference.ipynb. | ||
|
||
# %% auto 0 | ||
__all__ = ['docs_button', 'docs_heading', 'docs_headers', 'docs_textstyle', 'docs_articles_containers_sections', 'docs_cards', | ||
'docs_lists', 'enum_to_html_table', 'render_content', 'create_doc_section', 'string2code_string', | ||
'extract_function_body', 'fn2code_string', 'ex_buttons', 'ex_headings', 'ex_textfont', 'ex_textt', | ||
'ex_articles', 'ex_containers', 'ex_card', 'Tags', 'ex_card2', 'ex_lists'] | ||
|
||
# %% ../API Reference.ipynb | ||
from fasthtml.common import * | ||
|
||
from fh_frankenui.core import * | ||
from nbdev.showdoc import * | ||
import inspect | ||
|
||
from enum import EnumType | ||
from collections.abc import Callable | ||
|
||
# %% ../API Reference.ipynb | ||
def enum_to_html_table(enum_class): | ||
headers = ["Option", "Value"] | ||
rows = [[name, value.value] for name, value in enum_class.__members__.items()] | ||
return Div( | ||
Hr(cls='uk-divider-icon my-4'), | ||
H3(enum_class.__name__,cls='my-4'), | ||
P(I(enum_class.__doc__)), | ||
TableFromLists(headers, rows, cls=(TableT.hover, 'uk-table-small')),) | ||
|
||
# %% ../API Reference.ipynb | ||
from uuid import uuid4 | ||
def render_content(c): | ||
if isinstance(c, str): return render_md(c) | ||
elif isinstance(c, EnumType): return enum_to_html_table(c) | ||
elif isinstance(c, FT): return c | ||
elif isinstance(c, tuple): | ||
_id = 'f'+str(uuid4()) | ||
return Card( | ||
Button(FullySpacedDiv("See Source",UkIcon('corner-down-right', 20, 20, 3)), uk_toggle=f"target: #{_id}", id=_id, cls=ButtonT.primary), | ||
Button(FullySpacedDiv("See Output",UkIcon('corner-down-right', 20, 20, 3)), uk_toggle=f"target: #{_id}", id=_id, cls=ButtonT.primary, hidden=True), | ||
Div(c[0], id=_id), | ||
Div(Pre(Code(c[1])), id=_id, hidden=True, cls="mockup-code"), | ||
cls='my-8') | ||
elif isinstance(c, Callable): | ||
_html = show_doc(c, renderer=BasicHtmlRenderer)._repr_html_() | ||
return NotStr(apply_classes(_html, class_map_mods={"table":'uk-table uk-table-hover uk-table-small'})) | ||
else: return c | ||
|
||
# %% ../API Reference.ipynb | ||
def create_doc_section(*content, title, md_content=None): | ||
return lambda: Section(H1(title,cls='mb-10'), *map(render_content, content)) | ||
|
||
# %% ../API Reference.ipynb | ||
def string2code_string(code: str) -> tuple: return eval(code), code | ||
|
||
def extract_function_body(func): | ||
source = inspect.getsource(func) | ||
body_start = source.index(':') + 1 | ||
body = source[body_start:] | ||
return body.replace('return ', '', 1) | ||
|
||
def fn2code_string(fn: Callable) -> tuple: return fn(), extract_function_body(fn) | ||
|
||
# %% ../API Reference.ipynb | ||
def ex_buttons(): | ||
return Div( | ||
Button("Default", cls=ButtonT.default), | ||
Button("Primary", cls=ButtonT.primary), | ||
Button("Secondary", cls=ButtonT.secondary), | ||
Button("Danger", cls=ButtonT.danger), | ||
Button("Text", cls=ButtonT.text), | ||
Button("Link", cls=ButtonT.link), | ||
Button("Ghost", cls=ButtonT.ghost), | ||
) | ||
|
||
# %% ../API Reference.ipynb | ||
docs_button = create_doc_section(Button, | ||
ButtonT, | ||
fn2code_string(ex_buttons), | ||
title="Buttons") | ||
|
||
# %% ../API Reference.ipynb | ||
def ex_headings(): | ||
return Div( | ||
H1("Level 1 Heading (H1)"), | ||
H2("Level 2 Heading (H2)"), | ||
H3("Level 3 Heading (H3)"), | ||
H4("Level 4 Heading (H4)") | ||
) | ||
|
||
# %% ../API Reference.ipynb | ||
docs_heading = create_doc_section( | ||
fn2code_string(ex_headings), | ||
H1, H2, H3, H4, | ||
title="Headings") | ||
|
||
# %% ../API Reference.ipynb | ||
docs_headers = create_doc_section( | ||
"To get headers with a default theme use `hdrs=Theme.<color>.headers()`. For example for the blue theme you would use `hdrs=Theme.blue.headers(). Theme options are:", | ||
"> Note: Tailwind is included in the headers for convenience", | ||
Theme, | ||
title="Headers") | ||
|
||
# %% ../API Reference.ipynb | ||
def ex_textfont(): | ||
return Div( | ||
P('muted_sm', cls=TextFont.muted_sm), | ||
P('muted_lg', cls=TextFont.muted_lg), | ||
P('bold_sm', cls=TextFont.bold_sm), | ||
) | ||
|
||
# %% ../API Reference.ipynb | ||
def ex_textt(): | ||
return Grid( | ||
P('lead', cls=TextT.lead), | ||
P('meta', cls=TextT.meta), | ||
P('italic', cls=TextT.italic), | ||
P('small', cls=TextT.small), | ||
P('default', cls=TextT.default), | ||
P('large', cls=TextT.large), | ||
P('light', cls=TextT.light), | ||
P('normal', cls=TextT.normal), | ||
P('bold', cls=TextT.bold), | ||
P('lighter', cls=TextT.lighter), | ||
P('bolder', cls=TextT.bolder), | ||
P('capitalize', cls=TextT.capitalize), | ||
P('uppercase', cls=TextT.uppercase), | ||
P('lowercase', cls=TextT.lowercase), | ||
P('decoration_none',cls=TextT.decoration_none), | ||
P('muted', cls=TextT.muted), | ||
P('primary', cls=TextT.primary), | ||
P('secondary', cls=TextT.secondary), | ||
P('success', cls=TextT.success), | ||
P('warning', cls=TextT.warning), | ||
P('danger', cls=TextT.danger), | ||
P('left', cls=TextT.left), | ||
P('right', cls=TextT.right), | ||
P('center', cls=TextT.center), | ||
P('justify', cls=TextT.justify), | ||
P('top', cls=TextT.top), | ||
P('middle', cls=TextT.middle), | ||
P('bottom', cls=TextT.bottom), | ||
P('baseline', cls=TextT.baseline), | ||
P('truncate', cls=TextT.truncate), | ||
P('break_', cls=TextT.break_), | ||
P('nowrap', cls=TextT.nowrap), | ||
) | ||
|
||
# %% ../API Reference.ipynb | ||
docs_textstyle = create_doc_section( | ||
"Styling text is possibly the most common style thing to do, so we have a couple of helpers for discoverability inside python. `TextFont` is intended to be combinations are are widely applicable and used often, where `TextT` is intended to be more flexible options for you to combine together yourself.", | ||
TextFont, | ||
fn2code_string(ex_textfont), | ||
TextT, | ||
fn2code_string(ex_textt), | ||
title="Text Style") | ||
|
||
# %% ../API Reference.ipynb | ||
def ex_articles(): | ||
return Article( | ||
ArticleTitle("Sample Article Title"), | ||
ArticleMeta("By: John Doe"), | ||
P('lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')) | ||
|
||
# %% ../API Reference.ipynb | ||
def ex_containers(): | ||
return Container( | ||
"This is a sample container with custom styling.", | ||
cls=ContainerT.xsmall, | ||
style="background-color: #FFA500; color: #000000") | ||
|
||
# %% ../API Reference.ipynb | ||
docs_articles_containers_sections = create_doc_section( | ||
ArticleMeta, | ||
ArticleTitle, | ||
Article, | ||
fn2code_string(ex_articles), | ||
Container, | ||
ContainerT, | ||
fn2code_string(ex_containers), | ||
Section, | ||
SectionT, | ||
title="Articles, Containers & Sections" | ||
) | ||
|
||
# %% ../API Reference.ipynb | ||
def ex_card(): | ||
return Card( | ||
Form(LabelInput("Input"), | ||
LabelRange("Range")), | ||
header=Div( | ||
CardTitle("Header"), | ||
P("A card with header and footer",cls=TextFont.muted_sm)), | ||
footer=LAlignedDiv(Button("Footer Submit Button"))) | ||
|
||
# %% ../API Reference.ipynb | ||
def Tags(cats): return Div(cls='space-x-2')(map(Label, cats)) | ||
|
||
def ex_card2(): | ||
return Card( | ||
LAlignedDiv( | ||
A(Img(src="https://isaac-flath.github.io/website/posts/_TopicImages/FastHtml.jpg", 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"), | ||
FullySpacedDiv(map(Span, ["Isaac Flath", "20-October-2024"]), cls=TextFont.muted_sm), | ||
FullySpacedDiv( | ||
Tags(["FastHTML", "HTMX", "Web Apps"]), | ||
Button("Read", cls=(ButtonT.primary,'h-6')))))) | ||
|
||
# %% ../API Reference.ipynb | ||
docs_cards = create_doc_section( | ||
Card, | ||
H3("Example Usage"), | ||
fn2code_string(ex_card), | ||
fn2code_string(ex_card2), | ||
CardTitle, | ||
CardT, | ||
"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, | ||
CardHeader, | ||
CardBody, | ||
CardFooter, | ||
title="Cards" | ||
) | ||
|
||
# %% ../API Reference.ipynb | ||
def ex_lists(): | ||
list_options = [(style,str(cls)) for style,cls in ListT.__members__.items()] | ||
lists = [Div(H4(f"{style} List:"), List(Li("Item 1"), Li("Item 2"), cls=cls)) for style, cls in list_options] | ||
return Grid(*lists) | ||
|
||
# %% ../API Reference.ipynb | ||
docs_lists = create_doc_section( | ||
List, | ||
fn2code_string(ex_lists), | ||
ListT, | ||
title="Lists") |
Oops, something went wrong.