Skip to content

Commit f92db56

Browse files
adydetraadydetra
committed
chore: deploy
0 parents  commit f92db56

25 files changed

Lines changed: 9109 additions & 0 deletions

‎.github/FUNDING.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
github: adydetra

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
shamefully-hoist=true

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 Adityawarman Dewa Putra
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Numon 💡
2+
3+
![Static Badge](https://img.shields.io/badge/license-MIT-brightgreen?label=LICENSE)
4+
5+
🐉 Designed as a practical environment for experimenting with the Pokemon API using the powerful Nuxt framework. Whether you're a beginner looking to explore the world of APIs or an experienced developer looking for a practical space to experiment, Numon has you covered.
6+
7+
## Todolist
8+
9+
- [x] GET Pokemon
10+
- [x] Responsive all device
11+
- [ ] OG Image
12+
- [ ] Sitemap
13+
- [ ] Search
14+
- [x] Skeleton
15+
- [ ] Sort: date, name
16+
- [ ] Refactor logic from Vue SFC to composables
17+
18+
## Contributing
19+
20+
If you'd like to contribute to Numon by adding new features, fixing bugs please follow these steps:
21+
22+
1. Fork the repository.
23+
2. Create a new branch: `git checkout -b example-name`
24+
3. Make your changes and commit them: `git commit -m 'Add new example-name`
25+
4. Push to the branch: `git push origin example-name`
26+
5. Open a pull request.
27+
28+
## License
29+
30+
The code is licensed [MIT](LICENSE)

‎app.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script lang="ts" setup>
2+
useHead({
3+
title: 'Numon',
4+
meta: [
5+
{
6+
name: 'msapplication-TileColor',
7+
content: '#da532c',
8+
},
9+
{
10+
name: 'theme-color',
11+
content: '#ffffff',
12+
},
13+
],
14+
});
15+
16+
const { pending, data: pokemons } = await useLazyFetch('/api/pokemons', {
17+
server: false,
18+
});
19+
</script>
20+
21+
<template>
22+
<div class="mx-auto place-content-center max-w-fit py-4">
23+
<div v-if="pending" class="flex flex-col items-start gap-y-4">
24+
<SkeletonCard v-for="item in Array(9)" :key="`skeleton-${item}`" />
25+
</div>
26+
<div v-else class="flex flex-col items-start gap-y-4">
27+
<TransitionGroup name="list">
28+
<LazyCard
29+
v-for="(pokemon, index) in pokemons"
30+
:key="`pokemon-${index}`"
31+
:pokemon="pokemon"
32+
/>
33+
</TransitionGroup>
34+
</div>
35+
</div>
36+
</template>
37+
38+
<style>
39+
.list-enter-active,
40+
.list-leave-active {
41+
transition: all 0.25s ease;
42+
}
43+
.list-enter-from,
44+
.list-leave-to {
45+
opacity: 0;
46+
transform: translateX(-30px);
47+
}
48+
</style>

‎components/Card.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
const props = defineProps({
3+
pokemon: {
4+
type: Object,
5+
required: true,
6+
},
7+
});
8+
9+
const pokemonName = computed(() => (props.pokemon.name));
10+
</script>
11+
12+
<template>
13+
<div class="flex flex-row items-center gap-4">
14+
<NuxtImg
15+
:src="pokemon.image"
16+
class="w-16 h-16 rounded-full p-2 border-box object-center object-contain"
17+
:alt="pokemonName"
18+
/>
19+
<h2 class="text-lg">
20+
{{ pokemonName }}
21+
</h2>
22+
</div>
23+
</template>

‎components/skeleton/Card.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<div class="flex flex-row items-center gap-4">
3+
<USkeleton class="h-16 w-16" :ui="{ rounded: 'rounded-full' }" />
4+
<USkeleton class="h-6 w-[100px]" />
5+
</div>
6+
</template>

‎eslint.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import antfu from '@antfu/eslint-config';
2+
3+
export default antfu({
4+
stylistic: {
5+
semi: true,
6+
},
7+
});

‎nuxt.config.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export default defineNuxtConfig({
2+
app: {
3+
head: {
4+
charset: 'utf-8',
5+
viewport: 'width=device-width, initial-scale=1',
6+
htmlAttrs: {
7+
lang: 'en',
8+
},
9+
link: [
10+
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
11+
{ rel: 'apple-touch-icon', sizes: '180x180', href: '/favicon-pack/apple-touch-icon.png' },
12+
{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-pack/favicon-32x32.png' },
13+
{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-pack/favicon-16x16.png' },
14+
{ rel: 'manifest', href: '/favicon-pack/site.webmanifest' },
15+
{ rel: 'mask-icon', href: '/favicon-pack/safari-pinned-tab.svg', color: '#c7a142' },
16+
],
17+
},
18+
},
19+
20+
modules: [
21+
'@nuxt/ui',
22+
'@nuxt/image',
23+
'nuxt-simple-sitemap',
24+
],
25+
26+
devtools: {
27+
enabled: false,
28+
},
29+
tailwindcss: {
30+
viewer: false,
31+
},
32+
});

0 commit comments

Comments
 (0)