Skip to content

Commit

Permalink
chore(app): initial commit by Nuxt Studio
Browse files Browse the repository at this point in the history
  • Loading branch information
avinean committed Mar 5, 2024
0 parents commit da18a44
Show file tree
Hide file tree
Showing 29 changed files with 579 additions and 0 deletions.
4 changes: 4 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
dist
node_modules
.output
.nuxt
8 changes: 8 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = {
root: true,
extends: '@nuxt/eslint-config',
rules: {
'vue/max-attributes-per-line': 'off',
'vue/multi-word-component-names': 'off'
}
}
12 changes: 12 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
node_modules
*.iml
.idea
*.log*
.nuxt
.vscode
.DS_Store
coverage
dist
sw.*
.env
.output
2 changes: 2 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
shamefully-hoist=true
strict-peer-dependencies=false
57 changes: 57 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# Alpine Starter

Starter template for [Alpine](https://alpine.nuxt.space).

## Clone

Clone the repository (using `nuxi`):

```bash
npx nuxi init -t themes/alpine
```

## Setup

Install dependencies:

```bash
pnpm install
```

## Development

```bash
pnpm dev
```

## Edge Side Rendering

Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments.

Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets).

```bash
pnpm build
```

## Static Generation

Use the `generate` command to build your application.

The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting.

```bash
pnpm generate
```

## Preview build

You might want to preview the result of your build locally, to do so, run the following command:

```bash
pnpm preview
```

---

For a detailed explanation of how things work, check out [Alpine](https://alpine.nuxt.space).
41 changes: 41 additions & 0 deletions app.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
export default defineAppConfig({
alpine: {
title: 'Alpine',
description: 'The minimalist blog theme',
image: {
src: '/social-card-preview.png',
alt: 'An image showcasing my project.',
width: 400,
height: 300
},
header: {
position: 'right', // possible value are : | 'left' | 'center' | 'right'
logo: {
path: '/logo.svg', // path of the logo
pathDark: '/logo-dark.svg', // path of the logo in dark mode, leave this empty if you want to use the same logo
alt: 'alpine' // alt of the logo
}
},
footer: {
credits: {
enabled: true, // possible value are : true | false
repository: 'https://www.github.com/nuxt-themes/alpine' // our github repository
},
navigation: true, // possible value are : true | false
alignment: 'center', // possible value are : 'none' | 'left' | 'center' | 'right'
message: 'Follow me on' // string that will be displayed in the footer (leave empty or delete to disable)
},
socials: {
twitter: 'nuxtlabs',
instagram: 'atinuxt',
linkedin: {
icon: 'uil:linkedin',
label: 'LinkedIn',
href: 'https://www.linkedin.com/company/nuxtlabs'
}
},
form: {
successMessage: 'Message sent. Thank you!'
}
}
})
33 changes: 33 additions & 0 deletions content/1.index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
layout: default
head:
title: Alpine
description: An open source blog theme powered by Nuxt.
title: About
---

::hero
---
image: /alpine-0.webp
---
#title
Hi, I am Alpine.

#description
- 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).
- Write pages in Markdown and Vue components with the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
- Use [**30+ built-in**](https://elements.nuxt.space) components in your Markdown pages.
::

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.

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.

::gallery
---
images:
- /alpine-0.webp
- /alpine-1.webp
- /alpine-2.webp
---
::
7 changes: 7 additions & 0 deletions content/2.articles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Articles
layout: page
---

::articles-list{path="articles"}
::
28 changes: 28 additions & 0 deletions content/3.contact.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: Contact
layout: default
---

# Get in touch

::contact-form
---
fields:
- type: text
name: name
label: Your name
required: true
- type: email
name: email
label: Your email
required: true
- type: text
name: subject
label: Subject
required: false
- type: textarea
name: message
label: Message
required: true
---
::
75 changes: 75 additions & 0 deletions content/articles/1.get-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
---
cover: /articles/get-started.webp
author:
name: Sébastien Chopin
avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
link: https://twitter.com/atinux
date: 2022-08-23T00:00:00.000Z
layout: article
---

# Get started with Alpine

Creating a blog with Alpine is a command away, as well as deploying to many platforms.

## Create a blog

Open a terminal an run the following command:

```bash
npx nuxi@latest init -t themes/alpine
```

## Dependencies

Next, go to to `my-blog/` directory and install the dependencies:

```bash
npm install
```

## Development

Start the development server on port 3000:

```bash
npm run dev
```

Next, you can start creating your content in Markdown in the `content/` directory.

## Deploy

### Static hosting

You can deploy Alpine to any static hosting by running the following command:

```bash
npm run generate
```

This command will create a `dist/` directory with the compiled files ready to be uploaded to any static hosting.

### Edge platforms

Alpine supports deploying to the following platforms with **zero configuration**:

- [Vercel](https://vercel.com)
- [Netlify](https://netlify.com)
- [and more...](https://v3.nuxtjs.org/guide/deploy/presets#supported-hosting-providers)

### Node server

You can deploy Alpine to a Node server by running the following command:

```bash
npm run build
```

This command will create a `.output/` directory with the compiled files ready to be uploaded to any Node server.

To start the production server, run the following command:

```bash
node .output/server/index.mjs
```
104 changes: 104 additions & 0 deletions content/articles/2.configure.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
---
cover: /articles/configure-alpine.webp
author:
name: Clément Ollivier
avatarUrl: https://pbs.twimg.com/profile_images/1370286658432724996/ZMSDzzIi_400x400.jpg
link: https://twitter.com/clemcodes
date: 2022-08-23T00:00:00.000Z
description: Learn how to configure Alpine with the app.config.ts file.
layout: article
---

# Configure Alpine

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:

```ts [app.config.ts]
export default defineAppConfig({
alpine: {
/* Alpine configuration goes here */
}
}
```
You can look at the [default config](https://github.com/nuxt-themes/alpine/tree/main/app.config.ts).
The [config schema](https://github.com/nuxt-themes/alpine/tree/main/app.config.ts) also gives comments on all the configuration parameters.
## Meta tags
Configure the title, description and social image of your website:
```ts [app.config.ts]
export default defineAppConfig({
alpine: {
title: 'Alpine',
description: 'The minimalist blog theme',
image: '/social-card-preview.png',
// image can also be an object:
image: {
src: '/social-card-preview.png',
alt: 'An image showcasing my project.',
width: 400,
height: 300
}
}
})
```
## Social links
To configure the social links displayed in the footer, use the `socials` property:
```ts [app.config.ts]
export default defineAppConfig({
alpine: {
socials: {
twitter: 'nuxtlabs',
instagram: 'wearenuxt',
linkedin: {
icon: 'uil:linkedin',
label: 'LinkedIn',
href: 'https://www.linkedin.com/company/nuxtlabs'
},
mastodon: {
icon: 'simple-icons:mastodon',
label: 'Mastodon',
href: 'https://m.webtoo.ls/@nuxt',
rel: 'me'
}
}
}
})
```
## Theme display
Alpine Header and Footer can also be customized via the `app.config.ts` file:
```ts [app.config.ts]
defineAppConfig({
alpine: {
// Remove header with header: false
header: {
position: 'inline', // possible value are : 'none' | 'left' | 'center' | 'right' | 'inline'
logo: false
},
// Remove header with footer: false
footer: {
credits: {
enabled: true, // possible value are : true | false
repository: 'https://www.github.com/nuxt-themes/alpine' // our github repository
},
navigation: false, // possible value are : true | false
position: 'center', // possible value are : 'none' | 'left' | 'center' | 'right'
message: 'Follow me on' // string that will be displayed on the footer (leave empty or delete to disable)
}
// Disable back to top button: false
backToTop: {
text: 'Back to top',
icon: 'material-symbols:arrow-upward'
}
}
})
```
Loading

0 comments on commit da18a44

Please sign in to comment.