layoutをcssで定義できる様になった

Pandacssでも書ける+Config.jsの意味はわからん

Author: nasubi-dev

articles/assets/Test20240406233811738.jpg

@@ -0,0 +1,68 @@
+---
+tags:
+  - アニメ
+  - ゲーム
+excalidraw-open-md: false
+cssclasses:
+---
+
+Blogを表示できたら成功｡
+
+# アニメ
+
+![vike-square-gradient.yySbJPh3.svg](..\assets\vike-square-gradient.yySbJPh3.svg)
+
+![Test20240406233811738.jpg](../assets/Test20240406233811738.jpg)
+
+# [笹川真生 - 日本の九月の気層です / Mao Sasagawa - Japan's September Air Layer](https://www.youtube.com/watch?v=4-3Ogspng1I&list=RDRcDBofJ-_oA&index=12)
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/4-3Ogspng1I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+Markdownの構文一覧
+
+> 引用
+> > 引用のネスト
+> あふぁds
+
+**bold**
+
+*itaric*
+
+`code`
+
+~~cancel~~
+
+---
+
+# タイトル
+
+| test | table |
+| ---- | --- |
+| row  | aaa   |
+
+- list
+  - nest
+- aaa
+
+1. number
+2. test
+   1. i
+   2. ii
+   3. iii
+   4. iv
+   5. v
+
+codeblock
+
+``` typescript
+const [number,setNumber] =useState(0)
+
+export default funciton home ():ReactElement {
+ return(
+  <h1> home page </h1>
+  {number}
+ )
+}
+```
+
+LinkCard

articles/assets/vike-square-gradient.yySbJPh3.svg

@@ -25,7 +25,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "recharts": "2",
-    "vike": "^0.4.168"
+    "vike": "^0.4.168",
+    "vike-react": "^0.4.6"
   },
   "devDependencies": {
     "@iconify/react": "^4.1.1",

articles/test.md

@@ -1 +1 @@
-/* @layer reset, base, tokens, recipes, utilities; */
+@layer reset, base, tokens, recipes, utilities;

articles/uploaded/test.md

@@ -0,0 +1,16 @@
+import { type ReactElement } from "react";
+import { styled as p } from "@panda/jsx";
+import "./Layout.css";
+
+
+
+function Layout({ children }: { children: ReactElement }): ReactElement {
+  return (
+    <p.div
+      fontFamily="Noto Sans JP, sans-serif"
+    >
+      {children}
+    </p.div>
+  );
+}
+export default Layout;

package.json

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 import { styled as p } from "@panda/jsx";
-import Test from "../../../articles/test.md";
+import Test from "../../../articles/uploaded/test.md";
 
 export default function Blogs(): ReactElement {
   return (

src/global.css

@@ -0,0 +1,7 @@
+import vikeReact from "vike-react/config";
+
+export default {
+  // Install vike-react.
+  // In technical terms: inherit the configuration set by `vike-react/config`.
+  extends: vikeReact,
+};