Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tokiory/developer-log
❤️ My personal blog (made with love and cats)
https://github.com/tokiory/developer-log
backend blog frontend nuxt ssr typescript
Last synced: 1 day ago
JSON representation
❤️ My personal blog (made with love and cats)
- Host: GitHub
- URL: https://github.com/tokiory/developer-log
- Owner: tokiory
- License: mit
- Created: 2024-03-01T20:27:14.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T18:08:48.000Z (3 months ago)
- Last Synced: 2024-08-20T20:11:24.362Z (3 months ago)
- Topics: backend, blog, frontend, nuxt, ssr, typescript
- Language: TypeScript
- Homepage: https://developer-log.vercel.app
- Size: 5.88 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
![Github Banner](https://github.com/tokiory/developer-log/assets/101672047/8567e1b9-adc0-4aec-a0da-a9b0f15f5ccd)
In the bustling realm of technology, where innovation is the heartbeat, "Developer Log" emerges as a guiding light for both seasoned developers and aspiring enthusiasts alike. This unique blog serves as a sanctuary for code aficionados, offering a rich tapestry of insights, experiences, and solutions in the ever-evolving world of software development.
## Stack 🥸
- Nuxt
- Typescript### ESLint modules 🔥
- [eslint-plugin-compat](https://github.com/amilajack/eslint-plugin-compat) - Plugin for compatibility with old browsers;
- [eslint-plugin-editorconfig](https://www.npmjs.com/package/eslint-plugin-editorconfig) - Plugin for linting files with EditorConfig;
- [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort) - Plugin for sorting imports;
- [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) - Powerful rules for strict code;
- [eslint-plugin-vue](https://eslint.vuejs.org) - Eslint plugin for Vue.js;
- [eslint-plugin-vuejs-accessibility](https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/) - Plugin for a11y support;
- [eslint-plugin-yml](https://www.npmjs.com/package/eslint-plugin-yml) - Plugin for YAML files;
- [@typescript-eslint/eslint-plugin](https://typescript-eslint.io) - ESLint plugin for typescript;### Stylelint modules ☄️
- [stylelint-config-recommended-scss](https://www.npmjs.com/package/stylelint-config-recommended-scss) - Config for scss stylesheets;
- [stylelint-config-recommended-vue](https://www.npmjs.com/package/stylelint-config-recommended-vue) - Config for vue stylesheets;### Nuxt modules 💫
- [@nuxtjs/i18n](https://nuxt.com/modules/i18n) - Adds ability for translation;
- [@nuxtjs/sitemap](https://nuxt.com/modules/simple-sitemap) - Adds sitemap;
- [@nuxt/devtools](https://nuxt.com/modules/devtools) - Devtools for Nuxt 3;
- [@nuxt/image](https://nuxt.com/modules/image) - Adds a11y image component;
- [nuxt-icon](https://nuxt.com/modules/icon) - Adds component for various icons;## Setup 👌
If you don't have a `pnpm` - you will need it.```bash
# Installing of pnpm
npm i -g pnpm
```After the installation of the pnpm - you can install dependecies of the project:
```bash
pnpm i
```> Warn:
> You should create an `.env` file. Just copy it from `.env.example` and copy & paste secrets.After creation of dotenv file you can run project with the following command:
```bash
pnpm app:dev
```
## Commands 🙌
If you can, you can use Webstorm commands via `Ctrl + Ctrl` keybindingYou also can use next terminal commands:
- `app`: Commands for app
- `app:dev`: Run development server;
- `app:build`: Build the project;
- `app:run`: Run production server;
- `app:analyze`: Analyze server and client bundle;
- `lint`: Commands for linters
- `lint:eslint`: Run ESLint;
- `lint:stylelint`: Run Stylelint;
- `lint:svglint`: Lint svg files with svglint;
- `lint:staged`: Lint all staged files;
- `deploy`: Commands for deploying
- `deploy:dev`: Deploy to the development server;
- `deploy:prod`: Deploy to the production server;## Internationalization 👅
Languages dictionaries are located in `@/localization`. Following languages are supported now:- Russian (Main language);
- English;
- Belarusian;
- Korean;
- Kazakhstan;## Hooks 🤞
This project has husky and [git hooks](https://gist.github.com/tokiory/5b99a68523065d86a218797d349fbbbd).- **commit** \
We use commitlint for linting commit messages;
- **pre-commit** \
On pre-commit hook husky runs eslint and stylelint on every committed file;
- **push** \
We have hook on push. It runs unit and end to end tests;## Conventions 🤝
1. We're building mobile-first layout
2. We're using `from-{breakpoint}` mixin, it's located in [`styles/prebuild/breakpoint.scss`](styles/prebuild/breakpoint.scss)### Adaptive 🤳
- **Minimal Value**: 400px;
- **Maximum value**: 2048px;For adaptive layout we use sass mixins, they are defined in `styles/prebuild/breakpoint.scss`.
Blog also have a dark theme. Mixin for dark theme is defined in `styles/prebuild/theme.scss`.