avrtt.blog

Here you can find the code and documentation of my minimalist, static, MDX-based (and simply based) personal website. The site is entirely custom, designed only for my needs and not meant to be a universal blog template.

Important

Please, read the Licensing section carefully before forking this repo.

• Introduction
  • Stack
• Course
• Project details
  • Structure
  • Main components
  • SEO
  • Responsiveness
  • Sass modules
  • Configs
  • Utils
  • Page creation
  • Rendering
  • Frontmatter
  • Page templates
  • Geo data
• Contribution
  • To do
• Development
• Troubleshooting
  • Type checking
  • Type errors with third-party libraries
  • JSX errors
• Copyright
  • Licensing
  • Animated emojis

Introduction

I started building this site from scratch (literally from the white page) after a course on web development at university. It eventually grew into a serious personal project with several types of audience. Still has a lot of bugs, but at least it's made with love; I keep slowly developing it, devoting a couple hours a week to learning webdev.

The project was originally a plain HTML/CSS/JS thing, with no component libraries or ready-made styles. After weeks of crappy code, I gave it up for ~two years, but then decided to put it on GitHub. I redesigned the architecture and started making clean & granular commits along with learning frontend properly.

Note

Legacy repository (plain React): avrtt.blog-legacy.

The site left quite a bit of deprecated code behind. For styles, I tried to fix it by splitting them into local modules. I'm a customization freak, so TailwindCSS is a no go.

I first rewrote it to React without SSG (a very bad idea for a blog), then tried Jekyll, but eventually gave a try to Gatsby/GraphQL because it's easy to extend with plugins and optimize for small static blogs. Next.js would be overkill here.

Stack

    🚀 Frontend: React
    🛠️ Language: TypeScript
    📝 Content: MDX
    ⚙️ SSG & logic: Gatsby
    🛢 CMS: not implemented
    🎨 Styles: modular Sass
    ⚡ Server environment: Node.js
    📦 CI/CD: not implemented
    🗺️ 2D maps: Leaflet
    🌍 3D maps: D3.js
    🍃 Animations: Framer Motion
    ♾️ Formulas: LaTeX
    💬 Comments: Telegram (comments.app API)

See other plugins and dependencies in package.json.

avrtt.course

Currently, this personal blog is also serving as a platform for my free course on machine learning, data science and related areas. It's likely that the course will be moved to a separate platform in the future.

You can find more information about the course (including course licensing, contributing and plans) on the main course page.

Project details

Structure

Main components

SEO

Responsiveness

Sass modules

Configs

Utils

Page creation

Rendering

Frontmatter

Page templates

Geo data

Contribution

To do

Development

Troubleshooting

Type checking

Run npm run check-types for tracking TypeScript-specific errors.

TypeScript config is strict, with noImplicitAny option enabled.

Type errors with third-party libraries

When encountering type errors with third-party libraries, it's probably useful to:

1. check if @types packages are available: npm install --save-dev @types/package-name
2. add custom type declarations in src/types/module-declarations.d.ts

JSX errors

In case of JSX-related errors, verify that:

1. the TS configuration has jsx set correctly
2. files using JSX have .tsx extension
3. React is imported in files using JSX

Copyright

Licensing

Caution

I do keep an eye on my works. Do not copy any content from this website/repository without complying with the terms below OR my permission (via email). The following describes why this might be a bad idea.

The website's content is dual-licensed depending on the type:

• Course content: the /course page and posts/articles in its table of contents, including /research posts (MDX files) appearing in the course, are licensed under CC BY-SA 4.0 to encourage community contributions (see LICENSE_COURSE).
• Content of other MDX files (i.e., content not appearing in the course) is licenced under CC BY-NC-ND 4.0, which is a strict control over plagiarism (see LICENSE_POSTS).

The website's code is licensed under GNU AGPLv3 to prevent proprietary forks and ensure openness (see LICENSE).

That means you're free to use, distribute and modify [only] the course-related content (text, images) of this website as long as you retain attribution under the same license (CC BY-SA 4.0), and you can use, distribute and modify the website's source code (which is everything in this repository except MDX files and the /course page component) under the conditions of open source GNU AGPLv3 license. Content outside of the course cannot be modified or used commercially, only distributed with attribution.

For attribution-free copying (i.e., avoiding license requirements) of substantial portions of content/code from this repository, contact me by email: [email protected].

I don't provide any support for your code copied from this repo. If you copy, be prepared for silly bugs. I'm too lazy to fix legacy.

Warning

If you're a bad guy, be warned that your copied version may possibly be blocked upon request because it's plagiarism (depending on your hosting platform), and the copied site won't be ranked by search engines nearly as much as the original. Putting plagiarized content/code on GitHub makes things worse for you: copied repository content can be recognized pretty easily, which will lead to a copyright infringement notice, followed by removal of the content. GitHub often terminates accounts that violate DMCA. See. DMCA takedown policy for more information.

Animated emojis

Animated emojis appearing on some pages of this site are taken from here and distributed under the CC BY 4.0 license.