mirror of
https://github.com/SantaSpeen/santaspeen.ru-blog.git
synced 2026-05-20 00:20:28 +00:00
docusaurus init
This commit is contained in:
Artur Akmalov
@@ -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">×</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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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'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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './footer'
|
||||
export * from './header'
|
||||
export * from './layout'
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user