pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

moving from hexo theme to my own react design

Browse source
This commit is contained in:
Kim, Jimin 2021-05-15 00:30:19 +09:00
parent 7ff3176072
commit 379c1c60d9
96 changed files with 1990 additions and 50291 deletions
Download patch file Download diff file Expand all files Collapse all files

102
README.md
View file

@ -1,30 +1,90 @@
# <a href="https://developomp.com" target="_blank">developomp-site</a>
# developomp-site
Tools used:
Repository for my (developomp's) <a href="https://developomp.com" target="_blank">website</a>.
| Name | Use |
| --------------------------------------: | :-------------------------------------- |
| [Hexo](https://hexo.io) | generating static files |
| [Firebase](https://firebase.google.com) | hosting site (Future: hosting database) |
| [Github](https://github.com) | storing source & automatic deployment |
| [AWS](https://aws.amazon.com) | Domain name purchase & management |
Tools/Frameworks/Packages used:
| Name | Use |
| ----------------------------------------------------------------------------: | :---------------------------------------------------- |
| [AWS](https://aws.amazon.com) | Domain register |
| [Firebase](https://firebase.google.com) | Static site hosting |
| [Typescript](https://github.com/microsoft/TypeScript) | Static typing for javascript |
| [react](https://reactjs.org) | Front end framework |
| [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) | [Fontawesome](https://fontawesome.com) icons in react |
| [react-helmet](https://github.com/nfl/react-helmet) | HTML head management |
| [dompurify](https://github.com/cure53/DOMPurify) | HTML sanitizer for markdown -> HTML page generation |
| [gray-matter](https://github.com/jonschlinkert/gray-matter) | parsing markdown |
| [local-storage-fallback](https://github.com/ripeworks/local-storage-fallback) | storing theme choice |
| [react-tooltip](https://github.com/wwayne/react-tooltip) | Tooltips |
| [styled-components](https://github.com/styled-components/styled-components) | easier CSS styling |
| [styled-theming](https://github.com/styled-components/styled-theming) | Theming |
| [eslint](https://github.com/eslint/eslint) | code analysis |
| [prettier](https://github.com/prettier/prettier) | code formatter |
| [ts-node](https://github.com/TypeStrong/ts-node) | running markdown->html generator |
| [jest](https://jestjs.io) | code testing |
| [react-spinners](https://github.com/davidhu2000/react-spinners) | loading indicator |
# Setup
Requires: [git](https://git-scm.com), [node](https://nodejs.org), [hexo](https://github.com/hexojs/hexo), [firebase](https://firebase.google.com)
Requirement:
- Clone the repo with git modules
- `git clone --recurse-submodules https://github.com/developomp/developomp-site.git`
- to update: `git submodule foreach git pull origin master`
- Install dependencies
- `cd developomp-site/hexo`
- `yarn` or `npm i`
- Generate files
- `hexo generate`
- (optional, requires firebase setup) deploy it to firebase
- `firebase deploy`
- [node](https://nodejs.org)
- [yarn](https://github.com/yarnpkg/yarn) or [npm](https://github.com/npm/cli)\*
- optional:
- [git](https://git-scm.com)
- [vscode](https://code.visualstudio.com)
- extensions (also optional but recommended):
- [styled components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)
- [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [react](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
- [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
\*Usage of yarn is highly recommended over npm
Steps:
- Clone this repository
- `git clone https://github.com/developomp/developomp-site.git`
- Or download compressed as zip
- ![](./downloading.png)
- open [`source`](./source) directory
- `cd source`
- Install dependencies (must be in `source` directory)
- `yarn install`
- start local server in http://localhost:3000
- `yarn start`
# How it works
single page application
react to build front end
components
sunning `yarn generate` converts markdown to html and in json with parsed meta
by date, etc.
Does not scale well but I won't have 10k posts any time soon
few thousand so more than good enough
generator underscore
no symbolic links
filename encoder not perfect. Some filenames might cause problem.
# Contributing
Please read the [`CONTRIBUTING.md`](./CONTRIBUTING.md) file.
# Special thanks
- design inspirations from [Ruipeng Zhang](https://github.com/ppoffice)'s [icarus theme](https://github.com/ppoffice/hexo-theme-icarus) for [hexo](https://github.com/hexojs/hexo).
- dark theme color from [discord](http://discord.com)
# License
This project is licensed under the MIT License.\
Check the [LICENSE file](./LICENSE) for more information.
This project is licensed under the MIT License.<br>
Check the [LICENSE](./LICENSE) file for more information.
Font license:
[Open Font License (OFL)](./LICENSE_OFL) ([Source](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL#5667e9e4)):
- [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro?query=source+code+pro) (monospaced code font)
- [Noto Sans KR](https://fonts.google.com/specimen/Noto+Sans+KR) (Korean and English font)