{"id":14984165,"url":"https://github.com/jungleminds/jm_basic-twig-project","last_synced_at":"2025-10-15T20:35:54.245Z","repository":{"id":97727741,"uuid":"169109195","full_name":"JungleMinds/JM_Basic-Twig-Project","owner":"JungleMinds","description":"A Twig starter project build on storybook with sensible defaults and emphasis on code hygene and sharing.","archived":false,"fork":false,"pushed_at":"2019-03-10T17:20:18.000Z","size":329,"stargazers_count":16,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T20:17:24.829Z","etag":null,"topics":["eslint","flowtype","husky","jest","prettier","prettier-js","scss","storybook","twig"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/JungleMinds.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2019-02-04T16:27:38.000Z","updated_at":"2023-12-09T18:31:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"3c552828-5bb0-4ce6-8a57-56b6c885a862","html_url":"https://github.com/JungleMinds/JM_Basic-Twig-Project","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"3ae644ee8750e01d395fb56527925261513151c0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JungleMinds/JM_Basic-Twig-Project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JungleMinds%2FJM_Basic-Twig-Project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JungleMinds%2FJM_Basic-Twig-Project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JungleMinds%2FJM_Basic-Twig-Project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JungleMinds%2FJM_Basic-Twig-Project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JungleMinds","download_url":"https://codeload.github.com/JungleMinds/JM_Basic-Twig-Project/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JungleMinds%2FJM_Basic-Twig-Project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279111426,"owners_count":26106023,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["eslint","flowtype","husky","jest","prettier","prettier-js","scss","storybook","twig"],"created_at":"2024-09-24T14:08:34.731Z","updated_at":"2025-10-15T20:35:54.214Z","avatar_url":"https://github.com/JungleMinds.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jungle Minds - Basic Twig Project\n\nThis is a starter project for building a HTML site using twig, ES6 and scss. It uses Storybook as a preview/development environment.\nThe output is a set of twig files per component and separate JS and CSS file.\n\u003caside class=\"notice\"\u003e\n\n**Warning**\n\nThe current setup relies on twigjs (via the webpack twig-loader). This brings multiple restrictions like `dynamic includes` not working. Please check out our [issues](https://github.com/JungleMinds/JM_Basic-Twig-Project/issues), [twig-loader issues](https://github.com/zimmo-be/twig-loader/issues) and [twigjs issues](https://github.com/twigjs/twig.js/issues) before diving in.\n\n## Demo\n\nYou can see a live demo here: https://twig-storybook.jungleminds.com\n\nexample distribution: https://twig-storybook.jungleminds.com/distribution\nexample feed: https://twig-storybook.jungleminds.com/distribution/feed.json\n\nIt was set up with [Netlify](https://netlify.com) using nothing more than this repo and the `build` script.\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Setting up your IDE](#setting-up-your-ide)\n- [Folder Structure](#folder-structure)\n- [Scripts](#scripts)\n- [Technologies used](#technologies-used)\n  - [Storybook](#Storybook)\n  - [Webpack](#webpack)\n- [Code Hygiene](#code-hygiene)\n  - [Flow](#flow)\n  - [ESLint](#eslint)\n  - [Prettier](#prettier)\n  - [Jest](#jest)\n\n## Getting Started\n\n1. run `yarn` to install dependencies\n2. run `yarn start` to start developing\n\n### Setting up your IDE\n\nIt is highly recommended you install the following plugins for your IDE of choice:\n\n- Flow\n- Prettier (please set this plugin to only prettify projects that have a prettier config set)\n- ESLint\n\nIf you not install these plugins you might only see code hygiene errors when you commit or push which will lead to a frustrating dev experience.\n\n### Folder Structure\n\nAfter creation, your project will look like this:\n\n```HTML\n.\n├── .github\n│   ├── PULL_REQUEST_TEMPLATE.md\n│   └── ISSUE_TEMPLATE\n│       ├── bug_report.md\n│       └── feature_request.md\n├── README.md\n├── config\n├── \u003cconfig files\u003e\n├── src\n│   ├── components\n│   │   └── \u003capplication specific files\u003e\n│   ├── styles\n│   │   ├── index.scss\n│   │   └── \u003capplication specific files\u003e\n│   ├── scripts\n│   │   ├── index.js\n│   │   └── \u003capplication specific files\u003e\n│   └── app.js\n├── package.json\n└── yarn.lock\n```\n\nFor the project to build, **these files must exist**:\n\n- `/src/app.js` (the JavaScript entry point for Webpack)\n\nYou can delete or rename the other files if you so choose.\n\n### Scripts\n\n- `yarn start`: Start development server with hot reloading using storybook. It runs on `localhost:3000`\n- `yarn build`: Build a Production version of your app\n- `yarn test`: Run all unit tests\n- `yarn test:watch`: Start a test watcher that will continuously run tests on every file change\n- `yarn validate`: Test your Javascript typing with Flow\n- `yarn lint` Test your code for linting errors but don't fix them\n- `yarn lint:js`: Test your Javascript for linting errors but don't fix them\n- `yarn lint:js-fix`: Test your Javascript for linting errors and attempt to fix them automatically\n- `yarn format`: Test your code for formatting errors\n- `yarn postinstall`: After cloning this repo, automatically check for the latest flow definitions from the Flow-Typed repo.\n\n## Technologies used\n\n### Storybook\n\nWe are not the only ones testing the project. External parties or clients check our projects. To make this as easy as possible for them, we've included [Storybook](https://storybook.js.org/).\nThis way anyone can check the components in an isolated area to see if they are performing/looking the way they're supposed to.\n\nThe following command will start up Storybook. A url on which you can view storybook will be displayed in the terminal.\n\n`yarn start`\n\n### Webpack\n\nJust like Storybook this project uses [Webpack](https://webpack.js.org/) under the hood to bundle assets.\n\n## Code Hygiene\n\nTo keep the code hygiene of everyone involved with a project in line, we've added testing, linting and formatting libraries to this to the project. These are made required by precommit hook using Husky.\n\n### Flow\n\nWe use [Flow](https://flow.org/en/) to enforce typing within our projects.\n\nTo start a check for flow errors run the following command in the terminal:\n\n`yarn flow`\n\nUse .flowconfig to configure Flow. We ignore node_modules by default. Make sure you do not have Flow installed globally, but use the Flow version inside this project.\n\nFlow related ESLint rules are defined in package.json.\n\nTo update the flow definitions for this project, run:\n\n`flow-typed update`\n\n### ESLint\n\n[ESLint](https://eslint.org/) checks your javascript for linting errors.\n\nWe use the StandardJS rules. Additional configuration can be done in `package.json.`\n\n`yarn lint:js`\n\n`yarn lint:js-fix`\n\n### Prettier\n\n[Prettier](https://prettier.io/) formats your code so it looks pretty and is readable.\n\nPrettier is included in a commit hook so your code will be checked for formatting every time you try to commit. Therefore it is highly recommended you install Prettier as an extension in your code editor so Prettier will automatically format your code on every save. When you do, make sure your IDE plugin uses the same settings as defined in the project.\n\n`yarn format`\n\n### Jest\n\nTesting has become a requirement for all projects, therefore it's implemented as a base in this project.\n\nTo test the components we use [Jest](https://facebook.github.io/jest/).\n\nThe following commands are some of the possible commands but these will get you started to becoming a testing star!\n\n`yarn test`\nThis will start a full project test run. All the files that can be tested will be checked.\n\n`yarn test:watch`\nThis will start a full project test run, but will trigger a new test run when a file that can be tested has been changed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjungleminds%2Fjm_basic-twig-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjungleminds%2Fjm_basic-twig-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjungleminds%2Fjm_basic-twig-project/lists"}