Web

.github/workflows/deploy.yml

@@ -1,14 +1,10 @@
 name: Deploy to GitHub Pages
 
 on:
-  # Trigger the workflow every time you push to the `main` branch
-  # Using a different branch name? Replace `main` with your branch’s name
   push:
-    branches: [ master ]
-  # Allows you to run this workflow manually from the Actions tab on GitHub.
+    branches: [web]
   workflow_dispatch:
-
-# Allow this job to clone the repo and create a page deployment
+
 permissions:
   contents: read
   pages: write
@@ -18,14 +14,24 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout your repository using git
-        uses: actions/checkout@v3
-      - name: Install, build, and upload your site
-        uses: withastro/action@v0
-        # with:
-            # path: . # The root location of your Astro project inside the repository. (optional)
-            # node-version: 16 # The specific version of Node that should be used to build your site. Defaults to 16. (optional)
-            # package-manager: yarn # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+      - name: Checkout your repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build the site
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
 
   deploy:
     needs: build
@@ -36,4 +42,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

.gitignore

@@ -20,4 +20,8 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 
-0_Manag/
+0_Manag/
+
+*.pyc
+Output/
+__pycache__

LICENSE → LICENSE.md

@@ -3,6 +3,8 @@
 
 [![Hippocratic License HL3-BDS-CL-ECO-EXTR-MEDIA-MIL-SV-XUAR](https://img.shields.io/static/v1?label=Hippocratic%20License&message=HL3-BDS-CL-ECO-EXTR-MEDIA-MIL-SV-XUAR&labelColor=5e2751&color=bc8c3d)](https://firstdonoharm.dev/version/3/0/bds-cl-eco-extr-media-mil-sv-xuar.html)
 
+
+
 ## License in short
 You are free to use the content of this webpage for whatever you like, including modification, sale, distribution, and more. However, please note that there are some important restrictions: You can do whatever you like with this content as long as it is halal or morally supportable. If you are unsure about a topic, please consult the license agreement.
 

Others/0_Reminder/0_Default_Dark.cjs

@@ -0,0 +1,84 @@
+/** @type {import('tailwindcss').Config} */
+
+
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  content: ["./src/**/*.{astro,html,md, mdx,js,jsx,svelte,ts,tsx,vue}"],
+
+  /* --------------------------------- theme -------------------------------- */
+  theme: {
+    extend: {
+
+      /* --------------------------- theme extend --------------------------- */
+      fontFamily: {
+        sans: ["InterVariable", ...defaultTheme.fontFamily.sans],
+      },
+      colors: {
+        primary: "var(--color-primary)",
+        secondary: "var(--color-secondary)",
+      },
+      textColor: {
+        default: "var(--color-text)",
+        offset: "var(--color-text-offset)",
+      },
+      backgroundColor: {
+        default: "var(--color-background)",
+        offset: "var(--color-background-offset)",
+      },
+      borderColor: {
+        default: "var(--color-border)",
+      },
+
+      /* --------------------------- theme extend --------------------------- */
+      typography: {
+
+        /* ================================================================== */
+        /* ======== this is the place where the dark theme is defined ======= */
+        /* ================================================================== */
+        // also habe a look at:node_modules/@tailwindcss/typography/src/styles.js
+        DEFAULT: {
+          css: {
+            '--tw-prose-body': 'var(--tw-prose-invert-body)',
+            '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
+            '--tw-prose-lead': 'var(--tw-prose-invert-lead)',
+            '--tw-prose-links': 'var(--tw-prose-invert-links)',
+            '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
+            '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
+            '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
+            '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
+            '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
+            '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
+            '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
+            '--tw-prose-code': 'var(--tw-prose-invert-code)',
+            '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
+            '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
+            '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
+            '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
+          },
+        },
+      },
+
+    },
+
+  darkMode: 'media',
+
+  },
+
+
+  corePlugins: {
+    fontSize: false,
+
+    // If this is activated margins will be set to 0, see:
+    // https://tailwindcss.com/docs/preflight
+    // default bahaviour is: true
+    // preflight: true, // this disables preflight
+  },
+  plugins: [
+    require("tailwindcss-fluid-type"),
+    require("@tailwindcss/typography"),  
+],
+};
+
+
+

Others/0_Reminder/1_Tecs

@@ -0,0 +1,28 @@
+
+Used mdx with astro and tailwind. Sometimes mdx would not work until used the same code and inserted inside a markdown file.
+--> It can't be known wheter the code is not working or just the compilation with mdx is not working
+
+For now the safest way is to use regular markdwon.
+For later, if any special mdx features are required, one has to think again. In general .astro and md can be combined quite well
+
+--- access lottifiles --
+the files can be inserted inside the public folder, the assets folder did not work up to now. Maybe some modifications in a config are required
+
+astro config:
+// https://astro.build/config
+export default defineConfig({
+  site: "https://jav-ed.github.io",
+  base: "/H2_Plot",
+
+File: src/pages/0_Own/0_Acknowledge.mdx
+
+export const lot_Path_Bismillah = "/H2_Plot/0_Lotti/bismillah.lottie";
+<dotlottie-player
+    id="bismillah"
+    class="bismillah_Anim"
+    autoplay
+    loop
+    mode="bounce"
+    src= {lot_Path_Bismillah}
+    style="width: 100%">
+</dotlottie-player>

Others/require

@@ -0,0 +1,17 @@
+
+Web packages/modules:
+npm install remark-math remark-breaks rehype-mathjax rehype-slug rehype-figure remark-code-titles
+
+see: https://tailwindcss.com/docs/typography-plugin
+npm install -D @tailwindcss/typography
+
+https://github.com/saadeghi/daisyui
+npm install -D -D daisyui@latest
+
+npm i canvas-confetti
+
+npx astro add mdx
+
+
+theme changer, see: https://github.com/saadeghi/theme-change
+npm i theme-change --save

README.md

@@ -1 +1,2 @@
-TBD
+Please open the [link](https://jav-ed.github.io/H2_Plot/)
+or [Code Repo](https://github.com/jav-ed/H2_Plot/tree/main) for additional information

astro.config.mjs

@@ -2,19 +2,107 @@ import image from "@astrojs/image";
 import tailwind from "@astrojs/tailwind";
 import { defineConfig } from "astro/config";
 
+import mdx from "@astrojs/mdx";
+
+
+import remarkMath from 'remark-math';
+import remarkBreaks from 'remark-breaks';
+import rehypeMathjax from 'rehype-mathjax';
+import rehypeSlug from 'rehype-slug';
+import rehypeFigure from 'rehype-figure';
+import remarkCodeTitles from 'remark-code-titles';
+
+
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://jav-ed.github.io",
-  base: "H2O_Plot",
+  base: "/H2_Plot",
+  /* ------------------------------- markdown ------------------------------- */
+  markdown: {
+    remarkPlugins: [
+      remarkCodeTitles, 
+      remarkMath,
+      remarkBreaks,
+    ],
+
+    rehypePlugins: [
+
+      // Plugin to add `id`s to headings.
+      rehypeSlug, 
+
+      // ['rehype-autolink-headings', {
+      //   behavior: 'prepend'
+      // }],
+
+
+
+    // see: https://github.com/JS-DevTools/rehype-toc
+    // ['rehype-toc', { headings: ['h2', 'h3'] }],
+
+    // [addClasses, { 'h1,h2,h3': 'title' }],
+
+    /* -------------------------------- katex -------------------------------- */
+    // it should be more performant than MathJax, however, it firstly require an additional css to be loaded and secondly, labeling at the moment is achieved through manually giving tags --> not wanted
+    // see: https://github.com/KaTeX/KaTeX
+    // for options, see: https://katex.org/docs/options.html
+    // ['rehype-katex', 
+    // 		{
+    // 			// fleqn: 'true',
+    // 			output: "htmlAndMathml"
+
+    // 			}],
+
+    [rehypeMathjax, {
+      loader: {
+        load: ['[tex]/color', '[tex]/tagformat']
+      },
+      tex: {
+        tags: 'all',
+        processRefs: 'true'
+      },
+      startup: {
+        ready: () => {
+          MathJax.startup.defaultReady();
+          MathJax.startup.promise.then(() => {
+            // Your custom JavaScript for equation numbering by chapter will be added here.
+          });
+        }
+      }
+    }], 
+
+    rehypeFigure
+
+  ]
+
+
+  },
+
+  /* ----------------------------- integrations ----------------------------- */
   integrations: [
-    tailwind(),
+    tailwind(), 
+
     image({
-      serviceEntryPoint: "@astrojs/image/sharp",
-    }),
+    serviceEntryPoint: "@astrojs/image/sharp"
+  }), 
+
+    mdx({
+
+
+      // To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." --> install, import as variable and then add them
+      extendMarkdownConfig: true,
+
+      // remarkPlugins: [remarkMath],
+      // rehypePlugins: [rehypeMathjax],
+
+
+    })
+
   ],
+
   vite: {
     ssr: {
-      external: ["svgo"],
-    },
-  },
-});
+      external: ["svgo"]
+    }
+  }
+});