Dark mode

.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.output
+.nuxt

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@nuxtjs/eslint-config-typescript"
+}

.gitignore

@@ -5,4 +5,12 @@ node_modules
 .cache
 .output
 .env
-dist
+dist
+.DS_Store
+
+# Yarn
+.yarn/cache
+.yarn/*state*
+
+# Local History
+.history

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "files.associations": {
+    "*.css": "postcss"
+  },
+  "editor.formatOnSave": false
+}

CHANGELOG.md

@@ -0,0 +1,60 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [0.2.4](https://github.com/Atinux/content-wind/compare/v0.2.3...v0.2.4) (2022-10-24)
+
+### [0.2.3](https://github.com/Atinux/content-wind/compare/v0.2.2...v0.2.3) (2022-10-24)
+
+### [0.2.2](https://github.com/Atinux/content-wind/compare/v0.2.1...v0.2.2) (2022-10-21)
+
+### [0.2.1](https://github.com/Atinux/content-wind/compare/v0.2.0...v0.2.1) (2022-10-21)
+
+## [0.2.0](https://github.com/Atinux/content-wind/compare/v0.1.3...v0.2.0) (2022-10-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* move as flat structure
+
+### Features
+
+* move as flat structure ([faa3c1a](https://github.com/Atinux/content-wind/commit/faa3c1a9d48dbd280fdd02cd34f559dad52bb72b))
+
+### [0.1.3](https://github.com/Atinux/content-wind/compare/v0.1.2...v0.1.3) (2022-10-19)
+
+### [0.1.2](https://github.com/Atinux/content-wind/compare/v0.1.1...v0.1.2) (2022-10-10)
+
+### [0.1.1](https://github.com/Atinux/content-wind/compare/v0.1.0...v0.1.1) (2022-10-10)
+
+
+### Bug Fixes
+
+* broken links ([#26](https://github.com/Atinux/content-wind/issues/26)) ([d060828](https://github.com/Atinux/content-wind/commit/d060828f15daded2c796b6f32622ad9d8afceae4))
+
+### [0.0.8](https://github.com/Atinux/content-wind/compare/v0.0.7...v0.0.8) (2022-10-07)
+
+### [0.0.7](https://github.com/Atinux/content-wind/compare/v0.0.5...v0.0.7) (2022-10-07)
+
+
+### Features
+
+* make it a theme ([#25](https://github.com/Atinux/content-wind/issues/25)) ([db153ae](https://github.com/Atinux/content-wind/commit/db153ae75c1ba47b83571793e728cc9b462e6415))
+* move app.config to template and type it ([bada78b](https://github.com/Atinux/content-wind/commit/bada78b422199fbc3b8a0ee5a7b6baafa6a865ae))
+
+
+### Bug Fixes
+
+* correct title for GitHub icon ([4296312](https://github.com/Atinux/content-wind/commit/4296312b4b59dade7c9fdfbe23e083733a138886))
+
+### [0.0.6](https://github.com/Atinux/content-wind/compare/v0.0.5...v0.0.6) (2022-10-07)
+
+
+### Features
+
+* theme structure ([8b38482](https://github.com/Atinux/content-wind/commit/8b38482a1ef36c5daf35a4d6151a61398b9ca6db))
+
+
+### Bug Fixes
+
+* correct title for GitHub icon ([4296312](https://github.com/Atinux/content-wind/commit/4296312b4b59dade7c9fdfbe23e083733a138886))

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Sébastien Chopin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,46 +1,10 @@
-
 # Assinar PDF para usuários registrados
  - Documentos em https://cms.softagon.app
 
-# Content v2 Minimal Starter
-
-Look at the [Content documentation](https://content-v2.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:
+- Tema utilizado
 
-```bash
-npm run preview
-```
+A personal website theme powered by [Nuxt Content](https://content.nuxtjs.org), [TailwindCSS](https://tailwindcss.com), [Iconify](https://iconify.design) and [Vue components](https://vuejs.org).
 
-Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.
+- 📖  [Demo & Docs](https://content-wind.nuxt.space)
+- 🕹  [Play online](https://stackblitz.com/github/Atinux/content-wind-template)
+- 👀  [Demo video](https://twitter.com/Atinux/status/1578505586979012608)

app.config.ts

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  cover: '/cover.jpg',
+  socials: {}
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    cover?: string,
+    socials?: {
+      twitter?: string
+      github?: string
+    }
+  }
+}

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <AppLayout>
     <NuxtPage />
-  </div>
+  </AppLayout>
 </template>

components/AppLayout.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const { cover } = useAppConfig()
+</script>
+
+<template>
+  <div class="sm:pt-6 sm:pb-10">
+    <Html lang="en" />
+    <Meta property="og:image" :content="cover" />
+    <Meta name="twitter:card" content="summary_large_image" />
+    <AppLoadingBar />
+    <AppNavbar />
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss">
+body {
+  @apply bg-primary-50 dark:bg-primary-900;
+}
+</style>

components/AppLoadingBar.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { useNuxtApp, onBeforeUnmount, reactive } from '#imports'
+
+const props = defineProps({
+  throttle: {
+    type: Number,
+    default: 200
+  },
+  duration: {
+    type: Number,
+    default: 2000
+  },
+  height: {
+    type: Number,
+    default: 3
+  }
+})
+
+const nuxtApp = useNuxtApp()
+
+// Options & Data
+const data = reactive({
+  percent: 0,
+  show: false,
+  canSucceed: true
+})
+// Local variables
+let _timer = null
+let _throttle = null
+let _cut
+
+// Functions
+function clear () {
+  _timer && clearInterval(_timer)
+  _throttle && clearTimeout(_throttle)
+  _timer = null
+}
+function start () {
+  if (data.show) { return }
+  clear()
+  data.percent = 0
+  data.canSucceed = true
+
+  if (props.throttle) {
+    _throttle = setTimeout(startTimer, props.throttle)
+  } else {
+    startTimer()
+  }
+}
+function increase (num) {
+  data.percent = Math.min(100, Math.floor(data.percent + num))
+}
+function finish () {
+  data.percent = 100
+  hide()
+}
+function hide () {
+  clear()
+  setTimeout(() => {
+    data.show = false
+    setTimeout(() => {
+      data.percent = 0
+    }, 400)
+  }, 500)
+}
+function startTimer () {
+  data.show = true
+  _cut = 10000 / Math.floor(props.duration)
+  _timer = setInterval(() => {
+    increase(_cut)
+  }, 100)
+}
+
+// Hooks
+nuxtApp.hook('content:middleware:start', start)
+nuxtApp.hook('page:start', start)
+nuxtApp.hook('page:finish', finish)
+
+onBeforeUnmount(() => clear)
+</script>
+
+<template>
+  <div
+    class="nuxt-progress"
+    :class="{
+      'nuxt-progress-failed': !data.canSucceed,
+    }"
+    :style="{
+      width: `${data.percent}%`,
+      left: data.left,
+      height: `${props.height}px`,
+      opacity: data.show ? 1 : 0,
+      backgroundSize: `${(100 / data.percent) * 100}% auto`,
+    }"
+  />
+</template>
+
+<style>
+.nuxt-progress {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: 0%;
+  opacity: 1;
+  transition: width 0.1s, height 0.4s, opacity 0.4s;
+  background: repeating-linear-gradient(to right, #00dc82 0%, #34cdfe 50%, #0047e1 100%);
+  z-index: 999999;
+}
+</style>

components/AppNavbar.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+const { navigation } = useContent()
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div class="flex justify-between max-w-2xl px-4 py-4 mx-auto sm:px-8">
+    <!-- Navigation -->
+    <div class="text-primary-700 dark:text-primary-200">
+      <NuxtLink
+        v-for="link of navigation"
+        :key="link._path"
+        :to="link._path"
+        active-class="font-bold"
+        class="mr-6"
+      >
+        {{ link.title }}
+      </NuxtLink>
+    </div>
+    <!-- Social icons & Color Mode -->
+    <div class="space-x-3 transition text-primary-500">
+      <a v-if="appConfig.socials?.twitter" :href="`https://twitter.com/${appConfig.socials?.twitter}`" title="Twitter" class="dark:text-primary-100 hover:text-primary-700 dark:hover:text-primary-300"><Icon name="fa-brands:twitter" class="w-5 h-5" /></a>
+      <a v-if="appConfig.socials?.github" :href="`https://github.com/${appConfig.socials?.github}`" title="GitHub" class="dark:text-primary-100 hover:text-primary-700 dark:hover:text-primary-300"><Icon name="fa-brands:github" class="w-5 h-5" /></a>
+      <ColorModeSwitch class="dark:text-primary-100 hover:text-primary-700 dark:hover:text-primary-300" />
+    </div>
+  </div>
+</template>

components/ColorModeSwitch.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const onClick = () => (colorMode.value === 'light' ? (colorMode.preference = 'dark') : (colorMode.preference = 'light'))
+</script>
+
+<template>
+  <button aria-label="Color Mode" class="inline-block w-5" @click="onClick">
+    <ColorScheme placeholder="...">
+      <Icon v-if="colorMode.value === 'dark'" name="ph:moon-bold" class="w-5 h-5" />
+      <Icon v-else name="ph:sun-bold" class="w-5 h-5" />
+    </ColorScheme>
+  </button>
+</template>

components/content/Alert.vue

@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    default: 'heroicons-outline:exclamation'
+  }
+})
+</script>
+
+<template>
+  <div class="p-4 rounded-md bg-yellow-50">
+    <div class="flex">
+      <div v-if="icon" class="flex-shrink-0 mr-3">
+        <Icon class="w-5 h-5 text-yellow-400" aria-hidden="true" :name="icon" />
+      </div>
+      <div>
+        <h3 class="m-0 text-base font-medium text-yellow-800">
+          <ContentSlot :use="$slots.title" unwrap="p" />
+        </h3>
+        <div class="mt-2 text-sm text-yellow-700">
+          <ContentSlot :use="$slots.default" unwrap="p" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>