Skip to content

Commit

Permalink
Merge pull request #3 from kazuooooo/readme
Browse files Browse the repository at this point in the history 
✍️ README v1
  • Loading branch information
@kazuooooo
kazuooooo committed Dec 19, 2019
2 parents 46f1529 + 15eeace commit 100346d
Showing 1 changed file with 288 additions and 62 deletions.
350 changes: 288 additions & 62 deletions README.md
View file
@@ -1,97 +1,323 @@
<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
<p align="center">
<a href="https://www.gatsbyjs.org">
<img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
</a>
</p>
<h1 align="center">
Gatsby's default starter
</h1>
# Welcome 😄
Cardfolio! is a portfolio site framework which can make a portfolio site just like your business card,

Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
that is :credit_card: **Cardfolio site** :credit_card:

_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._
You can surprise people who received your card!

## 🚀 Quick start
Anyway, this is my card, see the magic bia QRCode :sparkles:

1. **Create a Gatsby site.**
TODO: 英語版差し替え

Use the Gatsby CLI to create a new site, specifying the default starter.
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71154/1e7fa747-87c1-b90c-759e-ea948f1deb55.png" width="300"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71154/1717c1bc-99a9-232f-06bc-4de7edd86f2a.png" width="300">

```shell
# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
```
If you browse this site by mobile.
You can access from [here](https://matsumotokazuya.io/en?fromQR=1)

1. **Start developing.**
# How to make your Cardfolio site 💳
You can easily create your Cardfolio site following steps.

Navigate into your new site’s directory and start it up.
1. Fork this repository
2. Install dependencies and start server

```shell
cd my-default-starter/
gatsby develop
```
```bash
yarn
gatsby develop
```

1. **Open the source code and start editing!**
3. Replace src/data/en.json with your data.

Your site is now running at `http://localhost:8000`!

_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
All data which are used in cardfolio is written in src/data/xx.json file.
(default locale is en.json, if you want to change default locale or apply i18n see the section below)

Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
Let’s start from simple example, FrontSide.
Edit src/data/en.json like this.

## 🧐 What's inside?
```json
{
"frontSide": {
"jobTitle": "{Your Job Title Here}",
"name": "{Your name here}"
}
…
}
```

A quick look at the top-level files and directories you'll see in a Gatsby project.
Top key name is component name and child keys indicate where the value is used and values itself are what values displays for these keys.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
Access to localhost:8000 to check changes are reflected.

1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
![Cursor_と_localhost_8000_en.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71154/737451ff-9172-72a1-68fa-36b212206a8b.png)

2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
You can also replace BackSide Data with the same way.

3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
4. Create a your real buisiness card. It must include QRCode which refer to your cardfolio site url,

4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
and the url must include params fromQR=1. The parameter is used to detect access from QRCode or not.

5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.

6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
ex) https://yorsite.com?fromQR=1

7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
This step is optional, but I strongly recommend to make people surprise :)

8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
5. Replace images(qr-code.png and profile.png) with your site QRCode and Profile picture.

9. **`LICENSE`**: Gatsby is licensed under the MIT license.
6. Deploy your site. Any provider is ok, but I recommend to deply by netlify. Cuz Gatsby has great compatibility with Netlify.

10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
Details see [here](https://www.gatsbyjs.org/docs/deploying-to-netlify/)

11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
7. That’s all, You’ve created your original cardfolio site 🎉

12. **`README.md`**: A text file containing useful reference information about your project.

## 🎓 Learning Gatsby
At last, don't forget to let me know your site, I want to add you site example list.

Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
(It’s ok to create PR to add you site to list)

- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.

- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
<details>
<summary><h1>Customization🔧</h1></summary>

## 💫 Deploy
Cardfolio! is created based on gatsby.js.

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default)
If you are a developer have used React before, you can easily customize your cardfolio site.

<!-- AUTO-GENERATED-CONTENT:END -->
Cardfolio! have very simple components directories below.

```
├── components
│ ├── backSide.tsx. // backside of card
│ ├── frontSide.tsx // frontside of card
│ ├── header.tsx
│ ├── menuItems. // menu items on backside
│ │ ├── career.tsx
│ │ ├── contact.tsx
│ │ ├── index.tsx
│ │ ├── menuItems.stories.tsx
│ │ ├── selfIntroduction.tsx
│ │ ├── skillset.tsx
│ │ └── works.tsx
│ └── qrCodeBackSide.tsx // qr code back side for fade out
```

## Want to customize visually :art:

Just edit component you want to change.

Cardfolio! uses [emotion styled component](https://emotion.sh/docs/styled) for styling.


## Create custom menu item 🖌

Let's create a menu item to show some gif as a example.

1. At first, define a component under menuItem directory.

```javascript
import React from 'react'
import styled from '@emotion/styled'
import { graphql } from 'gatsby'

interface Props {
data: {
url: string,
alt: string
}
}

const Gif = (props: Props) => {
const { url, alt } = props.data
return (
<Container>
<img src={url} alt={alt} />
</Container>
)
}

export const dataQuery = graphql`
fragment GifData on IndexJson {
gif {
menuItemTitle
url
alt
}
}
`

const Container = styled.div`
padding: 24px;
`
export default Gif
```

The most important things is defining fragment query for this component.

```javascript
export const dataQuery = graphql`
fragment GifData on IndexJson {
gif {
menuItemTitle // ⭐️ this key required
url
alt
}
}
`
```

Every menu item components must receive these props as data props.

2. To do that, add fragment to root index.tsx

```javascript
export const query = graphql`
query Index($locale: String) {
file(name: { eq: $locale }, relativeDirectory: { eq: "index" }) {
childIndexJson {
...SiteMetaData
...FrontSideData
...SelfIntroductionData
...WorksData
...ContactData
...CareerData
...SkillSetData
...GifData // ← ✅ add this line
}
}
}
`
```

and add data to en.json file

```json
{
...
"gif": {
"menuItemTitle": "Gif",
"url": "https://media3.giphy.com/media/14miSV6VMiO7te/200.webp?cid=790b7611929de751e751f8d71de77feb138954710d6ba8b1&rid=200.webp",
"alt": "alt"
}
}
```

3. At last, add gif to menuitem

```javascript
import selfIntroductionComponent from './selfIntroduction'
import worksComponent from './works'
import contactComponent from './contact'
import careerComponent from './career'
import skillSetComponent from './skillset'
import Gif from './gif' // ← ✅ add this line

export enum MenuItemKey {
SelfIntroduction = 'selfIntroduction',
Works = 'works',
Contact = 'contact',
Career = 'career',
SkillSet = 'skillSet',
Gif = 'gif' // ← add this line
}

export default {
[MenuItemKey.SelfIntroduction]: selfIntroductionComponent,
[MenuItemKey.Works]: worksComponent,
[MenuItemKey.Contact]: contactComponent,
[MenuItemKey.Career]: careerComponent,
[MenuItemKey.SkillSet]: skillSetComponent,
[MenuItemKey.Gif]: Gif, // ← ✅ add this line
}
```

Then restart server, you will find Gif menu & see pretty wombat gif

![localhost_8000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71154/d590286d-ef60-d954-dc11-fad69b858666.png)

Complete detail see this [commit](https://github.com/kazuooooo/Cardfolio/commit/cd797cc1d4789509f73ba6f91bea990c31e397ae)

</details>

<details>
<summary><h1>i18n 🌍</h1></summary>

### Add locale :earth_americas:

Just add locale object to src/data/locales.js

```javscript:src/data/locales.js
module.exports = {
// ADD ja
ja: {
path: 'ja',
locale: 'Japanese',
},
en: {
default: true,
path: 'en',
locale: 'English',
},
}
```

then, make ja.json and add data for japanese

```json
{
"frontSide": {
"jobTitle": "エンジニア",
"name": "ウォンバット太郎"
},
...
```

Restart gatsby server to rebuild page,


then check japanese pages are created

localhost:8000 (English default)

localhost:8000/ja (Japanse)

## Change default locale :earth_asia:

Just change default key to target language

```javascript:src/data/locales.js
module.exports = {
ja: {
default: true, // Set default ja
path: 'ja',
locale: 'Japanese',
},
en: {
path: 'en',
locale: 'English',
},
}
```

Then check default locale is changed

localhost:8000 (Japanese default)

localhost:8000/en (English)
</details>

# Examples 🗃
These are portfolio sites created by Cardfolio! (order by created day asc)

[matsumotokazuya.io](https://matsumotokazuya.io/en?fromQR=1)

# Contribution :man_technologist:
Any issues and pr is welcome :)
If you find bug or some general function you want to add (for example new component, new theme design etc…),
please make pull request by these step.

1. Fork this repo
2. Checkout master branch
3. Make your change
4. Create pull request

# License :writing_hand:
Cardfolio! is available under the MIT license.

0 comments on commit 100346d

Please sign in to comment.