SantaSpeen/santaspeen.ru-blog
1
0
Fork 0
mirror of https://github.com/SantaSpeen/santaspeen.ru-blog.git synced 2026-05-19 16:10:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

to TypeScript

Browse Source
This commit is contained in:
Artur Akmalov
2023-05-21 17:54:37 +05:00
parent 7b121b4861
commit f85f2dc3ae
45 changed files with 2710 additions and 1101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeroTest.js
-42
View File
@@ -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">&times;</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>
);
}
src/components/HomepageFeatures/index.js → src/components/HomepageFeatures/index.tsx
+9 -3
View File
@@ -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">
src/components/HomepageTopics/index.js
-58
View File
@@ -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>
);
}
src/components/HomepageTopics/styles.module.css
-11
View File
@@ -1,11 +0,0 @@
.features {
display: flex;
align-items: center;
padding: 4rem 0;
width: 100%;
}
.featureSvg {
height: 100px;
width: 100px;
}
src/components/home/AboutSite.tsx
+34
View File
@@ -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>
);
};
src/components/home/HomeHero.tsx
+33
View File
@@ -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>
);
};
src/components/home/LandingSection.module.scss
+19
View File
@@ -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;
}
src/components/home/Styles.module.scss
+62
View File
@@ -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);
}
src/components/home/TopicsSection.tsx
+88
View File
@@ -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>
);
}
src/css/custom.css
+37 -102
View File
@@ -6,116 +6,51 @@
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #000000;
--ifm-color-primary-dark: #000000;
--ifm-color-primary-darker: #000000;
--ifm-color-primary-darkest: #000000;
--ifm-color-primary-light: #000000;
--ifm-color-primary-lighter: #000000;
--ifm-color-primary-lightest: #000000;
--ifm-color-primary: #242526;;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--ifm-footer-padding-vertical: 20px;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
html[data-theme="dark"] {
--ifm-color-primary: #ffffff;
--ifm-color-primary-dark: #e6e6e6;
--ifm-color-primary-darker: #d9d9d9;
--ifm-color-primary-darkest: #b3b3b3;
--ifm-color-primary-light: #ffffff;
--ifm-color-primary-lighter: #ffffff;
--ifm-color-primary-lightest: #ffffff;
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #efefeffd;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
#post-content a:not(.button),
.markdown a:not(.button) {
text-decoration: underline;
.footer {
--ifm-footer-background-color: #242526;
--ifm-footer-color: var(--ifm-footer-link-color);
--ifm-footer-link-color: var(--ifm-color-secondary);
--ifm-footer-title-color: var(--ifm-color-white);
}
article h1 {
font-size: 2.25rem !important;
}
article h2 {
font-size: 2rem !important;
}
.navbar__link--active,
.navbar__link--active:hover {
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 21px;
}
.table-of-contents__link--active {
/* h2 {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 1em;
font-weight: bold;
} */
.header-github-link:hover {
opacity: 0.6;
}
.margin-horiz--auto {
margin-left: auto;
margin-right: auto;
}
.w-full {
width: 100%;
}
/* https://docusaurus.io/docs/markdown-features/code-blocks#line-highlighting */
.docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
html[data-theme="dark"] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
label {
font-weight: var(----ifm-font-weight-semibold);
}
.form-field input,
.form-field textarea {
background-color: var(--ifm-color-emphasis-300);
border: 2px solid var(--ifm-color-emphasis-400);
border-radius: 6px;
font-family: inherit;
font-size: 1rem;
outline: none;
padding: 1rem;
width: 100%;
}
input:focus,
textarea:focus {
border-color: var(--ifm-color-emphasis-600);
}
::placeholder {
color: var(--ifm-color-emphasis-800);
opacity: 1;
}
::-ms-input-placeholder {
color: var(--ifm-color-emphasis-800);
}
html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a {
background-color: #000;
}
.navbar__inner {
.header-github-link::before {
content: '';
width: 24px;
height: 24px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
/* max-width: var(--ifm-container-width); */
/* max-width: 1280px;
margin: 0 auto; */
}
.hero__subtitle2 {
font-size: 2.5rem;
}
background: url("/img/github.svg") 0 center / 25px 25px no-repeat;
}
src/css/custom_old.css
-59
View File
@@ -1,59 +0,0 @@
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
/* .navbar { */
/* border-bottom: 1px solid var(--ifm-color-emphasis-200); */
/* margin: 0 auto; */
/* width: 100%; */
/* max-width: var(--ifm-container-width); */
/* } */
/**
#212529
.navbar {
background-color: var(--ifm-navbar-background-color);
box-shadow: var(--ifm-navbar-shadow);
display: flex;
height: var(--ifm-navbar-height);
padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal);
margin: 0 auto;
width: 100%;
max-width: var(--ifm-container-width);
}
*/
.navbar__items {
align-items: center;
display: flex;
flex: 1;
max-width: var(--ifm-container-width);
margin: 0 auto;
}
src/pages/about.md
-23
View File
@@ -1,23 +0,0 @@
---
title: About Me
---
# About Me
Тут о себе написать надо что то
<!-- <div className="container margin-top--lg">
<div className="row">
<div className="col col--3 col--offset-3">
<a href="https://stripecertifications.credential.net/1dea0bc8-fad5-4712-a193-d414ad95bbb5" target="_blank">
<img src="/img/stripe-certification-professional-developer.png" alt="Stripe Certified Professional Developer" height="167" width="150" />
</a>
</div>
<div className="col col--3">
<a href="https://stripecertifications.credential.net/d1c8a153-86cb-456f-9c74-23e73702b254" target="_blank">
<img src="/img/stripe-certification-professional-architect.png" alt="Stripe Certified Professional Implementation Architect" height="167" width="150" />
</a>
</div>
</div>
</div> -->
src/pages/about.mdx
+28
View File
@@ -0,0 +1,28 @@
---
title: About
hide_table_of_contents: true
---
# About
Тут о себе текст
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
I can write **Markdown** alongside my _JSX_!
:::note
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
src/pages/index.js → src/pages/index.tsx
+17 -16
View File
@@ -3,9 +3,9 @@ import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import HomepageTopics from '@site/src/components/HomepageTopics';
import HeroTest from '@site/src/components/HeroTest';
import TopicsSection from '../components/home/TopicsSection';
import HomeHeader from "../components/home/HomeHero";
import AboutSite from "../components/home/AboutSite";
import styles from './index.module.css';
@@ -15,32 +15,33 @@ function HomepageHeader() {
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
{/* <h2 className="hero__title"> Добро пожаловать на мой сайт </h2> */}
<p className="hero__subtitle">Персональный сайт для хранения полезной информации и заметок</p>
<div className={styles.buttons}>
<p className="hero__subtitle">{siteConfig.tagline}</p>
{/* <div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/blog">
Перейти к записям
to="/docs/intro">
Docusaurus Tutorial - 5min ⏱️
</Link>
</div>
</div> */}
</div>
</header>
);
}
export default function Home() {
export default function Home(): JSX.Element {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
title={`Personal blog ${siteConfig.title}`}
title={`Personal Blog ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<HomepageHeader />
<main>
{/* <HomepageHeader /> */}
<HomeHeader />
{/* <main> */}
{/* <HomepageFeatures /> */}
<HomepageTopics />
</main>
<HeroTest />
{/* </main> */}
<TopicsSection />
<AboutSite />
</Layout>
);
}
src/pages/markdown-page.md
+7
View File
@@ -0,0 +1,7 @@
---
title: Markdown page example
---
# Markdown page example
You don't need React to write simple standalone pages.