Skip to content

Commit

Permalink
update: file README
Browse files Browse the repository at this point in the history
  • Loading branch information
521xueweihan committed Aug 14, 2024
1 parent f6ea04c commit a5a0976
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 73 deletions.
12 changes: 9 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
## 介绍
<p align="center">
<img src="docs/img/2024-08-14.png"/>
<br>中文 | <a href="README_en.md">English</a>
<br>HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台<br>
</p>

Geese 译为「惊鸿」可理解为轻盈、快速的形态,希望它清爽、简约的界面可以带给你「惊鸿」一般的访问体验。

我想让玩开源的人有个“家”,所以就用 Next.js+Tailwind CSS 构建了一个轻量级的开源社区,也就是「HelloGitHub 社区」的源码。
## 介绍

Geese 是用 Next.js+Tailwind CSS 构建了一个轻量级的开源社区,也就是「HelloGitHub 社区」的源码。

![](docs/img/2023-04-18.png)

该社区提供了不同 **编程语言/类别/标签** 有趣、入门级的开源项目,用户可以这里 **发现/搜索/收藏/评论/分享** 感兴趣的开源项目,还可以 **点赞/提交/打分** 开源项目,让优秀的开源项目脱颖而出。围绕开源项目,社区聚集了一群热爱开源的玩家、技术精湛的大牛、热衷分享的作者,感谢**开源**让我们相识,或许开源精神就是一种交朋友的方式吧!
HelloGitHub 社区提供了不同 **编程语言/类别/标签** 有趣、入门级的开源项目,用户可以这里 **发现/搜索/收藏/评论/分享** 感兴趣的开源项目,还可以 **点赞/提交/打分** 开源项目,让优秀的开源项目脱颖而出。围绕开源项目,社区聚集了一群热爱开源的玩家、技术精湛的大牛、热衷分享的作者,感谢**开源**让我们相识,或许开源精神就是一种交朋友的方式吧!

目前,该社区 **已上线** [在线体验](https://hellogithub.com) 如遇到问题或发现 BUG 可以[一键反馈](https://github.com/HelloGitHub-Team/geese/issues/new)

Expand Down
12 changes: 9 additions & 3 deletions docs/en/README.md → README_en.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
## Introduction
<p align="center">
<img src="docs/img/2024-08-14_en.png"/>
<br><a href="README.md">中文</a> | English
<br>HelloGitHub is a platform for discovering and sharing beginner-friendly open source projects<br>
</p>

"Geese" translated as "Jinghong" (meaning a fleeting glimpse), embodies a light and swift form, aiming to provide you with a "Jinghong"-like browsing experience through its refreshing and minimalist interface.

"Geese," translated as "Jinghong" (meaning a fleeting glimpse), embodies a light and swift form, aiming to provide you with a "Jinghong"-like browsing experience through its refreshing and minimalist interface.
## Introduction

I wanted to create a home for those who enjoy open-source projects, so I built a lightweight open-source community using Next.js and Tailwind CSS. This repository contains the source code for the [HelloGitHub](https://hellogithub.com/) Community.

Expand All @@ -27,4 +33,4 @@ Development guidelines can be found [here](../content.md). Thanks to every [cont

<a href="mailto:[email protected]">Contact me</a>

<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh"><img alt="知识共享许可协议" style="border-width: 0" src="https://licensebuttons.net/l/by-nc-nd/4.0/88x31.png"></a><br>This work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh"><img alt="知识共享许可协议" style="border-width: 0" src="https://licensebuttons.net/l/by-nc-nd/4.0/88x31.png"></a><br>This work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
2 changes: 1 addition & 1 deletion data/level_en.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Everyone is encouraged to share interesting, beginner-friendly open-source proje

The HelloGitHub Community Level is calculated and upgraded in real-time based on contribution points.

![](https://img.hellogithub.com/article/level.png)
![](https://img.hellogithub.com/article/lSthE0PgBGoUCQd_1723623130.png)

## Earning and Deducting Contribution Points

Expand Down
64 changes: 64 additions & 0 deletions docs/content_en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
## Before Development

Firstly, the project utilizes yarn for package installation, which you can search for and install on your own. After installation is complete, set the version number with the command `yarn set version v1.22.19`.

Next, to get the 'Geese' project running locally, follow these detailed steps:

1. Clone the project: `git clone [email protected]:HelloGitHub-Team/geese.git`
2. Install dependencies: `yarn install`
3. Run the project: `yarn dev`
4. Access in the browser: `http://localhost:3000/`

Potential issues you may encounter after starting up:

1. CORS issue: Please check that the front-end service is started on port `3000` with the host as `localhost` or `127.0.0.1`.
2. Images not displaying: Add `127.0.0.1 dev.hg.com` to the end of your local hosts file, then access `http://dev.hg.com:3000/`.
3. Login status: Obtain a test environment login token from @521xueweihan, then manually add an Authorization: token item to the browser's LocalStorage.
4. If the machine freezes during build, you can resolve this by setting the concurrency number with yarn: `yarn config set cloneConcurrency 1`.

**Tech Stack**

- [Next.js](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [SWR](https://swr.vercel.app/zh-CN)
- Scaffold: [ts-nextjs-tailwind-starter](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter)
- Component styles: [hyperui](https://github.com/markmead/hyperui)

Finally, find the API documentation here: [API Docs](https://frp.hellogithub.com/docs#)

After getting the project running, you can play around with it locally. If you find it interesting, [click here](https://github.com/orgs/HelloGitHub-Team/projects/1/views/1) to check out the unclaimed requirements, find a feature, bug, or optimization that interests you, and then let @521xueweihan know 'claim the task' under the corresponding issues before starting development to **prevent duplicate development**.

## During Development

Since this is collaborative development, the `main` branch may be continuously updated. Before each development session, you need to pull the latest code to ensure you are developing based on the most recent `main` branch.

When developing specific requirements, split the code into corresponding directories:

- Components: `components` directory
- Pages: `pages` directory
- Define data: `types` directory
- Requests: `services` directory

After completing feature development/bug fixes, you need to perform self-testing, check code style, and improve code reusability.

Finally, execute the following commands locally and try to resolve any **warnings** you can:

- `yarn lint:fix`
- `yarn lint`
- `yarn typecheck`

## After Development

Get the latest `main` branch code and resolve conflicts locally.

For your first code submission, you need to submit it via a PR (Pull Request).

After your code is successfully merged, @521xueweihan will invite you to become a member of the 'Geese' project. Please check your GitHub notification emails.

For subsequent code submissions, you can develop in a 'self-created branch' or a branch automatically created when 'claiming a requirement.'

After submitting your code, please pay attention to the project's **issues** and **prs** notifications because I will provide feedback and optimization suggestions after reviewing the submitted code.

## Finally

I am very happy to build 'Geese' with you and hope that you also gain something from the process of contributing code.
Binary file added docs/img/2024-08-14.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/img/2024-08-14_en.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 9 additions & 66 deletions src/components/buttons/LanguageSwitcher.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// components/LanguageSwitcher.tsx
import { useRouter } from 'next/router';
import { useRef, useState } from 'react';
import { useState } from 'react';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const Cookies = require('js-cookie');

Expand All @@ -11,15 +11,11 @@ type LanguageSwitchProps = {
const LanguageSwitcher = (props: LanguageSwitchProps) => {
const router = useRouter();
const { locale, asPath } = router;
const [isHovered, setIsHovered] = useState(false);
const [selectedLocale, setSelectedLocale] = useState(locale);
const dropdownRef = useRef<HTMLDivElement>(null);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);

const changeLanguage = (language: string) => {
Cookies.set('locale', language);
setSelectedLocale(language);
setIsHovered(false);
router.push(asPath, asPath, { locale: language });
};

Expand All @@ -33,68 +29,15 @@ const LanguageSwitcher = (props: LanguageSwitchProps) => {
);
}

const handleMouseEnter = () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
setIsHovered(true);
};

const handleMouseLeave = () => {
timeoutRef.current = setTimeout(() => {
setIsHovered(false);
}, 300);
};

return (
<div
className='relative inline-block text-left'
ref={dropdownRef}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div>
<button
type='button'
className='inline-flex h-8 w-full items-center justify-center rounded-md border border-gray-300 bg-white px-2 text-sm font-medium text-gray-700 shadow-sm transition-colors duration-200 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700'
id='options-menu'
aria-haspopup='true'
aria-expanded={isHovered ? 'true' : 'false'}
>
{/* <MdTranslate size={16} /> */}
{selectedLocale === 'zh' ? 'EN' : '中文'}
</button>
</div>

{isHovered && (
<div
className='absolute right-0 mt-2 w-[110px] origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-600'
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div
className='py-1'
role='menu'
aria-orientation='vertical'
aria-labelledby='options-menu'
>
<button
onClick={() => changeLanguage('zh')}
className='block w-full px-4 py-2 text-left text-sm text-gray-700 transition-colors duration-200 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
role='menuitem'
>
🇨🇳 中文
</button>
<button
onClick={() => changeLanguage('en')}
className='block w-full px-4 py-2 text-left text-sm text-gray-700 transition-colors duration-200 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
role='menuitem'
>
🇺🇸 English
</button>
</div>
</div>
)}
<div className='relative inline-block text-left'>
<button
onClick={() => changeLanguage(selectedLocale === 'zh' ? 'en' : 'zh')}
type='button'
className='inline-flex h-8 w-full items-center justify-center rounded-md border border-gray-300 bg-white px-2 text-sm font-medium text-gray-700 shadow-sm transition-colors duration-200 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700'
>
{selectedLocale === 'zh' ? 'EN' : '中文'}
</button>
</div>
);
};
Expand Down

0 comments on commit a5a0976

Please sign in to comment.