From 3a8001a07b09cc080eb847306868928da206b874 Mon Sep 17 00:00:00 2001 From: jiko21 Date: Sat, 29 Nov 2025 16:31:19 +0900 Subject: [PATCH 1/2] update --- docs/index.ts | 112 ++++++++++++++++++++++++++++++++++++++++++++--- src/html/tags.ts | 19 ++++++++ 2 files changed, 124 insertions(+), 7 deletions(-) diff --git a/docs/index.ts b/docs/index.ts index b0d2e19..191a44f 100644 --- a/docs/index.ts +++ b/docs/index.ts @@ -1,10 +1,108 @@ -import type {Body, H1, Div, Html, Img, P} from '../src/html'; +import type {A, Body, H1, H2, H3, Div, Html, P} from '../src/html'; type PageHtml = Html< - Body<[ - H1<'Hello'>, - Div<[P<'This is a page of html-type.'>]>, - Div<[P<'TypeScript-typed HTML generation.'>]>, - Img<{ src: './img.png'}> - ]> + Body< + [ + Div< + Div< + [ + H1<'html-type', { + style: 'font-size: 4rem; font-weight: 800; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;' + }>, + P<'Type-safe HTML generation with TypeScript', { + style: 'font-size: 1.5rem; color: #64748b; margin: 1.5rem 0 0 0; font-weight: 300;' + }> + ], + { + style: 'text-align: center; padding: 6rem 2rem;' + } + >, + { + style: 'min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);' + } + >, + Div< + [ + H2<'Features', { + style: 'font-size: 2.5rem; font-weight: 700; text-align: center; margin: 0 0 3rem 0; color: #1e293b;' + }>, + Div< + [ + Div< + [ + H3<'🎯 Type Safety', { + style: 'font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem 0; color: #334155;' + }>, + P<'Full TypeScript type checking for your HTML structure. Catch errors at compile time, not runtime.', { + style: 'color: #64748b; line-height: 1.8; margin: 0;' + }> + ], + { + style: 'background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); transition: transform 0.2s;' + } + >, + Div< + [ + H3<'🚀 Content Model Validation', { + style: 'font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem 0; color: #334155;' + }>, + P<'Enforce HTML5 content model rules. No more invalid nesting like divs in paragraphs.', { + style: 'color: #64748b; line-height: 1.8; margin: 0;' + }> + ], + { + style: 'background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); transition: transform 0.2s;' + } + >, + Div< + [ + H3<'✨ Compile-time Rendering', { + style: 'font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem 0; color: #334155;' + }>, + P<'Transform TypeScript types directly into HTML at compile time. Zero runtime overhead.', { + style: 'color: #64748b; line-height: 1.8; margin: 0;' + }> + ], + { + style: 'background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); transition: transform 0.2s;' + } + > + ], + { + style: 'display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto;' + } + > + ], + { + style: 'padding: 6rem 2rem; background: #f8fafc;' + } + >, + Div< + Div< + [ + H2<'Get Started', { + style: 'font-size: 2rem; font-weight: 700; margin: 0 0 1.5rem 0; color: #1e293b;' + }>, + P<'Build type-safe HTML with the power of TypeScript.', { + style: 'color: #64748b; font-size: 1.125rem; margin: 0 0 2rem 0;' + }>, + A<'View on GitHub →', { + href: 'https://github.com/jiko21/html-type'; + target: '_blank'; + style: 'display: inline-block; padding: 1rem 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 0.5rem; font-weight: 600; font-size: 1.125rem; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);' + }> + ], + { + style: 'text-align: center; max-width: 600px; margin: 0 auto;' + } + >, + { + style: 'padding: 6rem 2rem; background: white;' + } + > + ], + { + style: 'margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;' + } + > >; diff --git a/src/html/tags.ts b/src/html/tags.ts index fecead5..1f63cbd 100644 --- a/src/html/tags.ts +++ b/src/html/tags.ts @@ -302,3 +302,22 @@ export type Img = { ? A : never; }; + +declare const aBrand: unique symbol; + +export type A< + T extends HTMLElement[] | HTMLElement, + Attr extends AllHTMLAttributes = {} +> = T extends HTMLElement[] + ? { + [aBrand]: 'a'; + children: T; + attributes: Attr; + } + : T extends HTMLElement + ? { + [aBrand]: 'a'; + children: T; + attributes: Attr; + } + : never; From 35904647607ae3313048db2074413e8379112fbd Mon Sep 17 00:00:00 2001 From: jiko21 Date: Sat, 29 Nov 2025 16:34:29 +0900 Subject: [PATCH 2/2] fix: obey lint --- src/html/tags.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/html/tags.ts b/src/html/tags.ts index 1f63cbd..dca64f5 100644 --- a/src/html/tags.ts +++ b/src/html/tags.ts @@ -307,7 +307,7 @@ declare const aBrand: unique symbol; export type A< T extends HTMLElement[] | HTMLElement, - Attr extends AllHTMLAttributes = {} + Attr extends AllHTMLAttributes = {}, > = T extends HTMLElement[] ? { [aBrand]: 'a';