Merge pull request #71 from 8845musign/update-documents

Update documents

.scaffdog/pageComponent.md

@@ -32,6 +32,7 @@ import ExampleLayout from '@layouts/ExampleLayout.astro';
 <ExampleLayout title="Default Example | {{ inputs.componentName | pascal }}">
   <DefaultExample client:only="react" />
 </ExampleLayout>
+
 ```
 
 # `pages/components/{{ inputs.componentName }}.mdx`
@@ -43,6 +44,7 @@ exampleKey: '{{ inputs.componentName }}'
 layout: '@layouts/ComponentLayout.astro'
 description: ''
 thumbnail: '/assets/images/components/thumbnail-default.svg'
+repositoryUrl: ''
 ---
 
 ## Feature
@@ -52,4 +54,5 @@ Describe the characteristics of the component. Describe the use cases to which i
 ## Usage
 
 Please describe the specific use of the product. Detailed notes on use, code example, etc.
+
 ```

README.md

@@ -32,5 +32,5 @@ Implement the most basic example.
 ### Add Component Example
 
 ```
-npm run generate:example
+npm run generate:page:example
 ```

package.json

@@ -17,23 +17,23 @@
     "script:extract-icon-names": "node ./scripts/extractIconNames.js",
     "test": "vitest",
     "generate:page:component": "scaffdog generate pageComponent",
-    "generate:example": "scaffdog generate example"
+    "generate:page:example": "scaffdog generate example"
   },
   "dependencies": {
-    "@astrojs/check": "^0.6.0",
-    "@astrojs/mdx": "^2.3.1",
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/mdx": "^3.0.1",
     "@astrojs/prism": "^3.1.0",
-    "@astrojs/react": "^3.3.2",
+    "@astrojs/react": "^3.4.0",
     "@astrojs/renderer-react": "^0.5.0",
     "@nanostores/react": "^0.7.2",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@ubie/design-tokens": "^0.1.4",
     "@ubie/ubie-icons": "^0.6.2",
-    "@ubie/ubie-ui": "^0.0.21",
+    "@ubie/ubie-ui": "^0.0.22",
     "@unocss/reset": "^0.59.4",
-    "astro": "^4.7.1",
+    "astro": "^4.9.1",
     "astro-icon": "^1.1.0",
     "clsx": "^2.1.1",
     "color-blend": "^4.0.0",

src/components/astro/RepositoryLink.astro

@@ -0,0 +1,26 @@
+---
+import GitHubMark from '@assets/images/github-mark.svg';
+import { Image } from 'astro:assets';
+
+interface Props {
+  href: string;
+  targetName: string;
+}
+
+const { href, targetName } = Astro.props;
+---
+
+<a href={href} class="repositoryLink">
+  <Image alt="" src={GitHubMark} aria-hidden="true" width={17} />
+  View on GitHub<span class="visuallyHidden">: {targetName}</span>
+</a>
+
+<style>
+  .repositoryLink {
+    display: inline-flex;
+    gap: var(--size-spacing-xs);
+    align-items: center;
+    font-weight: bold;
+    color: var(--color-text-main);
+  }
+</style>