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

docusaurus init

Browse Source
This commit is contained in:
Artur Akmalov
2023-05-17 00:46:16 +05:00
parent 913a9d37ff
commit 7c36b010b9
75 changed files with 7011 additions and 30401 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeroTest.js
+42
View File
@@ -0,0 +1,42 @@
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
+64
View File
@@ -0,0 +1,64 @@
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
const FeatureList = [
{
title: 'Easy to Use',
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
description: (
<>
Docusaurus was designed from the ground up to be easily installed and
used to get your website up and running quickly.
</>
),
},
{
title: 'Focus on What Matters',
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
description: (
<>
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
ahead and move your docs into the <code>docs</code> directory.
</>
),
},
{
title: 'Powered by React',
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
description: (
<>
Extend or customize your website layout by reusing React. Docusaurus can
be extended while reusing the same header and footer.
</>
),
},
];
function Feature({Svg, title, description}) {
return (
<div className={clsx('col col--4')}>
<div className="text--center">
<Svg className={styles.featureSvg} role="img" />
</div>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
);
}
export default function HomepageFeatures() {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}
src/components/HomepageFeatures/styles.module.css
+11
View File
@@ -0,0 +1,11 @@
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 200px;
width: 200px;
}
src/components/HomepageTopics/index.js
+58
View File
@@ -0,0 +1,58 @@
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--2')}>
<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
@@ -0,0 +1,11 @@
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 100px;
width: 100px;
}
src/components/card.js
-24
View File
@@ -1,24 +0,0 @@
import React from 'react'
import { Link } from 'gatsby'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
const Card = ({ link, title, thumbnail, date, excerpt }) => {
return (
<article className="rounded bg-surface shadow-lg transition-all duration-500 ease-in-out hover:-translate-y-2 hover:shadow-accent/30">
<Link to={link} className="block p-4">
<div className="flex flex-col items-center gap-4 sm:flex-row">
<div className="h-[120px] w-[180px] shrink-0 overflow-hidden rounded bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 shadow-lg">
<GatsbyImage alt={title} image={getImage(thumbnail)} />
</div>
<div>
{date && <time className="font-semibold text-accent">{date}</time>}
<h3 className="!mt-0 text-xl">{title}</h3>
<p className="text-base text-muted">{excerpt}</p>
</div>
</div>
</Link>
</article>
)
}
export default Card
src/components/footer.js
-20
View File
@@ -1,20 +0,0 @@
import React from 'react'
// import Ichthys from '../svg/ichthys.svg'
import { useSiteMetadata } from '../hooks/use-site-metadata'
export const Footer = () => {
const year = new Date().getFullYear()
const { githubUrl } = useSiteMetadata()
return (
<footer className="mt-4 flex items-center justify-center gap-2 bg-surface py-6 shadow-inner">
<div>© {year}</div>
<a href={githubUrl} className="!no-underline">
Artur Akmalov
</a>
{/* <Ichthys alt="ichthys" className="w-8" /> */}
</footer>
)
}
export default Footer
src/components/header.js
-42
View File
@@ -1,42 +0,0 @@
import React from 'react'
import { Link } from 'gatsby'
import Logo from '../images/icon.png'
//mr-4 text-2xl text-gray-500 hover:no-underline shrink-0 font-normal
export const Header = () => {
return (
<header className="bg-white border-gray-200 dark:bg-gray-900">
<div className="mx-auto max-w-screen-xl">
<div className="mx-6 flex justify-between">
<Link className="flex gap-1 text-lg" to="/">
<img alt="logo" src={Logo} className="w-10 object-contain" />
<span className="ml-3 hidden shrink-0 text-gray-800 py-5 text-3xl sm:block">Artur Akmalov</span>
</Link>
<nav className="flex gap-6 py-5">
<Link
className="border-b-[3px] border-transparent text-lg"
to="/"
>
Home
</Link>
<Link
className="border-b-[3px] border-transparent text-lg"
to="/blog"
>
Blog
</Link>
<Link
className="border-b-[3px] border-transparent text-lg"
to="/about"
>
About
</Link>
</nav>
</div>
</div>
</header>
)
}
export default Header
src/components/index.js
-3
View File
@@ -1,3 +0,0 @@
export * from './footer'
export * from './header'
export * from './layout'
src/components/layout.js
-15
View File
@@ -1,15 +0,0 @@
import React from 'react'
import { Header } from './header'
import { Footer } from './footer'
export const Layout = ({ children }) => {
return (
<div className="prose prose-sm min-w-full bg-bg sm:prose">
<Header />
<main className="mx-auto min-h-screen max-w-2xl px-2 sm:px-4">
{children}
</main>
<Footer />
</div>
)
}
src/css/custom.css
+121
View File
@@ -0,0 +1,121 @@
/**
* 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: #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-code-font-size: 95%;
--ifm-footer-padding-vertical: 20px;
}
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;
}
#post-content a:not(.button),
.markdown a:not(.button) {
text-decoration: underline;
}
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 {
font-weight: bold;
}
.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 {
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;
}
src/css/custom_old.css
+59
View File
@@ -0,0 +1,59 @@
/**
* 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/hooks/use-site-metadata.js
-22
View File
@@ -1,22 +0,0 @@
import { useStaticQuery, graphql } from 'gatsby'
export const useSiteMetadata = () => {
const { site } = useStaticQuery(
graphql`
query SiteMetaData {
site {
siteMetadata {
title
siteUrl
description
image
keywords
githubUrl
linkedInUrl
}
}
}
`
)
return site.siteMetadata
}
src/images/icon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

src/pages/404.js
-49
View File
@@ -1,49 +0,0 @@
import * as React from "react"
import { Link } from "gatsby"
const pageStyles = {
color: "#232129",
padding: "96px",
fontFamily: "-apple-system, Roboto, sans-serif, serif",
}
const headingStyles = {
marginTop: 0,
marginBottom: 64,
maxWidth: 320,
}
const paragraphStyles = {
marginBottom: 48,
}
const codeStyles = {
color: "#8A6534",
padding: 4,
backgroundColor: "#FFF4DB",
fontSize: "1.25rem",
borderRadius: 4,
}
const NotFoundPage = () => {
return (
<main style={pageStyles}>
<h1 style={headingStyles}>Page not found</h1>
<p style={paragraphStyles}>
Sorry 😔, we couldn’t find what you were looking for.
<br />
{process.env.NODE_ENV === "development" ? (
<>
<br />
Try creating a page in <code style={codeStyles}>src/pages/</code>.
<br />
</>
) : null}
<br />
<Link to="/">Go home</Link>.
</p>
</main>
)
}
export default NotFoundPage
export const Head = () => <title>Not found</title>
src/pages/_about-me.md
+7
View File
@@ -0,0 +1,7 @@
I&nbsp;write back-end applications in **Go** and modern front-ends using **TypeScript** (**React.js**). I design and implement **GraphQL**, **gRPC** and **REST** APIs.
I&nbsp;work in a cloud-native environment in the "you build it, you run it" model. Apart from building microservices, I use and extend **Kubernetes**. I am both [Certified Kubernetes Application Developer](https://www.youracclaim.com/badges/4ef650a8-2c5d-48df-bdc7-d7bafdd9e4ec) and [Certified Kubernetes Administrator](https://www.youracclaim.com/badges/32059797-c35c-4c49-bcc3-d27268a530df).
In 2018, I&nbsp;have completed a&nbsp;master's in Computer Science at Silesian University of Technology.
I'm open source and cloud-native enthusiast. That's why I'm a&nbsp;co-organizer of the&nbsp;[Gophers Silesia](https://www.meetup.com/GophersSilesia) meetup, which is a&nbsp;local community interested in Go & cloud-native topics.
src/pages/about.js
-23
View File
@@ -1,23 +0,0 @@
import * as React from "react"
import Header from "../components/header"
import Footer from "../components/footer"
const AboutPage = () => {
return (
<main>
<Header />
<div className="mx-auto max-w-screen-xl">
<div className="ml-7 mt-6 justify-between">
<h1>About page</h1>
<p>Info about me</p>
</div>
</div>
<Footer />
</main>
)
}
export const Head = () => <title>About Page</title>
export default AboutPage
src/pages/about.md
+23
View File
@@ -0,0 +1,23 @@
---
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/blog.js
-82
View File
@@ -1,82 +0,0 @@
import * as React from "react"
import { graphql } from 'gatsby'
import Header from "../components/header"
import Footer from "../components/footer"
import Card from '../components/card'
const BlogPage = ({ data }) => {
return (
<main>
<Header />
<div className="mx-auto max-w-screen-xl">
<div className="ml-7 mt-7 justify-between">
<h1>Blog page</h1>
<p>I'm making this by following the Gatsby Tutorial.</p>
</div>
<div>
<h2 className="ml-7 mt-7 mb-6 text-4xl">Blog</h2>
<ul
className="ml-7 mb-4"
style={{
listStyleType: 'none',
padding: 0,
display: 'grid',
gap: '2rem',
}}
>
{data.allMdx.nodes.map(
({
id,
excerpt,
frontmatter: { title, featuredImage, date },
// fields: { slug },
}) => (
<li key={id}>
<Card
link={`/blog`}
title={title}
thumbnail={featuredImage?.path?.childImageSharp}
date={date}
excerpt={excerpt}
/>
</li>
)
)}
</ul>
</div>
</div>
<Footer />
</main>
)
}
export const Head = () => <title>Blog Page</title>
export default BlogPage
export const query = graphql`
query {
allMdx(
sort: { frontmatter: { date: DESC } }
filter: { frontmatter: { type: { eq: "post" } } }
) {
nodes {
id
excerpt(pruneLength: 100)
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
featuredImage {
path {
childImageSharp {
gatsbyImageData(width: 800)
}
}
}
}
}
}
}
`
src/pages/index.js
+40 -18
View File
@@ -1,24 +1,46 @@
import * as React from "react"
// import { Link } from 'gatsby'
import Header from "../components/header"
import Footer from "../components/footer"
import React from 'react';
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';
const IndexPage = () => {
import styles from './index.module.css';
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<main>
<Header />
<div className="mx-auto max-w-screen-xl">
<div className="ml-7 mt-6 justify-between">
<h1>Welcome to my Gatsby site!</h1>
<p>I'm making this by following the Gatsby Tutorial.</p>
<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}>
<Link
className="button button--secondary button--lg"
to="/blog">
Перейти к записям
</Link>
</div>
</div>
<Footer />
</main>
)
</header>
);
}
export const Head = () => <title>Home Page</title>
export default IndexPage
export default function Home() {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
title={`Personal blog ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<HomepageHeader />
<main>
{/* <HomepageFeatures /> */}
<HomepageTopics />
</main>
<HeroTest />
</Layout>
);
}
src/pages/index.module.css
+23
View File
@@ -0,0 +1,23 @@
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
src/styles/global.css
-3
View File
@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;