https://github.com/anthonytedja/notion

notion hosts a library of interactive widgets for @makenotion pages
https://github.com/anthonytedja/notion

clock css dark-theme embed html javascript light-theme notion pomodoro weather widget

Last synced: 1 day ago
JSON representation

notion hosts a library of interactive widgets for @makenotion pages

• Host: GitHub
• URL: https://github.com/anthonytedja/notion
• Owner: anthonytedja
• Created: 2021-03-08T17:53:35.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-01-23T22:58:27.000Z (about 1 year ago)
• Last Synced: 2024-05-21T07:10:18.023Z (8 months ago)
• Topics: clock, css, dark-theme, embed, html, javascript, light-theme, notion, pomodoro, weather, widget
• Language: JavaScript
• Homepage: https://anthonytedja.github.io/notion/
• Size: 63.6 MB
• Stars: 70
• Watchers: 1
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# notion

[![Demo Gif](assets/notion.jpg)](https://github.com/anthonytedja/notion)

> notion hosts widgets for Notion pages.

## Setup & Usage

Embed widget links are given by `anthonytedja.github.io/notion//`

![Setup Demo](assets/settings.jpg)

> **_IMPORTANT:_**  Use system settings for appearance on desktop to match the theme style.

[![Demo Gif](assets/demo.gif)](https://github.com/anthonytedja/notion)

- Click on the widget image in the preview section below to take you to the widget site.

- Copy the URL and paste the link into Notion and choose "Create embed"

- Resize the widget to how you want and you're all set up!

[![Demo Gif](assets/widgets.gif)](https://github.com/anthonytedja/notion)

## Preview

`Pomodoro` : [Pomodoro](https://todoist.com/productivity-methods/pomodoro-technique) is a productivity technique where a 25 minute work session is followed by a 5 minute break for each pomodoro period. Click on the timer to start the countdown, or double / triple click to switch the timer modes from work to break. A notification will be played when the timer hits 0 so you don't need to keep your eyes on the widget.

[![Pomodoro](assets/pomodoro.jpg)](https://anthonytedja.github.io/notion/pomodoro/)

`Weather` : Powered by [weatherwidget.io](https://weatherwidget.io/), get real time weather updates in the Toronto Area.

[![Weather](assets/weather.jpg)](https://anthonytedja.github.io/notion/weather/)

`Clock` : Analog display of local time.

[![Clock](assets/clock.jpg)](https://anthonytedja.github.io/notion/clock/)

`Time` : Display local time in English text, a fork from [Text Clock](https://github.com/searleb/text-clock-chrome).

[![Time](assets/time.jpg)](https://anthonytedja.github.io/notion/time/)

`Cat` : Poke the sleepy cat to see it roll over and yawn!

[![Cat](assets/cat.jpg)](https://anthonytedja.github.io/notion/cat/)

`Kirby` : Poke Kirby to wake it up from its sleep!

[![Kirby](assets/kirby.jpg)](https://anthonytedja.github.io/notion/kirby/)

`Rimuru` : Poke Rimuru the Slime to see it jump! Pixel Artist: [pixelcatto](https://www.deviantart.com/pixelcatto/art/Rimuru-Tempest-animation-784802109).

[![Rimuru](assets/rimuru.jpg)](https://anthonytedja.github.io/notion/rimuru/)

`Bunny` : Poke the chubby bunny to see it try and catch its breath!

[![Bunny](assets/bunny.jpg)](https://anthonytedja.github.io/notion/bunny/)

## Features

- Supported for Mobile App and Desktop Page

- ~V2: JS Local Storage to save theme settings~

- V3: JS Media Queries to automatically match theme settings

## Built With

- CodePen

- Visual Studio Code