Initial commit

This commit is contained in:
Guz
2022-07-24 13:46:17 -03:00
commit 2b0527b244
18 changed files with 7593 additions and 0 deletions

16
.editorconfig Normal file
View File

@@ -0,0 +1,16 @@
# editorconfig.org
root = true
[*]
indent_style = tab
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[*.yml]
indent_style = space
indent_size = 2

18
.eslintrc Normal file
View File

@@ -0,0 +1,18 @@
{
"root": true,
"env": {
"browser": true,
"node": true
},
"extends": [
"@nuxtjs/eslint-config-typescript",
"plugin:nuxt/recommended",
"plugin:prettier/recommended"
],
"plugins": [],
"rules": {
"vue/multi-word-component-names": "off",
"vue/no-multiple-template-root": "off",
"max-length": 80
}
}

1
.gitattributes vendored Normal file
View File

@@ -0,0 +1 @@
* text= auto

10
.gitignore vendored Normal file
View File

@@ -0,0 +1,10 @@
node_modules
*.log*
.nuxt
.nitro
.cache
.output
.env
dist
.vercel

1
.npmrc Normal file
View File

@@ -0,0 +1 @@
shamefully-hoist= true

10
.prettierrc Normal file
View File

@@ -0,0 +1,10 @@
{
"semi": true,
"useTabs": true,
"singleQuote": true,
"jsxSingleQuote": true,
"bracketSameLine": false,
"endOfLine": "crlf",
"quoteProps": "consistent",
"printWidth": 80
}

9
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,9 @@
{
"recommendations": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"voorjaar.windicss-intellisense",
"Vue.volar"
]
}

15
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,15 @@
{
"editor.formatOnSave": true,
"editor.quickSuggestions": {
"strings": "on"
},
"css.validate": false,
"cSpell.words": [
"headlessui",
"supabase",
"Twemoji",
"Unplugin",
"windi",
"windicss"
]
}

42
README.md Normal file
View File

@@ -0,0 +1,42 @@
# Nuxt 3 Minimal Starter
Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoist
```
## Development Server
Start the development server on http://localhost:3000
```bash
npm run dev
```
## Production
Build the application for production:
```bash
npm run build
```
Locally preview production build:
```bash
npm run preview
```
Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

30
app.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<NuxtLayout>
<main
class="bg-light-100 flex justify-center items-center w-screen h-screen overflow-hidden"
>
<div
v-animate
:keyframes="{ y: [0, -20, 0] }"
:options="{
repeat: Infinity,
duration: 5,
easing: ['ease-in-out', 'ease-in-out'],
}"
class="font-bold font-mono text-center text-dark-900"
>
<IconMdi:heart
class="h-20 w-20 fill-dark-900"
v-animate
:keyframes="{ scaleX: [1, -1, 1], y: [0, -10, 0] }"
:options="{
repeat: Infinity,
duration: 5,
easing: ['ease-in-out', 'ease-in-out'],
}"
/>
<p>Hello, Kei</p>
</div>
</main>
</NuxtLayout>
</template>

17
components.d.ts vendored Normal file
View File

@@ -0,0 +1,17 @@
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
'IconMdi:heart': typeof import('~icons/mdi/heart')['default']
'IconMdi:menu': typeof import('~icons/mdi/menu')['default']
'IconTwemoji:heart': typeof import('~icons/twemoji/heart')['default']
'IconTwemoji:redHeart': typeof import('~icons/twemoji/red-heart')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}

70
layouts/default.vue Normal file
View File

@@ -0,0 +1,70 @@
<script setup lang="ts">
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
import { useAnimations } from 'vue-motion-one';
const animations = useAnimations();
</script>
<template>
<slot />
<footer class="fixed left-0 bottom-0 z-10 w-screen">
<Menu as="nav" class="p-2 relative inline-block text-left">
<transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-y-95 opacity-0 translate-y-3"
enter-to-class="transform scale-y-100 opacity-100 translate-y-0"
leave-active-class="transition duration-75 ease-out"
leave-from-class="transform scale-y-100 opacity-100 translate-y-0"
leave-to-class="transform scale-y-95 opacity-0 translate-y-3"
>
<MenuItems class="left-0 mb-2 w-56 bg-light-700 p-2 rounded-md">
<MenuItem v-slot="{ active }">
<a :class="{ 'bg-blue-500': active }"> Account settings </a>
</MenuItem>
<MenuItem v-slot="{ active }">
<a :class="{ 'bg-blue-500': active }"> Documentation </a>
</MenuItem>
<MenuItem disabled>
<span class="opacity-75">Invite a friend (coming soon!)</span>
</MenuItem>
</MenuItems>
</transition>
<MenuButton
@click="
() => {
animations.label.reverse();
animations.button.reverse();
animations.icon.reverse();
}
"
class="bg-light-500 p-1 rounded-md min-w-7 h-7 fill-dark-900 flex items-center"
v-animate="'button'"
:keyframes="{
width: ['4rem', '1.75rem'],
}"
:options="{ duration: 0.6 }"
>
<IconMdi:menu
v-animate="'icon'"
:keyframes="{
transform: ['translateX(0px)', 'translateX(2px)'],
}"
/>
<p
v-animate="'label'"
:keyframes="{
transform: [
'translateX(15px) scaleX(1)',
'translateX(-10px) scaleX(0)',
],
opacity: [100, 0, 0],
}"
:options="{ duration: 0.6 }"
class="px-1 fixed"
>
Menu
</p>
</MenuButton>
</Menu>
</footer>
</template>

34
nuxt.config.ts Normal file
View File

@@ -0,0 +1,34 @@
import { defineNuxtConfig } from 'nuxt';
import UnpluginComponentsVite from 'unplugin-vue-components/vite';
import IconsResolver from 'unplugin-icons/resolver';
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
ssr: true,
modules: [
'nuxt-windicss',
'@nuxtjs/color-mode',
'@vueuse/nuxt',
'@nuxtjs/supabase',
'unplugin-icons/nuxt'
],
css: [
'virtual:windi-base.css',
'virtual:windi-components.css',
'virtual:windi-utilities.css',
],
build: {
transpile: ['@headlessui/vue']
},
vite: {
plugins: [
UnpluginComponentsVite({
dts: true,
resolvers: [
IconsResolver({
prefix: 'Icon',
}),
],
}),
],
},
});

41
package.json Normal file
View File

@@ -0,0 +1,41 @@
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"lint": "eslint --ext \".ts,.js,.vue\" --ignore-path .gitignore .",
"lint:fix": "eslint --fix --ext \".ts,.js,.vue\" --ignore-path .gitignore ."
},
"devDependencies": {
"@headlessui/vue": "1.6.7",
"@iconify/json": "^2.1.81",
"@nuxtjs/color-mode": "^3.1.4",
"@nuxtjs/eslint-config-typescript": "^10.0.0",
"@nuxtjs/eslint-module": "^3.1.0",
"@nuxtjs/supabase": "^0.1.19",
"@vueuse/nuxt": "^8.9.4",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "^3.2.0",
"eslint-plugin-prettier": "^4.2.1",
"motion": "^10.13.1",
"nuxt": "3.0.0-rc.6",
"nuxt-windicss": "^2.4.3",
"prettier": "^2.7.1",
"typescript": ">=2.8.0",
"unplugin-icons": "^0.14.7",
"unplugin-vue-components": "^0.21.1",
"vite": ">=2.3.0 <3.0.0 || >=3.0.0-0 <3.0.0",
"vue": ">=3.0.0-0 <3.0.0 || >=3.2.0 <4.0.0 || >=2.6.0 <3.0.0",
"vue-motion-one": "^0.2.5",
"webpack": ">=4.0.0 <5.0.0 || >=5.0.0 <6.0.0"
},
"peerDependencies": {
"typescript": ">=2.8.0",
"vite": ">=2.3.0 <3.0.0 || >=3.0.0-0 <3.0.0",
"vue": ">=3.0.0-0 <3.0.0 || >=3.2.0 <4.0.0 || >=2.6.0 <3.0.0",
"webpack": ">=4.0.0 <5.0.0 || >=5.0.0 <6.0.0"
}
}

6
plugins/motion.ts Normal file
View File

@@ -0,0 +1,6 @@
import { MotionOnePlugin } from 'vue-motion-one';
export default defineNuxtPlugin(Nuxt => {
Nuxt.vueApp.use(MotionOnePlugin);
})

7256
pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff

12
tsconfig.json Normal file
View File

@@ -0,0 +1,12 @@
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"strict": true,
"types": [
"nuxt-windicss",
"@vueuse/nuxt",
"unplugin-icons/types/vue"
]
}
}

5
windi.config.ts Normal file
View File

@@ -0,0 +1,5 @@
import { defineConfig } from 'windicss/helpers';
export default defineConfig({
darkMode: 'class',
});