{"id":13406076,"url":"https://github.com/JulianCataldo/web-garden","last_synced_at":"2025-03-14T10:32:23.885Z","repository":{"id":37395757,"uuid":"504728290","full_name":"JulianCataldo/web-garden","owner":"JulianCataldo","description":"Building blocks for making progressive and future-proof websites. Components collection features Astro, HTML, SCSS, JS, TS… Configurations features ESLint, Prettier, Stylelint…","archived":false,"fork":false,"pushed_at":"2024-07-14T18:43:16.000Z","size":26559,"stargazers_count":157,"open_issues_count":23,"forks_count":18,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2024-10-29T17:11:52.719Z","etag":null,"topics":["astro","css","frontend","html","javascript","scss","scss-mixins","typescript","vanilla-javascript"],"latest_commit_sha":null,"homepage":"http://code.juliancataldo.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JulianCataldo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-18T02:54:16.000Z","updated_at":"2024-10-17T11:13:20.000Z","dependencies_parsed_at":"2024-06-15T21:46:19.041Z","dependency_job_id":"4d328c5b-081d-4985-ab22-06901417bd83","html_url":"https://github.com/JulianCataldo/web-garden","commit_stats":{"total_commits":844,"total_committers":6,"mean_commits":"140.66666666666666","dds":"0.011848341232227444","last_synced_commit":"2ab3ccd9204b3e0a024f8e8271b9da872103132f"},"previous_names":[],"tags_count":390,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulianCataldo%2Fweb-garden","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulianCataldo%2Fweb-garden/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulianCataldo%2Fweb-garden/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JulianCataldo%2Fweb-garden/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JulianCataldo","download_url":"https://codeload.github.com/JulianCataldo/web-garden/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243401494,"owners_count":20285054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","css","frontend","html","javascript","scss","scss-mixins","typescript","vanilla-javascript"],"created_at":"2024-07-30T19:02:20.233Z","updated_at":"2025-03-14T10:32:23.876Z","avatar_url":"https://github.com/JulianCataldo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","astro"],"sub_categories":[],"readme":"# 🚀  Julian's Web Garden\n\n[![Astro](https://img.shields.io/badge/Astro-333333.svg?logo=astro)](https://astro.build)\n[![SCSS](https://img.shields.io/badge/SCSS-333333.svg?logo=sass)](https://sass-lang.com)\n[![TypeScript](https://img.shields.io/badge/TypeScript-333333.svg?logo=typescript)](http://www.typescriptlang.org/)  \n[![ISC License](https://img.shields.io/npm/l/@julian_cataldo/remark-lint-frontmatter-schema)](./LICENSE)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://www.conventionalcommits.org)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://makeapullrequest.com)  \n[![Prettier](https://img.shields.io/badge/Prettier-333333.svg?logo=prettier)](https://prettier.io)\n[![EditorConfig](https://img.shields.io/badge/EditorConfig-333333.svg?logo=editorconfig)](https://editorconfig.org)\n[![ESLint](https://img.shields.io/badge/ESLint-3A33D1?logo=eslint)](https://eslint.org)\n[![Stylelint](https://img.shields.io/badge/Stylelint-222222?logo=Stylelint)](https://stylelint.io)\n\n\u003c!-- [![Renovate](https://img.shields.io/badge/Renovate-enabled-17a2b8?logo=renovatebot)](https://app.renovatebot.com/dashboard) --\u003e\n\n---\n\nHere lies some re-usable components and tooling settings,\ntaking advantage of Astro strengths as much as possible.\n\nFocus is on common web patterns and progressive enhancements.\n\n\u003c!-- \u003e **Note**\n\u003e Astro is still in Beta, so is this collection.\n\u003e Components API might change a bit, though not drastically.\n\u003e Thanks for you understanding ✌️. --\u003e\n\n## 🤷🏼‍♂️  Philosophy\n\nWe've all been to the point of throwing valuable code when adopting new\nshiny website frameworks.  \nThanks to \"island architecture\" practices, we can establish standard and\nfuture-proof, commonly used, generic patterns, using the web holy trinity of languages : **HTML** / **CSS** and **JavaScript**.  \nThat way, we can sprinkle advanced JS widgets as we like, with trendy UI framework, while\nthings like global application utilities remain stable over time.\n\nVanilla means future-proofing our code, but it also bring the benefit of\nminuscule file sizes compared to \"all-or-nothing\" UI frameworks.\n\n---\n\n\u003cdiv class=\"git-only\"\u003e\n\n- [🚀  Julian's Web Garden](#julians-web-garden)\n  - [🤷🏼‍♂️  Philosophy](#️philosophy)\n- [🔗  Quick links](#quick-links)\n  - [LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋](#live-demo--documentation-website)\n    - [Architecture](#architecture)\n      - [Terminology](#terminology)\n  - [📖  Website source code](#website-source-code)\n  - [📦  Application-level components](#application-level-components)\n  - [📦  Components](#components)\n  - [🛠  Tooling configurations](#tooling-configurations)\n- [🚧  To dos](#to-dos)\n- [🧑‍🚀  Development](#development)\n  - [🏁  Commands](#commands)\n\n---\n\n\u003c/div\u003e\n\n# 🔗  Quick links\n\n## [LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋](https://code.juliancataldo.com/)\n\n\u003cdiv class=\"git-only\"\u003e\n\n[![Live demo website](https://code.juliancataldo.com/poster.png)](https://code.juliancataldo.com)\n\n\u003c/div\u003e\n\n[**Production** deployed on **`code.juliancataldo.com`**](https://code.juliancataldo.com/).  \n_[**Mirror** deployed on **`web-garden.netlify.app`**](https://web-garden.netlify.app)._\n[See **Production** GitHub workflow](https://github.com/JulianCataldo/web-garden/blob/develop/.github/workflows/production.yml)\n\n[**Develop** deployed on **`develop--web-garden.netlify.app`**](https://develop--web-garden.netlify.app).  \n[See **Branch** GitHub workflow](https://github.com/JulianCataldo/web-garden/blob/develop/.github/workflows/branch.yml)\n\nDeployed on Netlify via GitHub actions.\n\n\u003c!-- TODO: integrate mermaid renderer into website / or pre-render SVG --\u003e\n\n### Architecture\n\n```mermaid\n\nflowchart TB\n\nsubgraph Pages\nHome(Home)\nEtc2(\"...\")\nend\nsubgraph Components\n  subgraph Layouts\n  Default('Default')\n  Etc3(\"...\")\n  end\n  subgraph Application\n  SEO('SEO')\n  Prefetch('Prefetch')\n  Etc(\"...\")\n  end\n  subgraph Modules\n  Landing('Landing')\n  SinglePackage('SinglePackage')\n  Etc5(\"...\")\n  end\n  subgraph Generic\n  Link('Link')\n  LicensesReport('LicensesReport')\n  Etc4(\"...\")\n  end\nend\n\nData(Data)--\u003ePages\n\nApplication--\u003eLayouts\nGeneric--\u003ePages\nModules--\u003ePages\nGeneric--\u003eModules\nGeneric--\u003eLayouts\nLayouts--\u003ePages\n\n```\n\n---\n\n#### Terminology\n\n- **Pages**: the base component entry point.  \n  All other parts (**layouts**, generic **components**, **modules**…) and data are directly or indirectly gathered from here.\n- **Layout**: Where your website shells lives. This is where you put your global navigation, footer…\n  Alternative layouts can be created like  \n  `Print`, `Compact`, `Bare`, `Blog`…\n- **App-level component**: used everywhere, anytime, for a given **layout**, which import them.  \n  E.g. Color modes handler, breakpoints handler…\n- **Component**: Ubiquitous general purpose, atomic components.  \n  E.g. icons, images, links, maps, videos…\n- **Module**: Complex set of components, forming a single purpose page view/section.  \n  E.g. `Landing`, `SinglePackage`, `ContactForm`…\n- **Data**: Local JSONs, Markdown files, remote APIs…  \n  Should be fetched from **pages**. Note that this is not a hard rule or a technical limitation with Astro as with other frameworks.  \n  Ultimately, this pattern makes data-flow easier to follow (\"top -\u003e down\"), preventing spaghetti code, duplications and performance hogs.\n\n## [📖  Website source code](https://github.com/JulianCataldo/web-garden/tree/master/demo)\n\nSee [default layout](demo/src/layouts/Default/Default.astro) and [home page](https://github.com/JulianCataldo/web-garden/blob/develop/demo/src/pages/index.astro)\nfor live implementation examples.\n\n---\n\n## [📦  Application-level components](https://github.com/JulianCataldo/web-garden/tree/develop/app)\n\n[These are global components](https://github.com/JulianCataldo/web-garden/tree/develop/app) which enhance or augment browser behavior and style,\nwhile providing useful utilities to developers, website-wide.\n\n\u003c!-- AUTO-GENERATED-CONTENT:START (DIRTREE:dir=./app) --\u003e\n\n```\napp/\n├── BaseDocument/\n├── Breakpoints/\n├── ColorMode/\n├── GoogleAnalytics/\n├── HoverPrefetch/\n├── Lightbox/\n├── Navigation/\n├── PageTransition/\n├── Resets/\n├── ScrollObserver/\n├── SEOMetadata/\n└── Tooltips/\n```\n\n\u003c!-- AUTO-GENERATED-CONTENT:END --\u003e\n\n## [📦  Components](https://github.com/JulianCataldo/web-garden/tree/develop/components)\n\nGeneric [extendables components](https://github.com/JulianCataldo/web-garden/tree/develop/components).\n\n\u003c!-- AUTO-GENERATED-CONTENT:START (DIRTREE:dir=./components) --\u003e\n\n```\ncomponents/\n├── CodeEditor/\n├── Diagram/\n├── GeoMap/\n├── LicensesReport/\n├── Link/\n├── Tabs/\n├── TerminalPlayer/\n└── Testbed/\n```\n\n\u003c!-- AUTO-GENERATED-CONTENT:END --\u003e\n\n## [🛠  Tooling configurations](https://github.com/JulianCataldo/web-garden/tree/develop/configs)\n\n[A useful collection](https://github.com/JulianCataldo/web-garden/tree/develop/configs) for web developers.  \nFeatures ESLint, Prettier, Stylelint, Commitlint…  \nFor Astro, React, Vue, SCSS, TS…\n\n\u003c!-- AUTO-GENERATED-CONTENT:START (DIRTREE:dir=./configs) --\u003e\n\n```\nconfigs/\n├── vscode/\n├── .editorconfig-example\n├── commitlint-base.ts\n├── eslint-all.cjs\n├── eslint-astro.cjs\n├── eslint-js.cjs\n├── eslint-jsx.cjs\n├── eslint-mdx.cjs\n├── eslint-ts.cjs\n├── eslint-tsx.cjs\n├── eslint-vue.cjs\n├── index.mjs\n├── prettier-astro.cjs\n├── prettier-base.cjs\n└── stylelint-all.cjs\n```\n\n\u003c!-- AUTO-GENERATED-CONTENT:END --\u003e\n\n\u003c!-- # ✅  Tests\n\nCypress:\n\n- [ ] App/Analytics\n- [x] App/Base\n- [ ] App/Prefetch\n  - Broken: `realHover` [issue](https://github.com/dmtrKovalenko/cypress-real-events/issues/247)\n- [ ] App/Resets\n- [ ] App/Breakpoints\n- [ ] App/ColorMode\n- [x] App/Scroll/Observer\n- [ ] App/SEO\n- [x] App/Tooltips\n- [x] App/Transition\n  - [ ] External / contact links\n- [ ] App/Lightbox\n- [x] Components/Media/Map\n- [ ] Components/Link\n  - [ ] External / contact links\n- [ ] Components/LicensesReport\n- [ ] … --\u003e\n\n# 🚧  To dos\n\n- [ ] Find a way to launch only necessary tests when versioning\n- [ ] Implement dev / prod mode for debugging outputs\n- [ ] Evaluate PNPM workspaces + tools for replacing Lerna version/publish?\n- [ ] Fix Lerna conventional commits not following breaking changes for versioning\n- [ ] Full no JS compatibility / fallbacks checks\n  - [ ] Fix CSS theme not loading\n- [ ] Fix flash of unstyled text (critical font loading strategy)\n\n\u003c!-- # 🧫  Experimenting --\u003e\n\n\u003c!-- - Website full theme switcher, in addition to color dark / light variants. --\u003e\n\u003c!-- - Feature flag manager --\u003e\n\u003c!-- - Copy to clipboard --\u003e\n\u003c!-- - Algolia search --\u003e\n\u003c!-- - SSR Mermaid --\u003e\n  \u003c!-- - Easy fonts integration --\u003e\n  \u003c!-- - Easy iconify integration --\u003e\n\n# 🧑‍🚀  Development\n\n## 🏁  Commands\n\n```zsh\n# Clone mono-repository\ngit clone https://github.com/JulianCataldo/web-garden\n\n# Scripts located in root ./package.json\n\n# Bootstrap all packages dependencies\npnpm install --recursive\n\n# Launch implementations demo website\npnpm run demo\n\n# Cypress: Open dev GUI\npnpm run cypress:open\n\n# Cypress: Run test suite\npnpm run cypress:run\n\n# Linkinator: Run links checker with report\npnpm run test:links\n\n# Pre-release, does:\n# 1. Packages bump based on commits\n# 2. Tagging releases\n# 3. Git push\npnpm run version\n\n# Release updated packages on NPM public registry\npnpm run release\n```\n\n\u003cdiv class=\"git-footer\"\u003e\n\n---\n\nOther projects:\n\n- [astro-content](https://github.com/JulianCataldo/astro-content): A text based, structured content manager, for edition and consumption.\n- [remark-lint-frontmatter-schema](https://github.com/JulianCataldo/remark-lint-frontmatter-schema): Validate your Markdown **frontmatter** data against a **JSON schema**.\n- [retext-case-police](https://github.com/JulianCataldo/retext-case-police): Check popular names casing. Example: ⚠️ `github` → ✅ `GitHub`.\n- [remark-embed](https://github.com/JulianCataldo/remark-embed): A `remark` plugin for embedding remote / local Markdown or code snippets.\n\n---\n\n🔗  [JulianCataldo.com](https://www.juliancataldo.com/)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJulianCataldo%2Fweb-garden","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJulianCataldo%2Fweb-garden","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJulianCataldo%2Fweb-garden/lists"}