Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add getting started page & fix styles #81

Merged
merged 2 commits into from
Jun 21, 2024
+206 −77
Merged

add getting started page & fix styles #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2e1566
add getting started page & fix styles
takanorip Jun 20, 2024
69bf3d1
fix content
takanorip Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions src/components/astro/Markdown.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,25 @@

.markdown :global(h1) {
margin-top: 0;
font-size: var(--text-heading-xl-size);
font-size: 2.5rem;
line-height: var(--text-heading-xl-line);
}

.markdown :global(h2),
.markdown :global(h3) {
margin-top: var(--size-spacing-xl);
margin-bottom: var(--size-spacing-lg);
font-size: var(--text-heading-md-size);
line-height: var(--text-heading-md-line);
}

.markdown :global(h2) {
font-size: var(--text-heading-lg-size);
}

.markdown :global(h3) {
font-size: var(--text-heading-md-size);
}

.markdown :global(:is(p, ul) + h2) {
margin-top: var(--size-spacing-xxl);
}
Expand All @@ -51,6 +58,12 @@
margin-bottom: var(--size-spacing-md);
}

.markdown :global(:where(ol)) {
padding-left: var(--size-spacing-lg);
margin-top: var(--size-spacing-md);
margin-bottom: var(--size-spacing-md);
}

.markdown :global(:where(ul)) {
padding-left: var(--size-spacing-lg);
margin-top: var(--size-spacing-md);
Expand Down
2 changes: 1 addition & 1 deletion src/components/react/GlobalNavigation.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.nav {
min-width: 16rem;
padding: 0 var(--size-spacing-md) var(--size-spacing-sm);
padding: 0 var(--size-spacing-md) var(--size-spacing-lg);
overflow: auto;
background-color: var(--color-ubie-white);
border-right: 1px solid var(--color-ubie-black-100);
Expand Down
152 changes: 82 additions & 70 deletions src/components/react/GlobalNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,80 +36,92 @@ const GlobalNavigation: FC<Props> = ({ currentPath, allComponentPostData }) => {
</div>
<ul className={styles.linkList}>
<li>
<GlobalNavigationLinkRoot current={isCurrent('/principles')} href="/principles">
Principles
<GlobalNavigationLinkRoot current={isCurrent('/getting-started')} href="/getting-started">
Getting Started
</GlobalNavigationLinkRoot>
</li>
<li>
<GlobalNavigationAccordion title="Tokens" titleHref="/tokens" currentPath={currentPath}>
<ul>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/typography')} href="/tokens/typography">
Typography
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/color/semantic')} href="/tokens/color/semantic">
Semantic Color
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/color/primitive')} href="/tokens/color/primitive">
Primitive Color
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/spacing')} href="/tokens/spacing">
Spacing
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/radius')} href="/tokens/radius">
Radius
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/for-developers')} href="/tokens/for-developers">
For Developers
</GlobalNavigationLink>
</li>
</ul>
</GlobalNavigationAccordion>
</li>
<li>
<GlobalNavigationAccordion title="Layouts" titleHref="/layouts" currentPath={currentPath}>
<ul>
<li>
<GlobalNavigationLink current={isCurrent('/layouts/form')} href="/layouts/form">
Form
</GlobalNavigationLink>
</li>
</ul>
</GlobalNavigationAccordion>
</li>
<li>
<GlobalNavigationAccordion title="Components" titleHref="/components" currentPath={currentPath}>
<ul>
{allComponentPostData.map((postData) => (
<li key={postData.url}>
<GlobalNavigationLink href={postData.url} current={isCurrent(postData.url)}>
{postData.title}
<ul>
<li>
<GlobalNavigationLinkRoot current={isCurrent('/principles')} href="/principles">
Principles
</GlobalNavigationLinkRoot>
</li>
<li>
<GlobalNavigationLinkRoot href="/ux-writing" current={isCurrent('/ux-writing')}>
UX Writing
</GlobalNavigationLinkRoot>
</li>
</ul>
<ul>
<li>
<GlobalNavigationAccordion title="Tokens" titleHref="/tokens" currentPath={currentPath}>
<ul>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/typography')} href="/tokens/typography">
Typography
</GlobalNavigationLink>
</li>
))}
</ul>
</GlobalNavigationAccordion>
</li>
<li>
<GlobalNavigationLinkRoot href="/elements/icons" current={isCurrent('/elements/icons')}>
Icons
</GlobalNavigationLinkRoot>
</li>
<li>
<GlobalNavigationLinkRoot href="/ux-writing" current={isCurrent('/ux-writing')}>
UX Writing
</GlobalNavigationLinkRoot>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/color/semantic')} href="/tokens/color/semantic">
Semantic Color
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink
current={isCurrent('/tokens/color/primitive')}
href="/tokens/color/primitive"
>
Primitive Color
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/spacing')} href="/tokens/spacing">
Spacing
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/radius')} href="/tokens/radius">
Radius
</GlobalNavigationLink>
</li>
<li>
<GlobalNavigationLink current={isCurrent('/tokens/for-developers')} href="/tokens/for-developers">
For Developers
</GlobalNavigationLink>
</li>
</ul>
</GlobalNavigationAccordion>
</li>
<li>
<GlobalNavigationAccordion title="Layouts" titleHref="/layouts" currentPath={currentPath}>
<ul>
<li>
<GlobalNavigationLink current={isCurrent('/layouts/form')} href="/layouts/form">
Form
</GlobalNavigationLink>
</li>
</ul>
</GlobalNavigationAccordion>
</li>
<li>
<GlobalNavigationAccordion title="Components" titleHref="/components" currentPath={currentPath}>
<ul>
{allComponentPostData.map((postData) => (
<li key={postData.url}>
<GlobalNavigationLink href={postData.url} current={isCurrent(postData.url)}>
{postData.title}
</GlobalNavigationLink>
</li>
))}
</ul>
</GlobalNavigationAccordion>
</li>
<li>
<GlobalNavigationLinkRoot href="/elements/icons" current={isCurrent('/elements/icons')}>
Icons
</GlobalNavigationLinkRoot>
</li>
</ul>
</ul>
</div>
</FocusTrap>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/PostLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,6 @@ const { title, description } = Astro.props.frontmatter;
.heading {
display: flex;
gap: 20px;
justify-content: flex-start;
justify-content: space-between;
}
</style>
4 changes: 2 additions & 2 deletions src/layouts/WithTableOfContentsLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ import TableOfContents from '@components/react/TableOfContents';
@container (min-width: calc(35em + 200px + 80px)) {
.menu {
display: block;
flex: 1 1 auto;
max-width: 200px;
flex: none;
width: 240px;
}
}
</style>
100 changes: 100 additions & 0 deletions src/pages/getting-started/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
title: 'Ubie Vitalsの始め方'
layout: '@layouts/PostLayout.astro'
---

Ubie Vitalsは、Ubieらしいプロダクトを構築するためのガイドラインやツールをまとめたものです。
これからUbie Vitalsを使い始める方に向けて、各要素の使い方や情報源の場所などを紹介します。

## デザインリソース

Ubie VitalsのデザインリソースはすべてFigmaで管理されています。

- [Ubie UI](https://www.figma.com/design/ejIFAbw12HtoEZXcn01G5C/Ubie-UI)
- [Design Tokens](https://www.figma.com/design/9LjkKt27YY9LfTK8Cwx08m/Ubie-Design-Tokens)
- [Icons](https://www.figma.com/design/6dWoWbMuEHiVN5qi1ybDAa/Ubie-Icons)

## 開発リソース

Ubie Vitalsが提供する開発リソースは[GitHub](https://github.com/ubie-oss)でOSSとして公開されています。
npmパッケージやVS Code拡張、このウェブサイトのソースコードなどが含まれています。

各リソースのインストール方法はGitHubリポジトリを参照してください。

- [Ubie UI](https://github.com/ubie-oss/ubie-ui)
- [Ubie Icons](https://github.com/ubie-oss/ubie-icons)
- [Design Tokens](https://github.com/ubie-oss/design-tokens)
- [Design Tokens for VS Code](https://github.com/ubie-oss/design-tokens-for-vscode)
- [Chakra UI Theme](https://github.com/ubie-oss/chakra-ui-theme)

### デザイントークンを適用する

1. デザイントークンのパッケージをインストールします。

```bash
npm install @ubie/design-tokens
```

2. GlobalなCSSファイルでデザイントークンを読み込みます。これでCSS変数が利用可能になります。

```css
@import url('../../node_modules/@ubie/design-tokens/dist/tokens.css');
```

### Ubie UIをインストールする

1. Ubie UIのパッケージをインストールします。

```bash
npm install @ubie/ubie-ui
```

2. Reactコンポーネントをインポートします。

```tsx
import { Button } from '@ubie/ubie-ui';
import type { FC } from 'react';

const Default: FC = () => {
return (
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
<Button>ボタン</Button>
<Button variant="secondary">ボタン</Button>
<Button variant="accent">ボタン</Button>
<Button variant="alert">ボタン</Button>
<Button variant="text">ボタン</Button>
<Button variant="textAlert">ボタン</Button>
</div>
);
};

export default Default;
```

各コンポーネントの詳細な使い方はコンポーネント詳細ページを参照してください。

### Ubie Iconsをインストールする

Ubie UIを利用している場合はIconコンポーネント経由でIconを利用できます。

```tsx
import { Icon } from '@ubie/ubie-ui';
import type { FC } from 'react';

export const Button: FC = () => {
return (
<button type="button">
<Icon icon="PlusAIcon" />
Add Button
</button>
);
};
```

Ubie UIを利用していない場合は、Ubie Iconのパッケージを直接インストールすることも可能です。

```bash
npm install @ubie/ubie-icons
```

Reactコンポーネント以外に[SVGファイル](https://github.com/ubie-oss/ubie-icons/tree/main/assets)も利用可能です。詳細はGitHubリポジトリを参照してください。
2 changes: 1 addition & 1 deletion src/pages/ux-writing/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 'UXライティングスタイルガイド'
title: 'UXライティング ガイドライン'
layout: '@layouts/PostLayout.astro'
---

Expand Down
4 changes: 4 additions & 0 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ h6 {
word-break: auto-phrase;
}

h1 {
font-size: 2.5rem;
}

code {
display: inline-block;
padding: 0.2ch 0.4ch 0.1ch;
Expand Down