Initial commit

.github/workflows/autofix.yml

@@ -0,0 +1,28 @@
+name: autofix.ci # needed to securely identify the workflow
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  autofix:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+      - run: corepack enable
+      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4
+        with:
+          node-version: 20.5
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint & Fix
+        run: pnpm run lint:fix
+
+      - uses: autofix-ci/action@bee19d72e71787c12ca0f29de72f2833e437e4c9

.gitignore

@@ -0,0 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# VSC
+.history

.npmrc

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

.vscode/settings.json

@@ -0,0 +1,64 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
+  },
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    {
+      "rule": "style/*",
+      "severity": "off"
+    },
+    {
+      "rule": "*-indent",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spacing",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spaces",
+      "severity": "off"
+    },
+    {
+      "rule": "*-order",
+      "severity": "off"
+    },
+    {
+      "rule": "*-dangle",
+      "severity": "off"
+    },
+    {
+      "rule": "*-newline",
+      "severity": "off"
+    },
+    {
+      "rule": "*quotes",
+      "severity": "off"
+    },
+    {
+      "rule": "*semi",
+      "severity": "off"
+    }
+  ],
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

README.md

@@ -0,0 +1,59 @@
+![screenshot-nuxt-ui-pro-slantire](https://github.com/Barbapapazes/slantire/assets/904724/01d27c6b-cf85-412e-b0bc-a718ad9990c1)
+
+# Slantire
+
+[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro)
+<!-- [![Nuxt Studio](https://img.shields.io/badge/Open%20in%20Nuxt%20Studio-18181B?&logo=nuxt.js&logoColor=3BB5EC)](https://nuxt.studio/themes/slantire) -->
+[![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
+
+Slantire, [slan.ti.ˈɾɛ] from Na'Vi meaning '_inspiration_',  is a blog theme that you can use in [Nuxt Studio](https://nuxt.studio).
+
+It is powered by [Nuxt Content](https://content.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro)!
+
+- [Live demo](https://slantire.barbapapazes.dev/)
+- [Play on Stackblitz](https://stackblitz.com/github/barbapapazes/slantire)
+<!-- - [Clone on Nuxt Studio](https://nuxt.studio/themes/slantire) -->
+
+## Features
+
+- 🎨 Fully personalized (colors, content, etc.)
+- 📝 Markdown based
+- 🔍 SEO friendly (Open Graph, Robots, Sitemap)
+- 🦇 Dark mode
+- ✏️ Nuxt Studio ready
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run generate
+```
+
+### Environment Variables
+
+In order to build the application for production, you need to have a [Nuxt UI Pro](https://ui.nuxt.com/pro) license and set the `NUXT_UI_PRO_LICENSE` variable in the `.env` file.
+
+Note that this is not required to run in development and contribute to the Nuxt website or documentation.
+
+You will also need to add your site URL to the `NUXT_SITE_URL` variable (see [Nuxt SEO](https://nuxtseo.com/site-config/guides/setting-site-config#environment-variables)) to have a valid `robots.txt` file and sitemap.
+
+## License
+
+[MIT License](./LICENSE)

app.config.ts

@@ -0,0 +1,81 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'sky',
+    gray: 'zinc',
+    icons: {
+      light: 'i-ph-sun-dim-duotone',
+      dark: 'i-ph-moon-stars-duotone',
+    },
+    landing: {
+      card: {
+        body: {
+          base: 'h-full',
+        },
+        container: 'h-full flex flex-col',
+        title: 'text-2xl',
+        description: 'grow mt-2',
+      },
+    },
+    header: {
+      wrapper: 'relative border-none',
+      button: {
+        icon: {
+          open: 'i-ph-list-bold',
+          close: 'i-ph-x-bold',
+        },
+      },
+    },
+    footer: {
+      bottom: {
+        container: 'flex flex-col lg:flex-row',
+        left: 'order-1',
+        center: 'mt-0',
+        right: 'order-2 mt-4 md:mt-8 lg:mt-0',
+      },
+    },
+    page: {
+      links: {
+        wrapper: 'mt-6',
+      },
+    },
+    card: {
+      base: 'transition ease-in',
+      divide: 'divide-none',
+    },
+  },
+  seo: {
+    siteName: 'Slantire',
+    tagLine: 'My personal website',
+  },
+  header: {
+    logo: {
+      alt: '',
+      light: '',
+      dark: '',
+    },
+    colorMode: true,
+  },
+  socials: [
+    {
+      icon: 'i-ph-globe-duotone',
+      to: 'https://esteban-soubiran.site',
+      target: '_blank',
+    },
+    {
+      icon: 'i-simple-icons-x',
+      to: 'https://x.com/soubiran_',
+      target: '_blank',
+    },
+    {
+      icon: 'i-simple-icons-github',
+      to: 'https://github.com/barbapapazes',
+      target: '_blank',
+    },
+  ],
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      title: 'Ressources',
+    },
+  },
+})

app.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+const { data: navigation, error } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+if (error.value) {
+  throw createError({
+    statusCode: 500,
+    message: 'Unable to fetch navigation',
+    fatal: true,
+  })
+}
+
+const links = computed(() => {
+  if (!navigation.value)
+    return []
+
+  return navigation.value.map((item: any) => {
+    return {
+      label: item.title,
+      to: item._path,
+    }
+  })
+})
+
+const config = useAppConfig()
+
+const colorMode = useColorMode()
+const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
+
+useHead({
+  titleTemplate: title => title ? `${title} - ${config.seo.siteName}` : `${config.seo.siteName}: ${config.seo.tagLine}`,
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { key: 'theme-color', name: 'theme-color', content: color },
+  ],
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+useSeoMeta({
+  ogSiteName: config.seo.siteName,
+  twitterCard: 'summary_large_image',
+})
+
+defineRobotMeta()
+</script>
+
+<template>
+  <UHeader :links="links">
+    <template #logo>
+      <template v-if="config.header?.logo?.dark || config.header?.logo?.light">
+        <UColorModeImage class="h-6 w-auto" :light="config.header?.logo?.light!" :dark="config.header?.logo?.dark!" :alt="config.header?.logo?.alt!" />
+      </template>
+      <div v-else class="flex items-center gap-2">
+        <UAvatar src="https://esteban-soubiran.site/esteban.webp" alt="Picture of Estéban Soubiran" />
+        <span> {{ config.seo.siteName }} </span>
+      </div>
+    </template>
+    <template #right>
+      <div class="hidden lg:block">
+        <FollowMe :socials="config.socials" />
+      </div>
+      <UTooltip v-if="config.header?.colorMode" class="mr-1 lg:mr-0 lg:ml-2" text="Toggle color mode" placement="bottom">
+        <UColorModeButton />
+      </UTooltip>
+    </template>
+    <template #panel>
+      <UAsideLinks :links="links" />
+      <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
+        <FollowMe :socials="config.socials" />
+      </div>
+    </template>
+  </UHeader>
+
+  <UMain>
+    <NuxtPage />
+  </UMain>
+
+  <UFooter :links="links">
+    <template #left>
+      <UFooterLinks :links="links" />
+    </template>
+    <template #center>
+      <span />
+    </template>
+    <template #right>
+      <FollowMe :socials="config.socials" />
+    </template>
+  </UFooter>
+</template>

components/FollowMe.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { Button } from '@nuxt/ui/dist/runtime/types'
+
+defineProps({
+  socials: {
+    type: Array as PropType<Button[]>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <UButton
+    v-for="(social, index) of socials"
+    :key="index"
+    v-bind="{ color: 'gray', variant: 'ghost', ...social }"
+  />
+</template>