Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kostyabet/shadow_gen
Shadow generator for choosing the appropriate style in your design.
https://github.com/kostyabet/shadow_gen
actions nextjs pages tsx typescript
Last synced: about 1 month ago
JSON representation
Shadow generator for choosing the appropriate style in your design.
- Host: GitHub
- URL: https://github.com/kostyabet/shadow_gen
- Owner: kostyabet
- Created: 2024-08-14T16:03:29.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-08-15T19:34:39.000Z (3 months ago)
- Last Synced: 2024-09-29T23:23:35.340Z (about 2 months ago)
- Topics: actions, nextjs, pages, tsx, typescript
- Language: TypeScript
- Homepage: https://kostyabet.github.io/shadow_gen/
- Size: 182 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shadow Generator
Shadow generator for choosing the appropriate style in your design.
## Content
- [Download](#download)
- [Using](#using)
- [Scripts](#scripts)
- [Deployment](#deployment)
- [Project structure](#project-structure)
- [Gratitude](#gratitude)
## Download
1. Clone this repo in your work directory:
`git clone https://github.com/kostyabet/shadow_gen.git`
2. Go to the project directory:
`cd shadow_gen`
3. Install dependencies:
`npm install`
## Using
After this you should start project:
- Start project in development mode: `npm run dev`
- Start project in production mode: `npm run build`
## Scripts
Basic npm scripts `npm`:
- `next link` - Tool for developing and testing npm packages iteratively without having to continually rebuild.
- `npm run dev` - Start project in development mode.
- `npm run build` - Start project in production mode.
- `npm run start` - Start build project.
## Deployment
This project is automatically published on github pages using GitHub actions.
The github actions file is located on the path `.github\workflows\publish.yml`.
Publish.yml contains 2 blocks:
- Build block with cache optimization;
- Github pages deploy part.
## Project structure
```plaintext
├── .github
│ └── workflows
│ └── publish.yml # *.yml which deploy project on Github pages
├── fonts # DIN Pro fonts used in the project
├── pages
│ ├── shadow
│ │ ├── OutputBlock.tsx # Result block
│ │ ├── CopyCodeBlock.tsx # Code block
│ │ └── ChangeSettings.tsx # Block for change shadow settings
│ ├── ShadowGenerator.tsx # Main Shadow Generator *.tsx
│ ├── _app.tsx # File for include reset.css
│ └── index.tsx # Main *.tsx project file
├── public # Public files (photos)
├── styles
│ ├── index.module.css # Main CSS file
│ └── reset.css # File which reset all styles
├── package.json # The main Node configuration file.js of the project
├── package-lock.json # Captures the exact versions of all installed packages and their dependencies
├── next-env.d.ts # Typing of global variables and modules and automatic generation
├── next.config.mjs # Adjusts the behavior of the application Next.js
└── tsconfig.json # TypeScript Configuration
```
## Gratitude
### If you liked this project, please put a star on this repository!!!
