diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..a1bd0c8 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +dist +node_modules +.output +.nuxt \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..38db313 --- /dev/null +++ b/.eslintrc.cjs @@ -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' + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..69f6b69 --- /dev/null +++ b/.gitignore @@ -0,0 +1,12 @@ +node_modules +*.iml +.idea +*.log* +.nuxt +.vscode +.DS_Store +coverage +dist +sw.* +.env +.output diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..cf04042 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +shamefully-hoist=true +strict-peer-dependencies=false diff --git a/README.md b/README.md new file mode 100755 index 0000000..7832f38 --- /dev/null +++ b/README.md @@ -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). diff --git a/app.config.ts b/app.config.ts new file mode 100644 index 0000000..8a1e0ea --- /dev/null +++ b/app.config.ts @@ -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!' + } + } +}) diff --git a/content/1.index.md b/content/1.index.md new file mode 100644 index 0000000..9327285 --- /dev/null +++ b/content/1.index.md @@ -0,0 +1,31 @@ +--- +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 +--- +:: diff --git a/content/2.articles.md b/content/2.articles.md new file mode 100644 index 0000000..382bc69 --- /dev/null +++ b/content/2.articles.md @@ -0,0 +1,10 @@ +--- +title: 'Articles' +layout: 'page' +--- + +::articles-list +--- +path: articles +--- +:: diff --git a/content/3.contact.md b/content/3.contact.md new file mode 100644 index 0000000..cf7d3c8 --- /dev/null +++ b/content/3.contact.md @@ -0,0 +1,32 @@ +--- +title: 'Contact' +layout: 'default' +# Custom og:image +--- + +# 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 +--- +:: diff --git a/content/articles/1.get-started.md b/content/articles/1.get-started.md new file mode 100644 index 0000000..5ecac5b --- /dev/null +++ b/content/articles/1.get-started.md @@ -0,0 +1,76 @@ +--- +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-23 +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 +``` diff --git a/content/articles/2.configure.md b/content/articles/2.configure.md new file mode 100644 index 0000000..570907f --- /dev/null +++ b/content/articles/2.configure.md @@ -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-23 +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' + } + } +}) +``` diff --git a/content/articles/3.write-articles.md b/content/articles/3.write-articles.md new file mode 100644 index 0000000..ebedf07 --- /dev/null +++ b/content/articles/3.write-articles.md @@ -0,0 +1,114 @@ +--- +cover: /articles/write-articles.webp +date: 2022-08-23 +description: Writing Markdown articles in Alpine is straightforward. +layout: article +--- + +# Write Articles + +Write Markdown articles in Alpine is straightforward. + +## Create an articles list + +Create a new file in the `content/` directory: + +```bash +touch content/2.articles.md +``` + +The numbered prefix determines the order of the menu items. + +In this file, use the `articles-list` component to display the list of articles: + +```md [2.articles.md] +--- +title: 'Articles' +layout: 'page' +--- + +::articles-list +--- +path: articles +--- +:: + +``` + +The `path` prop corresponds to the directory where the articles are stored. + +## Display an article in the list + +Create a new file in the `/content/articles` directory: + +```bash +mkdir content/articles +touch content/articles/1.my-new-article.md +``` + +For your article to be correctly displayed in the [articles list](/articles), define a `cover` and `date` property in the frontmatter: + +```yaml [content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +--- +``` + +The `cover` property can be a local path relative to the `/public` directory or an external URL. + +Your article will now be displayed in the list with its filename as a default title. + +## Edit your article + +Under the frontmatter block, enter a Markdown `h1` tag and a line of text: + +```md [content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +--- + +# An awesome article + +This article is little by size but big by heart. +``` + +Your article will now be displayed in the list with the title and description you wrote in Markdown. + +## Override title and description + +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: + +```md[content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +title: Another title +description: Another description +--- +``` + +You are now ready to edit your article and create new ones! + +## Optional Arguments + +In the frontmatter block, you can pass additional options for displaying your article, such as displaying badges on the image: + +```md +--- +cover: path/to/cover +date: 2022-08-23 +badges: [{ + color: 'white', + bg: 'rgba(0, 0, 0, 0.3)', + content: 'Technology' +}] +--- +``` + +## Read more + +Alpine is a Nuxt theme using the Content module in `documentDriven` mode. + +👉 Learn more in the [Nuxt Content documentation](https://content.nuxtjs.org/). diff --git a/content/articles/4.design-tokens.md b/content/articles/4.design-tokens.md new file mode 100644 index 0000000..851c7c7 --- /dev/null +++ b/content/articles/4.design-tokens.md @@ -0,0 +1,35 @@ +--- +cover: /articles/design-tokens.webp +date: 2022-08-23 +layout: article +--- + +# Customize Alpine + +Leverage the `tokens.config.ts` to give your identity to Alpine. + +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. + +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). + +You can configure all the theme tokens to change the apperance of Alpine by creating a `tokens.config.ts` in your project: + +```ts +import { defineTheme } from 'pinceau' + +export default defineTheme({ + alpine: { + body: { + // Update the background color in light & dark mode + backgroundColor: { + initial: '#f8fafc', + dark: '#0f172a' + } + } + } +}) +``` + +If you are using [Nuxt Studio](https://nuxt.studio), you can use an UI to update the `token.config.ts` of your Alpine project: + +[![design-tokens-studio.png](/design-tokens-studio.png)](https://nuxt.studio) diff --git a/nuxt.config.ts b/nuxt.config.ts new file mode 100755 index 0000000..b0f3878 --- /dev/null +++ b/nuxt.config.ts @@ -0,0 +1,11 @@ +export default defineNuxtConfig({ + // https://github.com/nuxt-themes/alpine + extends: '@nuxt-themes/alpine', + + modules: [ + // https://github.com/nuxt-modules/plausible + '@nuxtjs/plausible', + // https://github.com/nuxt/devtools + '@nuxt/devtools' + ] +}) diff --git a/package.json b/package.json new file mode 100755 index 0000000..809a918 --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "alpine-starter", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "nuxi dev", + "build": "nuxi build", + "generate": "nuxi generate", + "preview": "nuxi preview", + "lint": "eslint ." + }, + "devDependencies": { + "@nuxt-themes/alpine": "latest", + "@nuxt/devtools": "^0.8.5", + "@nuxt/eslint-config": "^0.2.0", + "@nuxtjs/plausible": "^0.2.3", + "@types/node": "^20.7.1", + "eslint": "^8.50.0", + "nuxt": "^3.7.4" + } +} diff --git a/public/alpine-0.webp b/public/alpine-0.webp new file mode 100644 index 0000000..52db72a Binary files /dev/null and b/public/alpine-0.webp differ diff --git a/public/alpine-1.webp b/public/alpine-1.webp new file mode 100644 index 0000000..b80e9d9 Binary files /dev/null and b/public/alpine-1.webp differ diff --git a/public/alpine-2.webp b/public/alpine-2.webp new file mode 100644 index 0000000..9070c68 Binary files /dev/null and b/public/alpine-2.webp differ diff --git a/public/articles/configure-alpine.webp b/public/articles/configure-alpine.webp new file mode 100644 index 0000000..f64beb7 Binary files /dev/null and b/public/articles/configure-alpine.webp differ diff --git a/public/articles/design-tokens.webp b/public/articles/design-tokens.webp new file mode 100644 index 0000000..0f6bc0e Binary files /dev/null and b/public/articles/design-tokens.webp differ diff --git a/public/articles/get-started.webp b/public/articles/get-started.webp new file mode 100644 index 0000000..6ab22a5 Binary files /dev/null and b/public/articles/get-started.webp differ diff --git a/public/articles/write-articles.webp b/public/articles/write-articles.webp new file mode 100644 index 0000000..7c5e9d4 Binary files /dev/null and b/public/articles/write-articles.webp differ diff --git a/public/design-tokens-studio.png b/public/design-tokens-studio.png new file mode 100644 index 0000000..063a591 Binary files /dev/null and b/public/design-tokens-studio.png differ diff --git a/public/logo-dark.svg b/public/logo-dark.svg new file mode 100644 index 0000000..af09c04 --- /dev/null +++ b/public/logo-dark.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..ab34927 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/social-card-preview.png b/public/social-card-preview.png new file mode 100644 index 0000000..8e70dcc Binary files /dev/null and b/public/social-card-preview.png differ diff --git a/renovate.json b/renovate.json new file mode 100755 index 0000000..75ac0dd --- /dev/null +++ b/renovate.json @@ -0,0 +1,8 @@ +{ + "extends": [ + "@nuxtjs" + ], + "lockFileMaintenance": { + "enabled": true + } +} diff --git a/tokens.config.ts b/tokens.config.ts new file mode 100644 index 0000000..b80da0a --- /dev/null +++ b/tokens.config.ts @@ -0,0 +1,4 @@ +import { defineTheme } from 'pinceau' + +export default defineTheme({ +}) diff --git a/tsconfig.json b/tsconfig.json new file mode 100755 index 0000000..4b34df1 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./.nuxt/tsconfig.json" +}