├── .eslintignore ├── .npmrc ├── tsconfig.json ├── public ├── alpine-0.webp ├── alpine-1.webp ├── alpine-2.webp ├── design-tokens-studio.png ├── social-card-preview.png ├── articles │ ├── get-started.webp │ ├── design-tokens.webp │ ├── write-articles.webp │ ├── configure-alpine.webp │ └── joey-banks-LMpaFri1PXk-unsplash.jpg ├── logo-dark.svg └── logo.svg ├── tokens.config.ts ├── renovate.json ├── content ├── 2.articles.md ├── 3.contact.md ├── articles │ ├── 4.design-tokens.md │ ├── 1.get-started.md │ ├── 5.mac-os-ram-magic.md │ ├── 3.write-articles.md │ └── 2.configure.md └── 1.index.md ├── .gitignore ├── .eslintrc.cjs ├── nuxt.config.ts ├── package.json ├── README.md ├── app.config.ts └── .github └── workflows └── studio.yml /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .output 4 | .nuxt -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /public/alpine-0.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/alpine-0.webp -------------------------------------------------------------------------------- /public/alpine-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/alpine-1.webp -------------------------------------------------------------------------------- /public/alpine-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/alpine-2.webp -------------------------------------------------------------------------------- /tokens.config.ts: -------------------------------------------------------------------------------- 1 | import { defineTheme } from 'pinceau' 2 | 3 | export default defineTheme({ 4 | }) 5 | -------------------------------------------------------------------------------- /public/design-tokens-studio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/design-tokens-studio.png -------------------------------------------------------------------------------- /public/social-card-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/social-card-preview.png -------------------------------------------------------------------------------- /public/articles/get-started.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/articles/get-started.webp -------------------------------------------------------------------------------- /public/articles/design-tokens.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/articles/design-tokens.webp -------------------------------------------------------------------------------- /public/articles/write-articles.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/articles/write-articles.webp -------------------------------------------------------------------------------- /public/articles/configure-alpine.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/articles/configure-alpine.webp -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ], 5 | "lockFileMaintenance": { 6 | "enabled": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /content/2.articles.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Articles' 3 | layout: 'page' 4 | --- 5 | 6 | ::articles-list 7 | --- 8 | path: articles 9 | --- 10 | :: 11 | -------------------------------------------------------------------------------- /public/articles/joey-banks-LMpaFri1PXk-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DarkGhostHunter/Blog/main/public/articles/joey-banks-LMpaFri1PXk-unsplash.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_Store 8 | coverage 9 | dist 10 | sw.* 11 | .env 12 | .output 13 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@nuxt/eslint-config', 4 | rules: { 5 | 'vue/max-attributes-per-line': 'off', 6 | 'vue/multi-word-component-names': 'off' 7 | } 8 | } -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | // https://github.com/nuxt-themes/alpine 3 | extends: '@nuxt-themes/alpine', 4 | 5 | modules: [ 6 | // https://github.com/nuxt-modules/plausible 7 | '@nuxtjs/plausible', 8 | // https://github.com/nuxt/devtools 9 | '@nuxt/devtools' 10 | ] 11 | }) 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alpine-starter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxi dev", 7 | "build": "nuxi build", 8 | "generate": "nuxi generate", 9 | "preview": "nuxi preview", 10 | "lint": "eslint ." 11 | }, 12 | "devDependencies": { 13 | "@nuxt-themes/alpine": "latest", 14 | "@nuxt/devtools": "^0.8.5", 15 | "@nuxt/eslint-config": "^0.2.0", 16 | "@nuxtjs/plausible": "^0.2.3", 17 | "@types/node": "^20.7.1", 18 | "eslint": "^8.50.0", 19 | "nuxt": "^3.9.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /content/3.contact.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Contact' 3 | layout: 'default' 4 | # Custom og:image 5 | --- 6 | 7 | # Get in touch 8 | 9 | ::contact-form 10 | --- 11 | fields: 12 | - type: 'text' 13 | name: 'name' 14 | label: 'Your name' 15 | required: true 16 | 17 | - type: 'email' 18 | name: 'email' 19 | label: 'Your email' 20 | required: true 21 | 22 | - type: 'text' 23 | name: 'subject' 24 | label: 'Subject' 25 | required: false 26 | 27 | - type: 'textarea' 28 | name: 'message' 29 | label: 'Message' 30 | required: true 31 | --- 32 | :: 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Alpine Starter 2 | 3 | Starter template for [Alpine](https://alpine.nuxt.space). 4 | 5 | ## Clone 6 | 7 | Clone the repository (using `nuxi`): 8 | 9 | ```bash 10 | npx nuxi init -t themes/alpine 11 | ``` 12 | 13 | ## Setup 14 | 15 | Install dependencies: 16 | 17 | ```bash 18 | pnpm install 19 | ``` 20 | 21 | ## Development 22 | 23 | ```bash 24 | pnpm dev 25 | ``` 26 | 27 | ## Edge Side Rendering 28 | 29 | Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments. 30 | 31 | Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets). 32 | 33 | ```bash 34 | pnpm build 35 | ``` 36 | 37 | ## Static Generation 38 | 39 | Use the `generate` command to build your application. 40 | 41 | The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting. 42 | 43 | ```bash 44 | pnpm generate 45 | ``` 46 | 47 | ## Preview build 48 | 49 | You might want to preview the result of your build locally, to do so, run the following command: 50 | 51 | ```bash 52 | pnpm preview 53 | ``` 54 | 55 | --- 56 | 57 | For a detailed explanation of how things work, check out [Alpine](https://alpine.nuxt.space). 58 | -------------------------------------------------------------------------------- /content/articles/4.design-tokens.md: -------------------------------------------------------------------------------- 1 | --- 2 | cover: /articles/design-tokens.webp 3 | date: 2022-08-23 4 | layout: article 5 | --- 6 | 7 | # Customize Alpine 8 | 9 | Leverage the `tokens.config.ts` to give your identity to Alpine. 10 | 11 | Look at the [default tokens config](https://github.com/nuxt-themes/alpine/blob/main/tokens.config.ts) to check all the Alpine related Design Tokens. 12 | 13 | Alpine is also powered by [@nuxt-themes/tokens](https://www.npmjs.com/package/@nuxt-themes/tokens), see the [package tokens.config.ts](https://unpkg.com/@nuxt-themes/tokens@latest/dist/tokens.config.ts). 14 | 15 | You can configure all the theme tokens to change the apperance of Alpine by creating a `tokens.config.ts` in your project: 16 | 17 | ```ts 18 | import { defineTheme } from 'pinceau' 19 | 20 | export default defineTheme({ 21 | alpine: { 22 | body: { 23 | // Update the background color in light & dark mode 24 | backgroundColor: { 25 | initial: '#f8fafc', 26 | dark: '#0f172a' 27 | } 28 | } 29 | } 30 | }) 31 | ``` 32 | 33 | If you are using [Nuxt Studio](https://nuxt.studio), you can use an UI to update the `token.config.ts` of your Alpine project: 34 | 35 | [![design-tokens-studio.png](/design-tokens-studio.png)](https://nuxt.studio) 36 | -------------------------------------------------------------------------------- /app.config.ts: -------------------------------------------------------------------------------- 1 | export default defineAppConfig({ 2 | alpine: { 3 | title: 'Alpine', 4 | description: 'The minimalist blog theme', 5 | image: { 6 | src: '/social-card-preview.png', 7 | alt: 'An image showcasing my project.', 8 | width: 400, 9 | height: 300 10 | }, 11 | header: { 12 | position: 'right', // possible value are : | 'left' | 'center' | 'right' 13 | logo: { 14 | path: '/logo.svg', // path of the logo 15 | pathDark: '/logo-dark.svg', // path of the logo in dark mode, leave this empty if you want to use the same logo 16 | alt: 'alpine' // alt of the logo 17 | } 18 | }, 19 | footer: { 20 | credits: { 21 | enabled: true, // possible value are : true | false 22 | repository: 'https://www.github.com/nuxt-themes/alpine' // our github repository 23 | }, 24 | navigation: true, // possible value are : true | false 25 | alignment: 'center', // possible value are : 'none' | 'left' | 'center' | 'right' 26 | message: 'Follow me on' // string that will be displayed in the footer (leave empty or delete to disable) 27 | }, 28 | socials: { 29 | twitter: 'nuxtlabs', 30 | instagram: 'atinuxt', 31 | linkedin: { 32 | icon: 'uil:linkedin', 33 | label: 'LinkedIn', 34 | href: 'https://www.linkedin.com/company/nuxtlabs' 35 | } 36 | }, 37 | form: { 38 | successMessage: 'Message sent. Thank you!' 39 | } 40 | } 41 | }) 42 | -------------------------------------------------------------------------------- /content/1.index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | head.title: Alpine 4 | description: An open source blog theme powered by Nuxt. 5 | title: About 6 | --- 7 | 8 | ::hero 9 | --- 10 | image: '/alpine-0.webp' 11 | --- 12 | #title 13 | Hi, I am Alpine. 14 | #description 15 | - An [open source blog theme](https://github.com/nuxt-themes/alpine) powered by [Nuxt Content](https://content.nuxtjs.org), editable on [Nuxt Studio](https://nuxt.studio). 16 | - Write pages in Markdown and Vue components with the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc). 17 | - Use [**30+ built-in**](https://elements.nuxt.space) components in your Markdown pages. 18 | :: 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. 21 | 22 | Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. 23 | 24 | ::gallery 25 | --- 26 | images: 27 | - /alpine-0.webp 28 | - /alpine-1.webp 29 | - /alpine-2.webp 30 | --- 31 | :: 32 | -------------------------------------------------------------------------------- /content/articles/1.get-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | cover: /articles/get-started.webp 3 | author: 4 | name: Sébastien Chopin 5 | avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg 6 | link: https://twitter.com/atinux 7 | date: 2022-08-23 8 | layout: article 9 | --- 10 | 11 | # Get started with Alpine 12 | 13 | Creating a blog with Alpine is a command away, as well as deploying to many platforms. 14 | 15 | ## Create a blog 16 | 17 | Open a terminal an run the following command: 18 | 19 | ```bash 20 | npx nuxi@latest init -t themes/alpine 21 | ``` 22 | 23 | ## Dependencies 24 | 25 | Next, go to to `my-blog/` directory and install the dependencies: 26 | 27 | ```bash 28 | npm install 29 | ``` 30 | 31 | ## Development 32 | 33 | Start the development server on port 3000: 34 | 35 | ```bash 36 | npm run dev 37 | ``` 38 | 39 | Next, you can start creating your content in Markdown in the `content/` directory. 40 | 41 | 42 | ## Deploy 43 | 44 | ### Static hosting 45 | 46 | You can deploy Alpine to any static hosting by running the following command: 47 | 48 | ```bash 49 | npm run generate 50 | ``` 51 | 52 | This command will create a `dist/` directory with the compiled files ready to be uploaded to any static hosting. 53 | 54 | ### Edge platforms 55 | 56 | Alpine supports deploying to the following platforms with **zero configuration**: 57 | 58 | - [Vercel](https://vercel.com) 59 | - [Netlify](https://netlify.com) 60 | - [and more...](https://v3.nuxtjs.org/guide/deploy/presets#supported-hosting-providers) 61 | 62 | ### Node server 63 | 64 | You can deploy Alpine to a Node server by running the following command: 65 | 66 | ```bash 67 | npm run build 68 | ``` 69 | 70 | This command will create a `.output/` directory with the compiled files ready to be uploaded to any Node server. 71 | 72 | To start the production server, run the following command: 73 | 74 | ```bash 75 | node .output/server/index.mjs 76 | ``` 77 | -------------------------------------------------------------------------------- /.github/workflows/studio.yml: -------------------------------------------------------------------------------- 1 | 2 | name: studio-nuxt-build 3 | run-name: studio nuxt build 4 | 5 | on: 6 | # Runs on pushes targeting the default branch 7 | push: 8 | branches: 9 | - 'main' 10 | 11 | # Allows you to run this workflow manually from the Actions tab 12 | workflow_dispatch: 13 | 14 | # Add write workflow permissions 15 | permissions: 16 | contents: write 17 | 18 | # Allow one concurrent deployment 19 | concurrency: 20 | group: "pages" 21 | cancel-in-progress: true 22 | 23 | jobs: 24 | # Build job 25 | build-and-deploy: 26 | runs-on: ${{ matrix.os }} 27 | defaults: 28 | run: 29 | working-directory: . 30 | 31 | strategy: 32 | matrix: 33 | os: [ubuntu-latest] 34 | node: [18] 35 | 36 | steps: 37 | - name: Checkout 38 | uses: actions/checkout@v4 39 | 40 | - name: Identify package manager 41 | id: pkgman 42 | run: | 43 | cache=`[ -f "./pnpm-lock.yaml" ] && echo "pnpm" || ([ -f "./package-lock.json" ] && echo "npm" || ([ -f "./yarn.lock" ] && echo "yarn" || echo ""))` 44 | package_manager=`[ ! -z "$cache" ] && echo "$cache" || echo "pnpm"` 45 | echo "cache=$cache" >> $GITHUB_OUTPUT 46 | echo "package_manager=$package_manager" >> $GITHUB_OUTPUT 47 | 48 | - uses: pnpm/action-setup@v2.4.0 49 | if: ${{ steps.pkgman.outputs.package_manager == 'pnpm' }} 50 | name: Install pnpm 51 | id: pnpm-install 52 | with: 53 | version: 8 54 | 55 | - uses: actions/setup-node@v3 56 | with: 57 | version: ${{ matrix.node }} 58 | cache: ${{ steps.pkgman.outputs.cache }} 59 | 60 | - name: Install dependencies 61 | run: ${{ steps.pkgman.outputs.package_manager }} install 62 | 63 | - name: Install @nuxthq/studio 64 | run: ${{ steps.pkgman.outputs.package_manager }} add -D @nuxthq/studio 65 | 66 | - name: Create .nuxtrc 67 | run: echo $'\nautoImport=true\nmodules[]=@nuxthq/studio' >> .nuxtrc 68 | 69 | - name: Generate 70 | run: npx nuxi generate 71 | env: 72 | NUXT_PUBLIC_STUDIO_API_URL: https://api.nuxt.studio 73 | NUXT_PUBLIC_STUDIO_TOKENS: 999161de1a90e7bb6d4423eab02b72c8bd692026bc4b813ea7eb90b66ca8fcc7 74 | 75 | 76 | - name: Add .nojekyll file 77 | run: touch .output/public/.nojekyll 78 | 79 | # Deployment job 80 | - name: Deploy 🚀 81 | uses: JamesIves/github-pages-deploy-action@v4 82 | with: 83 | folder: ./.output/public 84 | -------------------------------------------------------------------------------- /content/articles/5.mac-os-ram-magic.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2023-10-14 3 | layout: article 4 | title: Don't worry too much about macOS Ram 5 | description: Another description 6 | cover: /articles/joey-banks-LMpaFri1PXk-unsplash.jpg 7 | --- 8 | 9 | # Don't worry too much about macOS Ram 10 | 11 | ![Mac mini - Joey Banks @ Unsplash](/articles/joey-banks-LMpaFri1PXk-unsplash.jpg) 12 | 13 | I usually try to tell users who are putting their eyes in a Mac to always max out the RAM part of their machines. 14 | 15 | The purpose of focusing on RAM rather than a better CPU or storage size it's because it's the only thing that can affect performance and cannot be upgraded later. Well, you _can_ by simply buying a whole another machine. 16 | 17 | For sotfware development, you always should get the best CPU and RAM you can. From shoving Docker images and compiling binaries while looking the error on Chrome, there is always a need for both of them. RAM upgrades being the _cheapest_. 18 | 19 | 20 | 21 | Alex Ziskind's new video decided to test three machines: 22 | 23 | - Macbook Air M2 8GB / 256GB 24 | - Macbook Pro M2 8GB / 512GB 25 | - Macbook Pro M2 16GB / 256GB 26 | 27 | Anyone would say that the 8GB machines would die before reaching the finish line, but macOS is very smart to manage RAM and avoid slowing the whole machine. 28 | 29 | It's impressive how much software Alex throws at them, eating RAM and CPU while at it, and surviving. That includes heavy XCode and Docker development. 30 | 31 | The conclusion is very easy to understand: the base model is a great start, and will survive some fiery battles, but the 16GB RAM machine will offer the most _snappier_ experience. 32 | 33 | For the 512GB SSD model, it will have an edge if you need to process giant sets of sequential data due to the SSD speed (3GB/s), which is double than the base model (1.5GB/s). 34 | 35 | Even that last part is _debatable_. Most processing (if not all) done by the CPU is done in the data that is in the RAM, which is miles faster than an SSD. While _filling_ the RAM may be a point for a faster, sizeable SSD, you won't be doing just one thing on your machine, and that's is a great argument to upgrade the RAM. 36 | 37 | The final takeaway is that you shouldn't panic about your RAM. The memory management of macOS does magic, mostly helped by a lightspeed RAM access (100GB/s), data compression, cached data, and smart swap management. 38 | 39 | Working on Docker and Jetbrains on 8GB should be fine, but of course 16GB would be better. 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /content/articles/3.write-articles.md: -------------------------------------------------------------------------------- 1 | --- 2 | cover: /articles/write-articles.webp 3 | date: 2022-08-23 4 | description: Writing Markdown articles in Alpine is straightforward. 5 | layout: article 6 | --- 7 | 8 | # Write Articles 9 | 10 | Write Markdown articles in Alpine is straightforward. 11 | 12 | ## Create an articles list 13 | 14 | Create a new file in the `content/` directory: 15 | 16 | ```bash 17 | touch content/2.articles.md 18 | ``` 19 | 20 | The numbered prefix determines the order of the menu items. 21 | 22 | In this file, use the `articles-list` component to display the list of articles: 23 | 24 | ```md [2.articles.md] 25 | --- 26 | title: 'Articles' 27 | layout: 'page' 28 | --- 29 | 30 | ::articles-list 31 | --- 32 | path: articles 33 | --- 34 | :: 35 | 36 | ``` 37 | 38 | The `path` prop corresponds to the directory where the articles are stored. 39 | 40 | ## Display an article in the list 41 | 42 | Create a new file in the `/content/articles` directory: 43 | 44 | ```bash 45 | mkdir content/articles 46 | touch content/articles/1.my-new-article.md 47 | ``` 48 | 49 | For your article to be correctly displayed in the [articles list](/articles), define a `cover` and `date` property in the frontmatter: 50 | 51 | ```yaml [content/articles/1.my-new-article.md] 52 | --- 53 | cover: path/to/cover 54 | date: 2022-08-23 55 | --- 56 | ``` 57 | 58 | The `cover` property can be a local path relative to the `/public` directory or an external URL. 59 | 60 | Your article will now be displayed in the list with its filename as a default title. 61 | 62 | ## Edit your article 63 | 64 | Under the frontmatter block, enter a Markdown `h1` tag and a line of text: 65 | 66 | ```md [content/articles/1.my-new-article.md] 67 | --- 68 | cover: path/to/cover 69 | date: 2022-08-23 70 | --- 71 | 72 | # An awesome article 73 | 74 | This article is little by size but big by heart. 75 | ``` 76 | 77 | Your article will now be displayed in the list with the title and description you wrote in Markdown. 78 | 79 | ## Override title and description 80 | 81 | If you want to change the title and description displayed on the list and in the meta tags of the article, add the `title` and `description` property to your frontmatter: 82 | 83 | ```md[content/articles/1.my-new-article.md] 84 | --- 85 | cover: path/to/cover 86 | date: 2022-08-23 87 | title: Another title 88 | description: Another description 89 | --- 90 | ``` 91 | 92 | You are now ready to edit your article and create new ones! 93 | 94 | ## Optional Arguments 95 | 96 | In the frontmatter block, you can pass additional options for displaying your article, such as displaying badges on the image: 97 | 98 | ```md 99 | --- 100 | cover: path/to/cover 101 | date: 2022-08-23 102 | badges: [{ 103 | color: 'white', 104 | bg: 'rgba(0, 0, 0, 0.3)', 105 | content: 'Technology' 106 | }] 107 | --- 108 | ``` 109 | 110 | ## Read more 111 | 112 | Alpine is a Nuxt theme using the Content module in `documentDriven` mode. 113 | 114 | 👉 Learn more in the [Nuxt Content documentation](https://content.nuxtjs.org/). 115 | -------------------------------------------------------------------------------- /content/articles/2.configure.md: -------------------------------------------------------------------------------- 1 | --- 2 | cover: /articles/configure-alpine.webp 3 | author: 4 | name: Clément Ollivier 5 | avatarUrl: https://pbs.twimg.com/profile_images/1370286658432724996/ZMSDzzIi_400x400.jpg 6 | link: https://twitter.com/clemcodes 7 | date: 2022-08-23 8 | description: Learn how to configure Alpine with the app.config.ts file. 9 | layout: article 10 | --- 11 | 12 | # Configure Alpine 13 | 14 | To configure meta tags, social links or even the Alpine theme display, update the `alpine` key in the `app.config.ts` at the root of your project: 15 | 16 | ```ts [app.config.ts] 17 | export default defineAppConfig({ 18 | alpine: { 19 | /* Alpine configuration goes here */ 20 | } 21 | } 22 | ``` 23 | 24 | You can look at the [default config](https://github.com/nuxt-themes/alpine/tree/main/app.config.ts). 25 | 26 | The [config schema](https://github.com/nuxt-themes/alpine/tree/main/app.config.ts) also gives comments on all the configuration parameters. 27 | 28 | ## Meta tags 29 | 30 | Configure the title, description and social image of your website: 31 | 32 | ```ts [app.config.ts] 33 | export default defineAppConfig({ 34 | alpine: { 35 | title: 'Alpine', 36 | description: 'The minimalist blog theme', 37 | image: '/social-card-preview.png', 38 | // image can also be an object: 39 | image: { 40 | src: '/social-card-preview.png', 41 | alt: 'An image showcasing my project.', 42 | width: 400, 43 | height: 300 44 | } 45 | } 46 | }) 47 | ``` 48 | 49 | ## Social links 50 | 51 | To configure the social links displayed in the footer, use the `socials` property: 52 | 53 | ```ts [app.config.ts] 54 | export default defineAppConfig({ 55 | alpine: { 56 | socials: { 57 | twitter: 'nuxtlabs', 58 | instagram: 'wearenuxt', 59 | linkedin: { 60 | icon: 'uil:linkedin', 61 | label: 'LinkedIn', 62 | href: 'https://www.linkedin.com/company/nuxtlabs' 63 | }, 64 | mastodon: { 65 | icon: 'simple-icons:mastodon', 66 | label: 'Mastodon', 67 | href: 'https://m.webtoo.ls/@nuxt', 68 | rel: 'me' 69 | } 70 | } 71 | } 72 | }) 73 | ``` 74 | 75 | ## Theme display 76 | 77 | Alpine Header and Footer can also be customized via the `app.config.ts` file: 78 | 79 | ```ts [app.config.ts] 80 | defineAppConfig({ 81 | alpine: { 82 | // Remove header with header: false 83 | header: { 84 | position: 'inline', // possible value are : 'none' | 'left' | 'center' | 'right' | 'inline' 85 | logo: false 86 | }, 87 | // Remove header with footer: false 88 | footer: { 89 | credits: { 90 | enabled: true, // possible value are : true | false 91 | repository: 'https://www.github.com/nuxt-themes/alpine' // our github repository 92 | }, 93 | navigation: false, // possible value are : true | false 94 | position: 'center', // possible value are : 'none' | 'left' | 'center' | 'right' 95 | message: 'Follow me on' // string that will be displayed on the footer (leave empty or delete to disable) 96 | } 97 | // Disable back to top button: false 98 | backToTop: { 99 | text: 'Back to top', 100 | icon: 'material-symbols:arrow-upward' 101 | } 102 | } 103 | }) 104 | ``` 105 | -------------------------------------------------------------------------------- /public/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | --------------------------------------------------------------------------------