{{ appConfig }}
7 |
8 |
--------------------------------------------------------------------------------
/playground/components/content/ArticlesList.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {{ studio.components }}
7 |
8 |
--------------------------------------------------------------------------------
/playground/content/1.index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: About
3 | ---
4 |
5 | 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.
6 |
7 | 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.
8 |
--------------------------------------------------------------------------------
/playground/content/2.articles.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Articles'
3 | ---
4 |
5 | :articles-list
6 |
--------------------------------------------------------------------------------
/playground/content/4.app-config.md:
--------------------------------------------------------------------------------
1 | # App Config
2 |
3 | :app-config
4 |
--------------------------------------------------------------------------------
/playground/content/5.components.md:
--------------------------------------------------------------------------------
1 | # Components
2 |
3 | :studio-components
4 |
--------------------------------------------------------------------------------
/playground/content/articles/1.get-started.md:
--------------------------------------------------------------------------------
1 | # Get started with Alpine
2 |
3 | Creating a blog with Alpine is a command away, as well as deploying to many platforms.
4 |
5 | ## Create a blog
6 |
7 | Open a terminal an run the following command:
8 |
9 | ```bash
10 | npx nuxi@latest init -t themes/alpine
11 | ```
12 |
13 | ## Dependencies
14 |
15 | Next, go to to `my-blog/` directory and install the dependencies:
16 |
17 | ```bash
18 | npm install
19 | ```
20 |
21 | ## Development
22 |
23 | Start the development server on port 3000:
24 |
25 | ```bash
26 | npm run dev
27 | ```
28 |
29 | Next, you can start creating your content in Markdown in the `content/` directory.
30 |
31 |
32 | ## Deploy
33 |
34 | ### Static hosting
35 |
36 | You can deploy Alpine to any static hosting by running the following command:
37 |
38 | ```bash
39 | npm run generate
40 | ```
41 |
42 | This command will create a `dist/` directory with the compiled files ready to be uploaded to any static hosting.
43 |
44 | ### Edge platforms
45 |
46 | Alpine supports deploying to the following platforms with **zero configuration**:
47 |
48 | - [Vercel](https://vercel.com)
49 | - [Netlify](https://netlify.com)
50 | - [and more...](https://v3.nuxtjs.org/guide/deploy/presets#supported-hosting-providers)
51 |
52 | ### Node server
53 |
54 | You can deploy Alpine to a Node server by running the following command:
55 |
56 | ```bash
57 | npm run build
58 | ```
59 |
60 | This command will create a `.output/` directory with the compiled files ready to be uploaded to any Node server.
61 |
62 | To start the production server, run the following command:
63 |
64 | ```bash
65 | node .output/server/index.mjs
66 | ```
67 |
--------------------------------------------------------------------------------
/playground/content/articles/2.configure.md:
--------------------------------------------------------------------------------
1 | # Configure Alpine
2 |
3 | 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:
4 |
5 | ```ts [app.config.ts]
6 | export default defineAppConfig({
7 | alpine: {
8 | /* Alpine configuration goes here */
9 | }
10 | }
11 | ```
12 |
13 | You can look at the [default config](https://github.com/nuxt-themes/alpine/tree/dev/app.config.ts).
14 |
15 | The [config schema](https://github.com/nuxt-themes/alpine/tree/dev/app.config.ts) also gives comments on all the configuration parameters.
16 |
17 | ## Meta tags
18 |
19 | Configure the title, description and social image of your website:
20 |
21 | ```ts [app.config.ts]
22 | export default defineAppConfig({
23 | alpine: {
24 | title: 'Alpine',
25 | description: 'The minimalist blog theme',
26 | image: '/social-card-preview.png',
27 | // image can also be an object:
28 | image: {
29 | src: '/social-card-preview.png',
30 | alt: 'An image showcasing my project.',
31 | width: 400,
32 | height: 300
33 | }
34 | }
35 | })
36 | ```
37 |
38 | ## Social links
39 |
40 | To configure the social links displayed in the footer, use the `socials` property:
41 |
42 | ```ts [app.config.ts]
43 | export default defineAppConfig({
44 | alpine: {
45 | socials: {
46 | twitter: 'nuxtlabs',
47 | instagram: 'wearenuxt',
48 | linkedin: {
49 | icon: 'uil:linkedin',
50 | label: 'LinkedIn',
51 | href: 'https://www.linkedin.com/company/nuxtlabs'
52 | }
53 | }
54 | }
55 | })
56 | ```
57 |
58 | ## Theme display
59 |
60 | Alpine Header and Footer can also be customized via the `app.config.ts` file:
61 |
62 | ```ts [app.config.ts]
63 | defineAppConfig({
64 | alpine: {
65 | // Remove header with header: false
66 | header: {
67 | position: 'inline', // possible value are : 'none' | 'left' | 'center' | 'right' | 'inline'
68 | logo: false
69 | },
70 | // Remove header with footer: false
71 | footer: {
72 | credits: {
73 | enabled: true, // possible value are : true | false
74 | repository: 'https://www.github.com/nuxt-themes/alpine' // our github repository
75 | },
76 | navigation: false, // possible value are : true | false
77 | position: 'center', // possible value are : 'none' | 'left' | 'center' | 'right'
78 | message: 'Follow me on' // string that will be displayed on the footer (leave empty or delete to disable)
79 | }
80 | })
81 | ```
82 |
--------------------------------------------------------------------------------
/playground/content/articles/3.write-articles.md:
--------------------------------------------------------------------------------
1 | # Write Articles
2 |
3 | Write Markdown articles in Alpine is straightforward.
4 |
5 | ## Create an articles list
6 |
7 | Create a new file in the `content/` directory:
8 |
9 | ```bash
10 | touch content/2.articles.md
11 | ```
12 |
13 | The numbered prefix determines the order of the menu items.
14 |
15 | In this file, use the `articles-list` component to display the list of articles:
16 |
17 | ```md [2.articles.md]
18 | ---
19 | title: 'Articles'
20 | layout: 'page'
21 | ---
22 |
23 | ::articles-list
24 | ---
25 | path: articles
26 | ---
27 | ::
28 |
29 | ```
30 |
31 | The `path` prop corresponds to the directory where the articles are stored.
32 |
33 | ## Display an article in the list
34 |
35 | Create a new file in the `/content/articles` directory:
36 |
37 | ```bash
38 | mkdir content/articles
39 | touch content/articles/1.my-new-article.md
40 | ```
41 |
42 | For your article to be correctly displayed in the [articles list](/articles), define a `cover` and `date` property in the frontmatter:
43 |
44 | ```yaml [content/articles/1.my-new-article.md]
45 | ---
46 | cover: path/to/cover
47 | date: 2022-08-23
48 | ---
49 | ```
50 |
51 | The `cover` property can be a local path relative to the `/public` directory or an external URL.
52 |
53 | Your article will now be displayed in the list with its filename as a default title.
54 |
55 | ## Edit your article
56 |
57 | Under the frontmatter block, enter a Markdown `h1` tag and a line of text:
58 |
59 | ```md [content/articles/1.my-new-article.md]
60 | ---
61 | cover: path/to/cover
62 | date: 2022-08-23
63 | ---
64 |
65 | # An awesome article
66 |
67 | This article is little by size but big by heart.
68 | ```
69 |
70 | Your article will now be displayed in the list with the title and description you wrote in Markdown.
71 |
72 | ## Override title and description
73 |
74 | 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:
75 |
76 | ```md[content/articles/1.my-new-article.md]
77 | ---
78 | cover: path/to/cover
79 | date: 2022-08-23
80 | title: Another title
81 | description: Another description
82 | ---
83 | ```
84 |
85 | You are now ready to edit your article and create new ones!
86 |
87 | ## Read more
88 |
89 | Alpine is a Nuxt theme using the Content module in `documentDriven` mode.
90 |
91 | 👉 Learn more in the [Nuxt Content documentation](https://content.nuxtjs.org/).
92 |
--------------------------------------------------------------------------------
/playground/content/articles/4.design-tokens.md:
--------------------------------------------------------------------------------
1 | # Customize Alpine
2 |
3 | Leverage the `tokens.config.ts` to give your identity to Alpine.
4 |
5 | Look at the [default tokens config](https://github.com/nuxt-themes/alpine/tree/dev/tokens.config.ts) to check all the Alpine related Design Tokens.
6 |
7 | Alpine is also powered by [@nuxt-themes/tokens](https://github.com/nuxt-themes/tokens).
8 |
9 | You can configure all the theme tokens to change the apperance of Alpine.
10 |
--------------------------------------------------------------------------------
/playground/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import { consola } from 'consola'
2 | import { defineNuxtConfig } from 'nuxt/config'
3 |
4 | export default defineNuxtConfig({
5 | extends: '@nuxt/ui-pro',
6 | modules: ['@nuxt/ui', '@nuxt/content', '../src/module', '@nuxt/image'],
7 |
8 | compatibilityDate: '2024-09-11',
9 |
10 | hooks: {
11 | // Set all components to global
12 | 'components:extend': () => {
13 | // components.forEach(component => {
14 | // if (component.pascalName[0] === 'U') {
15 | // component.global = true
16 | // }
17 | // })
18 | },
19 | 'listen': async (_, { getURLs }) => {
20 | const urls = await getURLs()
21 | const tunnelURL = urls.find((u: { type: string }) => u.type === 'tunnel')
22 | if (!tunnelURL) return consola.warn('Could not get Tunnel URL')
23 | consola.box(
24 | 'Nuxt Studio Playground Ready.\n\n'
25 | + '1. Go to https://nuxt.studio/@studio/studio-module\n'
26 | + '2. Paste `' + tunnelURL.url + '` in the Deployed URL field\n'
27 | + '3. Play with the Studio Playground!',
28 | )
29 | },
30 | },
31 |
32 | studio: {
33 | enabled: true,
34 | },
35 | })
36 |
--------------------------------------------------------------------------------
/playground/nuxt.schema.ts:
--------------------------------------------------------------------------------
1 | import { field, group } from '@nuxthq/studio/theme'
2 |
3 | export default defineNuxtSchema({
4 | appConfig: {
5 | header: group({
6 | title: 'Header',
7 | fields: {
8 | title: field({ type: 'string' }),
9 | },
10 | }),
11 | },
12 | })
13 |
--------------------------------------------------------------------------------
/playground/pages/[...slug].vue:
--------------------------------------------------------------------------------
1 |
2 | Initializing the preview...
217 | 220 |{{ error }}
228 | 231 |