Initial commit: create the first pages

pull/1/head
Ivan Reshetnikov 2023-08-27 23:20:38 +05:00
commit 35ad956d73
No known key found for this signature in database
GPG Key ID: 56C7BAAE859B302C
26 changed files with 6219 additions and 0 deletions

8
.editorconfig Normal file
View File

@ -0,0 +1,8 @@
root = true
[*]
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
indent_style = space
indent_size = 2

21
.gitignore vendored Normal file
View File

@ -0,0 +1,21 @@
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store

4
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

54
README.md Normal file
View File

@ -0,0 +1,54 @@
# Astro Starter Kit: Basics
```
npm create astro@latest -- --template basics
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```
/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── Card.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

4
astro.config.mjs Normal file
View File

@ -0,0 +1,4 @@
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({});

5625
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

15
package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "comfycamp",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && tsc --noEmit && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"astro": "^2.10.14"
}
}

9
public/favicon.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>

After

Width:  |  Height:  |  Size: 749 B

Binary file not shown.

BIN
public/fonts/lora.ttf Normal file

Binary file not shown.

View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path fill="white" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

1
public/icons/matrix.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path fill="white" d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>

After

Width:  |  Height:  |  Size: 953 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

61
src/components/Card.astro Normal file
View File

@ -0,0 +1,61 @@
---
interface Props {
title: string;
body: string;
href: string;
}
const { href, title, body } = Astro.props;
---
<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 1px;
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
background-image: var(--accent-gradient);
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light));
}
</style>

View File

@ -0,0 +1,39 @@
---
const host = "comfycamp.space"
---
<footer>
<a href="https://m.comfycamp.space/@lumin" rel="me" target="_blank">
<img src="/public/icons/mastodon.svg" width="18px" height="18px" /> Mastodon
</a>
<a href="https://matrix.to/#/@lumin:matrix.comfycamp.space" target="_blank">
<img src="/public/icons/matrix.svg" width="18px" height="18px" /> Matrix
</a>
<div class="fediring">
<a href={`https://fediring.net/previous?host=${ host }`}>←</a>
<a href="https://fediring.net/">Fediring</a>
<a href={`https://fediring.net/next?host=${ host }`}>→</a>
</div>
</footer>
<style>
footer {
width: 100%;
border-top: 1px solid #ccc;
margin-top: 4em;
padding-top: 10px;
padding-bottom: 40px;
}
footer > a,
.fediring {
display: flex;
gap: 8px;
align-items: center;
margin-top: 16px;
}
footer svg {
color: white;
}
</style>

View File

@ -0,0 +1,12 @@
<nav>
<a href="/">Главная</a>
<a href="/self-hosting">Децентрализируемся</a>
</nav>
<style>
nav {
padding-top: 6px;
display: flex;
gap: 32px;
}
</style>

1
src/env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="astro/client" />

77
src/layouts/Layout.astro Normal file
View File

@ -0,0 +1,77 @@
---
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Личный сайт человека, который очень любит рассказывать про интернет.">
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<script defer data-domain="comfycamp.space" src="https://plausible.comfycamp.space/js/plausible.js"></script>
</head>
<body>
<div class="limiter">
<Navbar />
<slot />
<Footer />
</div>
</body>
</html>
<style is:global>
:root {
--link: #b283e5;
}
@font-face {
font-family: "Lora";
src: url("/public/fonts/lora.ttf") format("truetype-variations");
font-weight: 100 700;
}
@font-face {
font-family: "Lora";
src: url("/public/fonts/lora-italic.ttf") format("truetype-variations");
font-weight: 100 700;
font-style: italic;
}
html {
font-family: "Lora", system-ui, sans-serif;
background: #13151A;
background-size: 224px;
color: white;
font-size: 16px;
}
body {
display: flex;
justify-content: center;
padding: 10px;
}
.limiter {
max-width: 800px;
width: 100%;
}
a {
color: var(--link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
margin-top: 36px;
margin-bottom: 24px;
}
h2 {
margin-top: 32px;
}
</style>

17
src/pages/index.astro Normal file
View File

@ -0,0 +1,17 @@
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Уютный домик">
<h1>Уютный домик</h1>
<p>
Добро пожаловать на мой личный сайт.
</p>
<p>
Я Иван. Скорее всего, я буду рассказывать что-нибудь про компьютеры и интернет, такой уж я человек.
</p>
</Layout>
<style>
</style>

View File

@ -0,0 +1,256 @@
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Децентрализируемся!">
<h1>Децентрализируемся!</h1>
<p>
Это статья для тех, кто никогда не слышал про альтернативы современным социальным сетям и сервисам.
</p>
<p>
Мы стали слишком сильно полагаться на централизованные сервисы.
YouTube стал телевизором 21 века, vk и telegram заменяют общение в реальной жизни.
Многие из нас пользуются ими каждый день, и я в том числе.
Если у вас начали появляться претензии, будь то цензура, отсутствие нужных функций или
пренебрежительное отношение к личным данным, я предлагаю вам обратить внимание на существующие аналоги,
которые вы можете запустить на своем сервере.
</p>
<p>
Хотя, строго говоря, иметь свой сервер вовсе не обязательно. Но в таком случае вы должны доверять владельцу сервера,
ведь именно он будет хранить ваши данные. Конечно, это не касается социальных сетей без личных сообщений, там всё и так публично.
Мессенджеры, поддерживающие шифрование, защищают вас от лишних глаз, можете без опасений выбирать публичный сервер.
А вот хранить фотографии у незнакомцев я бы не стал.
</p>
<h2>Социальные сети - Fediverse</h2>
<img
src="/public/selfhosted/fediverse-party.webp"
alt="Скриншот fediverse.party"
loading="lazy"
/>
<p class="attribution">Скриншот <a href="https://fediverse.party" target="_blank">fediverse.party</a>.</p>
<p>
Fediverse - это группа из нескольких социальных сетей, представляющие аналоги популярным сервисам.
</p>
<table>
<tr>
<th>Оригинальный сервис</th>
<th>Альтернативы</th>
</tr>
<tr>
<td>Twitter</td>
<td>
<a href="https://joinmastodon.org/" target="_blank">Mastodon</a>,
<a href="https://misskey-hub.net/en/" target="_blank">misskey</a> и
<a href="https://pleroma.social/" target="_blank">pleroma</a>
</td>
</tr>
<tr>
<td>Vk, facebook</td>
<td>
<a href="https://friendi.ca/" target="_blank">Friendica</a>
</td>
</tr>
<tr>
<td>Instagram</td>
<td>
<a href="https://pixelfed.org/" target="_blank">Pixelfed</a>
</td>
</tr>
<tr>
<td>Reddit</td>
<td>
<a href="https://join-lemmy.org/" target="_blank">Lemmy</a>
</td>
</tr>
<tr>
<td>YouTube</td>
<td>
<a href="https://joinpeertube.org/" target="_blank">Peertube</a>
</td>
</tr>
<tr>
<td>Soundcloud</td>
<td>
<a href="https://funkwhale.audio/" target="_blank">Funkwhale</a>
</td>
</tr>
</table>
<p>
Создать свой сервер может любой желающий, и его пользователи смогут общаться с пользователями на других серверах.
Зачастую можно общаться даже с пользователями других платформ.
</p>
<p>
Если вы ищете простое место для старта, рекомендую обратить внимание на mastodon.
Выберите сервер, на котором вы хотите зарегистрироваться. Зачастую у многих платформ есть курируемые списки серверов.
Вот парочка советов:
<ul>
<li>Ознакомтесь с правилами сервера. На разных серверах модераторы могут запрещать разные вещи.</li>
<li>Не регистрируйтесь на больших серверах. Вы не получите от этого особых плюсов, а лишь усилите централизацию.</li>
</ul>
</p>
<p>
У меня есть <a href="https://m.comfycamp.space" target="_blank">свой сервер mastodon</a>, жду вас в гости!
</p>
<h2>Мессенджеры - Matrix, XMPP</h2>
<img
src="/public/selfhosted/matrix.webp"
alt="Скриншот matirx.org"
loading="lazy"
/>
<p class="attribution">Скриншот <a href="https://matrix.org/" target="_blank">matrix.org</a>.</p>
<p>
В мире децентрализованного общения сейчас популярны 2 протокола: xmpp и matrix. Первый появился в 1999 году, второй в 2014.
Идея такая же, как и в случае с fediverse: каждый может поднять свой сервер, а пользователи разных серверов могут общаться между собой.
</p>
<p>
Оба протокола поддерживают end-to-end шифрование и имеют множество клиентов.
Какой из них вам понравится больше - сказать тяжело. Попробуйте оба!
</p>
<p>
У меня есть свой matrix сервер, однако регистрация на нем закрыта. Если вы хотите завести аккаунт, напишите мне любым способом (смотри внизу).
</p>
<h2>Облако - Nextcloud</h2>
<img
src="/public/selfhosted/nextcloud.webp"
alt="Скриншот менеджера файлов в nextcloud"
loading="lazy"
/>
<p>
<a href="https://nextcloud.com/" target="_blank">Nextcloud</a> - это больше, чем просто облако.
Это и хранилище файлов, и календарь, и задачи, и контакты, и ещё несколько десятков возможных вариантов.
Своим функционалом nextcloud способен заменить целые экосистемы.
</p>
<p>
При желании к nextcloud можно подключить офисный редакторор, например onlyoffice, тогда nextcloud превращается ещё и в альтернативу Google Docs.
Это может быть очень кстати для разных компаний.
</p>
<p>
Список контактов, календари и задачи можно синхронизировать между своими устройствами.
Для этого используются обычные протоколы сaldav и carddav.
</p>
<p>
Хотите протестировать его возможности? Напишите мне, я могу предоставить аккаунт для ознакомления.
</p>
<h2>Стриминг - Jellyfin</h2>
<img
src="/public/selfhosted/jellyfin.webp"
alt="Скриншот jellyfin с открытой страницей фильма Taxi Driver"
loading="lazy"
/>
<p>
Не устраивает библиотека Кинопоиска и Netflix? Нет нужных песен на Яндекс Музыке?
<a href="https://jellyfin.org/" target="_blank">Jellyfin</a> спешит на помощь.
</p>
<p>
Вы просто указываете путь до вашей медиатеки и получаете возможность смотреть и слушать её онлайн.
Jellyfin поддерживает фильмы, сериалы, музыку, аудиокниги и комиксы.
</p>
<p>
Jellyfin может перекодировать файлы на лету, если посчитает, что ваше устройство не поддерживает исходный формат.
Это зачастую необходимо для браузеров, так как они могут воспроизодить только самые простые форматы.
Если вы хотите снизить нагрузку на сервер, можно найти клиенты, позволяющие транслировать видео напрямую в ваш плеер
(см. <a href="https://github.com/jellyfin/jellyfin-mpv-shim" target="_blank">jellyfin-mpv-shim</a>).
</p>
<p>
Jellyfin поддерживает DLNA, а это значит, что в пару кликов можно включить любой фильм на телевизоре, который находится в той же сети, что и сервер.
А ещё можно организовывать комнаты для просмотра и синхронизировать воспроизведение на нескольких устройствах, если вы хотите посмотреть
что-нибудь в компании.
</p>
<p>
<i>"Но ведь это пиратство!"</i> - возразят порядочные читатели. Хотя в этом есть доля правды, вы можете покупать лицензионные диски, например,
и хранить их содержимое. Также возможно покупать музыку на bandcamp или amazon. В этом новом дивном мире всё зависит только от вас. Эх, если бы не санкции...
</p>
<h2>Фото и видео - Photoprism</h2>
<img
src="/public/selfhosted/photoprism.webp"
alt="Скриншот photoprism, на котором видно несколько фотографий"
loading="lazy"
/>
<p>
Многие из нас пользуются сервисами от Apple или Google, чтобы хранить личные фотографии и видео.
Если вам становится некомфортно от мысли, что компании, владеющие рекламными сетями,
имеют доступ к вашим фотографиям, можно обратиться к <a href="https://www.photoprism.app/" target="_blank">Photoprism</a>.
</p>
<p>
Photoprism позволяет легко просматривать фото в браузере, редактировать метатеги,
и даже умеет распознавать объекты на фото (хотя, честно говоря, эта функция работает не идеально).
Вы можете создавать альбомы и делиться ими с другими людьми.
</p>
<p>
Загружать фото можно через веб-интерфейс, импортировать с директории на вашем сервере или же
загружать их по протоколу webdav с того же nextcloud.
</p>
<p>
Photoprism умеет конвертировать фотографии формата raw, чтобы их можно было открыть в браузере.
Также вы без проблем можете загрузить свои видео, они при необходимости будут сконвертированы.
</p>
<h2>Вместо заключения - Awesome Selfhosted</h2>
<p>
Один из самых популярных репозиториев на Github: <a href="https://github.com/awesome-selfhosted/awesome-selfhosted" target="_blank">Awesome Selfhosted</a>.
Это большой список всевозможных сервисов, которые вы можете запустить на своем сервере.
В этой статье я не покрыл и 10% доступных вариантов. Однако, надеюсь, что я смог хотя бы приоткрыть дверь в эту кроличью нору.
</Layout>
<style>
img {
width: 100%;
}
.attribution {
margin-top: 10px;
margin-bottom: 20px;
font-style: italic;
text-align: right;
}
table {
margin-bottom: 20px;
border-collapse: collapse;
}
table, td, th {
border: 1px solid #676767;
}
td, th {
padding: 6px 8px;
text-align: left;
}
</style>

3
tsconfig.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": "astro/tsconfigs/strictest"
}