Michael Jackson Ipsum Generator

Table of contents

• About
• Features
• Installation Instructions
  • Build the Front End Assets with Vite
  • Optionally Build Cache
• Screenshots
• File Tree
• License

About

A Laravel + Vite + Vue 3 + TailwindCSS Michael Jackson Ipsum Generator. Uses official TailwindCSS. While the front end is part of this repository it is a completely separated Vue 3 front end compiled using ViteJS.

App Features

Built on:

• ✅ Laravel 12
• ✅ Vite
• ✅ Vue 3
• ✅ TailwindCSS (w/ @tailwindcss/forms and @tailwindcss/aspect-ratio)
• ✅ VueRouter
• ✅ Pinia
• ✅ Headless UI
• ✅ Heroicons
• ✅ ESLint with ✅ Prettier

Features:

• Home Page
• 404 Page
• Google Analytics (optional)

Installation Instructions

1. Run git clone https://github.com/jeremykenedy/michael-jackson-ipsum.git michael-jackson-ipsum
2. From the projects root run cp .env.example .env
3. Configure your .env file
4. Run composer install from the projects root folder
5. From the projects root folder run sudo chmod -R 755 ../michael-jackson-ipsum
6. From the projects root folder run php artisan key:generate
7. Compile the front end assets with npm steps or yarn steps.

Build the Front End Assets with ViteJs

Using NPM:

1. From the projects root folder run npm install
2. From the projects root folder run npm run dev or npm run build

• You can lint assets with npm run lint
• You can clean the syntax with npm run clean

Using Yarn:

1. From the projects root folder run yarn install
2. From the projects root folder run yarn run dev or yarn run build

• You can lint assets with yarn run lint
• You can clean the syntax with yarn run clean

And thats it with the caveat of setting up and configuring your development environment.

Screenshots

File Tree

.
├── .editorconfig
├── .env.example
├── .eslintrc.js
├── .eslintrc.json
├── .gitattributes
├── .github
│   ├── FUNDING.yml
│   ├── dependabot.yml
│   ├── labeler.yml
│   └── workflows
│       ├── build-changelog.yml
│       ├── dependency-review.yml
│       ├── deploy.yml
│       ├── greetings.yml
│       ├── labeler.yml
│       ├── laravel.yml
│       ├── node.js.yml
│       ├── php.yml
│       └── stale.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .scripts
│   └── deploy.sh
├── .styleci.yml
├── LICENSE
├── README.md
├── SECURITY.md
├── app
│   ├── Console
│   │   └── Kernel.php
│   ├── Exceptions
│   │   └── Handler.php
│   ├── Http
│   │   ├── Kernel.php
│   │   └── Middleware
│   │       ├── EncryptCookies.php
│   │       ├── PreventRequestsDuringMaintenance.php
│   │       ├── TrimStrings.php
│   │       ├── TrustHosts.php
│   │       ├── TrustProxies.php
│   │       └── VerifyCsrfToken.php
│   └── Providers
│       ├── AppServiceProvider.php
│       └── RouteServiceProvider.php
├── artisan
├── bootstrap
│   ├── app.php
│   └── cache
│       ├── .gitignore
│       ├── packages.php
│       └── services.php
├── composer.json
├── composer.lock
├── config
│   ├── app.php
│   ├── logging.php
│   ├── services.php
│   └── settings.php
├── eslint.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── prettier.config.js
├── public
│   ├── .htaccess
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── favicon.png
│   ├── index.php
│   ├── robots.txt
│   ├── serviceworker.js
│   ├── site.webmanifest
│   └── sw.js
├── resources
│   ├── css
│   │   ├── app.css
│   │   └── normalize.css
│   ├── img
│   │   ├── 404-light.png
│   │   ├── 404.png
│   │   ├── favicon
│   │   │   ├── android-chrome-192x192.png
│   │   │   ├── android-chrome-512x512.png
│   │   │   ├── apple-touch-icon.png
│   │   │   ├── favicon-16x16.png
│   │   │   ├── favicon-32x32.png
│   │   │   ├── favicon.ico
│   │   │   ├── favicon.png
│   │   │   └── site.webmanifest
│   │   └── logo
│   │       ├── logo-dark.png
│   │       ├── logo-light.png
│   │       ├── main-dark.png
│   │       └── main-light.png
│   ├── js
│   │   ├── app.js
│   │   ├── bootstrap.js
│   │   ├── components
│   │   │   ├── ToggleDarkMode.vue
│   │   │   ├── common
│   │   │   │   └── AppButton.vue
│   │   │   ├── includes
│   │   │   │   ├── AppFooter.vue
│   │   │   │   └── AppNav.vue
│   │   │   └── ipsums
│   │   │       └── IpsumComponent.vue
│   │   ├── composables
│   │   │   └── darkmode.js
│   │   ├── layouts
│   │   │   └── GuestLayout.vue
│   │   ├── routes
│   │   │   ├── index.js
│   │   │   └── routes.js
│   │   ├── services
│   │   │   ├── analytics.js
│   │   │   └── words.js
│   │   ├── store
│   │   │   ├── index.js
│   │   │   └── toast.js
│   │   └── views
│   │       ├── errors
│   │       │   └── NotFound.vue
│   │       └── home
│   │           └── HomePage.vue
│   └── views
│       └── app.blade.php
├── routes
│   └── web.php
├── tailwind.config.js
├── tailwindcss-perspective.js
├── vite.config.js
└── vue.config.js

34 directories, 104 files

• Tree command can be installed using brew: brew install tree
• File tree generated using command tree -a -I '.git|node_modules|vendor|build|storage|tests|.DS_Store|.env'

License

Michael Jackson Ipsum Generator is licensed under the MIT license. Enjoy!