{"id":22407733,"url":"https://github.com/roadiz/basetheme","last_synced_at":"2025-07-31T19:31:52.883Z","repository":{"id":25486783,"uuid":"28917736","full_name":"roadiz/BaseTheme","owner":"roadiz","description":"Blank Roadiz theme - This theme is meant to get a fresh start to create a theme.","archived":false,"fork":false,"pushed_at":"2023-01-09T22:43:39.000Z","size":6230,"stargazers_count":11,"open_issues_count":25,"forks_count":3,"subscribers_count":9,"default_branch":"master","last_synced_at":"2023-02-26T23:02:32.037Z","etag":null,"topics":["blank-theme","boilerplate","gulp","roadiz","twig","webpack"],"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/roadiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-07T14:25:00.000Z","updated_at":"2021-09-22T14:56:51.000Z","dependencies_parsed_at":"2023-01-14T07:00:25.850Z","dependency_job_id":null,"html_url":"https://github.com/roadiz/BaseTheme","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roadiz%2FBaseTheme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roadiz%2FBaseTheme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roadiz%2FBaseTheme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roadiz%2FBaseTheme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roadiz","download_url":"https://codeload.github.com/roadiz/BaseTheme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228283751,"owners_count":17896267,"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":["blank-theme","boilerplate","gulp","roadiz","twig","webpack"],"created_at":"2024-12-05T11:15:15.218Z","updated_at":"2024-12-05T11:15:15.863Z","avatar_url":"https://github.com/roadiz.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Base Roadiz theme\n\n[![Build Status](https://travis-ci.org/roadiz/BaseTheme.svg?branch=master)](https://travis-ci.org/roadiz/BaseTheme)\n\nThis theme is meant to get a **fresh start** to create a custom website on *Roadiz*. \\\n**Requires** `rezozero/tree-walker` library to deal with navigation and page blocks templating.\n\n## Get started\n\nMake sure that *NodeJS*, *NPM* and *Yarn* are installed on your machine.\n\nGenerate a new theme with *Test* as your theme prefix\n\n```bash\nbin/roadiz themes:generate --relative --symlink Test\ncd themes/TestTheme\n# Install JS dependencies with npm or Yarn\nyarn \u0026\u0026 yarn run build\n```\n\nWe provide a starter kit based on ES6 with *Webpack*, *VueJS*, *Scss*, *Typescript*. \nFeel free to adapt it if you have your own coding workflow. \nKeep in mind that we inject built CSS and JS into partial *Twig* templates to get versioned file names.\n\n### Register BaseTheme services\n\nBase service will provide some Twig image formats and a PathGeneration subscriber for `NSLink` node-type.\nThis will also register new asset package to be able to use `{{ asset('js/file.js', 'BaseTheme') }}` *Twig* function.\n\n**Do not forget** to add the following lines to your `app/AppKernel.php` file:\n\n```php\n// app/AppKernel.php\n\npublic function register(\\Pimple\\Container $container)\n{\n    parent::register($container);\n\n    /*\n     * Add your own service providers.\n     */\n    $container-\u003eregister(new \\Themes\\BaseTheme\\Services\\BaseThemeServiceProvider());\n}\n```\n\n### Install front dependencies\n```\ncd themes/TestTheme\nyarn\n```\n\n### Change front config (proxy)\n```typescript\n// themes/TestTheme/vue.config.js\n// Change followed line to match with your php local server ip\n\n//...\n{\n    target: 'http://0.0.0.0:8091'\n}\n//...\n```\n\nYou can use your Roadiz `.env` to expose `APP_PORT` variable.\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n## Then open `0.0.0.0:8080/dev.php`\n```\n\n### Basic dev with watch mode (no live reload)\n```\nyarn dev\n```\n\n### Compiles and minify for production\n```\nyarn build\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n### Analyse build files\n```\nyarn analyse\n```\n\nTwo files will be generated in static folder\n\n### Utils\n\n`@/` or `~/` can be used for root sources access\nExample: `import EventBus from '~/utils/EventBus'`\nOr: `import { SWIPER } from '@/config/contants'` \n\n## Syntax\n\nWe use decorators and vue class component, see : \nhttps://github.com/vuejs/vue-class-component\nhttps://github.com/kaorun343/vue-property-decorator\n\nIt also possible to use `jsx`. You just need to create file with `.tsx` extension do not forget to create a `render` function.\n\n## Dynamic component import\n\nYou can dynamically import component as follow\n```typescript\n// ...\nimport MainNavigation from './components/Navigation/Navigation'\n\n@Component({\n    components: {\n        // Standard import\n        MainNavigation,\n        // Dynamic import with component naming (for browser dev tools)\n        // If you prefix the component with \"async-\" the component will be not prefetch\n        // To disable prefetch use: /* webpackChunkName: \"async-group-carousel\" */ \n        GroupCarousel: () =\u003e import(/* webpackChunkName: \"group-carousel\" */'./components/GroupCarousel/GroupCarousel')\n    }\n})\nexport default class App extends Vue {\n    // ...\n}\n```\n\nDynamic components will be automatically loaded when corresponding tag are founded\n\n## Guidelines\n\n#### General\n\nIf you need to use utility library like `lodash`, please import only required functions (for treeshaking)\nExample:\n```typescript\nimport map from 'lodash/map'\n// or\nimport uniq from 'lodash/uniq'\n```\n\n#### Twig\n\nUse snake case to name your block in twig file  \nEx:\n```twig\n{% block inner_content %}\n    {# ... #}\n{% endblock %}\n```\n\nUse single quotes  (for visibility between variables and declarations)\nEx:\n```twig\n{% include '@TestTheme/svg/use.svg.twig' with {\n    'icon': 'facebook'\n} only %}\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n\n## Boilerplate\n\nBaseTheme will provide you some ready-made *Twig* templates, styles and ES6 classes.\n\n- A page node-type is available with its Twig template.\n- A link node-type is available with its Twig template and its event subscriber to rewrite URL. \n- A content block is available with its Twig template.\n- A map block is available with its Twig template. All you need is to create the node-type in your Roadiz back-office.\n- A contact form block is available with its controller and Twig templates. \n\n#### Node-types\n\nA common node-type called *Page* will be installed with this theme, his controller is located \nin `Controllers/PageController.php` and his twig template in `Resources/views/types/page.html.twig`.\nIf you need others node-type, duplicate theses files and rename them.\n\n#### Blueprints, UI and grid helpers\n\nBaseTheme has several frontend helpers available from keystrokes `8`, `9` and `0` when you are using Roadiz `devMode`:\n\n- `8` will display your blueprints images over you website.\n- `9` will display your UI components \n- `0` will display your grid\n\nChange these helpers in `@BaseTheme/dev/dev.html.twig` template\n\n## Contributing\n\nSee [Contributing guidelines](./CONTRIBUTING.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froadiz%2Fbasetheme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froadiz%2Fbasetheme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froadiz%2Fbasetheme/lists"}