wip

2025-04-25 17:13:38 +03:30 · 2025-04-25 17:13:38 +03:30 · e381f028be
commit e381f028be
parent 903d7358b0
6 changed files with 138 additions and 22 deletions
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
 		"@testing-library/svelte": "^5.2.4",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-prettier": "^5.2.6",
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"jsdom": "^26.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -50,6 +50,9 @@ importers:
      eslint-config-prettier:
        specifier: ^10.0.1
        version: 10.1.2(eslint@9.25.1(jiti@2.4.2))
+      eslint-plugin-prettier:
+        specifier: ^5.2.6
+        version: 5.2.6(eslint-config-prettier@10.1.2(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))(prettier@3.5.3)
      eslint-plugin-svelte:
        specifier: ^3.0.0
        version: 3.5.1(eslint@9.25.1(jiti@2.4.2))(svelte@5.28.2)
@ -392,6 +395,10 @@ packages:
    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
    engines: {node: '>= 8'}

+  '@pkgr/core@0.2.4':
+    resolution: {integrity: sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
  '@polka/url@1.0.0-next.29':
    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}

@ -988,6 +995,20 @@ packages:
    peerDependencies:
      eslint: '>=7.0.0'

+  eslint-plugin-prettier@5.2.6:
+    resolution: {integrity: sha512-mUcf7QG2Tjk7H055Jk0lGBjbgDnfrvqjhXh9t2xLMSCjZVcw9Rb1V6sVNXO0th3jgeO7zllWPTNRil3JW94TnQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
  eslint-plugin-svelte@3.5.1:
    resolution: {integrity: sha512-Qn1slddZHfqYiDO6IN8/iN3YL+VuHlgYjm30FT+hh0Jf/TX0jeZMTJXQMajFm5f6f6hURi+XO8P+NPYD+T4jkg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -1059,6 +1080,9 @@ packages:
  fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}

+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
  fast-glob@3.3.3:
    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
    engines: {node: '>=8.6.0'}
@ -1484,6 +1508,10 @@ packages:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}

+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
  prettier-plugin-svelte@3.3.3:
    resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
    peerDependencies:
@ -1690,6 +1718,10 @@ packages:
  symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}

+  synckit@0.11.4:
+    resolution: {integrity: sha512-Q/XQKRaJiLiFIBNN+mndW7S/RHxvwzuZS6ZwmRzUBqJBv/5QIKCEwkBC8GBf8EQJKYnaFs0wOZbKTXBPj8L9oQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
  tailwindcss@4.1.4:
    resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}

@ -1748,6 +1780,9 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4'

+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
  type-check@0.4.0:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
    engines: {node: '>= 0.8.0'}
@ -2144,6 +2179,8 @@ snapshots:
      '@nodelib/fs.scandir': 2.1.5
      fastq: 1.19.1

+  '@pkgr/core@0.2.4': {}
+
  '@polka/url@1.0.0-next.29': {}

  '@rollup/plugin-commonjs@28.0.3(rollup@4.40.0)':
@ -2719,6 +2756,15 @@ snapshots:
    dependencies:
      eslint: 9.25.1(jiti@2.4.2)

+  eslint-plugin-prettier@5.2.6(eslint-config-prettier@10.1.2(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))(prettier@3.5.3):
+    dependencies:
+      eslint: 9.25.1(jiti@2.4.2)
+      prettier: 3.5.3
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.11.4
+    optionalDependencies:
+      eslint-config-prettier: 10.1.2(eslint@9.25.1(jiti@2.4.2))
+
  eslint-plugin-svelte@3.5.1(eslint@9.25.1(jiti@2.4.2))(svelte@5.28.2):
    dependencies:
      '@eslint-community/eslint-utils': 4.6.1(eslint@9.25.1(jiti@2.4.2))
@ -2821,6 +2867,8 @@ snapshots:

  fast-deep-equal@3.1.3: {}

+  fast-diff@1.3.0: {}
+
  fast-glob@3.3.3:
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@ -3189,6 +3237,10 @@ snapshots:

  prelude-ls@1.2.1: {}

+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.28.2):
    dependencies:
      prettier: 3.5.3
@ -3357,6 +3409,11 @@ snapshots:

  symbol-tree@3.2.4: {}

+  synckit@0.11.4:
+    dependencies:
+      '@pkgr/core': 0.2.4
+      tslib: 2.8.1
+
  tailwindcss@4.1.4: {}

  tapable@2.2.1: {}
@ -3400,6 +3457,8 @@ snapshots:
    dependencies:
      typescript: 5.8.3

+  tslib@2.8.1: {}
+
  type-check@0.4.0:
    dependencies:
      prelude-ls: 1.2.1
--- a/src/routes/articles/+layout.svelte
+++ b/src/routes/articles/+layout.svelte
@ -0,0 +1,10 @@
+<script lang="ts">
+	import './article.css';
+	let { children } = $props();
+</script>
+
+<div class="body">
+	<div class="article_body">
+		{@render children()}
+	</div>
+</div>
--- a/src/routes/articles/article.css
+++ b/src/routes/articles/article.css
@ -0,0 +1,33 @@
+* {
+    color: #fbf1c7;
+    font-family: Arial, Helvetica, sans-serif
+}
+
+.body {
+    background-color: #1d2021
+}
+
+br {
+    margin-bottom: 1em;
+}
+
+h1 {
+    font-size: 2em;
+    margin-bottom: .3em;
+}
+
+h2 {
+    font-size: 1.7em;
+    margin-bottom: .3em;
+    margin-top: .6em;
+}
+
+.article_body {
+    margin-left: 10em;
+    margin-right: 10em;
+    padding: 1em;
+    background-color: #282828;
+    text-align: justify;
+    max-width: 80ch;
+    /* Adjust as necessary */
+}
--- a/src/routes/articles/the-graphics-pipeline/+page.svx
+++ b/src/routes/articles/the-graphics-pipeline/+page.svx
@ -1,49 +1,56 @@
 # The Graphics Pipeline
 Ever wondered how games put all that gore on your display? Well you're about to find out!

+<br/>
 At the heart of rendering, is the "Graphics Pipeline". And like any pipeline, it's comprised 
 of several "stages", each of which can be a pipeline in itself or even parallelized.
 Each stage takes some input data (and configuration), to generate some output for the next stage. 

+<br/>
 We can coarsely divide the entire pipeline into 4 stages:
 Application -> [Geometry Processing] -> Rasterization -> Pixel Processing
 The pipeline will then serve a "rendered image" to your pretty eyes using your display.

+<br/>
 But to avoid drowning you in overviews, let's jump right into the details of the "Geometry Processing"
 stage and have a recap afterwards to demystify our 4-stage division!

-# Vertices (points in space)
+## Vertices (points in space)
 In order to render a murder scene, we need to have a way of representing the deceased in computer memory.
 We only care about the "surface" since we won't be seeing the insides anyways--We don\'t want to either.
 At this stage, we only care about the "shape" or the "geometry" of the "surface",
 texturing, lighting and all the sweet gory details comes at a much later stage once all the "geometry" has been processed.

+<br/>
 There are several ways to "represent 3d objects" for a computer to understand.
 For instance, _NURB_(Non-uniform rational B-spline) surfaces are great for representing "curves"
 and it's all about the "high-precision" needed to do _CAD_(computer assisted design).
 We could also do "ray-tracing" using fancy equations for rendering photo-realistic images.

+<br/>
 These are all great--ignoring the fact that they would take "an eternity" to process.
 But what we need is a hardware-friendly approach that can do this for an entire scene with
 hundereds of thousands of objects for at least 60 times undr a second. What we need is "polygonal modeling".

+<br/>
 "Polygonal modeling" allows us to do "real-time rendering". The idea is that we only need an
 "approximation" of a surface to render it "realisticly-enough" for us to have some fun killing time!
 We can achieve this approximation using a collection of "triangles", "lines" and "dots" (primitives),
 which themselves are composed of a series of "vertices" (points in space).

+<br/>
 A "vertex" is simply a point in space.
 Once we get enough of these "points", we can conncet them to form "primitives" such as "triangles", "lines" and "dots".
 And once we have enough "primitives" together, they form a "model" or a "mesh" (that we need for our corpse).
 With some interesting models, we can compose a "scene".

+<br/>
 But let's not get ahead of ourselves. The primary type of "primitive" we care about during "polygonal modeling"
 is a "triangle". But why not squares or polygons with variable number of edges?

-# Why Triangles?
+## Why Triangles?
 "Always Planar":
 Triangles can never be __non-planar__(reside in more than 1 plane)! In Euclidean geometry, any 
-3 


 "Normal surface:"
@ -52,38 +59,41 @@ Triangles can never be __non-planar__(reside in more than 1 plane)! In Euclidean

 "Predictable Winding Order:"

-# Primitive Topologies
+## Primitive Topologies

-# Indices
+## Indices

-# Input Assembler
+## Input Assembler

-# Coordinate System -- Local Space
+## Coordinate System -- Local Space

-# Coordinate System -- World Space
+## Coordinate System -- World Space

-# Coordinate system -- View Space
+## Coordinate system -- View Space

-# Coordinate system -- Clip Space
+## Coordinate system -- Clip Space

-# Coordinate system -- Screen Space
+## Coordinate system -- Screen Space

-# Vertex Shader
+## Vertex Shader

-# Tessellation & Geometry Shaders
+## Tessellation & Geometry Shaders

-# Rasterizer
+## Rasterizer

-# Pixel Shader
+## Pixel Shader

-# Output Merger 
+## Output Merger 

-# The Future
+## The Future

-# Conclusion
+## Conclusion

-# Sources
+## Sources
 [Tomas Akenine Moller - Real-Time Rendering 4th Edition](https://www.realtimerendering.com/intro.html)
+
+<br/>
+
 [LearnOpenGL - Hello Triangle](https://learnopengl.com/Getting-started/Hello-Triangle)
 [LearnOpenGL - Face Culling](https://learnopengl.com/Advanced-OpenGL/Face-culling)
 [Wikipedia - Polygonal Modeling](https://en.wikipedia.org/wiki/Polygonal_modeling)
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,12 +1,16 @@
 import { mdsvex } from 'mdsvex';
 import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+// import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://svelte.dev/docs/kit/integrations
 	// for more information about preprocessors
-	preprocess: [vitePreprocess(), mdsvex()],
+	preprocess: [
+        mdsvex({
+            extensions: ['.md', '.svx'],
+        })
+        ],

 	kit: {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
@ -19,4 +23,3 @@ const config = {
 };

 export default config;
-