{"id":18818486,"url":"https://github.com/smithsonian/drupal-castle-components","last_synced_at":"2026-02-07T16:33:41.251Z","repository":{"id":224111874,"uuid":"762456272","full_name":"Smithsonian/drupal-castle-components","owner":"Smithsonian","description":"Drupal component library using TailwindCSS and AlpineJS.","archived":false,"fork":false,"pushed_at":"2024-03-14T19:42:34.000Z","size":563,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-10-17T08:56:20.204Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Twig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Smithsonian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-02-23T20:24:48.000Z","updated_at":"2024-08-26T13:17:04.000Z","dependencies_parsed_at":"2024-03-14T20:43:38.383Z","dependency_job_id":"8d2f53ca-479c-41cb-950a-d0cbd1718d4e","html_url":"https://github.com/Smithsonian/drupal-castle-components","commit_stats":null,"previous_names":["smithsonian/castle-components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Smithsonian/drupal-castle-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Smithsonian%2Fdrupal-castle-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Smithsonian%2Fdrupal-castle-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Smithsonian%2Fdrupal-castle-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Smithsonian%2Fdrupal-castle-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Smithsonian","download_url":"https://codeload.github.com/Smithsonian/drupal-castle-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Smithsonian%2Fdrupal-castle-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29199838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T16:28:23.579Z","status":"ssl_error","status_checked_at":"2026-02-07T16:28:22.566Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-08T00:16:58.233Z","updated_at":"2026-02-07T16:33:41.230Z","avatar_url":"https://github.com/Smithsonian.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Castle Components\n\nDrupal component library using TailwindCSS and AlpineJS.\nView the [online documentation](https://components.saam.media/).\n\n\u003e [!WARNING]  \n\u003e This module is under active development, and is not ready to be used in production.\n\n## Install\n\nInstall as any Drupal module. It's recommended to use composer.\n\n```bash\ncomposer install smithsonian/castle_components\n```\n\n## Extend\n\nTo use the components in your theme you'll need to include the module's libraries in your theme's info.yml file.\n\nFor example:\n\n```yml\n# my_theme.info.yml\nname: my_theme\ntype: theme\nlibraries:\n  - castle_components/scripts\n  - castle_components/tailwind\ndependencies:\n  - castle_components:castle_components\n```\n\nNote: Including the `castle_components/tailwind` library will use the package's default TailwindCSS styles. Normally, you'll want to exclude this library, and instead, create a Tailwind config in your custom theme to customize the way components are styled in your theme. An example config:\n\n```javascript\n// tailwind.config.js\nconst colors = require('tailwindcss/colors')\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    '../../../modules/contrib/castle_components/components/**/*.twig',\n    './templates/**/*.twig',\n  ],\n  darkMode: 'selector',\n  theme: {\n    colors: {\n      primary: colors.blue,    \n      secondary: colors.slate,\n      accent: colors.red,\n      success: 'hsl(160, 84%, 39%)',\n      warning: 'hsl(38, 92%, 50%)',\n      error: 'hsl(0, 84%, 60%)',\n    }\n  },\n  plugins: [require('@tailwindcss/typography')],\n}\n```\n\n## Usage\n\nOnce configured you can use components in your Drupal theme using Twig [embed](https://twig.symfony.com/doc/3.x/tags/embed.html).\n\n```twig\n{% embed 'castle_components:button' with { size: 'large' } only %}\n  {% block content %}\n    This is a Castle button\n  {% endblock %}\n{% endembed %}\n```\n\nor Twig [include](https://twig.symfony.com/doc/3.x/tags/include.html)\n\n```twig\n{{ include ('castle_components:icon', { 'name': 'download' }, with_context=false ) }}\n```\n\n## AlpineJS\n\nMany of the Castle components use AlpineJS for interactivity, transitions, and event handling.\n\nYou'll want to add the following style to you're HTML head to prevent unstyled components appearing before Alpine is initialized.\n\n```html\n\u003cstyle\u003e\n  [x-cloak] {\n    display: none !important;\n  }\n\u003c/style\u003e\n```\n\n## Visual Studio Code\n\nFor autocomplete helpers copy the `.vscode/castle-components.code-snippets` Snippets file from the module directory into your VSCode project root. More information about [creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets).\n\n## Development\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmithsonian%2Fdrupal-castle-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmithsonian%2Fdrupal-castle-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmithsonian%2Fdrupal-castle-components/lists"}