{"id":13764464,"url":"https://github.com/kikiklang/pomme-page","last_synced_at":"2026-03-04T22:31:49.494Z","repository":{"id":52897753,"uuid":"338446557","full_name":"kikiklang/pomme-page","owner":"kikiklang","description":"Big buttons with easy click startpage for a browser. ","archived":false,"fork":false,"pushed_at":"2022-03-03T00:07:14.000Z","size":4681,"stargazers_count":206,"open_issues_count":0,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-11T09:58:58.654Z","etag":null,"topics":["binance","crypto-chart","css-grid","newsapi","openweather","parcel-bundler","pug","self-hosted","stormglass"],"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/kikiklang.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":"2021-02-12T22:19:32.000Z","updated_at":"2025-06-10T11:20:11.000Z","dependencies_parsed_at":"2022-08-13T02:10:28.997Z","dependency_job_id":null,"html_url":"https://github.com/kikiklang/pomme-page","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/kikiklang/pomme-page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kikiklang%2Fpomme-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kikiklang%2Fpomme-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kikiklang%2Fpomme-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kikiklang%2Fpomme-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kikiklang","download_url":"https://codeload.github.com/kikiklang/pomme-page/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kikiklang%2Fpomme-page/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30096762,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T21:59:23.547Z","status":"ssl_error","status_checked_at":"2026-03-04T21:57:50.415Z","response_time":59,"last_error":"SSL_read: 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":["binance","crypto-chart","css-grid","newsapi","openweather","parcel-bundler","pug","self-hosted","stormglass"],"created_at":"2024-08-03T16:00:21.043Z","updated_at":"2026-03-04T22:31:49.458Z","avatar_url":"https://github.com/kikiklang.png","language":"JavaScript","funding_links":[],"categories":["Projects","JavaScript"],"sub_categories":["Hosted"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"100px\" src=\"./assets/icons/logo/logo.svg\"\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ch1\u003ePomme Page\u003c/h1\u003e\n    \u003cb\u003ebig buttons with easy click startpage for a browser\u003c/b\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"700px\"  src=\"./assets/images/screenshot.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg height=\"330px\"  src=\"./assets/images/screenshot2.png\"\u003e\n  \u003cimg height=\"330px\"  src=\"./assets/images/screenshot3.png\"\u003e\n\u003c/p\u003e\n\n## Index\n- [Pomme Page](#)\n  - [About](#about)\n  - [Features](#features)\n  - [Built With](#Built-with)\n  - [Getting Started](#Getting-started)\n  - [Installation](#Installation)\n  - [Usage](#Usage)\n  - [Modules](#Modules)\n  - [Customization](#Customization)\n    - [Layout](#Layout)\n    - [Links](#links)\n    - [Modules](#Modules)\n    - [Colors](#Colors)\n  - [Deploying](#Deploying)\n    - [Docker](#Docker)\n    - [Docker-Compose](#Docker-Compose)\n  - [Contribution](#Contribution)\n  - [More Start Pages](#More-start-pages)\n  - [Licence](#Licence)\n\n## About\nI made this project to test stuffs like parcelJs, pug and other cool things in my free time. You can check a demo [here](https://kikiklang.github.io/pomme-page/) to see how this page behaves and how it could look like in your browser with your screen resolution. The default configuration is probably not great for your needs, but however, with some time, you can achieve a nice result.\n\n## Features\n- **Theming** Custom colors with css variables.\n- **Responsive** Unpredictive layout thanks to CSS grid :)\n- **Modular** each square is a module that you can move / remove / duplicate / customize\n- **Fast loading** no dependencies, no framework, no super heavy advanced features, it's light.\n\n## Built with\n- [Parcel](https://parceljs.org/) Blazing fast, zero configuration web application bundler\n- [Pug](https://pugjs.org/api/getting-started.html) Pug is a template engine for Node and for the browser. It compiles to HTML and has a simplified syntax.\n\n## Getting Started\nTo get a local copy up and running, you will need:\n\n- [git](https://git-scm.com/downloads)\n- [nodejs](https://nodejs.org/en/)- Node.js® is a JavaScript runtime that will help running javascript code   outside your browser\n\n## Installation\n1. Once nodeJs is installed, paste this command in your terminal to clone the repository inside the folder of your choice \n    ```sh\n    git clone git@github.com:kikiklang/pomme-page.git\n    ```\n3. Still in your terminal, move into pomme-page freshly created folder and run this command to install all project dependencies\n    ```sh\n    cd pomme-page \u0026\u0026 npm ci\n    ```\n4. To finish the installation, you must provide a `.env` file where you can place your configuration variables like API keys. Put this file at the root of pomme-page folder (see example with the `.env.example` file).\n\n## Usage\n You can now open the project in your IDE and run this project locally\n  ```sh\n  npm start\n  ```\n\n  To bundle your code - ready to ship, cleaned and lightweight\n  ```sh\n  npm run build\n  ```\n\n  To test your production build locally\n  ```sh\n  npm run serve\n  ```\n\n  To delete development, build and cache folders\n  ```sh\n  npm run clean\n  ```\n\n  To prettify and fix your code\n  ```sh\n  npm run format\n  ```\n\n## Modules\nPomme Page use modules to display informations: \n- **myrtille** a big link with a nice icon of your favorite site\n- **raisin** a group of categorised links\n- **pomme** not really a module. Will be found in the `index.pug` file. its only function is to fill empty spaces.\n- **clock** time \u0026 date\n- **search** use duckduckgo or google search engines\n- **binance** past and current crypto currencies data\n- **openweather** current weather (needs API key: [openweather](https://openweathermap.org/unsplash)) \n- **unsplash** random image display (needs API key: [unsplash](https://unsplash.com/developers))\n- **stormglass** sea condition (needs API key: [stormglass](https://stormglass.io/)) [free up to 50 requests per day]\n- **news api** latest top headlines (needs API key: [newsapi](https://newsapi.org/) + pricing plan) [100 requests per day on localhost only, need to pay for deploying on server :(...I got screwed, i thought it was free, so the module is here, in the code but it's inactive]\n\n## Customization\n\n### Modules Layout and display\nLayout is made with CSS grid, you can simply move modules around in `src/index.pug` file. To remove a module, you have to delete the corresponding folder in `src` and then remove all related imports found in the 3 main files at the root of `src` folder :\n- index.pug\n- styles.css\n- app.js\n\n### Myrtille\nLinks images work in svg format. To add a link, go to `src/index.pug` and make a myrtille. It's a pug function that takes 3 parameters:\n- domain\n- svg viewBox\n- svg path\n\n### Raisin\nIt's also a pug function with two parameters that you can put in `src/index.pug`. You must provide a name and an object of data. This object is declared in `src/raisin/raisin.pug`\n\n### Colors\nYou can make your theme with the css variables found in `index.css`\n\n## Contribution\nPlease feel free to contribute if you like this project and have some time to spare.\n\n## Deploying\nIf you want the source maps in the bundle, you can remove `--no-source-maps\"` in the build script found in `package.json`.\nAfter the build process, you'll find a `dist` folder that parcel just created. We still have API Keys in the code. In my case, i deploy this behind a caddy reverse proxy and limit/filter access to these static files only from my personal computer IP. At the end, you will load around 50 Kilobytes of html/css/js (~20 Kilobytes gzipped) in your browser.\nIf you plan to deploy your build where it will not be served from your domains root (like github-pages). You must change your parcel build command in the `package.json` file to\n  ```json\n  \"build\": \"npm run clean \u0026\u0026 parcel build --public-url ./ --no-source-maps\"\n  ```\nNow your build will be served from the index.html files location thanks to the `--public-url ./` option.\n\n### Docker\nIf you don't want to set up a fully functional web server on your system, there's a docker container for that. First, build the image using the provided Dockerfile.\n```sh\ncd docker\ndocker build . -t pomme-page\n```\n\nGo on by configuring pomme-page as you would by editing the files in the `src/` directory. Don't forget to enter your API keys to `.env` or to remove unused modules. Then, run the container, but make sure to map `src/` and `.env` so your edited configuration gets deployed.\n```sh\ndocker run -dp 80:80 -v \u003cabsolute path to your pomme-page repository\u003e/.env:/usr/share/pomme-page/.env -v \u003cabsolute path to your pomme-page repository\u003e/src/:/usr/share/pomme-page/src/ pomme-page\n```\n\nIf you want to secure your API keys against unwanted access, you can set a valid IP(range) via the environment variable `$IPRANGE`.\n```sh\ndocker run -dp 80:80 -v \u003cabsolute path to your pomme-page repository\u003e/src/:/usr/share/pomme-page/src/ -e \"IPRANGE=192.168.178.1/24\" pomme-page\n```\n\nThis way, pomme-page will be available from the IPs `192.168.178.[1-255]`\n\n### Docker-Compose\nIf you'd rather use docker-compose instead of defining the necessary volumes, ports and variables from the CLI, there's a default docker-compose file as well. Just let it build the image and start a container afterwards.\n\n```sh\ncd docker\ndocker-compose build\ndocker-compose up -d\n```\n\n## More Start Pages\nYou can find more lovely start pages for your browser here -\u003e https://github.com/jnmcfly/awesome-startpage\n\n## License\nDistributed under the MIT License. See `LICENSE` for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkikiklang%2Fpomme-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkikiklang%2Fpomme-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkikiklang%2Fpomme-page/lists"}