+ 
+
+
+ 
+
+
+ 
+
+
+GitStoryKit is light Javascript library that allows easy time back actions, it is used in GitStory.
+
+[Repository](https://github.com/swve/gitstorykit)
+
+# Sponsors
+
+
+
+
+
+**[β Sponsor GitStory](https://github.com/sponsors/swve)**
+
+# Contributing
+
+To contribute or understand the code structure,
+please see our [contributing.md](/CONTRIBUTING.md).
+
+# Authors
+
+Badr B. ([@swve](https://github.com/swve))
diff --git a/components/Buttons/SignWithGitHub.tsx b/components/Buttons/SignWithGitHub.tsx
new file mode 100644
index 0000000..07e045f
--- /dev/null
+++ b/components/Buttons/SignWithGitHub.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+import GitHubIcon from "@mui/icons-material/GitHub";
+
+function SignWithGitHub(props) {
+ return (
+ <>
+ (BETA) Searching for commits... this may take minutes
+{renderCalendar()}
;
+}
+
+// π£ Styling
+//--------------------------------
+
+const MonthBox = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #ffffff14;
+ padding: 10px;
+ border-radius: 5px;
+ transition: 0.7s;
+
+ &:hover {
+ background-color: #363167;
+ cursor: pointer;
+ }
+
+ h2 {
+ margin-right: 6px;
+ }
+`;
+
+const ScanButton = styled.div``;
+const HeadDaysOfTheWeek = styled.div`
+ display: flex;
+ li {
+ margin: 0;
+ padding: 0;
+ width: 35px;
+ height: 35px;
+ list-style: none;
+ justify-content: flex-start;
+ text-align: center;
+ text-align: center;
+ }
+`;
+
+const DaysOfTheMonth = styled.ul`
+ margin: 0;
+ padding: 0%;
+ display: flex;
+ list-style: none;
+ justify-content: flex-start;
+ text-align: center;
+ width: 245px;
+ min-width: 245px;
+ flex-wrap: wrap;
+`;
+
+const DayOfMonth = styled.div`
+ //
+ height: 35px;
+ width: 35px;
+ min-height: 35px;
+ min-width: 35px;
+ //
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ //
+ border-width: 0.5px;
+ i {
+ font-style: inherit;
+ }
+`;
+
+const DayOfWeek = styled.div`
+ //
+ height: 35px;
+ width: 35px;
+ min-height: 35px;
+ min-width: 35px;
+ //
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ //
+ border-width: 0.1px;
+ color: #ffffff63;
+
+ i {
+ font-style: inherit;
+ }
+`;
+
+const CalendarBox = styled.div`
+ background-color: #171d21e6;
+ backdrop-filter: saturate(180%) blur(14px);
+ width: fit-content;
+ height: 307px;
+ border-radius: 6px;
+ overflow: hidden;
+ margin: 20px;
+ padding: 10px;
+ font-size: 14px;
+ box-shadow: 0 9px 11px 2px rgb(3 8 19 / 20%);
+
+ h2 {
+ text-align: center;
+ font-size: 15px;
+ opacity: 0.9;
+ }
+`;
+
+const LoadingPanel = styled.div`
+ //center everything in the box
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 230px;
+ width: 245px;
+ h5 {
+ width: 80%;
+ padding-top: 20px;
+ text-align: center;
+ }
+ //
+`;
+
+// CSS
+const DayBox: any = styled.div`
+ background-color: ${(props: any) => (props.selected ? "white" : null)};
+ color: ${(props: any) => (props.selected ? "black" : "white")};
+ padding: 5px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: 0.2s;
+ height: 30px;
+ width: 30px;
+
+ // Active status
+ border: ${(props: any) => (props.activity ? "solid" : null)};
+ border-color: ${(props: any) => (props.activity ? "hsl(246deg 49% 54% / " + (props.activity + 20) + "%);" : null)};
+
+ &:hover {
+ background-color: ${(props: any) => (props.selected ? "white" : "#101417")};
+ color: ${(props: any) => (props.selected ? "black" : "white")};
+ }
+`;
diff --git a/components/Calendar/YearCalendar.tsx b/components/Calendar/YearCalendar.tsx
index 19d4f6f..39fe25b 100644
--- a/components/Calendar/YearCalendar.tsx
+++ b/components/Calendar/YearCalendar.tsx
@@ -1,6 +1,8 @@
import React from "react";
import Calendar from "@components/Calendar/Calendar";
import styled from "styled-components";
+import { randomInt } from "crypto";
+import FancyRender from "@components/Loading/FancyRender";
export default function YearCalendar({ withRelativeTop = false, year }) {
// π£ Filling & Init the YearCalendar
@@ -17,28 +19,35 @@ export default function YearCalendar({ withRelativeTop = false, year }) {
createYearDates(year);
-
- // π£ Styling
- //--------------------------------
- const YearCalendarBox = styled.div`
- ${withRelativeTop &&
- `top:-160px;
- position:relative;
-`}
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- margin: auto;
- justify-content: center;
- `;
-
// π£ Final Rendering
//--------------------------------
return (
- {monthsArray[month - 1]}
-{renderCalendar()}
;
-}
-
-// π£ Styling
-//--------------------------------
-const HeadDaysOfTheWeek = styled.div`
- display: flex;
- li {
- margin: 0;
- padding: 0;
- width: 35px;
- height: 35px;
- list-style: none;
- justify-content: flex-start;
- text-align: center;
- text-align: center;
- }
-`;
-
-const DaysOfTheMonth = styled.ul`
- margin: 0;
- padding: 0%;
- display: flex;
- list-style: none;
- justify-content: flex-start;
- text-align: center;
- width: 245px;
- min-width: 245px;
- flex-wrap: wrap;
-`;
-
-const DayOfMonth = styled.div`
- //
- height: 35px;
- width: 35px;
- min-height: 35px;
- min-width: 35px;
- //
- display: flex;
- justify-content: center;
- align-items: center;
- //
- border-width: 0.5px;
- i {
- font-style: inherit;
- }
-`;
-
-const DayOfWeek = styled.div`
- //
- height: 35px;
- width: 35px;
- min-height: 35px;
- min-width: 35px;
- //
- display: flex;
- justify-content: center;
- align-items: center;
- //
- border-width: 0.1px;
- color: #ffffff63;
-
- i {
- font-style: inherit;
- }
-`;
-
-const CalendarBox = styled.div`
- background-color: #171d21e6;
- backdrop-filter: saturate(180%) blur(14px);
- width: fit-content;
- height: 307px;
- border-radius: 6px;
- overflow: hidden;
- margin: 20px;
- padding: 10px;
- font-size: 14px;
- box-shadow: 0 9px 11px 2px rgb(3 8 19 / 20%);
-
- h2 {
- text-align: center;
- font-size: 15px;
- opacity: 0.9;
- }
-`;
diff --git a/components/Dialog/Dialog.tsx b/components/Dialog/Dialog.tsx
new file mode 100644
index 0000000..5a872c6
--- /dev/null
+++ b/components/Dialog/Dialog.tsx
@@ -0,0 +1,95 @@
+import SignWithGitHub from "@components/Buttons/SignWithGitHub";
+import React from "react";
+import styled from "styled-components";
+import { useSession, signIn, signOut, getSession } from "next-auth/react";
+import Link from "next/link";
+
+function Dialog(props) {
+ return (
+ GitStory uses the GitHub Public API which have a usage rate limitation for non-authenticated users, you've just reached that limit.
+Please consider sign in using your GitHub account to be able to continue using GitStory, or please wait for 1 hour.
+-
-
- About -
- Privacy -
- Pizza -
- Contribute -
+ 404
+Page Not found
+ Go back in time and explore your favorite Open source projects !
+Use the Reactive calendar to go back in time
+Check commits by day, month and year
+Scan for commits activity of a given month by clicking on the month button in the calendar
+Explore "snapshots" of GitHub repositories by navigating to the exact commit
+
+ Made with{" "}
+
+ π
+ {" "}
+ by{" "}
+
+ 
+
+
+
+ Beta
+ 
+ 
A light git time machine JavaScript library
++ npm install gitstorykit +
+
+ Made with{" "}
+
+ π
+ {" "}
+ by{" "}
+
+
+
+
Privacy
+GitHub account
+GitStory uses your account to generate a token on your behalf that is used to get data from the GitHub API
++ GitStory Connect's only purpose is to generate a token to allow you to make requests on the GitHubAPI without limitations, the following permissions + required are: +
+-
+
- + Read only rights on "Contents"{" "} + + (Learn more) + + +
- + Read only rights on "Metadata"{" "} + + (Learn more) + + +
+ Your private repositories are not accessible by GitStory Connect, only public repositories are supported{" "} + + (GitStoryKit) + +
+Analytics
+We use Plausible Analytics, an alternative independent, minimal web analytics tool
+ Plausible analytics +Data Collection
+GitHub Connect
++ No data is being collected, there is no backend for GitStory, the web app is an interface interacting directly with GitHub through the GitHubAPI +
+Personal data
++ No personal data are collected such as : +
-
+
- IP Adresses +
- Individual data +
- No cookies are used +
You can explore the complete list of collected data points below :
+ + Plausible Datapoints + +All data is in aggregate only
+No tracking across devices
++ We do not track people across their devices. All the data is isolated to a single device only. There is no way to know whether the same person + visits a site from more than one device. +
+No tracking across websites and apps
++ We do not track people across websites and apps that they visit. All the data is isolated to a single website only. There is no way to know what + other websites someone visits +
+All data is isolated to a single day
+All the data is isolated to a single day only. There is no way to know whether the same person comes back to a site on another day.
+No cookies and other persistent identifiers
++ We do not generate any persistent identifiers either. We generate a random string of letters and numbers that is used to calculate unique visitors + on a website and we reset this string once per day. This makes us compliant with the different cookie laws and privacy regulations such as GDPR and + PECR. By not using cookies you do not need to obtain consent from the visitors to store and retrieve data from their devices. Itβs one less thing to + worry about and annoy your visitors with. +
+Hosting
+Analytics Server
++ GitStory Analytics server is hosted on a european server, This ensures that all analytics data is being covered by the European Unionβs strict laws + on data privacy +
+Analytics Server address
+-
+
- Hosting : Scaleway Elements (Online SAS - 8 rue de la Ville lβEvΓͺque, 75008 Paris) +
- Server : Amsterdam +
Web Server
+We use Vercel as a front-end platform to host & deploy GitStory
+404
+Project not found
+
+ Either the project does not exist, or it is a private project.
+ GitStory does not support (yet) private projects
+
+ Sponsoring
+Sponsors β¨
+ +
+ + If you like GitStory and find it useful please feel free to support me & the open source project through GitHub sponsors{" "} + + here + +
+Your Sponsorship π
++ Your sponsorship helps to maintain, improve, update and support GitStory and{" "} + + Framestack + {" "} + and future incoming open source projects. +
+