{"id":17352192,"url":"https://github.com/montalvomiguelo/hydrogen-theme","last_synced_at":"2025-04-06T01:05:52.933Z","repository":{"id":50733171,"uuid":"519976524","full_name":"montalvomiguelo/hydrogen-theme","owner":"montalvomiguelo","description":"A port of Hydrogen's default template to Shopify OS 2.0","archived":false,"fork":false,"pushed_at":"2025-03-17T03:28:58.000Z","size":657,"stargazers_count":143,"open_issues_count":0,"forks_count":39,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-30T00:05:00.360Z","etag":null,"topics":["hydrogen","islands","liquid","shopify","shopify-theme","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://montalvomiguelo.myshopify.com/","language":"Liquid","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/montalvomiguelo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-08-01T05:33:41.000Z","updated_at":"2025-03-26T22:04:41.000Z","dependencies_parsed_at":"2023-01-31T06:01:29.711Z","dependency_job_id":"0c5c5dc8-aa01-44e9-ae21-fb1d094feef1","html_url":"https://github.com/montalvomiguelo/hydrogen-theme","commit_stats":{"total_commits":265,"total_committers":3,"mean_commits":88.33333333333333,"dds":0.07924528301886791,"last_synced_commit":"00cdca0c647a625ebe6d6281f09d28d996a89784"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montalvomiguelo%2Fhydrogen-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montalvomiguelo%2Fhydrogen-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montalvomiguelo%2Fhydrogen-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montalvomiguelo%2Fhydrogen-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/montalvomiguelo","download_url":"https://codeload.github.com/montalvomiguelo/hydrogen-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419859,"owners_count":20936012,"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":["hydrogen","islands","liquid","shopify","shopify-theme","tailwindcss","vite"],"created_at":"2024-10-15T17:12:50.969Z","updated_at":"2025-04-06T01:05:52.914Z","avatar_url":"https://github.com/montalvomiguelo.png","language":"Liquid","funding_links":[],"categories":["Frontend Development"],"sub_categories":["Hydrogen (Headless)"],"readme":"# Hydrogen Theme\n\n[![Build status](https://github.com/montalvomiguelo/hydrogen-theme/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/montalvomiguelo/hydrogen-theme/actions/workflows/ci.yml?query=branch%3Amain)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/montalvomiguelo/hydrogen-theme/blob/main/LICENSE.md)\n\nA port of Hydrogen's default template to Shopify OS 2.0.\n\n![pika-1697163139924-1x](https://github.com/montalvomiguelo/hydrogen-theme/assets/5134470/d92f6135-62d8-4a7d-a612-c812c6652da1)\n\n## 🔨 Requirements\n\n- [Node.js (latest LTS version)](https://nodejs.org/en/)\n- [pnpm](https://pnpm.io/)\n- [Shopify CLI](https://shopify.dev/themes/tools/cli)\n\n## 🚀 Project Structure\n\nThis theme leverages the [default Shopify theme folder structure](https://shopify.dev/themes/tools/github#repository-structure) and introduces the following directories, some of which have special behaviors.\n\n```bash\n└── hydrogen-theme\n    └── frontend\n        ├── entrypoints\n        ├── islands\n        ├── lib\n        └── styles\n```\n\n| Subdirectory  | Description                           |\n| :------------ | :------------------------------------ |\n| `entrypoints` | The entry points for your theme       |\n| `islands`     | The interactive islands in your theme |\n| `lib`         | Theme specific libraries              |\n| `styles`      | The styles of your theme              |\n\n## 🧞 Commands\n\n| Command                             | Action                                                                  |\n| :---------------------------------- | :---------------------------------------------------------------------- |\n| `pnpm install`                      | Installs dependencies                                                   |\n| `pnpm dev -- --store johns-apparel` | Launch the Shopify and Vite servers in parallel                         |\n| `pnpm run deploy`                   | Bundle your theme's assets and upload your local theme files to Shopify |\n\n## 🏝️ Hydration Directives\n\nThe following hydration strategies are available (borrowed from [Astro](https://docs.astro.build/en/concepts/islands/)).\n\n| Directive        | Description                                                                                                                                       |\n| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `client:idle`    | Hydrate the component as soon as the main thread is [free](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)           |\n| `client:visible` | Hydrates the component as soon as the element [enters the viewport](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)   |\n| `client:media`   | Hydrates the component as soon as the browser [matches the given media query](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) |\n\nUsage:\n\n```html\n\u003cmy-component client:visible\u003eThis is an island.\u003c/my-component\u003e\n```\n\n## 🙇‍♂️ Thanks\n\nWe would like to specifically thank the following projects for the inspiration and help regarding the creation of hydrogen-theme:\n\n- [vite-plugin-shopify](https://github.com/barrel/shopify-vite)\n- [hydrogen](https://github.com/Shopify/hydrogen)\n- [dawn](https://github.com/Shopify/dawn)\n- [astro](https://github.com/withastro/astro)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmontalvomiguelo%2Fhydrogen-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmontalvomiguelo%2Fhydrogen-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmontalvomiguelo%2Fhydrogen-theme/lists"}