Porting from the old project

README.md

@@ -7,7 +7,7 @@ The website will be WIP for a long time since rendering brush strokes with GPU i
 Shen Ciao continuously update tutorial-style articles on (potentially) influential research works.
 
 ## Be critical
-Most contents come from the research *[Ciallo: The next generation vector paint program][Ciallo]*.
+The most contents come from Shen Ciao and Li-yi Wei's research *[Ciallo: The next generation vector paint program][Ciallo]*.
 It's impossible to create a perfect tutorial in the first place, so we eagerly need critiques and suggestions.
 We would be grateful for creating issues or pull requests to fix typos, correct facto mistakes, and revise terrible terminology naming in this tutorial.
 

docs/About/About.mdx

@@ -0,0 +1,69 @@
+---
+position: 100
+sidebar_label: → I'm applying for PhD
+---
+
+## Applying for PhD
+
+I'm looking for PhD opportunities in top US schools to continue my research.
+If your lab conducts research in the related topics like Sketching, Digital Painting, HCI or NPR, and has an available PhD position,
+contact me with my email address **1500013714 (at) pku (dot) edu (dot) cn**.
+Moreover, I would appreciate if you recommend this tutorial to your mentor(s) and collaborator(s).
+
+## About the tutorial
+
+A good CG research work has novelty, while a seminal work also helps other researchers/engineers/artists pursue novelty.
+I wish to accelerate this process with this tutorial for my upcoming PhD application.
+Meanwhile, it's a practice of my mentor, [Li-yi Wei][Liyi bio], a Jedi master's
+views on [being a good educator](https://blog.liyiwei.org/?p=4668) and [source code along with papers](https://blog.liyiwei.org/?p=868).
+
+## SoP
+
+#### Overview
+
+I am applying for a Ph.D. program in Computer Science (CS) to continue my study on digital painting.
+As my first-author paper, _Ciallo: The Next-Generation Vector Paint Program_ suggests,
+I'm interested in Computer Graphics (CG), particularly in developing digital paint software like Adobe Photoshop and Illustration.
+
+My research has made critical breakthrough in this topic. I wish to make further progress during my PhD career and attract more researchers work on it.
+To achieve that, now I'm developing a tutorial website (yeah the one you are looking at) to teach the brush rendering from my research
+and transferring it into [Blender][GP dev]).
+
+#### What I prepared in details
+
+In the project [Ciallo], I designed the algorithms and developed the program individually.
+And I wrote and published the research paper under the supervision of [Li-Yi Wei][Liyi bio].
+The features I developed have been anticipated by the CG researchers/engineers/artists for almost two decades,
+which is the reason why our paper reviewers are ok with a bit of exaggeration ("the next-generation") in the title.
+Now I'm developing the website to teach everyone interested in my research and
+integrating the upgraded version of my research into the Blender Grease Pencil (GP).
+
+Before I started working on the Ciallo, my initial goal was to fix several GP's rendering bugs in 2021,
+but they turned out far more than simple bugs but the algorithms causing the bugs were under-researched.
+It was reckless for me, a naive young man with zero CS research experience, to try solving them, but the results cannot be better.
+I guess the courage comes from where I started to learn the CG: doing something truly helpful for digital painting.
+
+#### Why digital painting
+
+I've been using graphics design software for digital painting like Photoshop since high school.
+Meanwhile, I love playing video games and watching Japanese animation (anime), both of which rely on graphics design.
+But unluckily, nobody directed me to the road of CG for my own interest in high school.
+I majored in Psychology at college and learned statistics and [AI](https://coursera.org/share/92365937af6386c044ca4752e80e25df) to follow the trend.
+
+But I determined my mind to pursue my true passions, game and anime, as a career after graduation.
+At the time, there are infinite possible ways to contribute the game or anime industry for me.
+I chose to research on digital painting, which I had already been familiar with and passionate on.
+Also, a great research in digital painting can truly influence the industries and help artists produce more enjoyable artworks.
+
+#### Career Plan
+
+Therefore, my career goal is to keep contributing to the industries, starting from where I have made breakthrough.
+There are a lot of easy-to-achieve but influential works waiting for our CG community to explore and discover.
+Obviously, I cover tackle all the relevant works individually.
+That's why during my academic career, I want to guide and inspire more researchers and engineers to work on them.
+I'm eager to connect with individuals who share these interests.
+
+
+[GP dev]: https://devtalk.blender.org/t/add-stamp-brush-and-fix-airbrush/30884/3
+[Liyi bio]: https://www.liyiwei.org/personal/bio.html
+[Ciallo]: https://github.com/ShenCiao/Ciallo

docs/Introduction/Introduction.mdx

@@ -35,7 +35,7 @@ Check out Matt Deslauries' article [Drawing Lines is Hard](https://mattdesl.svbt
 As for us, the most significant issue is the limitation on the maximum line width or stroke radius.
 We must be able to fully control the radius values when rendering brush strokes.
 
-## Brush Strokes
+## Brush strokes
 
 Brush strokes refer to strokes drawn with the paint tool in graphics software such as Photoshop or Krita.
 Artists configure their digital brushes to control stroke properties like radius or stylization,
@@ -55,7 +55,7 @@ Researchers will develop more novel methods in the future.
 So I will continuously update this tutorial series to teach them.
 Make sure to star our [code repository] for easy access to the latest updates.
 
-## Vector Curves
+## Vector curves
 
 Mutable radius is imperative for the most artists when working on digital painting,
 but it's not defined in public vector standards like SVG.
@@ -107,7 +107,7 @@ Wish you happy learning!
 To demonstrate your research work, select vector drawings have mutable radius or pen pressure data.
 Regular vector drawing datasets don't contain them.
 
-- Zeyu Wang's work: [paper](https://dl.acm.org/doi/10.1145/3450626.3459819)
+- Zeyu Wang's work: [Paper](https://dl.acm.org/doi/10.1145/3450626.3459819) | [Dataset](https://github.com/zachzeyuwang/tracing-vs-freehand)
 - [Blender Grease Pencil](https://cloud.blender.org/p/gallery/5b642e25bf419c1042056fc6)
 - Tell me more...
 

docusaurus.config.js

@@ -43,7 +43,7 @@ const config = {
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/ShenCiao/brush-stroke-tutorial/tree/main/docs',
+            'https://github.com/ShenCiao/brush-stroke-tutorial/tree/main',
         },
         blog: false,
         theme: {
@@ -60,6 +60,10 @@ const config = {
       image: 'img/vanilla-stroke.png',
       navbar: {
         title: 'Brush Stroke Tutorial',
+        logo: {
+          alt: 'logo',
+          src: 'img/vanilla-stroke.png'
+        },
         items: [
           {
             type: 'docSidebar',
@@ -88,6 +92,10 @@ const config = {
         },
       },
     }),
+
+  plugins: [
+    'raw-loaders'
+  ]
 };
 
 module.exports = config;

package.json

@@ -15,21 +15,23 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@codemirror/language": "^6.9.0",
+    "@codemirror/legacy-modes": "^6.3.3",
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@mdx-js/react": "^1.6.22",
+    "@uiw/react-codemirror": "^4.21.13",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "@codemirror/language": "^6.9.0",
-    "@codemirror/legacy-modes": "^6.3.3",
-    "@uiw/react-codemirror": "^4.21.13",
-    "three": "^0.156.1"
+    "three": "^0.156.1",
+    "raw-loaders": "file:plugins/raw-loaders"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.1",
     "@tsconfig/docusaurus": "^1.0.5",
+    "@types/mdx": "^2.0.7",
     "typescript": "^4.7.4"
   },
   "browserslist": {

plugins/raw-loaders/index.js

@@ -0,0 +1,16 @@
+module.exports = function (context, options) {
+  return {
+    name: "raw-loaders",
+    configureWebpack(config, isServer) {
+      return {
+        module: {
+          rules: [
+            { test: /\.(glsl|vert|frag)$/, type: "asset/source" },
+            { test: /\.m?js$/, resourceQuery: { not: [/raw/] }, use: [ 'js-loader' ] },
+            { resourceQuery: /raw/, type: 'asset/source' }
+          ],
+        },
+      };
+    },
+  };
+};

plugins/raw-loaders/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "raw-loaders",
+  "version": "0.0.0",
+  "private": true
+}

src/components/ArticulatedLine2D.tsx

@@ -0,0 +1,23 @@
+import * as THREE from 'three';
+import React, {useEffect, useRef} from 'react';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+export function ArticulatedLine2D() {
+  const test = useRef<Element>();
+  return (
+    <>
+      <Tabs>
+        <TabItem value="apple" label="Apple" default>
+          This is an apple 🍎
+        </TabItem>
+        <TabItem value="orange" label="Orange">
+          This is an orange 🍊
+        </TabItem>
+        <TabItem value="banana" label="Banana">
+          This is a banana 🍌
+        </TabItem>
+      </Tabs>
+    </>
+  );
+}

yarn.lock

@@ -2183,6 +2183,11 @@
   dependencies:
     "@types/unist" "^2"
 
+"@types/mdx@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.7.tgz#c7482e995673e01b83f8e96df83b3843ea76401f"
+  integrity sha512-BG4tyr+4amr3WsSEmHn/fXPqaCba/AYZ7dsaQTiavihQunHSIxk+uAtqsjvicNpyHN6cm+B9RVrUOtW9VzIKHw==
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@@ -6229,6 +6234,9 @@ [email protected]:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+"raw-loaders@file:plugins/raw-loaders":
+  version "0.0.0"
+
 [email protected], rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"