{"id":18285514,"url":"https://github.com/bemit/create-page-starter","last_synced_at":"2025-04-09T06:16:52.036Z","repository":{"id":83066265,"uuid":"367624970","full_name":"bemit/create-page-starter","owner":"bemit","description":"⚛️ Page starter for static pages which may use typescript React, all in one build handling, 1-click deployment with netlify cms and styled with @formanta/sass. ","archived":false,"fork":false,"pushed_at":"2022-06-09T20:11:13.000Z","size":3023,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-15T00:32:58.992Z","etag":null,"topics":["frontmatter","netlify","netlify-cms","static-site-boilerplate","static-site-generator","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/bemit.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":"2021-05-15T12:22:23.000Z","updated_at":"2022-03-17T06:04:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"6cd85072-2662-4017-a950-e065775704ba","html_url":"https://github.com/bemit/create-page-starter","commit_stats":null,"previous_names":[],"tags_count":6,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2Fcreate-page-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2Fcreate-page-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2Fcreate-page-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2Fcreate-page-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bemit","download_url":"https://codeload.github.com/bemit/create-page-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987285,"owners_count":21028895,"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":["frontmatter","netlify","netlify-cms","static-site-boilerplate","static-site-generator","twig"],"created_at":"2024-11-05T13:16:55.094Z","updated_at":"2025-04-09T06:16:52.014Z","avatar_url":"https://github.com/bemit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create Page Starter ⚛️\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/81882d4d-14be-4ff8-b30c-e7a4426eb744/deploy-status)](https://app.netlify.com/sites/create-page-starter/deploys)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\nStarting point for static pages generated with [create-amp-page](https://github.com/bemit/create-amp-page) and using [@formanta/sass](https://formanta.bemit.codes) for styling - but **for PWA enhanced web pages** and **not** AMP. Directly deploy with [netlify cms](https://www.netlifycms.org/) as git managed static site generator!\n\n[![Deploy to Netlify](https://img.shields.io/badge/Deploy%20to%20netlify-success?style=for-the-badge\u0026logo=netlify\u0026labelColor=0e1e25\u0026color=00C7B7)](https://app.netlify.com/start/deploy?repository=https://github.com/bemit/create-page-starter) [![Run on CodeSandbox](https://img.shields.io/badge/run%20on%20CodeSandbox-blue?labelColor=fff\u0026logoColor=505050\u0026style=for-the-badge\u0026logo=codesandbox)](https://codesandbox.io/s/github/bemit/create-page-starter)\n\n    npm i\n    npm start\n\n    # or\n    npm run build\n\n    npm run tasks\n    npm run clean\n\n    npm run test\n    # test driven UI development (with cypress):\n    npm run tdd-ui\n    # test driven JS development (with jest):\n    npm run tdd-js\n\nOpen [localhost:4489/defaultPage](http://localhost:4489/defaultPage) for your local page preview and change something in `src/*`!\n\n[![Features](https://img.shields.io/badge/Features-blue?labelColor=333\u0026color=f4f4f4\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333)](#features)\n\n[![File Structure](https://img.shields.io/badge/File%20Structure-blue?labelColor=333\u0026color=f4f4f4\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333)](#default-file-structure)\n\n[![Netlify CMS](https://img.shields.io/badge/Netlify%20CMS-blue?labelColor=333\u0026color=f4f4f4\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333)](#netlify-cms)\n\n[![Component Library](https://img.shields.io/badge/Component%20Library-blue?labelColor=333\u0026color=f4f4f4\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333)](#amp-component-library)\n\n[![License](https://img.shields.io/badge/License-blue?labelColor=333\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333\u0026color=f4f4f4)](#license)\n\n## Features\n\nProvides a basic file structure and uses the gulp build tasks of [create-amp-page](https://github.com/bemit/create-amp-page), with additionally: markdown and netlify cms.\n\nHas the same basic features as create-amp-page, [check the list there](https://github.com/bemit/create-amp-page-starter#features).\n\nAdditionally, this starter has babel and webpack configured for Typescript and React.\n\n**Universal Twig functions**, used within templates, are included in `create-amp-page`, check out the [function docs](https://github.com/bemit/create-amp-page#twig-functions)\n\n## Default File Structure\n\n- `.env` for configuration of env vars\n    - need to be prefixed with either `REACT_APP_` or `WEB_APP_` to be available in javascript\n- `build` dist folder after running `npm run build` or while `npm run start`\n    - each page will be saved in a folder, standard: `build/defaultPage`\n    - media files are saved in `build/media`\n- `public` with general files in root like `manifest.json`\n- `public/admin` config and setup files for netlify cms\n- `src/api` may be used as mock api\n- `src/data` contains the page frontmatter and data\n- `src/html` is the base for all twig templates\n- `src/html/pages` will be build to individual HTML pages\n- `src/media` may contain images\n- `src/styles/main.scss` is the style sheet\n- `twigLogic/*` extra twig functions, reloaded on every build\n\n## Files to Adjust\n\n- `Gulpfile.js` needs e.g. domain of production environment and a bit of other stuff\n- `.env` just needs to exist, take a look at [.env.example](.env.example) for available env vars\n- `public/` needs all icons, like favicon etc.\n- `public/manifest.json` needs some proper namings and colors\n- `public/offline.html` needs some proper namings and email address\n- `src/js/sw.js` maybe needs a new cache key and \"pages to cache\" configuration\n\n## Netlify CMS\n\nUses the same setup as create-amp-page, [check the Netlify CMS docs there](https://github.com/bemit/create-amp-page-starter#netlify-cms).\n\n### Twig Embed Image\n\nDisplays an `img` or `amp-img` tag using `ampEnabled`, `layout` defaults to 'responsive'. Set's width and height using `getImage` fn, adds sha1 cachebuster.\n\n\u003e todo: srcset and image resizing support\n\n```twig\n{% embed 'blocks/image.twig' with {\n    src: '/media/img-01.png',\n    alt: 'A blog hero image',\n    classes: 'mb2',\n    layout: 'responsive',\n} %}\n{% endembed %}\n```\n\n### React Static\n\nRender your React directly at the build process, clean and rich HTML for SEO and client side speedup!\n\n\u003e very very alpha: it works, but features need optimizing / coworking-with-twig, like: resizing used images\n\u003e\n\u003e template structure must be adjusted before using snap, as every dynamic thing must be rendered with react and not through twig\n\u003e or react-snap uses a different twig template for each page (seems to be hard)\n\nUses [react-snap](https://github.com/stereobooster/react-snap) for \"server side react rendering\" and fixing [react-snap#493](https://github.com/stereobooster/react-snap/issues/493) through the custom `/copy.js`, adding the HTML cleaning and optimizing tasks again.\n\nFirst install `react-snap`: `npm i --save react-snap`\n\nCommands:\n\n    # use `snap-build` now instead of `build`\n    npm run snap-build\n\n## License\n\nThis project is free software distributed under the **MIT License**.\n\nSee: [LICENSE](LICENSE).\n\n### Contributors\n\nBy committing your code/creating a pull request to this repository you agree to release the code under the MIT License attached to the repository.\n\n## Copyright\n\n2022 | [Michael Becker](https://mlbr.xyz), [bemit UG (haftungsbeschränkt)](https://bemit.codes)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbemit%2Fcreate-page-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbemit%2Fcreate-page-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbemit%2Fcreate-page-starter/lists"}