File tree Expand file tree Collapse file tree 4 files changed +2
-25
lines changed
articles/2019-11-03_utcode-lectures-04 Expand file tree Collapse file tree 4 files changed +2
-25
lines changed Original file line number Diff line number Diff line change @@ -7,25 +7,6 @@ slug: utcode-lectures-04
77image : ../../../src/images/no-image.svg
88---
99
10- import { useState } from " react" ;
11-
12- export function Demo() {
13- const [hover, setHover] = useState (false );
14- return (
15- <div
16- onMouseEnter = { () => {
17- setHover (true );
18- }}
19- onMouseLeave = { () => {
20- setHover (false );
21- }}
22- style = { hover ? { color: " red" , fontSize: " 30px" } : {}}
23- >
24- Hello World!
25- </div >
26- );
27- }
28-
2910今回はデザインです。ある意味 Web 開発の一番楽しいところですね。ある程度までは非常にスムーズに進められるのですが、こだわり始めると途端に面倒になってきます。
3011
3112## 環境構築
@@ -175,7 +156,7 @@ CSS セレクタは、ブラウザが CSS を適用する際、どの HTML 要
175156
176157疑似クラスを用いると、CSS を用いたインタラクティブな表現が簡単に実装できます。以下の文字列にカーソルを合わせてみてください。
177158
178- <Demo />
159+ <div class = " hover:text-red hover:text-lg " />
179160
180161これは、以下のようにして実装されています。
181162
Original file line number Diff line number Diff line change 11---
2- layout : " ../../../layouts/project.astro"
32title : PostPut
43slug : postput
54image : ./image.png
Original file line number Diff line number Diff line change @@ -15,7 +15,6 @@ import JoinUsCTA from "../../components/JoinUsCTA.astro";
1515import { Focus } from " ../../schema" ;
1616
1717const { article } = Astro .props ;
18- console .log (article );
1918const { Content } = await render (article );
2019const author =
2120 article .data .author && (await getEntry (" members" , article .data .author ?.id ));
@@ -26,8 +25,6 @@ if (article.data.author && !author)
2625 " , searched for author " +
2726 article .data .author .id ,
2827 );
29-
30- console .log (" author:" , article .data .author , author );
3128---
3229
3330<GlobalLayout
Original file line number Diff line number Diff line change @@ -14,7 +14,7 @@ export const CreateArticleSchema = ({ image }: { image: ImageFunction }) =>
1414 title : z . string ( ) . nullable ( ) ,
1515 image : image ( ) ,
1616 categories : z . array ( z . string ( ) ) . optional ( ) ,
17- author : reference ( "members" ) ,
17+ author : reference ( "members" ) . optional ( ) ,
1818 } ) ;
1919
2020export const CreateProjectSchema = ( { image } : { image : ImageFunction } ) =>
You can’t perform that action at this time.
0 commit comments