mirror of
https://github.com/databasus/databasus.git
synced 2026-04-06 00:32:03 +02:00
FEATURE (website): Add full website content
This commit is contained in:
Rostislav Dugin
208
404.html
Normal file
208
404.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>404 - Page Not Found | Postgresus</title>
|
||||
<meta name="title" content="404 - Page Not Found | Postgresus" />
|
||||
<meta
|
||||
name="description"
|
||||
content="The page you're looking for doesn't exist. Return to Postgresus - PostgreSQL monitoring and backup tool."
|
||||
/>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://postgresus.com/404" />
|
||||
<meta property="og:title" content="404 - Page Not Found | Postgresus" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="The page you're looking for doesn't exist. Return to Postgresus - PostgreSQL monitoring and backup tool."
|
||||
/>
|
||||
<meta property="og:image" content="https://postgresus.com/logo.svg" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:url" content="https://postgresus.com/404" />
|
||||
<meta property="twitter:title" content="404 - Page Not Found | Postgresus" />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="The page you're looking for doesn't exist. Return to Postgresus - PostgreSQL monitoring and backup tool."
|
||||
/>
|
||||
<meta property="twitter:image" content="https://postgresus.com/logo.svg" />
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="favicon.svg" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GE01THYR9X"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-GE01THYR9X');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-50">
|
||||
<!------------------ NAVBAR ------------------------->
|
||||
<nav
|
||||
class="fixed left-0 right-0 top-0 z-50 flex h-[60px] justify-center bg-white px-4 shadow-sm sm:h-[70px] md:h-[80px]"
|
||||
>
|
||||
<div
|
||||
class="flex w-[320px] min-w-0 max-w-[320px] grow items-center sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<a href="/">
|
||||
<img
|
||||
src="logo.svg"
|
||||
loading="eager"
|
||||
alt="Postgresus logo"
|
||||
width="35"
|
||||
height="35"
|
||||
class="flex-shrink-0 sm:h-[40px] sm:w-[40px] md:h-[50px] md:w-[50px]"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a href="/" class="ml-2 text-lg font-bold sm:ml-3 sm:text-xl md:ml-4 md:text-2xl"
|
||||
>Postgresus</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="ml-auto"
|
||||
href="https://github.com/RostislavDugin/postgresus"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div
|
||||
class="flex items-center rounded-lg border bg-[#f5f7f9] px-2 py-1 hover:bg-gray-100 md:px-4 md:py-2"
|
||||
>
|
||||
<svg
|
||||
class="mr-1 sm:mr-2 md:mr-3"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-sm sm:text-base">Star on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!------------------ END OF NAVBAR ------------------>
|
||||
|
||||
<!------------------ 404 ERROR SECTION ------------------------->
|
||||
<div class="flex min-h-screen items-center justify-center px-4 pt-[80px] md:pt-[100px]">
|
||||
<div class="text-center">
|
||||
<div class="mb-8">
|
||||
<h1 class="mb-4 text-9xl font-bold text-blue-600">404</h1>
|
||||
<h2 class="mb-4 text-2xl font-bold text-gray-800 sm:text-3xl md:text-4xl">
|
||||
Page Not Found
|
||||
</h2>
|
||||
<p class="mx-auto max-w-md text-lg text-gray-600 sm:text-xl">
|
||||
The page you're looking for doesn't exist or has been moved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center space-y-4 sm:flex-row sm:justify-center sm:space-x-4 sm:space-y-0"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center rounded-lg border-2 border-blue-600 bg-blue-600 px-6 py-3 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
></path>
|
||||
</svg>
|
||||
Go Home
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<p class="text-gray-500">
|
||||
Need help? Visit our
|
||||
<a
|
||||
href="https://t.me/postgresus_community"
|
||||
target="_blank"
|
||||
class="text-blue-600 hover:underline"
|
||||
>
|
||||
Community
|
||||
</a>
|
||||
|
||||
or check out our
|
||||
<a
|
||||
href="https://github.com/RostislavDugin/postgresus"
|
||||
target="_blank"
|
||||
class="text-blue-600 hover:underline"
|
||||
>
|
||||
GitHub repository
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------------------ END OF 404 ERROR SECTION ------------------>
|
||||
|
||||
<!------------------ FOOTER SECTION -------------------------------->
|
||||
<div class="flex justify-center bg-blue-600 py-[50px]">
|
||||
<div
|
||||
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white">
|
||||
<a
|
||||
href="https://github.com/postgresus"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://t.me/postgresus_community"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
Community
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://t.me/rostislav_dugin"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
Contract Developer
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-center text-sm text-white">© 2025 Postgresus. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------------------ END OF FOOTER SECTION ------------------------->
|
||||
</body>
|
||||
</html>
|
||||
278
cloudflare-r2-storage.html
Normal file
278
cloudflare-r2-storage.html
Normal file
@@ -0,0 +1,278 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>How to use Postgresus with Cloudflare R2 | Postgresus</title>
|
||||
<meta name="title" content="How to use Postgresus with Cloudflare R2 | Postgresus" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Step-by-step guide to configure Cloudflare R2 storage for PostgreSQL backups with Postgresus. Learn how to set up S3-compatible storage with R2."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Postgresus, Cloudflare R2, PostgreSQL backup, S3 storage, cloud storage, database backup"
|
||||
/>
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="favicon.svg" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GE01THYR9X"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-GE01THYR9X');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!------------------ NAVBAR ------------------------->
|
||||
<nav
|
||||
class="fixed left-0 right-0 top-0 z-50 flex h-[60px] justify-center bg-white px-4 sm:h-[70px] md:h-[80px]"
|
||||
>
|
||||
<div
|
||||
class="flex w-[320px] min-w-0 max-w-[320px] grow items-center border-b sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<a href="/" class="flex items-center">
|
||||
<img
|
||||
src="logo.svg"
|
||||
loading="eager"
|
||||
alt="Postgresus logo"
|
||||
width="35"
|
||||
height="35"
|
||||
class="flex-shrink-0 sm:h-[40px] sm:w-[40px] md:h-[50px] md:w-[50px]"
|
||||
/>
|
||||
|
||||
<div class="ml-2 text-lg font-bold sm:ml-3 sm:text-xl md:ml-4 md:text-2xl">
|
||||
Postgresus
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!------------------ END OF NAVBAR ------------------>
|
||||
|
||||
<!------------------ MAIN CONTENT ------------------------->
|
||||
<div class="flex justify-center py-[50px] pt-[110px] md:py-[100px] md:pt-[180px]">
|
||||
<main
|
||||
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<div class="max-w-[800px]">
|
||||
<h1 class="mb-6 text-2xl font-bold sm:text-4xl">
|
||||
How to use Postgresus with Cloudflare R2?
|
||||
</h1>
|
||||
|
||||
<p class="mb-8 max-w-[500px] text-lg text-gray-700">
|
||||
To obtain the credentials and endpoint for using your R2 bucket as an S3-compatible
|
||||
source, you'll need to:
|
||||
</p>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Step 1 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h2 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>1</span
|
||||
>
|
||||
Fill your bucket name
|
||||
</h2>
|
||||
|
||||
<p class="mb-2 text-gray-700">
|
||||
Enter your R2 bucket name in the storage configuration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/cloudflare-r2-storage/image-1.webp"
|
||||
alt="Step 1"
|
||||
class="mb-8 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h2 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>2</span
|
||||
>
|
||||
Set the region
|
||||
</h2>
|
||||
|
||||
<p class="mb-2 text-gray-700">
|
||||
In region field, fill
|
||||
<code class="rounded bg-gray-100 px-2 py-1 text-sm">"auto"</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h2 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>3</span
|
||||
>
|
||||
Generate an Access Key ID & Secret Access Key
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p class="text-gray-700">
|
||||
In the Cloudflare dashboard, go to <strong>R2 → API → Manage API Tokens</strong>.
|
||||
Create the token.
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Grant it the permissions you need (e.g. <strong>"Object Read & Write"</strong>).
|
||||
</p>
|
||||
|
||||
<div class="rounded-lg bg-blue-50 p-4">
|
||||
<p class="mb-2 text-gray-700">When the token is created you'll see:</p>
|
||||
<ul class="list-inside list-disc space-y-1 text-gray-700">
|
||||
<li><strong>Access Key ID</strong> (the token's ID)</li>
|
||||
<li>
|
||||
<strong>Secret Access Key</strong> (the SHA-256 hash of the token value)
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-2 font-semibold text-blue-600">Copy both now to Postgresus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/cloudflare-r2-storage/image-2.gif"
|
||||
alt="Step 2"
|
||||
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h2 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>4</span
|
||||
>
|
||||
Find your Account ID
|
||||
</h2>
|
||||
<p class="text-gray-700">
|
||||
On any R2 page in the dashboard, you'll see your Account ID near the top (or in your
|
||||
account settings).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/cloudflare-r2-storage/image-3.webp"
|
||||
alt="Step 3"
|
||||
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<!-- Step 5 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h2 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>5</span
|
||||
>
|
||||
Construct the S3 endpoint
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="rounded-lg bg-gray-100 p-4">
|
||||
<code class="text-sm">https://<ACCOUNT_ID>.r2.cloudflarestorage.com</code>
|
||||
</div>
|
||||
<p class="text-gray-700">
|
||||
Replace
|
||||
<code class="rounded bg-gray-100 px-2 py-1 text-sm"><ACCOUNT_ID></code> with
|
||||
the value from your dashboard.
|
||||
</p>
|
||||
<p class="text-gray-700">Fill it to Postgresus as well.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Final Step -->
|
||||
<div class="max-w-[500px] rounded-lg border border-green-200 bg-green-50 p-6">
|
||||
<h2 class="mb-3 text-xl font-semibold text-green-800">🎉 Configuration Complete!</h2>
|
||||
<p class="text-green-700">
|
||||
Now you have all fields filled and your Postgresus is ready to use Cloudflare R2 as
|
||||
storage for your PostgreSQL backups.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/cloudflare-r2-storage/image-4.png"
|
||||
alt="Step 4"
|
||||
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="mt-12 border-t border-gray-200 pt-8">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center font-semibold text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
← Back to main page
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!------------------ END OF MAIN CONTENT ------------------>
|
||||
|
||||
<!------------------ FOOTER SECTION -------------------------------->
|
||||
<div id="footer" class="flex justify-center bg-blue-600 py-[50px] md:py-[50px]">
|
||||
<div
|
||||
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white">
|
||||
<a
|
||||
href="https://github.com/postgresus"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://t.me/postgresus_community"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
Community
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://t.me/rostislav_dugin"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
Contract Developer
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-center text-sm text-white">© 2025 Postgresus. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------------------ END OF FOOTER SECTION ------------------------->
|
||||
</body>
|
||||
</html>
|
||||
420
google-drive-storage.html
Normal file
420
google-drive-storage.html
Normal file
@@ -0,0 +1,420 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>How to connect Google Drive to Postgresus | Postgresus</title>
|
||||
<meta name="title" content="How to connect Google Drive to Postgresus | Postgresus" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Step-by-step guide to configure Google Drive storage for PostgreSQL backups with Postgresus. Learn how to set up Google Cloud project and OAuth."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Postgresus, Google Drive, PostgreSQL backup, Google Cloud, OAuth, cloud storage, database backup"
|
||||
/>
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="favicon.svg" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GE01THYR9X"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-GE01THYR9X');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!------------------ NAVBAR ------------------------->
|
||||
<nav
|
||||
class="fixed left-0 right-0 top-0 z-50 flex h-[60px] justify-center bg-white px-4 sm:h-[70px] md:h-[80px]"
|
||||
>
|
||||
<div
|
||||
class="flex w-[320px] min-w-0 max-w-[320px] grow items-center border-b sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<a href="/" class="flex items-center">
|
||||
<img
|
||||
src="logo.svg"
|
||||
loading="eager"
|
||||
alt="Postgresus logo"
|
||||
width="35"
|
||||
height="35"
|
||||
class="flex-shrink-0 sm:h-[40px] sm:w-[40px] md:h-[50px] md:w-[50px]"
|
||||
/>
|
||||
|
||||
<div class="ml-2 text-lg font-bold sm:ml-3 sm:text-xl md:ml-4 md:text-2xl">
|
||||
Postgresus
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!------------------ END OF NAVBAR ------------------>
|
||||
|
||||
<!------------------ MAIN CONTENT ------------------------->
|
||||
<div class="flex justify-center py-[50px] pt-[110px] md:py-[100px] md:pt-[180px]">
|
||||
<main
|
||||
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<div class="max-w-[800px]">
|
||||
<h1 class="mb-6 text-2xl font-bold sm:text-4xl">
|
||||
How to connect Google Drive to Postgresus?
|
||||
</h1>
|
||||
|
||||
<p class="mb-8 max-w-[500px] text-lg text-gray-700">
|
||||
To keep your backups in Google Drive you need:
|
||||
</p>
|
||||
|
||||
<div class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="rounded-lg bg-blue-50 p-4">
|
||||
<h3 class="mb-2 font-semibold text-blue-800">Step 1</h3>
|
||||
<p class="text-blue-700">
|
||||
Create Google Cloud project so you can access Google Drive API
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-blue-50 p-4">
|
||||
<h3 class="mb-2 font-semibold text-blue-800">Step 2</h3>
|
||||
<p class="text-blue-700">Sign in via your Google Account</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- How to create Google Cloud project -->
|
||||
<div class="pl-6">
|
||||
<h2 class="mb-4 text-2xl font-semibold">How to create Google Cloud project?</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Step 1 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>1</span
|
||||
>
|
||||
Create new project
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-700">
|
||||
Go to
|
||||
<a
|
||||
href="https://console.cloud.google.com/"
|
||||
target="_blank"
|
||||
class="text-blue-600 underline hover:text-blue-800"
|
||||
>https://console.cloud.google.com/</a
|
||||
>
|
||||
</p>
|
||||
<p class="text-gray-700">Choose <strong>"new project"</strong> (top left)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>2</span
|
||||
>
|
||||
Enable Google Drive API
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-700">
|
||||
Go to <strong>"API & Services"</strong> tab, then to
|
||||
<strong>"API library"</strong>
|
||||
</p>
|
||||
<p class="pb-10 text-gray-700">
|
||||
Choose <strong>Google Drive API</strong> and enable it:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/google-drive-storage/image-1.webp"
|
||||
alt="Step 2"
|
||||
class="mb-8 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>3</span
|
||||
>
|
||||
Configure consent screen
|
||||
</h3>
|
||||
<p class="pb-10 text-gray-700">
|
||||
Go to <strong>"Credentials"</strong> → <strong>"Create credentials"</strong> →
|
||||
<strong>"Configure consent screen"</strong> and fill any data there:
|
||||
</p>
|
||||
|
||||
<img
|
||||
src="images/google-drive-storage/image-2.webp"
|
||||
alt="Step 3"
|
||||
class="mb-8 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>4</span
|
||||
>
|
||||
Create OAuth client ID
|
||||
</h3>
|
||||
<p class="pb-10 text-gray-700">
|
||||
Go to <strong>"Credentials"</strong> → <strong>"Create credentials"</strong> →
|
||||
<strong>"OAuth client ID"</strong>:
|
||||
</p>
|
||||
|
||||
<img
|
||||
src="images/google-drive-storage/image-3.webp"
|
||||
alt="Step 4"
|
||||
class="mb-8 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Step 5 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>5</span
|
||||
>
|
||||
Configure application settings
|
||||
</h3>
|
||||
<p class="mb-4 text-gray-700">Fill the following data:</p>
|
||||
<div class="space-y-2">
|
||||
<div class="rounded-lg bg-gray-100 p-3">
|
||||
<p class="text-sm"><strong>Application type:</strong> Web application</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-gray-100 p-3">
|
||||
<p class="text-sm">
|
||||
<strong>Authorized JavaScript origins:</strong>
|
||||
<code class="rounded bg-gray-200 px-2 py-1 text-sm"
|
||||
>https://postgresus.com</code
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-gray-100 p-3">
|
||||
<p class="text-sm">
|
||||
<strong>Authorized redirect URIs:</strong>
|
||||
<code class="rounded bg-gray-200 px-2 py-1 text-sm"
|
||||
>https://postgresus.com/storages/google-oauth</code
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 text-gray-700">And copy credentials</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-10"></div>
|
||||
|
||||
<img
|
||||
src="images/google-drive-storage/image-4.webp"
|
||||
alt="Step 5 - 1"
|
||||
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<img
|
||||
src="images/google-drive-storage/image-5.png"
|
||||
alt="Step 5 - 2"
|
||||
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Step 6 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>6</span
|
||||
>
|
||||
Add scope
|
||||
</h3>
|
||||
|
||||
<p class="pb-5 text-gray-700">
|
||||
Go to <strong>"Data Access"</strong> and add scope
|
||||
<code class="rounded bg-gray-100 px-2 py-1 text-sm">"/auth/drive.file"</code>
|
||||
</p>
|
||||
|
||||
<img
|
||||
src="images/google-drive-storage/image-6.png"
|
||||
alt="Step 6"
|
||||
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Step 7 -->
|
||||
<div class="border-l-4 border-blue-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm text-white"
|
||||
>7</span
|
||||
>
|
||||
Publish the app
|
||||
</h3>
|
||||
<p class="pb-10 text-gray-700">
|
||||
Go to <strong>"Audience"</strong> and publish an app
|
||||
</p>
|
||||
|
||||
<img
|
||||
src="images/google-drive-storage/image-7.png"
|
||||
alt="Step 7"
|
||||
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sign in via Google Account -->
|
||||
<div class="pl-6">
|
||||
<h2 class="mb-4 text-2xl font-semibold">Sign in via your Google Account</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Step 1 -->
|
||||
<div class="border-l-4 border-green-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
||||
>1</span
|
||||
>
|
||||
Fill credentials data
|
||||
</h3>
|
||||
|
||||
<p class="pb-10 text-gray-700">Fill data from the previous step:</p>
|
||||
|
||||
<img
|
||||
src="images/google-drive-storage/image-8.png"
|
||||
alt="Step 1"
|
||||
class="mb-8 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="border-l-4 border-green-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
||||
>2</span
|
||||
>
|
||||
Choose your account
|
||||
</h3>
|
||||
<p class="text-gray-700">Choose your account to sign in</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="border-l-4 border-green-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
||||
>3</span
|
||||
>
|
||||
Handle security warning
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-700">
|
||||
If you see a warning, click <strong>"Advanced"</strong> (left bottom corner)
|
||||
and choose <strong>"Proceed anyway"</strong>
|
||||
</p>
|
||||
<div class="rounded-lg bg-yellow-50 p-4">
|
||||
<p class="text-sm text-yellow-800">
|
||||
⚠️ This warning appears because your app is not yet verified by Google. It's
|
||||
safe to proceed for your own application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Final Step -->
|
||||
<div class="max-w-[500px] rounded-lg border border-green-200 bg-green-50 p-6">
|
||||
<h2 class="mb-3 text-xl font-semibold text-green-800">🎉 Setup Complete!</h2>
|
||||
<p class="text-green-700">
|
||||
Your Google Drive is now connected to Postgresus and ready to store your PostgreSQL
|
||||
backups securely in the cloud.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="mt-12 border-t border-gray-200 pt-8">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center font-semibold text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
← Back to main page
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!------------------ END OF MAIN CONTENT ------------------>
|
||||
|
||||
<!------------------ FOOTER SECTION -------------------------------->
|
||||
<div id="footer" class="flex justify-center bg-blue-600 py-[50px] md:py-[50px]">
|
||||
<div
|
||||
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white">
|
||||
<a
|
||||
href="https://github.com/postgresus"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://t.me/postgresus_community"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
Community
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://t.me/rostislav_dugin"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
Contract Developer
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-center text-sm text-white">© 2025 Postgresus. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------------------ END OF FOOTER SECTION ------------------------->
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/cloudflare-r2-storage/image-1.webp
Normal file
BIN
images/cloudflare-r2-storage/image-1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
images/cloudflare-r2-storage/image-2.gif
Normal file
BIN
images/cloudflare-r2-storage/image-2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 905 KiB |
BIN
images/cloudflare-r2-storage/image-3.webp
Normal file
BIN
images/cloudflare-r2-storage/image-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
images/cloudflare-r2-storage/image-4.png
Normal file
BIN
images/cloudflare-r2-storage/image-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
images/google-drive-storage/image-1.webp
Normal file
BIN
images/google-drive-storage/image-1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
images/google-drive-storage/image-2.webp
Normal file
BIN
images/google-drive-storage/image-2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
images/google-drive-storage/image-3.webp
Normal file
BIN
images/google-drive-storage/image-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
images/google-drive-storage/image-4.webp
Normal file
BIN
images/google-drive-storage/image-4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
images/google-drive-storage/image-5.png
Normal file
BIN
images/google-drive-storage/image-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
images/google-drive-storage/image-6.png
Normal file
BIN
images/google-drive-storage/image-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
images/google-drive-storage/image-7.png
Normal file
BIN
images/google-drive-storage/image-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
images/google-drive-storage/image-8.png
Normal file
BIN
images/google-drive-storage/image-8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
images/notifier-slack/image-1.png
Normal file
BIN
images/notifier-slack/image-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
images/notifier-slack/image-2.png
Normal file
BIN
images/notifier-slack/image-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
images/notifier-slack/image-3.png
Normal file
BIN
images/notifier-slack/image-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
images/notifier-slack/image-4.png
Normal file
BIN
images/notifier-slack/image-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
images/notifier-slack/image-5.png
Normal file
BIN
images/notifier-slack/image-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
images/notifier-slack/image-6.png
Normal file
BIN
images/notifier-slack/image-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
images/notifier-slack/image-7.png
Normal file
BIN
images/notifier-slack/image-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
12
index.html
12
index.html
@@ -23,6 +23,17 @@
|
||||
<meta name="revisit-after" content="7 days" />
|
||||
<link rel="canonical" href="https://postgresus.com" />
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GE01THYR9X"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-GE01THYR9X');
|
||||
</script>
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://postgresus.com" />
|
||||
@@ -425,6 +436,7 @@ services:
|
||||
alt="Postgresus dashboard interface"
|
||||
width="100%"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
363
notifier-slack.html
Normal file
363
notifier-slack.html
Normal file
@@ -0,0 +1,363 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>How to send notifications from Postgresus to Slack | Postgresus</title>
|
||||
<meta name="title" content="How to send notifications from Postgresus to Slack | Postgresus" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Step-by-step guide to configure Slack notifications for PostgreSQL backups with Postgresus. Learn how to create Slack bot and get chat ID."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Postgresus, Slack notifications, PostgreSQL backup, Slack bot, chat notifications, database backup"
|
||||
/>
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="favicon.svg" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GE01THYR9X"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-GE01THYR9X');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!------------------ NAVBAR ------------------------->
|
||||
<nav
|
||||
class="fixed left-0 right-0 top-0 z-50 flex h-[60px] justify-center bg-white px-4 sm:h-[70px] md:h-[80px]"
|
||||
>
|
||||
<div
|
||||
class="flex w-[320px] min-w-0 max-w-[320px] grow items-center border-b sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<a href="/" class="flex items-center">
|
||||
<img
|
||||
src="logo.svg"
|
||||
loading="eager"
|
||||
alt="Postgresus logo"
|
||||
width="35"
|
||||
height="35"
|
||||
class="flex-shrink-0 sm:h-[40px] sm:w-[40px] md:h-[50px] md:w-[50px]"
|
||||
/>
|
||||
|
||||
<div class="ml-2 text-lg font-bold sm:ml-3 sm:text-xl md:ml-4 md:text-2xl">
|
||||
Postgresus
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!------------------ END OF NAVBAR ------------------>
|
||||
|
||||
<!------------------ MAIN CONTENT ------------------------->
|
||||
<div class="flex justify-center py-[50px] pt-[110px] md:py-[100px] md:pt-[180px]">
|
||||
<main
|
||||
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<div class="max-w-[800px]">
|
||||
<h1 class="mb-6 max-w-[500px] text-2xl font-bold sm:text-4xl">
|
||||
How to send notifications from Postgresus to Slack?
|
||||
</h1>
|
||||
|
||||
<p class="mb-8 max-w-[500px] text-lg text-gray-700">
|
||||
To send notifications to Slack you need to follow 2 steps:
|
||||
</p>
|
||||
|
||||
<div class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="rounded-lg bg-blue-50 p-4">
|
||||
<h3 class="mb-2 font-semibold text-blue-800">Step 1</h3>
|
||||
<p class="text-blue-700">Create Slack bot</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-blue-50 p-4">
|
||||
<h3 class="mb-2 font-semibold text-blue-800">Step 2</h3>
|
||||
<p class="text-blue-700">Get chat ID (channel, group or user)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- How to create Slack bot -->
|
||||
<div class="pl-6">
|
||||
<h2 class="mb-4 text-2xl font-semibold">How to create Slack bot?</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border-l-4 border-green-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
||||
>1</span
|
||||
>
|
||||
Create the app
|
||||
</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-700">
|
||||
Go to
|
||||
<a
|
||||
href="https://api.slack.com/apps"
|
||||
target="_blank"
|
||||
class="text-blue-600 underline hover:text-blue-800"
|
||||
>https://api.slack.com/apps</a
|
||||
>
|
||||
</p>
|
||||
|
||||
<p class="text-gray-700">
|
||||
Choose <strong>"create an app"</strong> →
|
||||
<strong>"create an app from scratch"</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-orange-50 p-4">
|
||||
<div class="mb-2 font-semibold text-orange-800">After bot creation:</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-green-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
||||
>2</span
|
||||
>
|
||||
Configure OAuth & Permissions
|
||||
</h3>
|
||||
<p class="mb-2 text-gray-700">Go to <strong>"OAuth & Permissions"</strong> tab</p>
|
||||
|
||||
<img
|
||||
src="images/notifier-slack/image-1.png"
|
||||
alt="Step 1"
|
||||
class="mb-8 mt-5 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-green-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
||||
>3</span
|
||||
>
|
||||
Add bot scopes
|
||||
</h3>
|
||||
|
||||
<p class="mb-2 text-gray-700">Add to bot scopes:</p>
|
||||
|
||||
<ul class="ml-4 list-inside list-disc space-y-1 text-gray-700">
|
||||
<li><code class="rounded bg-gray-100 px-2 py-1 text-sm">im:write</code></li>
|
||||
<li><code class="rounded bg-gray-100 px-2 py-1 text-sm">chat:write</code></li>
|
||||
<li>
|
||||
<code class="rounded bg-gray-100 px-2 py-1 text-sm">channels:history</code>
|
||||
</li>
|
||||
<li>
|
||||
<code class="rounded bg-gray-100 px-2 py-1 text-sm">channels:join</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<img
|
||||
src="images/notifier-slack/image-2.png"
|
||||
alt="Step 1"
|
||||
class="mb-8 mt-5 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-green-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-500 text-sm text-white"
|
||||
>4</span
|
||||
>
|
||||
Install to workspace
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-700">
|
||||
Click <strong>"Install to {YOUR_WORKSPACE}"</strong> and complete steps
|
||||
</p>
|
||||
|
||||
<img
|
||||
src="images/notifier-slack/image-3.png"
|
||||
alt="Step 1"
|
||||
class="mb-8 mt-5 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How to get chat ID -->
|
||||
<div class="pl-6">
|
||||
<h2 class="mb-4 text-2xl font-semibold">How to get chat ID?</h2>
|
||||
|
||||
<p class="mb-4 text-gray-700">You can send messages to:</p>
|
||||
<ul class="mb-6 ml-4 list-inside list-disc space-y-1 text-gray-700">
|
||||
<li>Public channel</li>
|
||||
<li>Private channel</li>
|
||||
<li>Group</li>
|
||||
<li>Direct messages</li>
|
||||
</ul>
|
||||
|
||||
<div class="mb-6 rounded-lg border border-yellow-200 bg-yellow-50 p-4">
|
||||
<div class="mb-2 font-semibold text-yellow-800">⚠️ Warning</div>
|
||||
<ul class="list-inside list-disc space-y-1 text-yellow-700">
|
||||
<li>
|
||||
For sending messages to <strong>private channel</strong> bot should be added via
|
||||
<code class="rounded bg-yellow-100 px-2 py-1 text-sm">@invite</code> command
|
||||
</li>
|
||||
<li>
|
||||
For sending messages to <strong>group</strong>, group should be created with bot
|
||||
initially
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-500 text-sm text-white"
|
||||
>1</span
|
||||
>
|
||||
Get channel or group ID
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-700">Navigate to chat and take ID from URL</p>
|
||||
|
||||
<div class="rounded-lg bg-gray-100 p-3">
|
||||
<p class="text-sm text-gray-600">
|
||||
💡 <strong>Tip:</strong> ID usually starts from
|
||||
<code class="rounded bg-gray-200 px-2 py-1 text-sm">"C"</code> letter
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/notifier-slack/image-4.png"
|
||||
alt="Step 1"
|
||||
class="mb-8 mt-5 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="mb-3 flex items-center text-xl font-semibold">
|
||||
<span
|
||||
class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-500 text-sm text-white"
|
||||
>2</span
|
||||
>
|
||||
Get user ID
|
||||
</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-700">
|
||||
Go to <strong>"Profile"</strong> and click
|
||||
<strong>"copy link to profile"</strong>
|
||||
</p>
|
||||
|
||||
<img
|
||||
src="images/notifier-slack/image-5.png"
|
||||
alt="Step 1"
|
||||
class="mb-8 mt-5 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<p class="text-gray-700">Then extract end part of URL, this is your user ID</p>
|
||||
|
||||
<img
|
||||
src="images/notifier-slack/image-6.png"
|
||||
alt="Step 1"
|
||||
class="mb-8 mt-5 max-w-[500px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Final Step -->
|
||||
<div class="max-w-[500px] rounded-lg border border-green-200 bg-green-50 p-6">
|
||||
<h2 class="mb-3 text-xl font-semibold text-green-800">🎉 Setup Complete!</h2>
|
||||
<p class="text-green-700">
|
||||
Copy both token and ID to Postgresus, notification should appear and you're ready to
|
||||
receive backup notifications in Slack!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="images/notifier-slack/image-7.png"
|
||||
alt="Step 1"
|
||||
class="mb-8 mt-5 max-w-[1000px] rounded-lg border border-gray-200 shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="mt-12 border-t border-gray-200 pt-8">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center font-semibold text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
← Back to main page
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<!------------------ END OF MAIN CONTENT ------------------>
|
||||
|
||||
<!------------------ FOOTER SECTION -------------------------------->
|
||||
<div id="footer" class="flex justify-center bg-blue-600 py-[50px] md:py-[50px]">
|
||||
<div
|
||||
class="w-[320px] max-w-[320px] sm:w-[640px] sm:max-w-[640px] lg:w-[1200px] lg:max-w-[1200px]"
|
||||
>
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white">
|
||||
<a
|
||||
href="https://github.com/postgresus"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://t.me/postgresus_community"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
Community
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://t.me/rostislav_dugin"
|
||||
target="_blank"
|
||||
class="transition-colors hover:text-blue-200"
|
||||
>
|
||||
Contract Developer
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-center text-sm text-white">© 2025 Postgresus. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------------------ END OF FOOTER SECTION ------------------------->
|
||||
</body>
|
||||
</html>
|
||||
46
storages/google-auth.html
Normal file
46
storages/google-auth.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>Google OAuth - Redirecting...</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="text-align: center; padding: 50px; font-family: Arial, sans-serif">
|
||||
<h2>Processing OAuth...</h2>
|
||||
<p>Please wait while we redirect you back to the application.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
// Get current URL parameters
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
|
||||
// Extract state and code from current URL
|
||||
const state = urlParams.get('state');
|
||||
const code = urlParams.get('code');
|
||||
|
||||
if (state && code) {
|
||||
try {
|
||||
// Parse the StorageOauthDto from the state parameter
|
||||
const oauthDto = JSON.parse(decodeURIComponent(state));
|
||||
|
||||
// Update the authCode field with the received code
|
||||
oauthDto.authCode = code;
|
||||
|
||||
// Construct the redirect URL with the updated DTO
|
||||
const redirectUrl = `${oauthDto.redirectUrl}?oauthDto=${encodeURIComponent(JSON.stringify(oauthDto))}`;
|
||||
|
||||
// Redirect to the constructed URL
|
||||
window.location.href = redirectUrl;
|
||||
} catch (error) {
|
||||
console.error('Error parsing state parameter:', error);
|
||||
}
|
||||
} else {
|
||||
console.error('Missing state or code parameter');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user