mirror of
https://github.com/SantaSpeen/santaspeen.ru-blog.git
synced 2026-05-20 00:20:28 +00:00
to TypeScript
This commit is contained in:
Artur Akmalov
@@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from '../pages/index.module.css';
|
||||
|
||||
|
||||
export default function HeroTest({ Svg, title, description }) {
|
||||
return (
|
||||
<section className={clsx('hero hero--primary')} >
|
||||
<div className="container">
|
||||
<div className="hero--primary">
|
||||
<div className="container">
|
||||
<h1 className="hero__subtitle2"> О сайте </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert--secondary" role="alert">
|
||||
<button aria-label="Close" class="clean-btn close" type="button">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
This is a <strong>secondary</strong> alert. It's not too important, you may ignore it.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
// // <div class="hero shadow--lw">
|
||||
// <div class="container">
|
||||
// <h1 class="hero__title">Hero Title</h1>
|
||||
// <p class="hero__subtitle">Not all heroes wear capes</p>
|
||||
// <div>
|
||||
// <button class="button button--secondary button--outline button--lg">
|
||||
// Get Started
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// // </div>
|
||||
// ---
|
||||
// <div className="container, styles.heroBanner">
|
||||
// <h1 className="hero__title"> Tilte </h1>
|
||||
// <p className="hero__subtitle"> 232 </p>
|
||||
// </div>
|
||||
);
|
||||
}
|
||||
|
||||
+9
-3
@@ -2,7 +2,13 @@ import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const FeatureList = [
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
|
||||
description: JSX.Element;
|
||||
};
|
||||
|
||||
const FeatureList: FeatureItem[] = [
|
||||
{
|
||||
title: 'Easy to Use',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
|
||||
@@ -35,7 +41,7 @@ const FeatureList = [
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({Svg, title, description}) {
|
||||
function Feature({title, Svg, description}: FeatureItem) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">
|
||||
@@ -49,7 +55,7 @@ function Feature({Svg, title, description}) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageFeatures() {
|
||||
export default function HomepageFeatures(): JSX.Element {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
@@ -1,58 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const FeatureList = [
|
||||
{
|
||||
title: 'Linux',
|
||||
Svg: require('@site/static/img/topics/linux.svg').default,
|
||||
},
|
||||
{
|
||||
title: 'Python',
|
||||
Svg: require('@site/static/img/topics/python.svg').default,
|
||||
},
|
||||
{
|
||||
title: 'DevOps',
|
||||
Svg: require('@site/static/img/topics/devops.svg').default,
|
||||
},
|
||||
{
|
||||
title: 'Network',
|
||||
Svg: require('@site/static/img/topics/network.svg').default,
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({ Svg, title, description }) {
|
||||
return (
|
||||
<div className={clsx('col col--3')}>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} role="img" />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<h3>{title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageTopics() {
|
||||
return (
|
||||
<div className="hero--primary">
|
||||
<div className="features_src-components-HomepageFeatures-styles-module">
|
||||
<div className="container">
|
||||
{/* <h2 className="hero__subtitle2"> Темы записей </h2> */}
|
||||
<h2 className="hero__subtitle2 text--center">Основные темы записей</h2>
|
||||
</div>
|
||||
</div>
|
||||
<section className={styles.features}>
|
||||
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import clsx from "clsx";
|
||||
import styles from './Styles.module.scss';
|
||||
|
||||
const consept = [
|
||||
'Скорость (загрузка страниц не более 1 сек)',
|
||||
'Надежность (минимальные требования к серверу, IaC в репозитории, легко устанавливать и переносить)',
|
||||
'Простота (без лишних скриптов, рекламы и т.п.)',
|
||||
'Отсутствие базы данных (упростит хранение и обслуживание)',
|
||||
'Редактор Markdown (Записи в формате \'.md\', \'.mdx\')',
|
||||
'Адаптивная верстка (автоматическая подстройка под мобильные устройства)',
|
||||
'Без погружения в web-разработку (html, css и js)',
|
||||
'Автоматическое заполнение минимальных SEO полей',
|
||||
]
|
||||
|
||||
export default function AboutSite() {
|
||||
return (
|
||||
<header className={clsx('hero hero--primary')} >
|
||||
<div className="container">
|
||||
<h3> Концепция сайта </h3>
|
||||
<ul className={styles.list}>
|
||||
{consept.map((use, index) => (
|
||||
<li key={index} className={styles.listItem}>
|
||||
{use}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* <div class="alert alert--secondary margin-top--lg" role="alert">
|
||||
Цель - сделать <strong>быстрый</strong>, <strong>простой</strong> и <strong>надежный</strong> сайт для своих заметок.
|
||||
</div> */}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import clsx from "clsx";
|
||||
import styles from './Styles.module.scss';
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
|
||||
export default function HomeHeader() {
|
||||
return (
|
||||
<header className={clsx('hero hero--primary')} >
|
||||
<div className="container">
|
||||
<div className="margin-top--lg">
|
||||
<div className="row">
|
||||
<div className="col col--6">
|
||||
<h1>Добро пожаловать</h1>
|
||||
<h2> Назначение сайта</h2>
|
||||
<p> Личный блог для хранения полезной информации, заметок, часто используемых команд, возможно некоторая информация может оказаться полезной или интересной и другим людям. Кроме этого постараюсь размещать инструкции, полезные программы, обзоры и другие записи по IT теме</p>
|
||||
</div>
|
||||
<div className={clsx("col col--5", styles.avatarContainer)}>
|
||||
<div className={styles.avatar}>
|
||||
<img
|
||||
alt="hero logo"
|
||||
// className={styles.avatar}
|
||||
src="/img/hero.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
|
||||
.landing-section {
|
||||
padding: 12pt 0;
|
||||
}
|
||||
|
||||
.landing-section:first-child {
|
||||
}
|
||||
|
||||
.landing-section:nth-child(even) {
|
||||
background-color: #1b1b1d;
|
||||
}
|
||||
|
||||
.landing-section:last-child {
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 6em;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.client-icon {
|
||||
display: block;
|
||||
max-width: 14rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.client-icon > svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.avatarContainer {
|
||||
margin-left: 2rem;
|
||||
|
||||
@media screen and (max-width: 996px) {
|
||||
.avatarContainer {
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$avatar-size: 500px;
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
max-width: $avatar-size;
|
||||
max-height: $avatar-size;
|
||||
}
|
||||
// img,
|
||||
// &>div {
|
||||
// border-radius: 999px;
|
||||
// max-height: $avatar-size;
|
||||
// }
|
||||
|
||||
// @include small-size {
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
.list {
|
||||
list-style-type: disclosure-closed;
|
||||
margin: 0 0 2rem 0;
|
||||
// padding: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
color: #000000;
|
||||
font-size: var(--font-size-normal);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import Link from '@docusaurus/Link';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import {
|
||||
Docker, Linux, Python, Kubernetes, Googlecolab, Googlehome
|
||||
} from '@icons-pack/react-simple-icons';
|
||||
import Icon from '@mdi/react';
|
||||
import { mdiAccessPointNetwork } from '@mdi/js';
|
||||
|
||||
import styles from './Styles.module.scss';
|
||||
import landingSectionStyles from './LandingSection.module.scss';
|
||||
|
||||
|
||||
export default function ClientSection() {
|
||||
return (
|
||||
<section className={clsx(landingSectionStyles['landing-section'])}>
|
||||
<div className='container text--center'>
|
||||
<div className='row row--center'>
|
||||
<div className='col margin-top--lg'>
|
||||
<h2>Основные темы</h2>
|
||||
<p>
|
||||
Записи в блоге по тэгам
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row row--center'>
|
||||
<Link
|
||||
to='/blog/tags/Linux'
|
||||
className={clsx('col', 'fill--white', styles['client-icon'], 'margin-top--md')}
|
||||
>
|
||||
<Linux color='#ffffff' size={48} />
|
||||
<div className='margin-top--sm'>Linux</div>
|
||||
</Link>
|
||||
<Link
|
||||
to='/blog/tags/Python'
|
||||
className={clsx('col', 'fill--white', styles['client-icon'], 'margin-top--md')}
|
||||
>
|
||||
<Python color='#ffffff' size={48} />
|
||||
<div className='margin-top--sm'>Python</div>
|
||||
</Link>
|
||||
<Link
|
||||
to='/blog/tags/Python'
|
||||
className={clsx('col', 'fill--white', styles['client-icon'], 'margin-top--md')}
|
||||
>
|
||||
<Googlecolab color='#ffffff' size={48} />
|
||||
<div className='margin-top--sm'>DevOps</div>
|
||||
</Link>
|
||||
<Link
|
||||
to='/blog/tags/Python'
|
||||
className={clsx('col', 'fill--white', styles['client-icon'], 'margin-top--md')}
|
||||
>
|
||||
<Kubernetes color='#ffffff' size={48} />
|
||||
<div className='margin-top--sm'>Kuberneters</div>
|
||||
</Link>
|
||||
<Link
|
||||
to='/blog/tags/Python'
|
||||
className={clsx('col', 'fill--white', styles['client-icon'], 'margin-top--md')}
|
||||
>
|
||||
<Docker color='#ffffff' size={48} />
|
||||
<div className='margin-top--sm'>Docker</div>
|
||||
</Link>
|
||||
<Link
|
||||
to='/blog/tags/Python'
|
||||
className={clsx('col', 'fill--white', styles['client-icon'], 'margin-top--md')}
|
||||
>
|
||||
<Googlehome color='#ffffff' size={48} />
|
||||
<div className='margin-top--sm'>Homelab</div>
|
||||
</Link>
|
||||
<Link
|
||||
to='/blog/tags/Networks'
|
||||
className={clsx('col', 'fill--white', styles['client-icon'], 'margin-top--md')}
|
||||
>
|
||||
<Icon path={mdiAccessPointNetwork} size='48px' className='fill-white' />
|
||||
<div className='margin-top--sm'>Networks</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className="button button--secondary button--lg"
|
||||
to="/blog">
|
||||
Все записи
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user