Collections

I have many sample or test case which did not need a full solid project management. Sometimes, it just need some HTML, CSS, JS, and compiled on-fly. Even though, sometime I made a backend or kernel code which need be compiled on-premise. But still, it just a single file which not need a dedicated repository. It conclude I want to make them centralized. So, here in the README would explain the technology used. Also, you could refer further more in template. Later, this documents can be shown in my website farhanms123.github.io.

Initiation

In this root of repository, there are a universal configuration files which I intended to be reuse in every project I have. Which means the config files are the sample/template/concept I intend to show too.

Structure

.github/
.devcontainer/
.vs/
.vscode/

tools/
demos
libs/
\_ fui_docs
\_ legacy -> from master_v2 and collections
\_ components --> React Comps
\_ assets --> for all graphics and audio
docker/
shell/
template/

Showcase \[Collections 2023-11-12 18:49 UTC+007]

Showcase [Collections 2023-11-12 18:49 UTC+007]

You may find this project has been structured. So, here are some rules to make it works:

.github/
.vs/
.vscode/

.dist
\_ img/
\_ css/
\_ js/
template

.would-be-hidden
dir1
\_ README.md
\_ index.html
\_ index.{js,c,cpp,css,json,*}
\_ index.{png,jpg,ico}
\_ index.bg.{png,jpg}
dir2
\_ [some-name]/
\_ .[some-name]
\_ [some-name].md
\_ [some-name].html
\_ [some-name].{js,c,cpp,css,json,*}
\_ [some-name].{png,jpg,ico}
\_ [some-name].bg.{png,jpg}

node_modules/
package.json

See structure above. All dot-file or folder would be hidden by default. When being showcase, a folder which has README.md and some index file would considered as folder's files. So, when user click dir1, it would automatically show README.md or index.html or any corresponding file. When the folder has many files, it would be group by name and then follow the same rules. It would show the .md first, then .html second, then etc. It would also group some folder or file which has no extension or is a dot-file. The image file would autolatically become the icon of group/folder, and the one end with .bg.* would become the background of group or folder. Even thought, we still try to figure it out what does this background do.

You may find a package.json and node_modules eventhough this showcase would be compiled on-fly. These npm intended to do some precompiled assets such as tailwind and daisy ui. The compiled assets would be put in .dist as it would be hidden in showcase website.

---

Development

@faker-js/faker, chart.js, react-chartjs-2, 
next-auth, prisma, @trpc, bcrypt, firebase-admin, formidable, jsonwebtoken,
react-pdf, yup, prisma-json-types-generator

@chakra-ui/icons, lucide-react
@babel/core

• https://www.npmjs.com/org/react-useful-hooks

https://stackoverflow.com/questions/63775411/is-there-a-way-to-list-all-active-eslint-prettier-rules-in-an-angular-project

npm exec eslint -- --print-config .eslintrc.cjs >> .eslint-list.json

TODO

• Create new Vite React SWC
• Match up to this repo and update
• Integrate Vite Virtual File Router
• Integrate Vite Multiple Assets
• Match up configuration and files: packages, npm/pnpm/yaml rc, eslint, prettier, editorconfig, viteconfig, tsconfig, vscode, devcontainer
  • master_v2
    • create individual provider fluentui
    • create base import tsx for setup and boot
    • match up /src/main.tsx to individual provider fluentui
    • match up /src/components/Preview/*
    • Do not need to match up /src/pages/*/index.tsx
  • collections
  • other existing repo
• Create Viewer on Demos
  • Markdown
    • Parse meta to get url and src
    • Restyle typography and some components tailwind preflight
  • IFrame; implement this first
  • CodeViewer
  • Router hooks
  • Side Panel
    • Get vars from vite by fg to .dirs.json
    • Get .dirs.json
    • Folder first, files second, conf last
    • html first, readme second, then folder, conf last
      • Files: index, md, folder, html, .page.*, {.*, *.config.*}
  • Small Toggle
• Should I install mime-types?
• SHould I also put .env.example or related?
• Integrate github action for github pages with a little high spec
• Integrate devcontainer
• Add configuration for codespace

Junks

preview
code
doc

index

• https://rollupjs.org/troubleshooting/#error-javascript-heap-out-of-memory
• https://stackoverflow.com/questions/66207752/a-better-way-to-manage-nodejs-configuration-flags
• vitejs/vite#2433
• https://nodejs.org/docs/latest/api/cli.html#environment-variables_1

# 1024, 2048, 4096, 8192, 16384
# 512, 3072, 5120, 6144, 7168, 9216, 1024, 11264
# alias node="node --max-old-space-size=4096"
export NODE_OPTIONS="--max-old-space-size=5120"

npm i --include-optional