dwd/boilarplate-nuxt3-server-tailwind-more
Template
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

package list from viandwi24

Browse Source
This commit is contained in:
Kar
2023-04-28 09:58:09 +05:30
commit 4125135289
108 changed files with 27411 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
pages/404.vue Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts" setup>
import { capitalize } from '~/utils/str'
// composable
const { t } = useLang()
// compiler macro
definePageMeta({
layout: 'page',
})
useHead(() => ({
title: capitalize(t('pages.404.title')),
}))
</script>
<template>
<PageWrapper class="flex flex-col items-center justify-center">
<Error :code="404" />
</PageWrapper>
</template>

35
pages/blank.vue Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts" setup>
import { capitalize } from '~/utils/str'
// composable
const { t } = useLang()
// compiler macro
definePageMeta({
layout: 'page',
})
useHead(() => ({
title: capitalize(t('pages.blank.title')),
meta: [
{
name: 'description',
content: t('pages.blank.description'),
},
],
}))
</script>
<template>
<PageWrapper>
<PageHeader>
<PageTitle :text="$t('pages.blank.title')" class="capitalize" />
</PageHeader>
<PageBody>
<PageSection>
<div v-for="i in 30" :key="i" class="text-6xl uppercase">
{{ $t('pages.blank.just_blank_page_with_title') }}
</div>
</PageSection>
</PageBody>
</PageWrapper>
</template>

27
pages/dashboard/index.vue Normal file
View File

@@ -0,0 +1,27 @@
<script lang="ts" setup>
definePageMeta({
layout: 'dashboard',
})
</script>
<template>
<PageWrapper>
<PageHeader>
<PageTitle :text="$t('pages.dashboard.index.title')" class="capitalize" />
</PageHeader>
<PageBody>
<PageSection>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia autem
debitis ab dolorum tempore placeat possimus perferendis porro sit aut
nobis quasi hic consequuntur, atque impedit nihil totam illo odit?
</p>
</PageSection>
<PageSection>
<div v-for="i in 30" :key="i" class="text-6xl uppercase">
{{ $t('pages.blank.just_blank_page_with_title') }}
</div>
</PageSection>
</PageBody>
</PageWrapper>
</template>

27
pages/getting-started.vue Normal file
View File

@@ -0,0 +1,27 @@
<script lang="ts" setup>
import { capitalize } from '~/utils/str'
// composable
const { t } = useLang()
// compiler macro
definePageMeta({
layout: 'page',
})
useHead(() => ({
title: capitalize(t('pages.getting-started.title')),
meta: [
{
name: 'description',
content: t('pages.getting-started.description'),
},
],
}))
</script>
<template>
<PageContentRenderer
path="/page/getting-started"
:page-title="$t('pages.getting-started.title')"
/>
</template>

283
pages/index.vue Normal file
View File

@@ -0,0 +1,283 @@
<script lang="ts" setup>
// composable
const { t } = useLang()
// meta
definePageMeta({
layout: 'page',
})
// vars
const titlesText = computed<string[]>(() => t('pages.index.title').split('[]'))
const leadingsText = computed(() => [
{
text: titlesText.value[0],
startColor: '#007CF0',
endColor: '#00DFD8',
delay: 0,
},
{
text: titlesText.value[1],
startColor: '#7928CA',
endColor: '#FF0080',
delay: 2,
},
{
text: titlesText.value[2],
startColor: '#FF4D4D',
endColor: '#F9CB28',
delay: 4,
},
])
const tooltip = ref(false)
// const
const cancelTooltip = () => {
tooltip.value = false
const tt = document.querySelector('.tooltiptext')
if (tt) tt.innerHTML = `Copy to clipboard`
}
const copyBash = () => {
const bash = 'git clone boilarplate'
navigator.clipboard.writeText(bash)
tooltip.value = true
const tt = document.querySelector('.tooltiptext')
if (tt) tt.innerHTML = `Copied!!!`
}
</script>
<template>
<PageWrapper class="flex-1 flex">
<div class="background-overlay">
<div
class="absolute top-0 left-0 transform translate-x-64 translate-y-4 h-14 w-14 rounded-full bg-gray-900 dark:bg-white"
></div>
<div
class="absolute hidden md:block top-0 left-0 transform translate-x-18 translate-y-20 h-28 w-28 rounded-full bg-blue-600 linear-wipe"
></div>
<div
class="absolute hidden md:block bottom-0 right-0 transform -translate-x-4 -translate-y-40 h-16 w-16 rounded bg-purple-600 linear-wipe"
></div>
<div class="absolute bottom-0 right-0 triangle-shape"></div>
</div>
<PageBody class="flex-1 flex">
<PageSection class="flex-1 flex items-center">
<div class="flex-1 md:w-5/8 flex flex-col z-10">
<h1 class="text-center md:text-left mt-4">
<span
v-for="(item, i) in leadingsText"
:key="i"
:style="`--content: '${item.text}'; --start-color: ${
item.startColor
}; --end-color: ${item.endColor}; --animation-name: anim-fg-${
i + 1
}`"
class="animated-text-bg drop-shadow-xl text-5xl xl:text-8xl 2xl:text-9xl block font-black uppercase"
>
<span class="animated-text-fg">{{ item.text }}</span>
</span>
</h1>
<div
class="flex space-x-4 ml-4 mt-10 justify-center md:justify-start"
>
<Button
size="lg"
text="Nuxt 3"
class="font-extrabold"
href="https://v3.nuxtjs.org"
/>
<Button
size="lg"
text="Github"
type="secondary"
class="font-extrabold"
href="boilarplate"
/>
</div>
</div>
<div class="hidden md:flex md:w-3/8 justify-center items-end relative">
<Gem class="absolute -top-64 -right-0" />
<div class="ml-4 w-100 z-10 h-auto shadow">
<div
class="win-header bg-gray-200 dark:bg-slate-800 flex flex space-x-4 px-3 py-2 rounded-t-lg relative border-b-2 border-gray-300/75 dark:border-slate-700/75"
>
<div class="win-controls flex space-x-1 items-center">
<div class="w-3 h-3 bg-red-500 rounded-full" />
<div class="w-3 h-3 bg-green-500 rounded-full" />
<div class="w-3 h-3 bg-yellow-500 rounded-full" />
</div>
<div class="flex-1 font-bold text-center pr-12 text-sm">BASH</div>
<div class="text-sm flex justify-center items-center">
<div class="tooltip">
<button
class="text-gray-100 flex justify-center items-center"
@click="copyBash"
@mouseout="cancelTooltip"
>
<span class="tooltiptext">Copy to clipboard</span>
<icon-material-symbols:content-copy-outline />
</button>
</div>
</div>
</div>
<div
class="win-body rounded-b-lg bg-gray-200/90 dark:bg-slate-800/90 px-3 py-2 font-mono backdrop-filter backdrop-blur-lg"
>
<div>
$ git clone boilarplate
</div>
</div>
</div>
</div>
</PageSection>
</PageBody>
</PageWrapper>
</template>
<style lang="scss">
@import '../assets/sass/variables';
@keyframes anim-fg-1 {
0%,
16.667%,
100% {
opacity: 1;
}
33.333%,
83.333% {
opacity: 0;
}
}
@keyframes anim-fg-2 {
0%,
16.667%,
66.667%,
100% {
opacity: 0;
}
33.333%,
50% {
opacity: 1;
}
}
@keyframes anim-fg-3 {
0%,
50%,
100% {
opacity: 0;
}
66.667%,
83.333% {
opacity: 1;
}
}
.animated-text-bg {
position: relative;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
content: var(--content);
display: block;
width: 100%;
color: theme('colors.slate.800');
top: 0;
bottom: 0;
left: 0;
z-index: 0;
padding-left: $padding;
padding-right: $padding;
&:before {
content: var(--content);
position: absolute;
display: block;
width: 100%;
color: theme('colors.slate.800');
top: 0;
bottom: 0;
left: 0;
z-index: 0;
padding-left: $padding;
padding-right: $padding;
}
}
.animated-text-fg {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: $padding;
padding-right: $padding;
background-image: linear-gradient(
90deg,
var(--start-color),
var(--end-color)
);
position: relative;
opacity: 0;
z-index: 1;
animation: var(--animation-name) 8s infinite;
}
html.dark {
.animated-text-bg {
color: theme('colors.gray.100');
&:before {
color: theme('colors.gray.100');
}
}
}
.triangle-shape {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 40px solid theme('colors.green.600');
transform: translate(-15rem, -6rem) rotate(45deg);
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>

11
pages/post/[slug].vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
definePageMeta({
layout: 'page',
})
</script>
<template>
<PageWrapper class="flex flex-col">
<PageContentDoc empty-tip="Post im empty" />
</PageWrapper>
</template>

67
pages/post/index.vue Normal file
View File

@@ -0,0 +1,67 @@
<script lang="ts" setup>
import { capitalize } from '~/utils/str'
// composable
const { t } = useLang()
// compiler macro
definePageMeta({
layout: 'page',
})
useHead(() => ({
title: capitalize(t('pages.post.title')),
meta: [
{
name: 'description',
content: t('pages.post.description'),
},
],
}))
</script>
<template>
<PageWrapper>
<PageHeader>
<PageTitle :text="$t('pages.post.title')" class="capitalize" />
</PageHeader>
<PageBody>
<ContentList v-slot="{ list }" path="/post">
<PageSection v-for="article in list" :key="article._path">
<div
class="block hover:no-underline p-6 flex space-x-6 rounded border border-gray-900/10 dark:border-gray-50/[0.2]"
>
<div class="mt-1 text-slate-600 dark:text-gray-400 text-right">
<div>{{ article.date }}</div>
<Anchor
class="text-sm flex items-center justify-end space-x-1"
:href="`https://www.github.com/${article.author}`"
>
<icon-mdi:github-face class="text-xs" />
<span>{{ article.author }}</span>
</Anchor>
</div>
<div class="flex flex-col">
<div
class="text-xl font-semibold text-slate-800 dark:text-gray-50"
>
{{ article.title }}
</div>
<div class="text-slate-700 dark:text-gray-300 mb-1">
{{ article.description }}
</div>
<div class="flex">
<Anchor
class="text-sm flex space-x-1 items-center text-primary-500"
:to="article._path"
>
<span>{{ $t('others.learn_more') }}</span>
<icon:ic:baseline-arrow-right-alt class="text-sm" />
</Anchor>
</div>
</div>
</div>
</PageSection>
</ContentList>
</PageBody>
</PageWrapper>
</template>

301
pages/setting.vue Normal file
View File

@@ -0,0 +1,301 @@
<script lang="ts" setup>
import {
TabGroup,
TabList,
Tab as HeadlessUiTab,
TabPanels,
TabPanel,
} from '@headlessui/vue'
import { capitalize } from '~/utils/str'
import { Size } from '~/composables/useScreen'
// composable
const { t } = useLang()
const screen = useScreen()
// compiler macro
definePageMeta({
layout: 'page',
})
useHead(() => ({
title: capitalize(t('pages.setting.title')),
meta: [
{
name: 'description',
content: t('pages.setting.description'),
},
],
}))
// funcs
const randomToken = () => {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
let token = ''
for (let i = 0; i < 255; i++) {
token += chars.charAt(Math.floor(Math.random() * chars.length))
}
return token
}
// state
const username = ref('dwd')
const id = ref(randomToken())
const enableSpamProtection = ref(false)
const enableDirList = ref(false)
const enableAdvancedSetting = ref(false)
// methods
const validate = async () => {
// fetch username from github api
try {
const response = await fetch(
`https://api.github.com/users/${username.value}`
)
if (response.status !== 200)
throw new Error(
`error when fetching username : ${response.statusText} (${response.status})`
)
const data = (await response.json()) as {
name: string
id: string
}
alert(`Found Accout Name ${data.name} with id : ${data.id}`)
} catch (err) {
alert(err)
}
}
</script>
<template>
<PageWrapper>
<PageSection class="mb-0">
<Alert
type="success"
title="This is a page for testing purposes"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
class="mb-6"
/>
</PageSection>
<PageHeader>
<PageTitle :text="$t('pages.setting.title')" class="capitalize" />
</PageHeader>
<PageBody>
<PageSection>
<TabGroup
as="div"
class="flex flex-col md:flex-row md:space-x-4"
:vertical="screen.higherThan(Size.MEDIUM)"
>
<TabList class="w-full md:w-1/6 flex md:flex-col rounded-lg mb-2">
<HeadlessUiTab v-slot="{ selected }" as="template">
<button
:class="[
'md:w-full text-left px-3 py-1.5 rounded py-2.5 text-sm leading-5 transition-all hover:bg-gray-200 hover:text-slate-900 dark:hover:bg-white/[0.12] dark:hover:text-white',
selected
? 'font-extrabold'
: 'text-slate-800 dark:text-gray-400',
]"
>
General
</button>
</HeadlessUiTab>
<HeadlessUiTab v-slot="{ selected }" as="template">
<button
:class="[
'md:w-full text-left px-3 py-1.5 rounded py-2.5 text-sm leading-5 transition-all hover:bg-gray-200 hover:text-slate-900 dark:hover:bg-white/[0.12] dark:hover:text-white',
selected
? 'font-extrabold'
: 'text-slate-800 dark:text-gray-400',
]"
>
Protection
</button>
</HeadlessUiTab>
<HeadlessUiTab v-slot="{ selected }" as="template">
<button
:class="[
'md:w-full text-left px-3 py-1.5 rounded py-2.5 text-sm leading-5 transition-all hover:bg-gray-200 hover:text-slate-900 dark:hover:bg-white/[0.12] dark:hover:text-white',
selected
? 'font-extrabold'
: 'text-slate-800 dark:text-gray-400',
]"
>
Advanced
</button>
</HeadlessUiTab>
</TabList>
<TabPanels class="flex-1">
<TabPanel>
<Card class="mb-4">
<CardContent>
<CardTitle
class="capitalize"
:text="$t('pages.setting.sections.validate_username.title')"
/>
<p class="mb-2">
{{
$t('pages.setting.sections.validate_username.description')
}}
</p>
<div class="flex">
<FormTextInput v-model="username" class="w-full md:w-1/3">
<template #prefix-disabled>
<span class="flex-1 px-4 py-2">github.com/</span>
</template>
</FormTextInput>
</div>
</CardContent>
<CardFooter
class="flex flex-col space-y-2 md:space-y md:flex-row items-center md:justify-between"
>
<p>
{{ $t('pages.setting.sections.validate_username.footer') }}
<Anchor
class="underline font-bold capitalize"
:text="
$t(
'pages.setting.sections.validate_username.footer_link'
)
"
href="https://docs.github.com/en/rest/users/users#get-a-user"
/>
</p>
<Button
class="capitalize"
size="sm"
type="opposite"
:text="
$t(
'pages.setting.sections.validate_username.footer_button'
)
"
@click="validate"
/>
</CardFooter>
</Card>
<Card class="mb-4">
<CardContent>
<CardTitle
class="capitalize"
:text="$t('pages.setting.sections.bot_id.title')"
/>
<p class="mb-2">
{{ $t('pages.setting.sections.bot_id.description') }}
</p>
<div class="flex">
<FormTextInput v-model="id" class="w-full md:w-1/3">
<template #suffix>
<Button
type="opposite"
class="flex space-x-1 border-none"
>
<icon-ic:baseline-content-copy />
<span>{{ $t('others.copy') }}</span>
</Button>
</template>
</FormTextInput>
</div>
</CardContent>
<CardFooter class="justify-between">
<p>
{{ $t('pages.setting.sections.bot_id.footer') }}
</p>
</CardFooter>
</Card>
</TabPanel>
<TabPanel>
<Card
:class="{
'mb-4': true,
'border-red-500 dark:border-red-500': !enableSpamProtection,
}"
>
<CardContent>
<CardTitle
class="capitalize"
:text="$t('pages.setting.sections.protection_spam.title')"
/>
<p class="mb-2">
{{
$t('pages.setting.sections.protection_spam.description')
}}
</p>
<div class="flex">
<FormSwitch v-model="enableSpamProtection">
<span class="capitalize">{{
enableSpamProtection
? $t('others.enabled')
: $t('others.disabled')
}}</span>
</FormSwitch>
</div>
</CardContent>
<CardFooter class="justify-between">
<p>
{{ $t('pages.setting.sections.protection_spam.footer') }}
</p>
</CardFooter>
</Card>
</TabPanel>
<TabPanel>
<Card class="mb-4">
<CardContent>
<CardTitle
class="capitalize"
:text="
$t(
'pages.setting.sections.advanced_enable_advanced.title'
)
"
/>
<p class="mb-2">
{{
$t(
'pages.setting.sections.advanced_enable_advanced.description'
)
}}
</p>
<div class="flex">
<FormSwitch v-model="enableAdvancedSetting">
<span class="capitalize">{{
enableAdvancedSetting
? $t('others.enabled')
: $t('others.disabled')
}}</span>
</FormSwitch>
</div>
</CardContent>
</Card>
<Card class="mb-4" :disabled="!enableAdvancedSetting">
<CardContent>
<CardTitle
class="capitalize"
:text="
$t('pages.setting.sections.advanced_dir_listing.title')
"
/>
<p class="mb-2">
{{
$t(
'pages.setting.sections.advanced_dir_listing.description'
)
}}
</p>
<div class="flex">
<FormSwitch v-model="enableDirList" on>
<span class="capitalize">{{
enableDirList
? $t('others.enabled')
: $t('others.disabled')
}}</span>
</FormSwitch>
</div>
</CardContent>
</Card>
</TabPanel>
</TabPanels>
</TabGroup>
</PageSection>
</PageBody>
</PageWrapper>
</template>

106
pages/test.vue Normal file
View File

@@ -0,0 +1,106 @@
<script lang="ts" setup>
import { useCounter } from '~/stores/counter'
import { useIdentity } from '~/stores/identity'
import { capitalize } from '~/utils/str'
// composable
const { t } = useLang()
// compiler macro
definePageMeta({
layout: 'page',
})
useHead(() => ({
title: capitalize(t('pages.test.title')),
meta: [
{
name: 'description',
content: t('pages.test.description'),
},
],
}))
const counter = useCounter()
const identity = useIdentity()
</script>
<template>
<PageWrapper>
<PageHeader>
<PageTitle :text="$t('pages.test.title')" class="capitalize" />
</PageHeader>
<PageBody>
<PageSection>
<PageSectionTitle :text="$t('pages.test.counter')" class="capitalize" />
<div class="">
<div class="mb-2">Counter : {{ counter.count }}</div>
<div
class="flex flex-col items-center justify-items-center space-y-2 md:space-y-0 md:flex-row md:space-x-2"
>
<Button
class="w-full md:w-auto capitalize"
type="secondary"
size="sm"
:text="$t('pages.test.increment')"
@click.prevent="counter.increment"
/>
<Button
class="w-full md:w-auto"
type="secondary"
size="sm"
:text="`${$t('pages.test.increment')} 2x`"
@click.prevent="counter.increment2x"
/>
<Button
class="w-full md:w-auto capitalize"
type="secondary"
size="sm"
:text="$t('pages.test.decrement')"
@click.prevent="counter.decrement"
/>
<Button
class="w-full md:w-auto capitalize"
type="secondary"
size="sm"
:text="$t('pages.test.reset')"
@click.prevent="counter.reset"
/>
</div>
</div>
</PageSection>
<PageSection>
<PageSectionTitle
:text="$t('pages.test.identity')"
class="capitalize"
/>
<div class="mb-2">
<span class="capitalize">{{ $t('pages.test.full_name') }} : </span>
<span>{{ identity.fullName }}</span>
</div>
<div class="mb-2">
<div
class="flex flex-col items-center space-y-2 md:space-y-0 md:flex-row md:space-x-2"
>
<FormTextInput
v-model="identity.firstName"
size="md"
class="w-full md:w-1/3"
/>
<FormTextInput
v-model="identity.lastName"
size="md"
class="w-full md:w-1/3"
/>
<Button
class="capitalize w-full md:w-auto"
:text="$t('pages.test.reset')"
type="secondary"
size="md"
@click.prevent="identity.reset"
/>
</div>
</div>
</PageSection>
</PageBody>
</PageWrapper>
</template>