Merge pull request #41 from cieloazul310/develop

Develop
cieloazul310 · Oct 27, 2023 · 6b7ebed · 6b7ebed
2 parents 75a8394 + 57fda61
commit 6b7ebed
Show file tree

Hide file tree

Showing 24 changed files with 15,219 additions and 10,005 deletions.
diff --git a/.changeset/hungry-seas-add.md b/.changeset/hungry-seas-add.md
@@ -0,0 +1,11 @@
+---
+"@cieloazul310/astro-sarkara-article-classes": minor
+"@cieloazul310/panda-preset-sarkara-base": minor
+"@cieloazul310/astro-sarkara-components": minor
+"@cieloazul310/astro-sarkara-layout": minor
+"@cieloazul310/astro-sarkara": minor
+"astro-app": minor
+---
+
+- feat(preset-base): Add semanticTokens for spacing like as `xs`, `sm`, `md`, `lg` and `xl`.
+- refactor(layout): Refactor margin and gap with spacing token above.
diff --git a/app/astro/package.json b/app/astro/package.json
@@ -14,18 +14,18 @@
     "eslint": "eslint src --ext .js,.ts,.astro --fix"
   },
   "dependencies": {
-    "@astrojs/check": "^0.2.0",
+    "@astrojs/check": "^0.2.1",
     "@cieloazul310/astro-sarkara": "^0.0.13",
-    "astro": "^3.2.4",
+    "astro": "^3.4.0",
     "rehype": "^13.0.1",
     "rehype-class-names": "^1.0.14"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^1.1.1",
+    "@astrojs/mdx": "^1.1.3",
     "@astrojs/partytown": "^2.0.1",
-    "@pandacss/astro": "^0.15.5",
-    "@pandacss/dev": "^0.15.5",
+    "@pandacss/astro": "^0.16.0",
+    "@pandacss/dev": "^0.16.0",
     "eslint": "^8.51.0",
     "eslint-config-custom": "^0.0.2"
   }
-}
+}
diff --git a/app/astro/src/content/tutorial/using-analytics.mdx b/app/astro/src/content/tutorial/using-analytics.mdx
@@ -3,7 +3,11 @@ title: Googleアナリティクスを設置
 index: 10
 ---
 
-Googleアナリティクスは`<head>`要素内の先頭に位置することが推奨されている。Sarkaraレイアウトでは`top-of-head`のスロットでコードを挿入することができる。
+Astro Sarkaraのレイアウト内にGoogleアナリティクスを設置する場合、[Section 5『レイアウトに要素を注入する』](/tutorial/layout-slots)で説明した機能、スロットを活用します。
+
+Googleアナリティクスは`<head>`要素内の先頭に位置することが推奨されています。Astro Sarkaraレイアウトでは`top-of-head`のスロットで、`<head>`要素の最上位にコードを注入することが可能です。
+
+<PanelLink href="/tutorial/layout-slots">Section 5 レイアウトに要素を注入する</PanelLink>
 
 ```astro
 ---
@@ -15,12 +19,13 @@ import { menu, siteMetadata } from "../data";
   <Fragment slot="top-of-head">
     <!-- Google tag (gtag.js) -->
     <script
-      type="text/partytown"
-      src="https://www.googletagmanager.com/gtag/js?id={your_analytics_id}"></script>
-    <script type="text/partytown">
+      async
+      src="https://www.googletagmanager.com/gtag/js?id={your_analytics_id}"
+    ></script>
+    <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
-        dataLayer.push(arguments);
+        window.dataLayer.push(arguments);
       }
       gtag("js", new Date());
 
@@ -32,6 +37,12 @@ import { menu, siteMetadata } from "../data";
 
 ## Partytownを使う
 
+Partytownは[サードパーティースクリプトの処理をサービスワーカーに任せることで読み込み速度を爆速にしてくれる](https://gigazine.net/news/20230510-partytown/)ライブラリです。AstroにはPartytownを有効にするインテグレーションが提供されています。これをGoogleアナリティクスと組み合わせて使用することができます。
+
+<PanelLink href="https://partytown.builder.io/">Partytown</PanelLink>
+
+<PanelLink href="https://docs.astro.build/ja/guides/integrations-guide/partytown/">@astrojs/partytown</PanelLink>
+
 ```sh
 npm install @astrojs/partytown
 ```
@@ -46,6 +57,29 @@ export default defineConfig({
 });
 ```
 
-<PanelLink href="https://partytown.builder.io/">Partytown</PanelLink>
+```astro
+---
+import { SarkaraLayout } from "@cieloazul310/astro-sarkara";
+import { menu, siteMetadata } from "../data";
+---
 
-<PanelLink href="https://docs.astro.build/ja/guides/integrations-guide/partytown/">@astrojs/partytown</PanelLink>
+<SarkaraLayout siteMetadata={siteMetadata} menu={menu}>
+  <Fragment slot="top-of-head">
+    <!-- Google tag (gtag.js) -->
+    <script
+      type="text/partytown"
+      src="https://www.googletagmanager.com/gtag/js?id={your_analytics_id}"></script>
+    <script type="text/partytown">
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "{your_analytics_id}");
+    </script>
+  <Fragment/>
+</SarkaraLayout>
+```
+
+<PanelLink href="https://www.kevinzunigacuellar.com/blog/google-analytics-in-astro/">Add google analytics to Astro with Partytown</PanelLink>
diff --git a/app/astro/src/content/tutorial/using-image/index.md b/app/astro/src/content/tutorial/using-image/index.md
diff --git a/app/astro/src/content/tutorial/using-image/index.mdx b/app/astro/src/content/tutorial/using-image/index.mdx
@@ -0,0 +1,61 @@
+---
+title: OGP画像を設定する
+index: 9
+featuredImg: ./IMG_8308.jpeg
+featuredImgAlt: 向学立志
+---
+
+![向学立志](./IMG_8308.jpeg)
+
+Astro Sarkaraは[The Open Graph Protocol] (OGP)の設定にデフォルトで対応しています。サイトメタデータ`siteMetadata.image`に`public/`ディレクトリに置いた画像ファイルのパス(**publicフォルダを起点としたファイルパス**)を設定することで、OGP画像を適用することができます。
+
+```ts
+export const siteMetadata = defineSiteMetadata({
+  title: "Site title",
+  description: "Site description",
+  /**
+   * publicフォルダを起点としたファイルパスを設定
+   * /public/ogimage.jpeg の場合、以下のように設定
+   */
+  image: "/ogimage.jpeg",
+});
+```
+
+## ページごとのOGP画像の設定
+
+またAstro Sarkaraレイアウトの`image`属性に画像を設定することで、サイトメタデータの設定を上書きしてOGP画像ことができます。
+
+### `public/`ディレクトリの画像
+
+`public`ディレクトリに画像を置く場合は、サイトメタデータと同様にpublicフォルダを起点としたファイルパスを設定することで、サイトメタデータの設定を上書きすることができます。
+
+```astro
+---
+import { SarkaraLayout } from "@cieloazul310/astro-sarkara";
+
+---
+<SarkaraLayout image="/ogp_second.png">
+  {/* contents */}
+</SarkaraLayout>
+```
+
+### `src/`傘下の画像
+
+`src/`ディレクトリ傘下の画像を設定する場合は、Astroコンポーネントのフロントマターで画像をインポートして`<SarkaraLayout>`の`image`属性に設定してください。`src/`ディレクトリに置かれた画像はAstroの機能によって変換、最適化などの処理がされます。
+
+```astro
+---
+import { SarkaraLayout } from "@cieloazul310/astro-sarkara";
+import ogp from "../assets/ogp.png";
+
+---
+<SarkaraLayout image={ogp}>
+  {/* contents */}
+</SarkaraLayout>
+```
+
+Astroのコンテンツコレクションを使用する場合は、Markdownのフロントマターに`featuredImg`といったスキーマを設定することでレイアウトにOGP画像を渡すことができます。詳しくは以下のページを参照ください。
+
+<PanelLink href="https://docs.astro.build/ja/guides/images/">画像</PanelLink>
+
+[The Open Graph Protocol]: https://ogp.me/