This project is a rewrite (to Analog) of Vue Designer's îles Quick starter template - https://github.com/pinegrow/natures-delight-with-iles-tailwindcss.
Analog is the fullstack meta-framework for Angular.
A simple landing page for an fresh & organic fictional store styled with the power and beauty of Tailwind CSS. This app is built into a static site, and can be easily deployed to a CDN with excellent SEO.
Demo - https://natures-delight-analog-tailwindcss.netlify.app
A desktop visual editor for Vue apps supporting Mac, Windows, and Linux by Pinegrow. Take it for a free trial at Vue Designer!
It lets you visually design 🎨 your Vue single file components and boosts your productivity and creativity while building your component-based Vue apps.
It smartly integrates with your ⚡️ Vite based CLI and provides an amazing developer experience with its powerful visual controls and features.
Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️
Create a repo from this template on GitHub.
(or)
If you prefer to do it manually with the cleaner git history
npx giget@latest gh:techakayy/natures-delight-analog-tailwindcss my-natures-delight-analog-tailwindcss #project-name
cd my-natures-delight-analog-tailwindcss
npm install #or use pnpmVue Designer is only for Vue apps, not for analog.
Open your project in Vue Designer and follow the instructions displayed in the Config Panel (that should pop out automatically). Config Panel ⚙️ displays the key packages and the various links to their individual ecosystems and communities.
npm run dev # SPAnpm run build # SPA SSG
# The client build artifacts are located in the `dist/analog/public` directory. The server for the API build artifacts are located in the `dist/analog/server` directory.Uncomment the rollup-plugin-visualizer usage in your config file and execute the build command. This command will generate stats.html. Open stats.html in your browser to analyze bundle sizes.
npm run build # open stats.html to analyze bundle sizesnpm run now # build & previewnpm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)You can deploy this repo as a site on your own to explore and experiment with, by clicking this button.
Check out the deployment documentation for more information.
- Analog - The fullstack Angular meta-framework.
- 🔌 [Batteries Included] - layouts, components, site-wide data
- ⚡️ [Fast][vite] - instant reloading powered by [Vite]
- 🧱 [Hybrid SSR/SSG support] - Analog supports both Server-Side Rendering (SSR) and Static Site Generation (SSG) of Angular applications.
- 🛣 [File-based routing and API routes] - Analog uses file-based routing and supports API (server) routes for Angular applications.
- 📖 [Markdown] - use components in markdown and viceversa
- Tailwind CSS - The amazing utility-first CSS framework.
- UnoCSS Preset Icons - use over 100,000 open-source Iconify icons. Uses the unocss format for icon names, for example,
i-mdi-home.
- Pinegrow Vite Plugin - enables you to live-design your Vue single-file components visually in Vue Designer.
- Pinegrow Tailwind CSS Plugin - via Design Panel, enables visual controls customization (automatic) and theme customization (optional).
- 📲 unplugin-auto-import - Auto import APIs on-demand for Vite, Webpack and Rollup.
TBU
- [VS Code Extensions](./.vscode/extensions.json & ./.vscode/settings.json)
- Language Extension - Analog SFC IDE support
- ESLint
- Prettier
- The new .analog SFC syntax
- ESLint with @nuxt/eslint-config - opinionated not-so-strict set of linting rules. Nuxt & Analog share a similar directory structure, so are their linting rules.
- Prettier with eslint-config-prettier - format without conflicting with eslint rules.
This project allows JS, and strict mode is turned off. Update tsconfig.ts as required.
{
"compilerOptions": {
// ...
"strict": false,
"allowJs": true
}
}