@@ -50,39 +50,31 @@ export const CodeBox = () => {
50
50
< span className = "token plain" > </ span >
51
51
< span className = "token punctuation" > { "(" } </ span >
52
52
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > html</ span > < span className = "token attr-name" > lang</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > en< span className = "token punctuation" > "</ span > </ span > < span className = "token punctuation" > ></ span > </ span >
53
- </ div >
54
- < div className = "token-line" >
55
- < span className = "token plain" > </ span >
56
53
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > body< span className = "token punctuation" > ></ span > </ span > </ span >
57
54
</ div >
58
55
< div className = "token-line" >
59
- < span className = "token plain" > </ span >
60
56
< span className = "token plain" > </ span >
61
57
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > h1< span className = "token punctuation" > ></ span > </ span > </ span >
62
58
Hello from WebX!
63
59
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > </</ span > h1< span className = "token punctuation" > ></ span > </ span > </ span >
64
60
</ div >
65
61
< div className = "token-line" >
66
- < span className = "token plain" > </ span >
67
62
< span className = "token plain" > </ span >
68
63
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > button< span className = "token attr-name" > hx-get</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > /about< span className = "token punctuation" > "</ span > </ span > < span className = "token attr-name" > hx-swap</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > outerHTML< span className = "token punctuation" > "</ span > </ span > < span className = "token punctuation" > ></ span > </ span > </ span >
69
64
About
70
65
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > </</ span > button< span className = "token punctuation" > ></ span > </ span > </ span >
71
66
</ div >
72
67
< div className = "token-line" >
73
- < span className = "token plain" > </ span >
74
68
< span className = "token plain" > </ span >
75
69
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > h2< span className = "token punctuation" > ></ span > </ span > </ span >
76
70
Favorite Foods
77
71
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > </</ span > h2< span className = "token punctuation" > ></ span > </ span > </ span >
78
72
</ div >
79
73
< div className = "token-line" >
80
- < span className = "token plain" > </ span >
81
74
< span className = "token plain" > </ span >
82
75
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > ul< span className = "token attr-name" > id</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > foods< span className = "token punctuation" > "</ span > </ span > < span className = "token punctuation" > ></ span > </ span > </ span >
83
76
</ div >
84
77
< div className = "token-line" >
85
- < span className = "token plain" > </ span >
86
78
< span className = "token plain" > </ span >
87
79
< span className = "token plain" > </ span >
88
80
< span className = "token punctuation" > { "{" } </ span >
@@ -96,36 +88,30 @@ export const CodeBox = () => {
96
88
< span className = "token comment" > // Server-side rendering</ span >
97
89
</ div >
98
90
< div className = "token-line" >
99
- < span className = "token plain" > </ span >
100
91
< span className = "token plain" > </ span >
101
92
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > </</ span > ul< span className = "token punctuation" > ></ span > </ span > </ span >
102
93
</ div >
103
94
< div className = "token-line" >
104
- < span className = "token plain" > </ span >
105
95
< span className = "token plain" > </ span >
106
96
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > form< span className = "token attr-name" > hx-post</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > /api/foods< span className = "token punctuation" > "</ span > </ span > < span className = "token attr-name" > hx-swap</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > afterend< span className = "token punctuation" > "</ span > </ span > </ span > </ span >
107
97
</ div >
108
98
< div className = "token-line" >
109
- < span className = "token plain" > </ span >
110
99
< span className = "token plain" > </ span >
111
100
< span className = "token plain" > </ span >
112
101
< span className = "token plain" > </ span >
113
102
< span className = "token attr-name" > hx-target</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > #foods< span className = "token punctuation" > "</ span > </ span > < span className = "token attr-name" > hx-trigger</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > submit< span className = "token punctuation" > "</ span > </ span > < span className = "token punctuation" > ></ span >
114
103
</ div >
115
104
< div className = "token-line" >
116
- < span className = "token plain" > </ span >
117
105
< span className = "token plain" > </ span >
118
106
< span className = "token plain" > </ span >
119
107
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > input< span className = "token attr-name" > type</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > text< span className = "token punctuation" > "</ span > </ span > < span className = "token attr-name" > name</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > name< span className = "token punctuation" > "</ span > </ span > < span className = "token attr-name" > placeholder</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > Food name< span className = "token punctuation" > "</ span > </ span > < span className = "token punctuation" > { "/>" } </ span > </ span > </ span >
120
108
</ div >
121
109
< div className = "token-line" >
122
- < span className = "token plain" > </ span >
123
110
< span className = "token plain" > </ span >
124
111
< span className = "token plain" > </ span >
125
112
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > input< span className = "token attr-name" > type</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > text< span className = "token punctuation" > "</ span > </ span > < span className = "token attr-name" > name</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > emoji< span className = "token punctuation" > "</ span > </ span > < span className = "token attr-name" > placeholder</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > Emoji< span className = "token punctuation" > "</ span > </ span > < span className = "token punctuation" > { "/>" } </ span > </ span > </ span >
126
113
</ div >
127
114
< div className = "token-line" >
128
- < span className = "token plain" > </ span >
129
115
< span className = "token plain" > </ span >
130
116
< span className = "token plain" > </ span >
131
117
< span className = "token tag" > < span className = "token tag" > < span className = "token punctuation" > <</ span > button< span className = "token attr-name" > type</ span > < span className = "token attr-value" > < span className = "token punctuation attr-equals" > =</ span > < span className = "token punctuation" > "</ span > submit< span className = "token punctuation" > "</ span > </ span > < span className = "token punctuation" > { "/>" } </ span > </ span > </ span >
0 commit comments