Skip to content

Commit f202d5c

Browse files
atinuxatinux
committed
first commit
0 parents  commit f202d5c

26 files changed

+11901
-0
lines changed

‎.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_size = 2
6+
indent_style = space
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎.gitignore

+24
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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
shamefully-hoist=true

‎README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Instadraw
2+
3+
Share your drawings with the world with this [Nuxt application](https://nuxt.com) using [NuxtHub Blob storage](https://hub.nuxt.com/docs/storage/blob) and deployed on the Edge.
4+
5+
- [Documentation](https://hub.nuxt.com)
6+
- [Demo](https://draw.nuxt.dev)
7+
8+
## Features
9+
10+
- Image upload with [`useUpload()`](http://hub.nuxt.com/docs/storage/blob)
11+
- Auth with Google & GitHub based on [`nuxt-auth-utils`](https://github.com/Atinux/nuxt-auth-utils)
12+
- Draw with [`signature_pad`](github.com/szimek/signature_pad)
13+
14+
## Setup
15+
16+
Make sure to install the dependencies:
17+
18+
```bash
19+
pnpm install
20+
```
21+
22+
## Development Server
23+
24+
Start the development server on `http://localhost:3000`:
25+
26+
```bash
27+
pnpm dev
28+
```
29+
30+
## Production
31+
32+
Build the application for production:
33+
34+
```bash
35+
pnpm build
36+
```
37+
38+
## Deploy on the Edge
39+
40+
Deploy the application on the Edge with [NuxtHub](https://hub.nuxt.com):
41+
42+
```bash
43+
npx nuxthub deploy
44+
```
45+
46+
Then manage the drawings of your users in the [NuxtHub Admin](https://admin.hub.nuxt.com).
47+
48+
You can also deploy using [Cloudflare Pages CI](https://hub.nuxt.com/docs/getting-started/deploy#cloudflare-pages-ci).

‎app/app.config.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default defineAppConfig({
2+
ui: {
3+
primary: 'blue',
4+
gray: 'neutral',
5+
header: {
6+
wrapper: 'border-none md:pt-8 md:max-w-2xl mx-auto bg-transparent backdrop-blur-none',
7+
container: 'bg-gray-400/5 md:rounded-full border-b md:border dark:border-gray-800 bg-gray-50 dark:bg-gray-950',
8+
},
9+
},
10+
})

‎app/app.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
useSeoMeta({
3+
title: 'Instadraw',
4+
description: 'Share your drawings with the world.',
5+
})
6+
useServerHead({
7+
meta: [
8+
{ name: 'google-site-verification', content: 'ocIv8ZYQ5s35CIAYVpjPYyhBnWu7mo0JpdzOeWV4PZs' },
9+
],
10+
})
11+
</script>
12+
13+
<template>
14+
<AppHeader />
15+
<UContainer>
16+
<UMain>
17+
<NuxtPage />
18+
</UMain>
19+
</UContainer>
20+
<AppFooter />
21+
</template>

‎app/components/AppFooter.vue

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script setup>
2+
const footerLinks = [
3+
{
4+
label: 'Source code',
5+
to: 'https://github.com/atinux/instadraw',
6+
target: '_blank',
7+
},
8+
]
9+
</script>
10+
11+
<template>
12+
<UFooter :links="footerLinks">
13+
<template #left>
14+
<span class="text-sm">Made with <UButton
15+
to="https://nuxt.com"
16+
variant="link"
17+
color="black"
18+
:padded="false"
19+
>
20+
Nuxt
21+
</UButton> & <UButton
22+
to="https://hub.nuxt.com"
23+
variant="link"
24+
color="black"
25+
:padded="false"
26+
>NuxtHub</UButton>.</span>
27+
</template>
28+
<template #right>
29+
<UColorModeButton />
30+
<UButton
31+
to="https://github.com/atinux/instadraw"
32+
color="gray"
33+
variant="ghost"
34+
icon="i-simple-icons-github"
35+
/>
36+
<UButton
37+
to="https://x.com/atinux"
38+
color="gray"
39+
variant="ghost"
40+
icon="i-simple-icons-x"
41+
/>
42+
</template>
43+
</UFooter>
44+
</template>

‎app/components/AppHeader.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup>
2+
const showModal = ref(false)
3+
const { loggedIn, clear } = useUserSession()
4+
</script>
5+
6+
<template>
7+
<UHeader>
8+
<template #logo>
9+
<div class="flex items-center gap-1">
10+
<UIcon name="i-ph-image-square-duotone" />
11+
<h3>Instadraw</h3>
12+
</div>
13+
</template>
14+
<template #right>
15+
<UButton
16+
to="/draw"
17+
icon="i-ph-pencil"
18+
@click="showModal = true"
19+
>
20+
Draw
21+
</UButton>
22+
<UButton
23+
v-if="loggedIn"
24+
color="gray"
25+
icon="i-ph-power"
26+
@click="clear"
27+
/>
28+
</template>
29+
</UHeader>
30+
</template>

‎app/components/ColorPicker.vue

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<script setup lang="ts">
2+
const props = defineProps({
3+
label: {
4+
type: String,
5+
default: 'Color',
6+
},
7+
default: {
8+
type: String,
9+
default: '#030712',
10+
},
11+
icon: {
12+
type: String,
13+
default: 'i-ph-pencil',
14+
},
15+
})
16+
const emit = defineEmits(['color'])
17+
18+
// Tailwind CSS 500 colors hexadecimal values
19+
const colors = ['#f87171', '#fb923c', '#fbbf24', '#facc15', '#a3e635', '#4ade80', '#34d399', '#2dd4bf', '#22d3ee', '#38bdf8', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6', '#fb7185']
20+
const grayColors = ['#030712', '#1f2937', '#4b5563', '#9ca3af', '#e5e7eb', '#f9fafb']
21+
const current = ref(props.default)
22+
function setColor(hex: string) {
23+
current.value = hex
24+
emit('color', hex)
25+
}
26+
</script>
27+
28+
<template>
29+
<UPopover
30+
mode="hover"
31+
:ui="{ width: 'w-[156px]' }"
32+
>
33+
<template #default="{ open }">
34+
<UButton
35+
color="gray"
36+
variant="ghost"
37+
square
38+
:class="[open && 'bg-gray-50 dark:bg-gray-800']"
39+
aria-label="Color picker"
40+
:icon="icon"
41+
>
42+
<div
43+
class="w-5 h-5 rounded-full"
44+
:style="{ backgroundColor: current }"
45+
/>
46+
</UButton>
47+
</template>
48+
49+
<template #panel>
50+
<div class="p-2">
51+
<div class="grid grid-cols-6 gap-px">
52+
<div
53+
v-for="color in colors"
54+
:key="color"
55+
class="w-5 h-5 rounded-full border-2 hover:border-gray-200 cursor-pointer"
56+
:class="color === current ? 'border-gray-200' : 'border-white'"
57+
:style="{ backgroundColor: color }"
58+
@click="setColor(color)"
59+
/>
60+
</div>
61+
62+
<hr class="border-gray-200 dark:border-gray-800 my-2">
63+
64+
<div class="grid grid-cols-6 gap-px">
65+
<div
66+
v-for="color in grayColors"
67+
:key="color"
68+
class="w-5 h-5 rounded-full border-2 hover:border-gray-200 cursor-pointer"
69+
:class="color === current ? 'border-gray-200' : 'border-white'"
70+
:style="{ backgroundColor: color }"
71+
@click="setColor(color)"
72+
/>
73+
</div>
74+
</div>
75+
</template>
76+
</UPopover>
77+
</template>

0 commit comments

Comments
 (0)