modified: next.config.mjs

modified:   package-lock.json
	modified:   package.json
	modified:   pages/_app.tsx
	modified:   pages/_document.tsx
	modified:   pages/index.tsx
	modified:   pages/posts/[slug].tsx
	new file:   posts/arcade-python-1.mdx
	new file:   posts/arcade-python-2.mdx
	modified:   posts/robot-lego-ev3-short-track.mdx
	new file:   posts/robot-vex-iq-short-track.mdx
	modified:   posts/robot-vex-iq-small.mdx
	new file:   public/blog/dev/phyton/arcade/01.png
	new file:   public/blog/dev/phyton/arcade/02.png
	renamed:    public/blog/robot_builds/short_track/lego_ev3_short_track.ev3 -> public/blog/robot_builds/short_track_lego/lego_ev3_short_track.ev3
	renamed:    public/blog/robot_builds/short_track/lego_ev3_short_track.jpg -> public/blog/robot_builds/short_track_lego/lego_ev3_short_track.jpg
	renamed:    public/blog/robot_builds/short_track/lego_ev3_short_track.lmsp -> public/blog/robot_builds/short_track_lego/lego_ev3_short_track.lmsp
	renamed:    public/blog/robot_builds/short_track/lego_ev3_short_track.pdf -> public/blog/robot_builds/short_track_lego/lego_ev3_short_track.pdf
	renamed:    public/blog/robot_builds/short_track/lego_ev3_short_track_class_rom.jpg -> public/blog/robot_builds/short_track_lego/lego_ev3_short_track_class_rom.jpg
	renamed:    public/blog/robot_builds/short_track/lego_ev3_short_track_lab.jpg -> public/blog/robot_builds/short_track_lego/lego_ev3_short_track_lab.jpg
	renamed:    public/blog/robot_builds/short_track/progLab_ult.jpg -> public/blog/robot_builds/short_track_lego/progLab_ult.jpg
	renamed:    public/blog/robot_builds/short_track/short_ult.ev3 -> public/blog/robot_builds/short_track_lego/short_ult.ev3
	new file:   public/blog/robot_builds/short_track_vex_iq/linePD.iqblocks
	new file:   public/blog/robot_builds/short_track_vex_iq/main.jpg
	new file:   public/blog/robot_builds/short_track_vex_iq/prog.jpg
	new file:   public/blog/robot_builds/short_track_vex_iq/vex_iq_short.pdf
	new file:   styles/atom-one-dark.min.css
	modified:   styles/globals.css
	new file:   styles/prism-onedark.css
	modified:   yarn.lock

next.config.mjs

@@ -4,6 +4,7 @@ import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
 import rehypeStringify from 'rehype-stringify'
 
+
 const withMDX = nextMDX({
   extension: /\.mdx?$/,
   options: {

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
+    "@mapbox/rehype-prism": "^0.8.0",
     "@next/mdx": "^12.2.0",
     "@reduxjs/toolkit": "^1.8.3",
     "@tailwindcss/typography": "^0.5.2",
@@ -33,24 +34,31 @@
     "axios": "^0.27.2",
     "date-fns": "^2.28.0",
     "gray-matter": "^4.0.3",
+    "highlight.js": "^11.7.0",
     "markdown-to-jsx": "^7.1.8",
     "mysql2": "^2.3.3",
     "next": "^12.2.0",
     "next-mdx-remote": "^4.2.0",
     "next-themes": "^0.2.0",
     "next-videos": "^1.5.0",
+    "prism-theme-one-dark": "^1.0.0",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-confirm-alert": "^3.0.2",
     "react-dom": "^18.2.0",
+    "react-highlight": "^0.15.0",
     "react-hook-form": "^7.33.1",
     "react-redux": "^8.0.2",
     "react-static-plugin-mdx": "^7.6.2",
+    "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.0.5",
     "react-yandex-metrika": "^2.6.0",
     "rehype-autolink-headings": "^6.1.1",
+    "rehype-highlight": "^6.0.0",
     "rehype-slug": "^5.0.1",
     "remark-code-titles": "^0.1.2",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "remark-prism": "^1.3.6"
   },
   "devDependencies": {
     "@testing-library/react": "^13.3.0",

pages/_app.tsx

@@ -1,8 +1,9 @@
 import { ThemeProvider } from 'next-themes';
 import type { AppProps } from 'next/app';
 import { Provider } from 'react-redux';
-import '../styles/globals.css';
 import { store } from '../redux/store';
+import '../styles/globals.css';
+
 
 const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
   return (

pages/_document.tsx

@@ -1,9 +1,11 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+
 class MyDocument extends Document {
   render(): JSX.Element {
     return (
       <Html lang="ru">
         <Head />
+
           <body className="bg-white dark:bg-black text-gray-900 dark:text-white">
             <script type="text/javascript"
               dangerouslySetInnerHTML={{

pages/index.tsx

@@ -15,8 +15,8 @@ export const Index = ({ posts }: IndexProps): JSX.Element => {
     <Layout>
       <BlockHead>
         <span>
-          <h1>Городской &quot;хакатон&quot; по робототехнике RobotTop</h1>
+          <h1>Городской хакатон по робототехнике</h1>
-          <p>RobotTop – это робототехнический хакатон, в которых могут принять участие молодые любители робототехники.</p>
+          <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>

pages/posts/[slug].tsx

@@ -15,6 +15,7 @@ import { MetaProps } from '../../types/layout';
 import { PostType } from '../../types/post';
 import { postFilePaths, POSTS_PATH } from '../../utils/mdxUtils';
 
+
 // 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

posts/arcade-python-1.mdx

@@ -0,0 +1,76 @@
+---
+title: Урок 1. 2D игра на Python с библиотекой Arcade
+description: Создание смайлика
+date: '2023-01-09'
+---
+
+# Урок 1. Простой рисунок 
+
+### Установка 
+Для создания игры при помощи библиотеки Arcade необходимо установить её. Для установки выполните данную команду в терминале. 
+
+```sh 
+pip install --user arcade
+```
+## Задание №1. Простой рисунок
+Первое задание создать простой рисунок при помощи готовых функций в библиотеки ArCade.
+
+```python
+import arcade
+
+# Задать константы для размеров экрана
+SCREEN_WIDTH = 600
+SCREEN_HEIGHT = 600
+
+# Открыть окно. Задать заголовок и размеры окна (ширина и высота)
+arcade.open_window(SCREEN_WIDTH, SCREEN_HEIGHT, "ArCade")
+
+# Задать белый цвет фона.
+arcade.set_background_color(arcade.color.WHITE)
+
+# Начать процесс рендера. Это нужно сделать до команд рисования
+arcade.start_render()
+
+# Нарисовать лицо
+x = 300
+y = 300
+radius = 200
+arcade.draw_circle_filled(x, y, radius, arcade.color.YELLOW)
+
+# Нарисовать правый глаз
+x = 370
+y = 350
+radius = 20
+arcade.draw_circle_filled(x, y, radius, arcade.color.BLACK)
+
+# Нарисовать левый глаз
+x = 230
+y = 350
+radius = 20
+arcade.draw_circle_filled(x, y, radius, arcade.color.BLACK)
+
+# Нарисовать улыбку
+x = 300
+y = 280
+width = 120
+height = 100
+start_angle = 190
+end_angle = 350
+arcade.draw_arc_outline(x, y, width, height, arcade.color.BLACK, start_angle, end_angle, 10)
+
+# Завершить рисование и показать результат
+arcade.finish_render()
+
+# Держать окно открытым до тех пор, пока пользователь не нажмет кнопку “закрыть”
+arcade.run()
+```
+<Image
+  alt={`Простой рисунок`}
+  src={`/blog/dev/phyton/arcade/01.png`}
+  width={602}
+  height={640}
+  priority
+/>
+
+
+На главную [Главная](/)

posts/arcade-python-2.mdx

@@ -0,0 +1,66 @@
+---
+title: Урок 2. 2D игра на Python с библиотекой Arcade
+description: Урок 2. Изучение функций и циклов
+date: '2023-01-11'
+---
+
+# Урок 2. Изучение функций и циклов
+
+## Задания
++ Задание 1. Измените размер смайлика в 4 раза и уменьшите код программы.
++ Задание 2. Научится перемещать смайлик по экрану.
++ Задание 3. Сделать несколько смайликов не копируя строчки кода.
++ Задание 4. Разместить смайлики в 4 столбика на при максимальном количестве рядов
+
+```python
+import arcade
+
+# Задать константы для размеров экрана
+SCREEN_WIDTH = 600
+SCREEN_HEIGHT = 600
+
+def face(x,y):
+    # Нарисовать лицо
+    arcade.draw_circle_filled(x, y, 50, arcade.color.YELLOW)
+
+    # Нарисовать правый глаз
+    arcade.draw_circle_filled(x+20, y+20, 5, arcade.color.BLACK)
+
+    #Нарисовать левый глаз
+    arcade.draw_circle_filled(x-20, y+20, 5, arcade.color.BLACK)
+
+    # Нарисовать улыбку
+    arcade.draw_arc_outline(x, y-10, 50, 30, arcade.color.BLACK, 190, 350, 10)
+
+# Открыть окно. Задать заголовок и размеры окна (ширина и высота)
+arcade.open_window(SCREEN_WIDTH, SCREEN_HEIGHT, "ArCade")
+
+# Задать белый цвет фона.
+arcade.set_background_color(arcade.color.WHITE)
+
+# Начать процесс рендера. Это нужно сделать до команд рисования
+arcade.start_render()
+
+x = 80
+for n in range(0,2):
+    for i in range(0,2):
+        for j in range(0, 5):
+            face(x+i*105, 540-j*120)
+    x = 400
+
+# Завершить рисование и показать результат
+arcade.finish_render()
+
+# Держать окно открытым до тех пор, пока пользователь не нажмет кнопку “закрыть”
+arcade.run()
+```
+<Image
+  alt={`Простой рисунок`}
+  src={`/blog/dev/phyton/arcade/02.png`}
+  width={602}
+  height={640}
+  priority
+/>
+
+
+На главную [Главная](/)

posts/robot-lego-ev3-short-track.mdx

@@ -8,17 +8,17 @@ date: '2022-12-28'
 
 <Image
   alt={`Робот на Lego EV3 для соревнований Шорт-трект`}
-  src={`/blog/robot_builds/short_track/lego_ev3_short_track.jpg`}
+  src={`/blog/robot_builds/short_track_lego/lego_ev3_short_track.jpg`}
   width={3360}
   height={2250}
   priority
 />
-* [Скачать инструкцию в формате pdf](/blog/robot_builds/short_track/lego_ev3_short_track.pdf)
+* [Скачать инструкцию в формате pdf](/blog/robot_builds/short_track_lego/lego_ev3_short_track.pdf)
 
 ### Подключение датчиков и электромоторов
 + Левый датчик света подключается в порт 2
 + Правый датчик света подключается в порт 3
-+ Датчик ультрозвука подключается в порт 4
++ Датчик ультразвука подключается в порт 4
 + Левый электромотор подключается в порт B
 + Правый электромотор подключается в порт С
 
@@ -30,32 +30,32 @@ date: '2022-12-28'
 
 ### Движение по черной линии с автоматической остановкой перед впереди едущим роботом
 <Image
-  alt={`Робот на Lego EV3 для соревнований Шорт-трект`}
+  alt={`Программа на Lego EV3 для соревнований Шорт-трект`}
-  src={`/blog/robot_builds/short_track/lego_ev3_short_track_class_rom.jpg`}
+  src={`/blog/robot_builds/short_track_lego/lego_ev3_short_track_class_rom.jpg`}
   width={1254}
   height={860}
   priority
 />
-* [Скачать программу для робота среда EV3 Сlassroom](/blog/robot_builds/short_track/lego_ev3_short_track.lmsp)
+* [Скачать программу для робота среда EV3 Сlassroom](/blog/robot_builds/short_track_lego/lego_ev3_short_track.lmsp)
 
 ### Движение по черной линии
 <Image
-  alt={`Робот на Lego EV3 для соревнований Шорт-трект`}
+  alt={`Программа на Lego EV3 для соревнований Шорт-трект`}
-  src={`/blog/robot_builds/short_track/lego_ev3_short_track_lab.jpg`}
+  src={`/blog/robot_builds/short_track_lego/lego_ev3_short_track_lab.jpg`}
   width={1568}
   height={449}
   priority
 />
-* [Скачать программу для робота среда Lego EV3 MINDSTORMS](/blog/robot_builds/short_track/lego_ev3_short_track.ev3)
+* [Скачать программу для робота среда Lego EV3 MINDSTORMS](/blog/robot_builds/short_track_lego/lego_ev3_short_track.ev3)
 
 ### Движение по черной линии с автоматической остановкой перед впереди едущим роботом
 <Image
-  alt={`Робот на Lego EV3 для соревнований Шорт-трект`}
+  alt={`Программа на Lego EV3 для соревнований Шорт-трект`}
-  src={`/blog/robot_builds/short_track/progLab_ult.jpg`}
+  src={`/blog/robot_builds/short_track_lego/progLab_ult.jpg`}
   width={1568}
   height={449}
   priority
 />
-* [Скачать программу для робота среда Lego EV3 MINDSTORMS + реакция на датчик ультразвука](/blog/robot_builds/short_track/short_ult.ev3)
+* [Скачать программу для робота среда Lego EV3 MINDSTORMS + реакция на датчик ультразвука](/blog/robot_builds/short_track_lego/short_ult.ev3)
 
-На главную [Home](/)
+На главную [Главная](/)

posts/robot-vex-iq-short-track.mdx

@@ -0,0 +1,42 @@
+---
+title: Робот на VEX IQ для соревнований Шорт-трект
+description: Данный робот создавался как демонстрационный для выполнения задания
+date: '2023-01-10'
+---
+
+## Робот на VEX IQ для соревнований Шорт-трект
+
+<Image
+  alt={`Робот на VEX IQ для соревнований Шорт-трект`}
+  src={`/blog/robot_builds/short_track_vex_iq/main.jpg`}
+  width={3532}
+  height={2665}
+  priority
+/>
+* [Скачать инструкцию в формате pdf](/blog/robot_builds/short_track_vex_iq/vex_iq_short.pdf)
+
+### Подключение датчиков и электромоторов
++ Левый датчик света подключается в порт 3
++ Правый датчик света подключается в порт 4
++ Датчик ультразвука подключается в порт 5
++ Левый электромотор подключается в порт 7
++ Правый электромотор подключается в порт 12
+
+### Программа для робота 
+
+> В программе используется ПД регулятор для движения робота по черной линии. 
+Основная настройка программы идет в качестве подбора коэффициентов которые в программе обозначены именами **k** - основная переменная для реагирования робота на изменение черной линии, переменная **d** это дифференциальная составляющая отвечает за проверку выравнивание робота на черной линии. 
+ Если робот слишком глубоко заехал на черную линию коэффициент **d** увеличит усиливающие значение для моторов и робот быстрее вернется на белую область. 
+
+### Движение по черной линии с автоматической остановкой перед впереди едущим роботом
+<Image
+  alt={`Программа на VEX IQ для соревнований Шорт-трект`}
+  src={`/blog/robot_builds/short_track_vex_iq/prog.jpg`}
+  width={1696}
+  height={920}
+  priority
+/>
+* [Скачать программу для робота среда VEX IQ Code](/blog/robot_builds/short_track_vex_iq/linePD.iqblocks)
+
+
+На главную [Главная](/)

posts/robot-vex-iq-small.mdx

@@ -16,4 +16,4 @@ date: '2022-12-23'
 
  ### [Скачать инструкцию в формате pdf](../pdf/robot_builds/vex_iq_14.pdf)
 
-На главную [Home](/)
+На главную [Главная](/)

styles/atom-one-dark.min.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

styles/globals.css

@@ -24,12 +24,15 @@
   max-width: 100vh;
 }
 
-.prose pre {
+.prose {
-  @apply bg-gray-50 border border-gray-200 dark:border-gray-700 dark:bg-gray-900;
+  
 }
 
+pre {
+  background-color: #292c34;
+}
 .prose code {
-  @apply text-gray-800 dark:text-gray-200 px-1 py-0.5 border border-gray-100 dark:border-gray-800 rounded-md bg-gray-100 dark:bg-gray-900;
+ color: #edeef0;
 }
 
 .prose img {
@@ -95,9 +98,16 @@
 
 code[class*='language-'],
 pre[class*='language-'] {
-  @apply text-gray-800 dark:text-gray-50;
+  color: #edeef0;
 }
 
+code[class*='language-python'],
+pre[class*='language-python'] {
+  color: #dcdcaa;
+  background-color: #292c34;
+}
+
+
 pre::-webkit-scrollbar {
   display: none;
 }

styles/prism-onedark.css

@@ -0,0 +1,172 @@
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ABB2BF;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #383e49;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #9aa2b1;
+}
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #282c34;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #5C6370;
+}
+
+.token.punctuation {
+  color: #abb2bf;
+}
+
+.token.selector,
+.token.tag {
+  color: #e06c75;
+}
+
+.token.property,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.attr-name,
+.token.deleted {
+  color: #d19a66;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.builtin,
+.token.inserted {
+  color: #98c379;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #56b6c2;
+}
+
+.token.atrule,
+.token.keyword {
+  color: #c678dd;
+}
+
+.token.function {
+  color: #61afef;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #c678dd;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre.line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+	position: relative;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 0;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+.line-numbers-rows > span {
+	pointer-events: none;
+	display: block;
+	counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+	content: counter(linenumber);
+	color: #5C6370;
+	display: block;
+	padding-right: 0.8em;
+	text-align: right;
+}