{"id":20630478,"url":"https://github.com/pixelbyaj/sitepage","last_synced_at":"2025-04-15T18:20:20.754Z","repository":{"id":55147020,"uuid":"240687704","full_name":"pixelbyaj/sitePage","owner":"pixelbyaj","description":"Design your own Site with beautiful full-page scrolling using JSON and template View","archived":false,"fork":false,"pushed_at":"2024-08-02T14:42:17.000Z","size":382,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T18:46:02.408Z","etag":null,"topics":["donations","html","html-structure","javascript","javascript-library","scrolling","sitepage","smooth-scrolling","typescript","website-builder","website-design","website-generation","website-theme"],"latest_commit_sha":null,"homepage":"https://www.pixelbyaj.com/sitepage/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelbyaj.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}},"created_at":"2020-02-15T10:35:06.000Z","updated_at":"2024-10-21T22:22:36.000Z","dependencies_parsed_at":"2022-08-14T13:30:44.701Z","dependency_job_id":null,"html_url":"https://github.com/pixelbyaj/sitePage","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelbyaj%2FsitePage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelbyaj%2FsitePage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelbyaj%2FsitePage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelbyaj%2FsitePage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelbyaj","download_url":"https://codeload.github.com/pixelbyaj/sitePage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249126142,"owners_count":21216731,"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":["donations","html","html-structure","javascript","javascript-library","scrolling","sitepage","smooth-scrolling","typescript","website-builder","website-design","website-generation","website-theme"],"created_at":"2024-11-16T14:07:58.776Z","updated_at":"2025-04-15T18:20:20.737Z","avatar_url":"https://github.com/pixelbyaj.png","language":"TypeScript","funding_links":["https://www.paypal.me/pixelbyaj"],"categories":[],"sub_categories":[],"readme":"# sitePage.js\n[![sitePage.js version](https://img.shields.io/npm/v/sitepage.js/latest)](https://www.npmjs.com/package/sitepage.js)\n[![Known Vulnerabilities](https://snyk.io/test/github/pixelbyaj/sitePage/badge.svg?targetFile=package.json)](https://snyk.io/test/github/pixelbyaj/sitePage?targetFile=package.json)\n[![npm](https://img.shields.io/npm/dt/sitepage.js.svg)](https://www.npmjs.com/package/sitepage.js)\n[![License](https://img.shields.io/badge/License-GPL-blue.svg)](https://www.gnu.org/licenses/gpl-3.0.html)\n[![PayPal Donate](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/pixelbyaj)\n[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/sitepage.js/badge/day?style=rounded)](https://www.jsdelivr.com/package/npm/sitepage.js)\n[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/sitepage.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/sitepage.js)\n[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/sitepage.js/badge/year?style=rounded)](https://www.jsdelivr.com/package/npm/sitepage.js)\n\nA simple and easy to use library that creates single page scrolling websites with horizontal or vertical scrolling.\n- [DEMO](https://www.pixelbyaj.com/sitepage/)\n- [StackBlitz](https://stackblitz.com/edit/sitepagejs)\n- [Introduction](https://github.com/pixelbyaj/sitepage#introduction)\n- [Compatibility](https://github.com/pixelbyaj/sitepage#compatibility)\n- [License](https://github.com/pixelbyaj/sitepage#license)\n- [Usage](https://github.com/pixelbyaj/sitepage#usage)\n- [Options](https://github.com/pixelbyaj/sitepage#options)\n- [Reporting issues](https://github.com/pixelbyaj/sitepage#reporting-issues)\n- [Contributing to sitepage](https://github.com/pixelbyaj/sitepage#contributing-to-sitepagejs)\n- [Changelog](https://github.com/pixelbyaj/sitepage#changelog)\n- [Resources](https://github.com/pixelbyaj/sitepage#resources)\n- [Donations](https://github.com/pixelbyaj/sitepage#donations)\n\n## Introduction\nSuggestion are more than welcome, not only for feature requests but also for coding style improvements.\nLet's make this a great library to make people's lives easier!\n\n## Compatibility\nsitepage is fully functional on all modern browsers.\nIt also provides touch support for mobile phones, tablets and touch screen computers.\n\n## License\n\n### Open source license\nIf you are creating an open source application under a license compatible with the [GPL](https://www.gnu.org/licenses/gpl-3.0.html), you may use sitePage under the terms of the GPL.\n\n**The credit comments in the JavaScript and CSS files should be kept intact** (even after combination or minification)\n\n## Usage\nAs you can see in the example files, you will need to include:\n - The JavaScript file `sitepage` (or its minified version `sitepage.min.js`)\n - The css file `https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css`\n - The css file `sitepage.min.css`\n\n### Install using  npm\n**Optionally**, you can install sitepage with bower or npm if you prefer:\n\nTerminal:\n```shell\n// With npm\nnpm install sitepage.js\n```\n\n### Including files:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"sitepage.min.css\" /\u003e\n\n\u003cscript type=\"text/javascript\" src=\"sitepage.min.js\"\u003e\u003c/script\u003e\n```\n### Optional use of CDN\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/sitepage.js@3.1.2/dist/sitepage.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/sitepage.js@3.1.2/dist/style/sitepage.min.css\" /\u003e\n```\n### Required HTML structure\nStart your HTML document with the compulsory [HTML DOCTYPE declaration](http://www.corelangs.com/html/introduction/doctype.html) on the 1st line of your HTML code. You might have troubles with sections heights otherwise. The examples provided use HTML 5 doctype `\u003c!DOCTYPE html\u003e`.\n\nEach section will be defined with an element containing the `section` class.\nThe active section by default will be the first section, which is taken as the home page.\n\nSections will get placed inside a wrapper (`\u003cdiv id=\"sitepage\"\u003e` in this case). The wrapper can not be the `body` element.\n```html\n\u003cdiv id=\"sitePage\"\u003e\n\t\n\u003c/div\u003e\n```\n\nYou can see a fully working example of the HTML structure in the [`index.html` file](https://pixelbyaj.github.io/sitepage/).\n\n### Initialization\n\n#### Initialization with Vanilla Javascript\nAll you need to do is call sitepage before the closing `\u003c/body\u003e` tag.\n\n**Note: New property pageId in sections added in the version 3.1.4**\n**This will help url to make more meaningful**\n\n```javascript\nnew SitePage(\"sitePage\", {\n        //brandname\n        brandName: \"\",\n        brandLogoUrl:\"\",//\n        backgroundColor:\"#45b4f5\",\n        verticalAlignMiddle: true, // By default it would be true\t\n        //sections\n        sections: [{\n                pageId:\"home\",\n                anchor: \"Home\",\n                template: \"\u003ch1\u003eHome\u003c/h1\u003e\",\n                backgroundColor: \"#45b4f5\",\n            },\n            {\n                pageId:\"feature\",\n                anchor: \"Features\",\n                templateId: \"feature\",\n                backgroundColor: \"#fc6c7c\"\n            },\n            {\n                pageId:\"contact\",\n                anchor: \"Contact Us\",\n                template: \"\u003ch1\u003eContact Us\u003c/h1\u003e\",\n                backgroundColor: \"#1bbc9b\"\n            }\n        ],\n        //navigation\n\t    anchors:true,//true|false\n        navigation: 'horizontal',//horizontal|vertical\n        sameurl: true,//true|false\n        hamburger:true,//true|{lineColor:\"\",backgroundColor:\"\",closeOnNavigation:true}\n        pageIndicator:true,//true|false; Default is true\n        //transition\n        easing: \"ease\",//ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)\n        transitionSpeed: 1000,//speed in ms\n        //scrolling\n        autoScrolling: true,//true|false\n        keyboardNavigation: true,//true|false\n        //callback events\n        pageTransitionStart: (prevPage, currentPage) =\u003e {\n            console.log(`prevPage: ${prevPage ? prevPage.id : \"\"} currentPage :${currentPage.id}`);\n        },\n        pageTransitionEnd: (currentPage) =\u003e {\n            console.log(`currentPage :${currentPage.id}`);\n        }\n    });\n\n\n```\n### Options\n#### General\n\n* brandName: Logo Title of the website.**This Option is optional**\n```javascript\n brandName: \"Logo Title\",\n```  \n* backgroundColor: background color of the website. **This Option is optional** If you don't want to give background color for every section you can mention backgroundColor.\n```javascript\n backgroundColor: \"#ffffff\",\n``` \n* verticalAlignMiddle: By Default it is true and apply to all the sections. It will align the content vertically.\n```javascript\n verticalAlignMiddle: false,\n```\n#### Navigation\n* anchors: Set true|false. If you require a menu set it as a true (By defaul it is false) and if not require set it as false.\n* sameurl: Set true|false. While navigating the url will change\n        navigation: 'vertical',//horizontal|vertical\n        hamburger: {\n            lineColor: \"\",//line color of hamburger\n            backgroundColor: \"\",//background color when hamburger open,\n            closeOnNavigation:true//default true\n        },\n* Hamburger: Set true or below properties If you require a menu set it as by defaul it is false\n    {\n        lineColor:\"\",\n        backgroundColor:\"\",\n        closeOnNavigation:true\n    }\n#### Sections\n```javascript\n    sections: [{\n                active:true,//set active|false\n                anchor: \"string\",//link name\n                templateId:\"string\"//Id of the template element which to be render\n                templateUrl: \"stringUrl\",//use template or templateUrl\n                template:\"string\",//use template or templateUrl\n                backgroundColor: \"string\",\n                verticalAlignMiddle:boolean,//By default it would be false, true|false\n                sectionClass:\"class1,class2\"//comma separated string or string array class to be apply on sections \n                anchorClass:\"class1,class2\"//comma separated string or string array class to be apply on sections \n            }\n        ],\n```\n#### Transition\n```javascript\n        easing: \"string\",//ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)\n        transitionSpeed: 1000,//speed in ms\n```\n#### Scrolling\n```javascript\n        autoScrolling: boolean,//By default it would be false, true|false\n        keyboardNavigation: boolean,//By default it would be false, true|false\n```\n#### Callback Events\n```javascript\n    pageTransitionStart: (prevPage:HtmlElement, currentPage:HtmlElement) =\u003e {\n    }\n    pageTransitionEnd: (currentPage:HtmlElement) =\u003e {\n    }\n```\n### Public API\nwith sitePage 3.0.0 new API has been exposed to have more control on sitepage.js\n* gotoPage(pageId: string);\n* navigateToNextPage();\n* navigateToPrevPage();\n* getMenuItems();\n* getActiveSection();\n```javascript\n        //for example\n        var sitePage = new SitePage(id,options);\n        sitePage.api.gotoPage('page3'); \n        sitePage.api.navigateToNextPage();\n        sitePage.api.navigateToPrevPage();\n        sitePage.api.getMenuItems();\n        sitePage.api.getActivePage();\n```\n## Reporting issues\n## Contributing to sitepage\n## Changelog\nTo see the list of recent changes, see [Releases section](https://github.com/pixelbyaj/sitePage/releases).\n## Resources\n## Donations\nDonations would be more than welcome :)\n\n[![Donate](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/pixelbyaj)\n## Sponsors\nBecome a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://pixelbyaj.github.io/#contact)]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelbyaj%2Fsitepage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelbyaj%2Fsitepage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelbyaj%2Fsitepage/lists"}