1
0
mirror of https://github.com/Bayselonarrend/OpenIntegrations.git synced 2026-06-18 05:04:13 +02:00

Доработка страницы скачивания

This commit is contained in:
Anton Titovets
2025-11-02 15:54:33 +03:00
parent 84a942acd8
commit cefad62fac
3 changed files with 277 additions and 232 deletions
+244 -214
View File
@@ -1,242 +1,272 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import Heading from '@theme/Heading';
import styles from './download.module.css';
import useBaseUrl from '@docusaurus/useBaseUrl'; // ✅ импортирован правильно
import useBaseUrl from '@docusaurus/useBaseUrl';
const DownloadPage = () => {
const [showThankYou, setShowThankYou] = useState(false);
const [showThankYou, setShowThankYou] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
// ✅ Хуки вызываются на верхнем уровне — всё правильно
const githubLogo = useBaseUrl('/img/github-logo.svg');
const boostyLogo = useBaseUrl('/img/boosty-logo.svg');
const githubLogo = useBaseUrl('/img/github-logo.svg');
const boostyLogo = useBaseUrl('/img/boosty-logo.svg');
const baseUrl = 'https://github.com/Bayselonarrend/OpenIntegrations/releases/latest/download';
const downloadItems = [
const downloadItems = [
{
group: 'Для 1С:Enterprise',
items: [
{
group: 'Для 1С:Enterprise',
items: [
{
name: 'CFE (расширение)',
files: {
ru: 'OpenIntegrations_1.29.0_ru.cfe',
en: 'OpenIntegrations_1.29.0_en.cfe',
},
desc: 'Файл расширения 1С в формате .cfe',
},
{
name: 'XML (выгрузка)',
files: {
ru: 'XML_RU.zip',
en: 'XML_EN.zip',
},
desc: 'Выгрузка расширения 1С в формате XML',
},
{
name: 'EDT (проект)',
files: {
ru: 'EDT_RU.zip',
en: 'EDT_EN.zip',
},
desc: 'Файлы расширения 1С в формате EDT',
},
],
name: 'CFE (расширение)',
files: {
ru: 'OpenIntegrations_1.29.0_ru.cfe',
en: 'OpenIntegrations_1.29.0_en.cfe',
},
desc: 'Файл расширения 1С в формате .cfe',
},
{
group: 'Консольное приложение (OInt CLI)',
items: [
{
name: 'Windows Installer',
files: {
ru: 'oint_1.29.0_installer_ru.exe',
en: 'oint_1.29.0_installer_en.exe',
},
desc: 'Windows установщик CLI приложения с аддоном Melezh',
},
{
name: 'Debian / Ubuntu (.deb)',
files: {
ru: 'oint_1.29.0_all_ru.deb',
en: 'oint_1.29.0_all_en.deb',
},
desc: 'Пакет CLI приложения для систем на базе Debian',
},
{
name: 'Fedora / RHEL (.rpm)',
files: {
ru: 'oint-1.29.0-1.noarch_ru.rpm',
en: 'oint-1.29.0-1.noarch_en.rpm',
},
desc: 'Пакет CLI приложения для систем на базе RHEL',
},
],
name: 'XML (выгрузка)',
files: {
ru: 'XML_RU.zip',
en: 'XML_EN.zip',
},
desc: 'Выгрузка расширения 1С в формате XML',
},
{
group: 'Для OneScript',
items: [
{
name: 'Пакет oint (.ospx)',
files: {
ru: 'oint-1.29.0_ru.ospx',
en: 'oint-1.29.0_en.ospx',
},
desc: 'Пакет библиотеки для OneScript',
},
{
name: 'Пакет oint-cli (.ospx)',
files: {
ru: 'oint-cli-1.29.0_ru.ospx',
en: 'oint-cli-1.29.0_en.ospx',
},
desc: 'Пакет CLI-приложения для OneScript',
},
],
name: 'EDT (проект)',
files: {
ru: 'EDT_RU.zip',
en: 'EDT_EN.zip',
},
desc: 'Файлы расширения 1С в формате EDT',
},
];
const handleDownload = (filename) => {
const url = `https://github.com/Bayselonarrend/OpenIntegrations/releases/latest/download/${filename}`;
],
},
{
group: 'Консольное приложение (OInt CLI)',
items: [
{
name: 'Windows Installer',
files: {
ru: 'oint_1.29.0_installer_ru.exe',
en: 'oint_1.29.0_installer_en.exe',
},
desc: 'Windows установщик CLI приложения с аддоном Melezh',
},
{
name: 'Debian / Ubuntu (.deb)',
files: {
ru: 'oint_1.29.0_all_ru.deb',
en: 'oint_1.29.0_all_en.deb',
},
desc: 'Пакет CLI приложения для систем на базе Debian',
},
{
name: 'Fedora / RHEL (.rpm)',
files: {
ru: 'oint-1.29.0-1.noarch_ru.rpm',
en: 'oint-1.29.0-1.noarch_en.rpm',
},
desc: 'Пакет CLI приложения для систем на базе RHEL',
},
],
},
{
group: 'Для OneScript',
items: [
{
name: 'Пакет oint (.ospx)',
files: {
ru: 'oint-1.29.0_ru.ospx',
en: 'oint-1.29.0_en.ospx',
},
desc: 'Пакет библиотеки для OneScript',
},
{
name: 'Пакет oint-cli (.ospx)',
files: {
ru: 'oint-cli-1.29.0_ru.ospx',
en: 'oint-cli-1.29.0_en.ospx',
},
desc: 'Пакет CLI-приложения для OneScript',
},
],
},
];
// Создаём временный <a>
const link = document.createElement('a');
link.href = url;
link.setAttribute('target', '_self'); // необязательно, но явно
// link.setAttribute('download', filename); // не работает для кросс-домена, но GitHub и так отдаёт как attachment
const handleDownload = (filename) => {
const cleanFilename = filename.trim();
const url = `https://github.com/Bayselonarrend/OpenIntegrations/releases/latest/download/${cleanFilename}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
const link = document.createElement('a');
link.href = url;
link.setAttribute('target', '_self');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
setShowThankYou(true);
};
setShowThankYou(true);
// Через кадр — включаем видимость → запускается transition
setTimeout(() => {
setIsModalVisible(true);
}, 600);
};
return (
<Layout title="Скачать" description="Скачайте последнюю версию OpenIntegrations">
<main className="container margin-vert--lg">
return (
<Layout title="Скачать" description="Скачайте последнюю версию OpenIntegrations">
<main className="container margin-vert--lg">
<div className={styles.downloadHeaderWrapper}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className={styles.downloadIcon}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
/>
</svg>
<div>
<Heading as="h1" className={styles.downloadTitle}>
Скачать последнюю версию
</Heading>
<p className={styles.downloadSubtitle}>
Выберите подходящий язык и вариант поставки
</p>
</div>
</div>
<hr />
<div className={styles.downloadHeaderWrapper}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className={styles.downloadIcon}
{downloadItems.map((group, idx) => (
<div key={idx} className={styles.downloadGroup}>
<h2>{group.group}</h2>
<div className={styles.itemsGrid}>
{group.items.map((item, i) => (
<div key={i} className={styles.downloadItem}>
<h3>{item.name}</h3>
<p>{item.desc}</p>
<div className={styles.langButtons}>
<button
className={styles.downloadButton}
onClick={() => handleDownload(item.files.ru)}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
/>
</svg>
<div>
<Heading as="h1" className={styles.downloadTitle}>
Скачать последнюю версию
</Heading>
<p className={styles.downloadSubtitle}>
Выберите подходящий язык и вариант поставки
</p>
</div>
🇷🇺 Русская
</button>
<button
className={styles.downloadButton}
onClick={() => handleDownload(item.files.en)}
>
🇬🇧 English
</button>
</div>
</div>
))}
</div>
</div>
))}
<div className={styles.otherVersions}>
<Link to="https://github.com/Bayselonarrend/OpenIntegrations/releases">
Другие версии
</Link>
</div>
</main>
{showThankYou && (
<div
className={`${styles.modalOverlay} ${isModalVisible ? styles.modalOverlayVisible : ''}`}
onClick={() => {
setShowThankYou(false);
setIsModalVisible(false);
}}
>
<div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
<div className={styles.modalScrollable}>
<h1>Скачивание началось...</h1>
<hr />
<p className={styles.thankYouText}>
Большое спасибо за скачивание! Если вам нравится проект, то вы можете поддержать его одним из способов, представленных ниже. Ваша поддержка очень важна: она помогает проекту развиваться, при этом оставаясь бесплатным и независимым !
</p>
<div className={styles.supportGrid}>
<div className={styles.supportCard}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="0.8"
stroke="currentColor"
className={styles.supportIcon}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
/>
</svg>
<p>
Звездочка на GitHub самый простой способ поддержать проект! Рост количества звезд помогает другим людям чаще видеть репозиторий в рекомендациях, а для нас является мотиватором развивать проект дальше!
<br />
</p>
<Link
className={styles.supportButton}
to="https://github.com/Bayselonarrend/OpenIntegrations"
target="_blank"
rel="noopener"
>
Перейти на GitHub
</Link>
</div>
<hr />
{downloadItems.map((group, idx) => (
<div key={idx} className={styles.downloadGroup}>
<h2>{group.group}</h2>
<div className={styles.itemsGrid}>
{group.items.map((item, i) => (
<div key={i} className={styles.downloadItem}>
<h3>{item.name}</h3>
<p>{item.desc}</p>
<div className={styles.langButtons}>
<button
className={styles.downloadButton}
onClick={() => handleDownload(item.files.ru)}
>
🇷🇺 Русская
</button>
<button
className={styles.downloadButton}
onClick={() => handleDownload(item.files.en)}
>
🇬🇧 English
</button>
</div>
</div>
))}
</div>
</div>
))}
<div className={styles.otherVersions}>
<Link to="https://github.com/Bayselonarrend/OpenIntegrations/releases">
Другие версии
</Link>
<div className={styles.supportCard}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="0.8"
stroke="currentColor"
className={styles.supportIcon}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z"
/>
</svg>
<p>
Пожертвования на Boosty единственный источника дохода проекта. Такой вид монетизации позволяет мне развивать проект дальше, при этом не пряча функционал за платными версиями и не засоряя документацию рекламными блоками
</p>
<Link
className={styles.supportButton}
to="https://boosty.to/bayselonarrend?utm_source=openintegrations.dev"
target="_blank"
rel="noopener"
>
Поддержать на Boosty
</Link>
</div>
</main>
</div>
</div>
{showThankYou && (
<div className={styles.modalOverlay} onClick={() => setShowThankYou(false)}>
<div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
<div className={styles.modalScrollable}>
<h1>Скачивание началось...</h1>
<hr />
<p className={styles.thankYouText}>
Большое спасибо за скачивание! Если вам нравится проект, то вы можете поддержать его одним из способов, представленных ниже. Ваша поддержка очень важна: она помогает проекту развиваться, при этом оставаясь бесплатным и независимым !
</p>
<div className={styles.supportGrid}>
<div className={styles.supportCard}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="0.8" stroke="currentColor" class="size-2" className={styles.supportIcon}>
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
</svg>
<p>Звездочка на GitHub самый простой способ поддержать проект! Рост количества звезд помогает другим людям чаще видеть репозиторий в рекомендациях, а для нас является мотиватором развивать проект дальше!<br /></p>
<Link
className={styles.supportButton}
to="https://github.com/Bayselonarrend/OpenIntegrations"
target="_blank"
rel="noopener"
>
Перейти на GitHub
</Link>
</div>
<div className={styles.supportCard}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="0.8" stroke="currentColor" class="size-2" className={styles.supportIcon}>
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
</svg>
<p>Пожертвования на Boosty единственный источника дохода проекта. Такой вид монетизации позволяет мне развивать проект дальше, при этом не пряча функционал за платными версиями и не засоряя документацию рекламными блоками</p>
<Link
className={styles.supportButton}
to="https://boosty.to/bayselonarrend?utm_source=openintegrations.dev"
target="_blank"
rel="noopener"
>
Поддержать на Boosty
</Link>
</div>
</div>
</div>
<button
className={styles.closeButton}
onClick={() => setShowThankYou(false)}
>
Нет, спасибо
</button>
</div>
</div>
)}
</Layout>
);
<button
className={styles.closeButton}
onClick={() => {
setShowThankYou(false);
setIsModalVisible(false);
}}
>
Нет, спасибо
</button>
</div>
</div>
)}
</Layout>
);
};
export default DownloadPage;
+32 -17
View File
@@ -1,18 +1,16 @@
.downloadHeaderWrapper {
display: flex;
align-items: flex-start; /* выравнивание по верху, так как иконка выше текста */
align-items: flex-start;
gap: 1rem;
margin-bottom: 0;
}
.downloadIcon {
width: 4rem; /* 32px — достаточно для двух строк текста */
width: 4rem;
height: 4rem;
flex-shrink: 0; /* не сжимать при узком экране */
flex-shrink: 0;
color: #004943;
margin-top: 0.31rem; /* лёгкая компенсация вертикального смещения */
margin-top: 0.31rem;
margin-right: 10px;
}
@@ -97,7 +95,7 @@
.langButtons .downloadButton {
flex: 1;
min-width: 0; /* чтобы не вылезали за границы на мобильных */
min-width: 0;
text-align: center;
}
@@ -106,6 +104,7 @@
margin-top: 2rem;
}
/* Modal */
.modalOverlay {
position: fixed;
top: 0;
@@ -115,11 +114,21 @@
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: flex-start; /* не центрировать по вертикали, чтобы не обрезалось сверху */
align-items: flex-start;
padding: 20px 16px;
box-sizing: border-box;
z-index: 1000;
overflow-y: auto; /* разрешить скролл всего overlay, если нужно */
overflow-y: auto;
/* Начальное состояние */
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modalOverlayVisible {
opacity: 1;
pointer-events: auto;
}
.modalContent {
@@ -129,21 +138,28 @@
max-width: 800px;
width: 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 80px; /* отступ сверху, чтобы не прилипало к шапке */
max-height: calc(100vh - 80px); /* оставить место сверху и снизу */
margin-top: 80px;
max-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
/* Анимация контента */
transform: translateY(20px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.modalOverlayVisible .modalContent {
transform: translateY(0);
opacity: 1;
}
/* Контент, который может скроллиться */
.modalScrollable {
flex: 1;
overflow-y: auto;
padding-bottom: 1rem;
}
/* Кнопка "Нет, спасибо" — всегда внизу и видна */
.closeButton {
display: block;
width: 100%;
@@ -155,7 +171,7 @@
font-size: 1rem;
font-weight: 500;
cursor: pointer;
margin-top: auto; /* прижать к низу */
margin-top: auto;
box-sizing: border-box;
}
@@ -216,7 +232,6 @@
color: #333;
}
/* Mobile */
@media (max-width: 768px) {
.supportGrid {
grid-template-columns: 1fr;
@@ -225,4 +240,4 @@
.modalContent {
padding: 1.5rem;
}
}
}
+1 -1
View File
@@ -10996,7 +10996,7 @@
"Если вы уже используете ОПИ для работы с другими сервисами Google Workspase и выполняли стартовую настройку, то пункты **Создание проекта** и **Настройка OAuth** можно пропустить. Необходимо лишь **включить сервис": "If you're already using the API to interact with other Google Workspace services and have completed the initial setup, you can skip the steps for **Creating a Project** and **Setting Up OAuth**. You just need to enable the",
"стандартный вариант поставки расширения конфигурации 1С:Предприятие. Для начала работы достаточно загрузить его в список расширений вашей конкретной конфигурации. Разработка ведется в режиме совместимости 1С 8.3.10": "the standard distribution option for the 1C configuration extension. To start working, it is sufficient to load it into the list of extensions for your specific configuration. Development is carried out in compatibility mode with 1C 8.3.10.",
"Ввести паспортные данные или данные об организации, включить доступ к сообществам (короче, если у вас уже было приложение до этого, то вам крупно повезло, а если нет российского паспорта - придется писать в поддержку)": "Enter passport details or organization information, enable access to communities (in short, if you already had an application before, you're lucky, but if you don't have a Russian passport, you'll have to contact support)",
"Пожертвования на Boosty — единственный источника дохода проекта. Такой вид монетизации позволяет мне развивать проект дальше, при этом не пряча функционал за платными версиями и не засоряя документацию рекламными блоками": "Donations on Boosty are the project's only source of income. This monetization approach allows me to continue developing the project without hiding functionality behind paid versions or cluttering the documentation with advertising blocks.",
"Пожертвования на Boosty — единственный источника дохода проекта. Такой вид монетизации позволяет нам развивать проект дальше, при этом не пряча функционал за платными версиями и не засоряя документацию рекламными блоками": "Donations on Boosty are the project's only source of income. This monetization approach allows us to continue developing the project without hiding functionality behind paid versions or cluttering the documentation with advertising blocks.",
"Что касается параметров, то чаще всего передаваемые туда данные - строки. Это может быть текст, пути к файлам, URL и пр. Однако, в OInt есть методы, которые принимают и другие, менее очевидные виды данных. Это могут быть": "When it comes to parameters, most often the data passed there are strings. This can be text, file paths, URLs, etc. However, in OInt, there are methods that accept other, less obvious types of data. These can be",
"это DEB-пакет, предназанченный для установки OInt в Debian/Ubuntu дистрибутивах. При его использовании зависимости Mono устанавливаются автоматически, следовательно никаких дополнительных действий для начала работы не требуется": "this is a DEB package designed for installing OInt on Debian/Ubuntu distributions. When using it, Mono dependencies are installed automatically, so no additional actions are required to start working",
"Большое спасибо за скачивание! Если вам нравится проект, то вы можете поддержать его одним из способов, представленных ниже. Ваша поддержка очень важна: она помогает проекту развиваться, при этом оставаясь бесплатным и независимым": "Thank you very much for downloading! If you like the project, you can support it using one of the methods below. Your support is very important: it helps the project develop while remaining free and independent",