Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/main'
Browse files Browse the repository at this point in the history
# Conflicts:
#	content/3.deploy/cloudflare.md
#	content/3.deploy/nuxthub.md
#	content/4.templates.yml
#	content/7.blog/8.nuxt-static-improvements.md
#	pages/blog/[slug].vue
  • Loading branch information
Ivan Bochkarev committed Aug 17, 2024
2 parents fb756d7 + d1c1aaa commit 2e3f15f
Show file tree
Hide file tree
Showing 14 changed files with 259 additions and 74 deletions.
48 changes: 48 additions & 0 deletions components/content/PackageManagers.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<template>
<CodeGroup ref="codeGroupRef">
<ContentSlot :use="$slots.default" />
</CodeGroup>
</template>

<script setup lang="ts">
const codeGroupRef = ref(null)
const slots = useSlots()
const defaultPackageManager = useLocalStorage('defaultPackageManager', 'npm')
watch(
() => codeGroupRef.value?.selectedIndex,
newIndex => updateSelection(newIndex)
)
const getPackageManager = (index: number) => {
return slots.default()[index].props.filename
}
const getIndex = (name: string): number => {
for (const [index, slot] of slots.default().entries()) {
if (slot.props.filename === name) return index
}
return 0
}
const updateSelection = (newIndex: number) => {
if (!slots.default()) return
defaultPackageManager.value = getPackageManager(newIndex)
window.dispatchEvent(
new CustomEvent('default-package-manager-changed', {
detail: {
value: defaultPackageManager.value
}
})
)
}
onMounted(() => {
codeGroupRef.value.selectedIndex = getIndex(defaultPackageManager.value)
window.addEventListener('default-package-manager-changed', (event) => {
if (codeGroupRef.value) {
codeGroupRef.value.selectedIndex = getIndex(event.detail.value)
}
})
})
</script>
28 changes: 26 additions & 2 deletions content/3.deploy/cloudflare.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ website: 'https://pages.cloudflare.com/'
Интеграция с Cloudflare Pages возможна с нулевой настройкой, [узнать больше](https://nitro.unjs.io/deploy#zero-config-providers).
::

::important
Checkout the [@nuxthub/core](/modules/hub) module to build full-stack Nuxt applications with Cloudflare, learn more on [hub.nuxt.com](https://hub.nuxt.com).
::

### Интеграция с Git

Если вы используете интеграцию GitHub/GitLab с Cloudflare Pages, **настройка не требуется**. При отправке в ваш репозиторий проект будет автоматически собран и развернут.
Expand Down Expand Up @@ -83,8 +87,8 @@ export default defineNuxtConfig({
::card
---
icon: i-simple-icons-github
title: Nuxt Todos Edge
to: https://github.com/atinux/nuxt-todos-edge
title: Atidone
to: https://github.com/atinux/atidone
target: _blank
ui.icon.base: text-black dark:text-white
---
Expand All @@ -103,6 +107,26 @@ export default defineNuxtConfig({

Редактируемый сайт с универсальным рендерингом на базе Cloudflare KV.
::
::card
---
icon: i-simple-icons-github
title: Atidraw
to: https://github.com/atinux/atidraw
target: _blank
ui.icon.base: text-black dark:text-white
---
Web application that lets you to draw and share your drawings with the world, with Cloudflare R2 & AI.
::
::card
---
icon: i-simple-icons-github
title: Nuxt Image Gallery
to: https://github.com/flosciante/nuxt-image-gallery
target: _blank
ui.icon.base: text-black dark:text-white
---
An image gallery to upload, edit and share your images to the world, with Cloudflare R2.
::
::

## Узнать больше
Expand Down
4 changes: 2 additions & 2 deletions content/3.deploy/github-pages.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ jobs:
- run: npm install
- run: npx nuxt build --preset github_pages
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
uses: actions/upload-pages-artifact@v3
with:
path: ./.output/public
# Задание по развертыванию
Expand All @@ -68,7 +68,7 @@ jobs:
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
uses: actions/deploy-pages@v4
```
::read-more{to="https://nitro.unjs.io/deploy/providers/github-pages" target="_blank"}
Expand Down
78 changes: 52 additions & 26 deletions content/3.deploy/nuxthub.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: NuxtHub
description: 'Разверните свое full-stack приложение Nuxt на глобальных серверах вашего аккаунта Cloudflare.'
description: 'Разверните свое Nuxt приложение на глобальных серверах вашего аккаунта Cloudflare c нулевой конфигурацией.'
componentImg: NuxtHub
logoSrc: '/assets/integrations/nuxthub.svg'
category: Хостинг
Expand All @@ -15,31 +15,17 @@ website: 'https://hub.nuxt.com/?utm_source=nuxt-website&utm_medium=deploy-page'
Интеграция с NuxtHub возможна с нулевой конфигурацией, [узнать больше](https://nitro.unjs.io/deploy#zero-config-providers).
::

::note
NuxtHub is a deployment and administration platform for Nuxt, powered by Cloudflare. :br The main difference with the [Cloudflare](/deploy/cloudflare) deployment is that NuxtHub provides a zero-configuration deployment experience (provisioning, deployment, and administration). :br It also provides a powerful admin interface to manage your Nuxt projects (database, blob, KV, ...) as well as [remote storage](https://hub.nuxt.com/docs/getting-started/remote-storage?utm_source=nuxt-website&utm_medium=deploy-page).
::

## Быстрый старт

- Войдите на сайт [admin.hub.nuxt.com](https://admin.hub.nuxt.com/?utm_source=nuxt-website&utm_medium=deploy-page)
- Подключите свой аккаунт Cloudflare, нажав на `Создать новый токен с необходимыми правами` и следуйте инструкциям
- Теперь вы готовы развернуть ваш проект Nuxt на вашем аккаунте Cloudflare!
## Introduction

## Развертывание с помощью Git
NuxtHub is a deployment and administration platform for Nuxt, powered by Cloudflare.

1. Разместите код в своем git-репозитории (GitHub или GitLab).
2. Нажмите на `Новый проект`, затем `Импортировать Git-репозиторий`.
3. Выберите репозиторий и нажмите на `Импортировать репозиторий`.
4. NuxtHub настроит ваш проект на Cloudflare Pages и развернет его
5. Ваше приложение будет развернуто с доменом `.nuxt.dev`.
The main difference with the [Cloudflare](/deploy/cloudflare) deployment is that NuxtHub provides a zero-configuration deployment experience (provisioning, deployment, and administration).

После импорта и развертывания вашего проекта все последующие изменения в ветках будут генерировать предварительные развертывания, а все изменения, внесенные в продакшен ветку (обычно «main»), приведут к развертыванию на продакшен.
It also provides a powerful admin interface to manage your Nuxt projects (database, blob, KV, ...) as well as [remote storage](https://hub.nuxt.com/docs/getting-started/remote-storage?utm_source=nuxt-website&utm_medium=deploy-page).

### NuxtHub CLI
Read more on [hub.nuxt.com](https://hub.nuxt.com/?utm_source=nuxt-website&utm_medium=deploy-page).

::warning
Если вы выполните первое развертывание с помощью NuxtHub CLI, вы не сможете прикрепить свой репозиторий GitHub/GitLab в дальнейшем из-за ограничения Cloudflare.
::
## NuxtHub CLI

Вы можете развернуть свой локальный проект с помощью одной команды:

Expand All @@ -55,31 +41,61 @@ npx nuxthub deploy
4. Разверните его на вашем аккаунте Cloudflare со всеми необходимыми ресурсами
5. Предоставьте вам URL-адрес для доступа к вашему проекту

See an example in video:

::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1723569534/nuxthub/nuxthub-deploy_xxs5s8.jpg" controls class="rounded dark:border dark:border-gray-700 md:w-2/3"}
:source{src="https://res.cloudinary.com/nuxt/video/upload/v1723569534/nuxthub/nuxthub-deploy_xxs5s8.webm" type="video/webm"}
:source{src="https://res.cloudinary.com/nuxt/video/upload/v1723569534/nuxthub/nuxthub-deploy_xxs5s8.mp4" type="video/mp4"}
:source{src="https://res.cloudinary.com/nuxt/video/upload/v1723569534/nuxthub/nuxthub-deploy_xxs5s8.ogg" type="video/ogg"}
::

::note
Вы также можете установить [NuxtHub CLI](https://github.com/nuxt-hub/cli) глобально с помощью: `npm i -g nuxthub`.
::

::warning
If you do your first deployment with the NuxtHub CLI, you won't be able to attach your GitHub/GitLab repository later on due to a Cloudflare limitation.
::

## Deploy using Git

1. Push your code to your git repository (GitHub or GitLab)
2. Click on `New Project` then `Import a Git repository`
3. Select your repository and click on `Import repository`
4. NuxtHub will configure your project on Cloudflare Pages and deploy it
5. Your application is deployed with a `.nuxt.dev` domain

After your project has been imported and deployed, all subsequent pushes to branches will generate preview deployments and all changes made to the production branch (commonly “main”) will result in a production deployment.

## Шаблоны

::card-group
::card
---

icon: i-simple-icons-github
title: Hello Edge
to: https://github.com/nuxt-hub/hello-edge
target: _blank
ui.icon.base: text-black dark:text-white
---
A minimal Nuxt starter running on the edge.
::
::card
---
icon: i-simple-icons-github
title: NuxtHub Starter
to: https://github.com/nuxt-hub/starter
target: _blank
ui.icon.base: text-black dark:text-white
---

Минимальный стартовый набор для начала работы с хранилищем и функциями NuxtHub.
A starter to get started with NuxtHub features (Database, Blob, KV, ...).
::
::card
---

icon: i-simple-icons-github
title: Nuxt Todos
to: https://github.com/atinux/nuxt-todos-edge
title: Atidone
to: https://github.com/atinux/atidone
target: _blank
ui.icon.base: text-black dark:text-white
---
Expand Down Expand Up @@ -110,6 +126,16 @@ npx nuxthub deploy

Редактируемый сайт на основе компонентов Markdown и Vue с динамической генерацией изображений OG.
::
::card
---
icon: i-simple-icons-github
title: Atidraw
to: https://github.com/atinux/atidraw
target: _blank
ui.icon.base: text-black dark:text-white
---
Web application that lets you to draw and share your drawings with the world, with Cloudflare R2 & AI.
::
::

::callout
Expand Down
13 changes: 9 additions & 4 deletions content/4.templates.yml
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,16 @@ templates:
demo: 'https://demos.creative-tim.com/nuxt-argon-dashboard-pro/?partner=120213'
purchase: 'https://www.creative-tim.com/product/nuxt-argon-dashboard-pro?partner=120213'
badge: 'Премиум'
- name: 'Nuxt Todos Edge'
slug: 'todos-edge'
- name: 'Atidone'
slug: 'atidone'
description: 'Полноценное приложение с аутентификацией и базой данных SQLite.'
repo: 'atinux/nuxt-todos-edge'
demo: 'https://nuxt-todos-edge.pages.dev/'
repo: 'atinux/atidone'
demo: 'https://todos.nuxt.dev/'
- name: 'Atidraw'
slug: 'atidraw'
description: 'Web application that lets you to create, enhance, and share your drawings with the world.'
repo: 'atinux/atidraw'
demo: 'https://draw.nuxt.dev/'
- name: 'Happy Paws'
slug: 'happy-paws'
description: 'Полноценное приложение для усыновления домашних животных с Nuxt SEO и Tailwind CSS.'
Expand Down
2 changes: 1 addition & 1 deletion content/7.blog/14.nuxt-on-the-edge.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ In terms of developer experience, you will notice that when creating server file

Furthermore, by leveraging Object Relational Mapping (ORM) like [drizzle-orm](https://orm.drizzle.team/), developers can connect Edge & Serverless databases such as [D1](https://developers.cloudflare.com/d1/), [Turso](https://turso.tech/), [Neon](https://neon.tech), [Planetscale](https://planetscale.com/) and more.

I created [Nuxt Todos Edge](https://nuxt-todos-edge.pages.dev/), an open source demo to showcase a full-stack application with authentication and a database running on the edge. The source code is available on GitHub under the MIT license at [atinux/nuxt-todos-edge](https://github.com/atinux/nuxt-todos-edge).
I created [Atidone](https://todos.nuxt.dev/), an open source demo to showcase a full-stack application with authentication and a database running on the edge. The source code is available on GitHub under the MIT license at [atinux/atidone](https://github.com/atinux/atidone).

## Conclusion

Expand Down
19 changes: 8 additions & 11 deletions content/7.blog/8.nuxt-static-improvements.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,17 +62,14 @@ category: Релиз

1. Обновите `nuxt` до последней дополнительной версии, которой является v2.14.

::code-group

```bash [Yarn]
yarn upgrade nuxt
```

```bash [NPM]
npm update
```

::
::package-managers
```bash [npm]
npm update
```
```bash [yarn]
yarn upgrade nuxt
```
::

2. Убедитесь, что `target` имеет значение `static` в вашем `nuxt.config`

Expand Down
8 changes: 7 additions & 1 deletion nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,13 @@ export default defineNuxtConfig({
}
}
},

$production: {
image: {
ipx: {
baseURL: 'https://ipx.nuxt.com'
}
}
},
$development: {
runtimeConfig: {
public: {
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
"@nuxthq/studio": "^2.0.3",
"@nuxtjs/html-validator": "^1.8.2",
"@nuxtjs/plausible": "^1.0.0",
"@vueuse/components": "^10.11.0",
"@vueuse/core": "^10.11.0",
"@vueuse/nuxt": "^10.11.0",
"@vueuse/core": "^11.0.0",
"@vueuse/components": "^11.0.0",
"@vueuse/nuxt": "^11.0.0",
"feed": "^4.2.2",
"floating-vue": "^5.2.2",
"nuxt": "^3.12.3",
Expand Down
2 changes: 1 addition & 1 deletion pages/blog/[slug].vue
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const links = [
<UPage>
<UPageHeader :title="article.title" :description="article.description" :ui="{ headline: 'flex flex-col gap-y-8 items-start' }">
<template #headline>
<UBreadcrumb :links="[{ label: 'Блог', icon: 'i-ph-newspaper-duotone', to: '/blog' }, { label: article.title }]" />
<UBreadcrumb :links="[{ label: 'Блог', icon: 'i-ph-newspaper-duotone', to: '/blog' }, { label: article.title }]" :ui="{ wrapper: 'max-w-full' }" />
<div class="flex items-center space-x-2">
<span>
{{ article.category }}
Expand Down
Loading

1 comment on commit 2e3f15f

@vercel
Copy link

@vercel vercel bot commented on 2e3f15f Aug 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nuxt-com – ./

nuxt-com-git-main-nuxt-ru.vercel.app
nuxt-com-nuxt-ru.vercel.app

Please sign in to comment.