Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mskian/friendship-day-wishes

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.
https://github.com/mskian/friendship-day-wishes

alpinejs canvas css friends friendship friendship-app friendship-day friendship-day-wishes friendship-greeting-generator friendshipday greetings happy-friendship-day html javascript tailwind vite vitejs wishes

Last synced: 6 days ago
JSON representation

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.

Awesome Lists containing this project

README

        

# Friendship Day Wishes image with Name

[![build-script](https://github.com/mskian/friendship-day-wishes/actions/workflows/build.yml/badge.svg)](https://github.com/mskian/friendship-day-wishes/actions/workflows/build.yml) [![cloudflare-pages](https://github.com/mskian/friendship-day-wishes/actions/workflows/deploy.yml/badge.svg)](https://github.com/mskian/friendship-day-wishes/actions/workflows/deploy.yml)

⚡ Vitejs | ✨ Tailwind CSS | 📸 HTML Canvas | 🌩 Cloudflare Pages

Free Happy Friendship Day Wishes image with Name - Friendship Day Greeting image Generator.

> Happy Friendship Greeting Generator

## Methods Used ⚙

- HTML/CSS and Javascript
- HTML Canvas - Create Wish image
- tailwindcss - Front-end Styling
- Vitejs - Testing, Bundling and Local Server
- Eslint - Fix the Lint Error
- Prettier - Beautify the Code files
- Slugify - Slugify the User input and Convert to URL
- Cloudflare Pages for Free Hosting - `npx wrangler pages publish dist --branch production`

## Installation 📦

- Add funtions, logic's and Modules - `/lib/canva.js`
- Edit Home page - `index.html`
- CSS Styling - `/styles/tailwind.css`
- Build file - `main.js`

- Clone this repo or Download

```sh
git clone https://github.com/mskian/friendship-day-wishes
friendship-day-wishes
yarn install
```

- Test the site

```sh
yarn dev
```

- Build the site

```sh
yarn build
```

- Test the production Build on Localhost

```sh
yarn preview
```

- Build CSS

```sh
yarn css
```

- Eslint Fix

```sh
yarn lintfix
```

- Format the Code

```sh
yarn Format
```

## LICENSE ☑

MIT