renamed: posts/poel-layouts.mdx -> competition/pole_layouts.mdx

renamed:    posts/regulations.mdx -> competition/regulations.mdx
	renamed:    posts/festival-schedule.mdx -> competition/schedule.mdx
	modified:   components/Navigation.tsx
	new file:   components/UX/Block.tsx
	modified:   components/UX/index.ts
	new file:   components/UX/styles/block.css
	modified:   package-lock.json
	modified:   package.json
	modified:   pages/_app.tsx
	modified:   pages/_document.tsx
	modified:   pages/about.tsx
	new file:   pages/competition/[slug].tsx
	renamed:    pages/registration.tsx -> pages/competition/registration.tsx
	modified:   pages/contacts.tsx
	modified:   pages/index.tsx
	modified:   pages/posts/[slug].tsx
	new file:   posts/robot-vex-iq-small.mdx
	deleted:    posts/task-completion-examples.mdx
	new file:   public/images/robot_builds/vex_iq_14/00.jpg
	new file:   public/images/robot_builds/vex_iq_14/01.jpg
	new file:   public/images/robot_builds/vex_iq_14/02.jpg
	new file:   public/images/robot_builds/vex_iq_14/03.jpg
	new file:   public/images/robot_builds/vex_iq_14/04.jpg
	new file:   public/images/robot_builds/vex_iq_14/05.jpg
	new file:   public/images/robot_builds/vex_iq_14/06.jpg
	new file:   public/images/robot_builds/vex_iq_14/07.jpg
	new file:   public/images/robot_builds/vex_iq_14/08.jpg
	new file:   public/images/robot_builds/vex_iq_14/09.jpg
	new file:   public/images/robot_builds/vex_iq_14/10.jpg
	new file:   public/images/robot_builds/vex_iq_14/11.jpg
	new file:   public/images/robot_builds/vex_iq_14/12.jpg
	new file:   public/images/robot_builds/vex_iq_14/13.jpg
	new file:   public/images/robot_builds/vex_iq_14/14.jpg
	new file:   public/images/robot_builds/vex_iq_14/15.jpg
	new file:   public/images/robot_builds/vex_iq_14/16.jpg
	new file:   public/images/robot_builds/vex_iq_14/17.jpg
	new file:   public/images/robot_builds/vex_iq_14/18.jpg
	new file:   public/images/robot_builds/vex_iq_14/19.jpg
	new file:   public/images/robot_builds/vex_iq_14/20.jpg
	new file:   public/images/robot_builds/vex_iq_14/21.jpg
	new file:   public/images/robot_builds/vex_iq_14/22.jpg
	new file:   public/images/robot_builds/vex_iq_14/23.jpg
	new file:   public/images/robot_builds/vex_iq_14/24.jpg
	new file:   public/images/robot_builds/vex_iq_14/25.jpg
	new file:   public/images/robot_builds/vex_iq_14/26.jpg
	new file:   public/images/robot_builds/vex_iq_14/27.jpg
	new file:   public/images/robot_builds/vex_iq_14/28.jpg
	new file:   public/images/robot_builds/vex_iq_14/29.jpg
	new file:   public/images/robot_builds/vex_iq_14/30.jpg
	new file:   public/images/robot_builds/vex_iq_14/31.jpg
	new file:   public/images/robot_builds/vex_iq_14/32.jpg
	new file:   public/images/robot_builds/vex_iq_14/33.jpg
	new file:   public/images/videoShort.png
	new file:   public/pdf/robot_builds/vex_iq_14.pdf
	new file:   public/video/shortpreck.mp4
	new file:   static.config.js
	modified:   styles/globals.css
	modified:   types/layout.ts
	modified:   utils/mdxUtils.ts
	new file:   utils/mdxUtilsComp.ts
	modified:   yarn.lock

competition/regulations.mdx

@@ -18,7 +18,7 @@ image: '/images/robottop.png'
 * **"Робо - Шорт-Трек" роботы собраны на произвольной платформе**
 
 ## 1. Участники:
-* <p>Команда состоит 1, 2-x учащихся с 1 по 11 класс</p>
+* <p>Команда состоит 2-x учащихся с 1 по 11 класс</p>
 * <p>Каждая команда на соревнованиях должна привезти с собой одного **уникального робота**</p>
 * <p>Возрастные группы участников разделяются по возрастам. Если в команде присутствуют участники из разных классов, то определяется по самому старшему ученику.</p>
 * Номинация "Робо-слалом" 
@@ -70,6 +70,8 @@ image: '/images/robottop.png'
   priority
 />
 Рисунок 1 - Вид игрового поля 
+* [Скачать макет поля - Робо - слалом.pdf](https://robotop.krasnikov.pro/field_layouts/RoboSlaum.pdf)
+* [Скачать макет поля - Робо - слалом.cdr (Corel Draw)](https://robotop.krasnikov.pro/field_layouts/RoboSlaum.cdr)
 
 ## 3. Номинация "Шорт-Трек"
 #### 3.1 Первый и второй этап:
@@ -108,6 +110,12 @@ image: '/images/robottop.png'
   priority
 />
 Рисунок 2 - Вид игрового поля 
+* [Скачать макет поля - Робо - Шорт-Трек.pdf](https://robotop.krasnikov.pro/field_layouts/ShortTrack.pdf)
+* [Скачать макет поля - Робо - Шорт-Трек.cdr (Corel Draw)](https://robotop.krasnikov.pro/field_layouts/ShortTrack.cdr)
+
+#### Пример выполнения задания
+[![Робо - Шорт-Трек](/images/videoShort.png)](https://youtu.be/kJZpQvrXYss)
+
 
 ## 4 Робот:
 * К соревнованиям в номинациях **«Робо-слалом»** и **«Шорт-Трек»** допускаются роботы, собранные на базе произвольного конструктора.
@@ -135,11 +143,11 @@ image: '/images/robottop.png'
 * После окончания заезда никто кроме судьи не имеет права трогать роботов и Игровые Элементы. Затем судьи  должны подсчитать баллы и объявить результат заезда (подробности подсчета см. следующий раздел). После  этого команды могут забрать своих роботов. Если команды с чем-то не согласны, то они могут спокойно изложить свои аргументы судьям. Роботы  продолжают оставаться на своих местах до окончания спора.
 * Помните, что только 2 члена команды должны  находиться возле игрового поля! В итоге судья выносит окончательное решение. В случае, если найти решение в обсуждении не удается, судьи оставляют за собой решение о необходимости переигровки заезда.
 * Команда объявляется дисквалифицированной с заезда, если ни один из роботов команды полностью не покинул стартовую площадку в течение заезда.
-### 5.2 СТАТИЧЕСКАЯ ПРОВЕРКА
+### 5.2 Статическая проверка
 * Перед тем, как выступать на Поле, роботы осматриваются судьей, который проверяет их на соответствие правилам. Роботы должны быть готовы к демонстрации всех своих возможных действий.
-### 5.3 ДИНАМИЧЕСКАЯ ПРОВЕРКА:
+### 5.3 Динамическая проверка: 
 * Роботы должны в течение 30 секунд продемонстрировать хотя бы одно действие, приносящее минимальное  количество очков. Роботы проверяются на Игровом Поле. Также может быть проверено соответствие некоторым обязательным требованиям правил.
-### 5.4 ЗНАЧИТЕЛЬНЫЕ ИЗМЕНЕНИЯ В РОБОТЕ:
+### 5.4 Значительные изменения в роботе:
 * В случае значительных технических изменений (функциональных, структурных, размерных...), выполненных  после прохождения этапа допуска к соревнованиям, необходимо сообщить о них судье. Судьи должны  утвердить изменения и, если посчитают необходимым, могут назначить повторную проверку роботу, подвергшемуся доработке.
 * Если организаторы считают, что робот был модифицирован, может потребоваться повторная гомологизация  робота, что запрещает ему соревноваться до тех пор, пока не будет получен повторный допуск.
 ## 5.5 Определение победителей

competition/schedule.mdx

@@ -6,7 +6,7 @@ date: '2022-11-10'
 
 ## Расписание соревнований
 
-### 20 января 2023 года
+### 28 января 2023 года
 + 09:00 - 09:30 - Регистрация участников
 + 09:30 - 10:00 - Открытие Соревнований
 + 10:00 - 12:00 - Подготовка роботов к соревнованиям

components/Navigation.tsx

@@ -6,12 +6,12 @@ import { useRouter } from 'next/router'
 
 const navigation = [
   { name: 'Главная', href: '/', as: false },
-  { name: 'Правила', href: '/posts/[slug]', as:'regulations'},
+  { name: 'Регламент', href: '/competition/[slug]', as:'regulations', patch:'competition'},
-  { name: 'Регистрация', href: '/registration', as: false },
+  { name: 'Регистрация', href: '/competition/registration', as: false , patch:'competition' },
-  { name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule' },
+  { name: 'Расписание', href: '/competition/[slug]', as: 'schedule' , patch:'competition'},
-  { name: 'Макеты поелй', href: '/posts/[slug]', as:'poel-layouts'},
+  { name: 'Макеты полей', href: '/competition/[slug]', as:'pole_layouts' , patch:'competition'},
-  { name: 'Контакты', href: '/contacts', as: false},
+  { name: 'Контакты', href: '/contacts', as: false , patch:''},
-  { name: 'О нас', href: '/about', as: false},
+  { name: 'О нас', href: '/about', as: false , patch:''},
 ]
 
 function classNames(...classes) {
@@ -30,7 +30,7 @@ const Navigation = (): JSX.Element => {
             <div className="hidden md:block">
               <div className="ml-10 flex items-baseline space-x-4">
                 {navigation.map((item) => (
-                  <Link as={ item.as ? '/posts/'+item.as : ''} href={item.href} key={item.name}>
+                  <Link as={ item.as ? '/'+item.patch+'/'+item.as : ''} href={item.href} key={item.name}>
                     <a
                       className={classNames(
                         item.as == router.query.slug && router.query.slug !== 'undefined'?
@@ -81,7 +81,7 @@ const Navigation = (): JSX.Element => {
           <div className="md:hidden" id="mobile-menu">
             <div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
               {navigation.map((item) => (
-                <Link as={'/posts/'+item.as}  href={item.href} key={item.name}>
+                <Link as={'/'+item.patch+'/'+item.as}  href={item.href} key={item.name}>
                   <a
                     className={classNames(
                       item.as == router.query.slug && router.query.slug !== 'undefined'?

components/UX/Block.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+    children?: JSX.Element[] | JSX.Element;
+  }
+
+export const BlockHead: React.FC<Props> = ({children}) => {
+    return(
+        <div className='blockHead'>
+            {children}
+        </div>
+    )
+}

components/UX/index.ts

@@ -3,3 +3,4 @@ export * from './Alert'
 export * from './Input'
 export * from './Link'
 export * from './SelectNominations'
+export * from './Block'

components/UX/styles/block.css

@@ -0,0 +1,12 @@
+.blockHead {
+    background: #e8e8e8;
+    border-radius: 10px;
+  }
+  .blockHead span {
+    background: white;
+    display: inline-block;
+    width: 100%;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.22);
+    padding: 15px;
+    border-radius: 10px; 
+  }

package.json

@@ -33,15 +33,18 @@
     "axios": "^0.27.2",
     "date-fns": "^2.28.0",
     "gray-matter": "^4.0.3",
+    "markdown-to-jsx": "^7.1.8",
     "mysql2": "^2.3.3",
     "next": "^12.2.0",
-    "next-mdx-remote": "^4.0.3",
+    "next-mdx-remote": "^4.2.0",
     "next-themes": "^0.2.0",
+    "next-videos": "^1.5.0",
     "react": "^18.2.0",
     "react-confirm-alert": "^3.0.2",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.1",
     "react-redux": "^8.0.2",
+    "react-static-plugin-mdx": "^7.6.2",
     "react-toastify": "^9.0.5",
     "react-yandex-metrika": "^2.6.0",
     "rehype-autolink-headings": "^6.1.1",

pages/_app.tsx

@@ -1,6 +1,5 @@
 import { ThemeProvider } from 'next-themes';
 import type { AppProps } from 'next/app';
-import React from 'react';
 import { Provider } from 'react-redux';
 import '../styles/globals.css';
 import { store } from '../redux/store';

pages/about.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Layout from '../components/Layout';
 
 export const About = (): JSX.Element => {
@@ -9,6 +8,7 @@ export const About = (): JSX.Element => {
       }}
     >
       <h2>RobotTop</h2>
+      <br></br>
       <p>Организатор соревнований лаборатория робототехники Krasnikov Robotics</p>
       <p>Занимаемся робототехникой с 2006 года</p>
       <p>Наши ученики участники так соревнований как EUROBOT 2019, EUROBOT 2020, EUROBOT 2021, EUROBOT 2019, Робофест c 2013 года, FLL, РТК</p>

pages/competition/[slug].tsx

@@ -0,0 +1,95 @@
+import { format, parseISO } from 'date-fns';
+import fs from 'fs';
+import matter from 'gray-matter';
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { serialize } from 'next-mdx-remote/serialize';
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
+import Head from 'next/head';
+import Image from 'next/image';
+import Link from 'next/link';
+import path from 'path';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+import Layout, { WEBSITE_HOST_URL } from '../../components/Layout';
+import { MetaProps } from '../../types/layout';
+import { PostType } from '../../types/post';
+import { postFilePathsComp, POSTS_PATH_COMP } from '../../utils/mdxUtilsComp';
+
+// Custom components/renderers to pass to MDX.
+// Since the MDX files aren't loaded by webpack, they have no knowledge of how
+// to handle import statements. Instead, you must include components in scope
+// here.
+const components = {
+  Head,
+  Image,
+  Link,
+};
+
+type PostPageProps = {
+  source: MDXRemoteSerializeResult;
+  frontMatter: PostType;
+};
+
+const PostPage = ({ source, frontMatter }: PostPageProps): JSX.Element => {
+  const customMeta: MetaProps = {
+    title: `${frontMatter.title} - RoboTop`,
+    description: frontMatter.description,
+    image: `${WEBSITE_HOST_URL}${frontMatter.image}`,
+    date: frontMatter.date,
+    type: 'article',
+  };
+
+  return (
+    <Layout customMeta={customMeta}>
+      <article className="max-w">
+        <h1 className="mb-3 text-gray-900 dark:text-white">
+          {frontMatter.title}
+        </h1>
+        <p className="mb-10 text-sm text-gray-500 dark:text-gray-400">
+          {format(parseISO(frontMatter.date), 'MMMM dd, yyyy')}
+        </p>
+        <div className="prose dark:prose-dark">
+          <MDXRemote {...source} components={components} />
+        </div>
+      </article>
+    </Layout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const postFilePath = path.join(POSTS_PATH_COMP, `${params.slug}.mdx`);
+  const source = fs.readFileSync(postFilePath);
+
+  const { content, data } = matter(source);
+
+  const mdxSource = await serialize(content, {
+    // Optionally pass remark/rehype plugins
+    mdxOptions: {
+      remarkPlugins: [require('remark-code-titles')],
+      rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
+    },
+    scope: data,
+  });
+
+  return {
+    props: {
+      source: mdxSource,
+      frontMatter: data,
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths = postFilePathsComp
+    // Remove file extensions for page paths
+    .map((path) => path.replace(/\.mdx?$/, ''))
+    // Map the path into the static paths object required by Next.js
+    .map((slug) => ({ params: { slug } }));
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export default PostPage;

pages/competition/registration.tsx

@@ -1,10 +1,10 @@
 import React, {useEffect, useState} from 'react';
-import Layout from '../components/Layout';
+import Layout from '../../components/Layout';
-import RegistrationForm from '../components/RegistrationForm';
+import RegistrationForm from '../../components/RegistrationForm';
-import LoadingTeamsForm from '../components/LoadingTeamsForm';
+import LoadingTeamsForm from '../../components/LoadingTeamsForm';
 import { useSelector } from 'react-redux';
-import { useAppDispatch } from '../redux/store';
+import { useAppDispatch } from '../../redux/store';
-import { fetchUser, selectUserData } from '../redux/user';
+import { fetchUser, selectUserData } from '../../redux/user';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 

pages/contacts.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Layout from '../components/Layout';
 import { Link } from '../components/UX';
 

pages/index.tsx

@@ -1,10 +1,10 @@
 import { format, parseISO } from 'date-fns';
 import { GetStaticProps } from 'next';
 import Link from 'next/link';
-import React from 'react';
 import Layout from '../components/Layout';
 import { getAllPosts } from '../lib/api';
 import { PostType } from '../types/post';
+import { BlockHead } from '../components/UX/index'
 
 type IndexProps = {
   posts: PostType[];
@@ -13,8 +13,10 @@ type IndexProps = {
 export const Index = ({ posts }: IndexProps): JSX.Element => {
   return (
     <Layout>
-      <h1>Городской Хакатон по робототехнике RobotTop</h1>
+      <BlockHead>
-      <p>RobotTop – это робототехнический Хакатон, в которых могут принять участие молодые любители робототехники.</p>
+        <span>
+          <h1>Городской &quot;хакатон&quot; по робототехнике RobotTop</h1>
+          <p>RobotTop – это робототехнический хакатон, в которых могут принять участие молодые любители робототехники.</p>
           <ul className="list-disc pl-4 my-6">
             <li className="mt-2"><b>Дата проведения </b> 28 января 2023 года</li>
             <li className="mt-2"><b>Место проведения </b> г. Краснодар ул. Тепличная 11 (МАОУ СОШ 94)</li>
@@ -23,14 +25,24 @@ export const Index = ({ posts }: IndexProps): JSX.Element => {
             <li className="mt-2">3 возрастных группы</li>
             <li className="mt-2">Свобода в творчестве</li>
           </ul>
-      <Link href={`/registration`}>
+          <Link href={'/posts/[slug]'} as={'/posts/regulations'}>
           <a
-        className="inline-block px-7 py-3 rounded-md text-white dark:text-white bg-blue-600 hover:bg-blue-700 hover:text-white dark:hover:text-white"
+            className="buttonMargin inline-block px-7 py-3 rounded-md text-white dark:text-white bg-blue-600 hover:bg-blue-700 hover:text-white dark:hover:text-white"
           >
-        Регистрация команды
+            Регламент соревнований
           </a>
           </Link> 
 
+          <Link href={`competition/registration`}>
+          <a
+            className="buttonMargin inline-block px-7 py-3 rounded-md text-white dark:text-white bg-blue-600 hover:bg-blue-700 hover:text-white dark:hover:text-white"
+          >
+            Регистрация команды
+          </a>
+          </Link>
+        </span>
+      </BlockHead>
+      <h2 className='mt_30'>Блог</h2>
       {posts.map((post) => (
         <article key={post.slug} className="mt-12">
           <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">

pages/posts/[slug].tsx

@@ -8,7 +8,6 @@ import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import path from 'path';
-import React from 'react';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
 import Layout, { WEBSITE_HOST_URL } from '../../components/Layout';
@@ -39,6 +38,7 @@ const PostPage = ({ source, frontMatter }: PostPageProps): JSX.Element => {
     date: frontMatter.date,
     type: 'article',
   };
+
   return (
     <Layout customMeta={customMeta}>
       <article className="max-w">

posts/robot-vex-iq-small.mdx

@@ -0,0 +1,19 @@
+---
+title: Робот на VEX IQ размером не больше 14х14х14 см
+description: Данный робот создавался для городского этапа олимпиады по технологии.
+date: '2022-12-23'
+---
+
+## Робот на VEX IQ размером не больше 14х14х14 см
+
+<Image
+  alt={`Регламент проведения соревнования.`}
+  src={`/images/robot_builds/vex_iq_14/00.jpg`}
+  width={3360}
+  height={2250}
+  priority
+/>
+
+ ### [Скачать инструкцию в формате pdf](../pdf/robot_builds/vex_iq_14.pdf)
+
+На главную [Home](/)

posts/task-completion-examples.mdx

@@ -1,11 +0,0 @@
----
-title: Примеры выполнения задания
-description: Видео по выполнения заданий и материалы по сборке и программирования робота
-date: '2022-07-02'
----
-
-На данный момент мы подготавливаем материал для публикации на сайте.
-Весь материал будет опубликован до 14 ноября 2022 года.
-
-
-На главную [Home](/)

static.config.js

@@ -0,0 +1,3 @@
+export default {
+    plugins: ["react-static-plugin-mdx"]
+  };

styles/globals.css

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url('../components/UX/styles/block.css'); 
+
 @layer base {
   h1 {
     @apply mb-6 text-3xl font-semibold;
@@ -117,3 +119,16 @@ pre {
 .mdx-marker {
   @apply block -mx-4 px-4 bg-gray-100 dark:bg-gray-800 border-l-4 border-blue-500;
 }
+
+body {
+  background: #edeef0;
+}
+
+.buttonMargin{
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.mt_30{
+  margin-top: 30px;
+}

types/layout.ts

@@ -6,4 +6,5 @@ export interface MetaProps
    * For the meta tag `og:type`
    */
   type?: string;
+  
 }

utils/mdxUtilsComp.ts

@@ -0,0 +1,11 @@
+import fs from 'fs';
+import path from 'path';
+
+// POSTS_PATH is useful when you want to get the path to a specific file
+  export const POSTS_PATH_COMP = path.join(process.cwd(), 'competition');
+
+  // postFilePaths is the list of all mdx files inside the POSTS_PATH directory
+  export const postFilePathsComp = fs
+    .readdirSync(POSTS_PATH_COMP)
+    // Only include md(x) files
+    .filter((path) => /\.mdx?$/.test(path));