Merge pull request #4 from easy-deep-learning/feature/init-nextjs

Init project

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/build.yml

@@ -0,0 +1,36 @@
+name: deploy
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+        with:
+          node-version: '16'
+
+      - uses: pnpm/[email protected]
+        with:
+          version: 7.12.2
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Static HTML Export
+        run: pnpm run export
+
+      - name: Disable Jekyl # https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/
+        run: touch ./out/.nojekyll
+
+      - name: Delpoy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: out

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

components/Date/date.jsx

@@ -0,0 +1,15 @@
+import { parseISO, format } from 'date-fns'
+import { ru } from 'date-fns/locale'
+import dateStyles from './date.module.css'
+
+
+export default function Date({ dateString }) {
+  const date = parseISO(dateString)
+  return (
+    <time dateTime={dateString} className="date">
+      <span className={dateStyles.day}>{format(date, 'dd', { locale: ru })}</span>
+      <span className={dateStyles.month}>{format(date, 'mm', { locale: ru })}</span>
+      <span className={dateStyles.year}>{format(date, 'yyyy', { locale: ru })}</span>
+    </time>
+  )
+}

components/Date/date.module.css

@@ -0,0 +1,5 @@
+.day {}
+
+.month {}
+
+.year {}

components/Date/index.js

@@ -0,0 +1,3 @@
+import Date from './date'
+
+export { Date }

components/Header/Header.jsx

@@ -0,0 +1,9 @@
+import { Menu } from '../index'
+
+export default function Header () {
+  return (
+    <header>
+      <Menu />
+    </header>
+  )
+}

components/Header/index.js

@@ -0,0 +1,3 @@
+import Header from './Header'
+
+export { Header }

components/Menu/Menu.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Link from 'next/link'
+import { withRouter } from 'next/router'
+import style from './menu.module.css'
+
+const ActiveLink = withRouter(({ router, children, ...props }) => (
+  <Link {...props}>
+    {React.cloneElement(children, {
+      className: router.pathname === props.href ? `${style.item} ${style.item_active}` : style.item,
+    })}
+  </Link>
+))
+
+export default function Menu () {
+  return (
+    <nav className={style.root}>
+      <ActiveLink href="/"><a>Главная</a></ActiveLink>
+      <ActiveLink href="/text-works"><a>Тестовые задания</a></ActiveLink>
+      <ActiveLink href="/programming"><a>Программирование</a></ActiveLink>
+      <ActiveLink href="/ci-cd"><a>Деплой</a></ActiveLink>
+      <ActiveLink href="/soft-skills"><a>Софт-Скиллы</a></ActiveLink>
+    </nav>
+  )
+}

components/Menu/index.js

@@ -0,0 +1,3 @@
+import Menu from './Menu'
+
+export { Menu }

components/Menu/menu.module.css

@@ -0,0 +1,33 @@
+.root {
+  display: flex;
+}
+
+@media (max-width: 500px) {
+  .root {
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 50vw;
+  }
+}
+
+.item {
+  flex-grow: 1;
+  text-align: center;
+  text-decoration: underline 3px #4183c4;
+}
+
+.item_active {
+  color: #999999;
+  text-decoration: none;
+}
+
+.item:last-child {
+  margin-right: 0;
+}
+
+@media (max-width: 500px) {
+  .item {
+    margin: 0 0 .5em 0;
+    text-align: left;
+  }
+}

components/index.ts

@@ -0,0 +1,9 @@
+import { Date } from './Date'
+import { Header } from './Header'
+import { Menu } from './Menu'
+
+export {
+  Date,
+  Header,
+  Menu,
+}

data/main.json

@@ -0,0 +1,4 @@
+{
+  "description": "My personal learning path",
+  "title": "My personal learning path"
+}

data/test-works/my-first-test-work.md

@@ -0,0 +1,22 @@
+---
+title: 'Моя первая тестовая работа'
+date: '2009-11-30'
+---
+
+<figure>
+  <blockquote
+    cite="http://alexbaumgertner.github.io/test-works/salonvn/">
+    <p>
+        Моя первая тестовая работа - верстка сайта "Салоны красоты Великого Новгорода"
+    </p>
+    <p>
+На данный момент проект salon-vn.ru является молодым быстроразвивающимся сайтом. 
+Наша работа нацелена на то, чтобы помочь найти интересующий Вас салон красоты в Великом Новгороде и области, 
+выбрать из огромного количества именно тот, который Вам подходит по ценам на услуги и расположению.
+    </p>
+  </blockquote>
+  <figcaption><a href="http://alexbaumgertner.github.io/test-works/salonvn/">«alexbaumgertner.github.io/test-works/salonvn»</a>,
+    <cite>Салоны красоты Великого Новгорода</cite>
+  </figcaption>
+
+</figure>

layouts/PageLayout/PagesLayout.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Head from 'next/head'
+import {
+  Header,
+} from '../../components'
+import mainData from '../../data/main.json'
+
+import pageLayoutStyles from './pageLayout.module.css'
+
+type PagesLayoutProps = {
+  children: React.ReactNode
+}
+
+export default function PagesLayout ({ children }: PagesLayoutProps) {
+  return (
+    <>
+      <div className={pageLayoutStyles.container}>
+        <Head>
+          <link rel="icon" href="/favicon.ico" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="yandex-verification" content="4c16862f72d07481" />
+          <meta
+            name="description"
+            content={mainData.description}
+          />
+          <meta name="og:title" content={mainData.title} />
+          <title>{mainData.title}</title>
+        </Head>
+
+        <Header />
+
+        <main>{children}</main>
+      </div>
+
+      <footer className="footer">
+        <span className="copyright footer__item">
+          2001 — {(new Date()).getFullYear()},{' '}
+          Учу программирование
+        </span>
+        <span
+          className="feedback footer__item">
+          Пишите
+        </span>
+        <span className="footer__item">Открытые исходники:
+          <a
+            href="https://github.com/easy-deep-learning/personal-learn-path"
+            target="_blank"
+            rel="noreferrer"
+          >github.com/easy-deep-learning/personal-learn-path</a>
+        </span>
+      </footer>
+    </>
+  )
+}

layouts/PageLayout/index.ts

@@ -0,0 +1,3 @@
+import PagesLayout from './PagesLayout'
+
+export { PagesLayout }

layouts/PageLayout/pageLayout.module.css

@@ -0,0 +1,23 @@
+.container {
+  max-width: 36rem;
+  padding: 0 1rem;
+  margin: 3rem auto 6rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.headerImage {
+  width: 6rem;
+}
+
+.headerHomeImage {
+  width: 6rem;
+}
+
+.backToHome {
+  margin: 3rem 0 0;
+}

layouts/index.ts

@@ -0,0 +1 @@
+export { PagesLayout } from './PageLayout'

lib/getAllFilesIds.ts

@@ -0,0 +1,12 @@
+import fs from 'fs'
+
+/**
+ * @param {String} path
+ * @param {String} [ext='md']
+ * @returns {String[]}
+ */
+export default function getAllFilesIds (path: fs.PathLike, ext = 'md') {
+  const fileNames = fs.readdirSync(path)
+
+  return fileNames.map(name => name.replace(/\.md$/, ''))
+}

lib/parseMarkdownFile.ts

@@ -0,0 +1,22 @@
+import * as matter from 'gray-matter'
+import rehypeRaw from 'rehype-raw'
+import rehypeStringify from 'rehype-stringify'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import { unified } from 'unified'
+
+export default async function parseMarkdownFile (path: string) {
+  const matterResult = await matter.read(path)
+
+  const convertedData = await unified()
+    .use(remarkParse)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeRaw)
+    .use(rehypeStringify)
+    .process(matterResult.content)
+
+  return {
+    html: convertedData.value,
+    meta: matterResult.data,
+  }
+}

next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "personal-learn-path-new",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "export": "next export"
+  },
+  "dependencies": {
+    "antd": "^4.23.4",
+    "date-fns": "^2.29.3",
+    "gray-matter": "^4.0.3",
+    "next": "12.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rehype-raw": "^6.1.1",
+    "rehype-stringify": "^9.0.3",
+    "remark-parse": "^10.0.1",
+    "remark-rehype": "^10.1.0",
+    "unified": "^10.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "18.8.2",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
+    "eslint": "8.24.0",
+    "eslint-config-next": "12.3.1",
+    "typescript": "4.8.4"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,8 @@
+import 'antd/dist/antd.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp