├── .editorconfig
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE
├── README.md
├── app
    ├── app.config.ts
    ├── app.vue
    ├── auth.d.ts
    ├── components
    │   ├── AuthButton.vue
    │   ├── AuthContainer.vue
    │   ├── AuthModal.vue
    │   ├── RepoButton.vue
    │   ├── RepoList.vue
    │   ├── RepoTrafficChart.vue
    │   ├── TheFooter.vue
    │   ├── TheHeader.vue
    │   └── TrafficData
    │   │   └── Sidebar.vue
    ├── composables
    │   ├── useAuth.ts
    │   └── useTrafficData.ts
    ├── error.vue
    ├── layouts
    │   ├── dashboard.vue
    │   └── default.vue
    ├── middleware
    │   └── auth.ts
    ├── pages
    │   ├── index.vue
    │   ├── login.vue
    │   ├── privacy-policy.vue
    │   └── traffic-data.vue
    ├── siteMetadata.ts
    └── types
    │   └── types.ts
├── eslint.config.mjs
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── public
    └── favicon.ico
├── renovate.json
├── server
    ├── routes
    │   └── auth
    │   │   └── github.get.ts
    └── tsconfig.json
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | .history
21 | 
22 | # Local env files
23 | .env
24 | .env.*
25 | !.env.example
26 | service-account.json
27 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "tabWidth": 2,
5 |   "printWidth": 120
6 | }
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Michael Hoffmann
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # GitHub Traffic Viewer Website
2 | 
3 | A website that shows a list of traffic graphs of your own GitHub repositories.
4 | 


--------------------------------------------------------------------------------
/app/app.config.ts:
--------------------------------------------------------------------------------
1 | export default defineAppConfig({
2 |   ui: {
3 |     primary: 'cyan',
4 |     gray: 'slate',
5 |   },
6 | })
7 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { loggedIn } = useUserSession()
 3 | 
 4 | watch(loggedIn, () => {
 5 |   if (!loggedIn.value) {
 6 |     navigateTo('/')
 7 |   }
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <NuxtLayout>
13 |     <NuxtPage />
14 |     <UNotifications />
15 |   </NuxtLayout>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/app/auth.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '#auth-utils' {
 2 |   interface User {
 3 |     // Add your own fields
 4 |   }
 5 | 
 6 |   interface UserSession {
 7 |     user: {
 8 |       githubId: number
 9 |       githubUsername: string
10 |       githubAccessToken: string
11 |     }
12 |   }
13 | }
14 | 
15 | export {}
16 | 


--------------------------------------------------------------------------------
/app/components/AuthButton.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const { showAuthModal } = useAuth()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <AuthState>
 7 |     <template #default="{ loggedIn, clear }">
 8 |       <UButton v-if="loggedIn" color="gray" size="md" :ui="{ rounded: 'rounded-full' }" @click="clear">
 9 |         Logout
10 |       </UButton>
11 |       <UButton v-else color="gray" size="md" :ui="{ rounded: 'rounded-full' }" @click="showAuthModal = true">
12 |         Login</UButton
13 |       >
14 |     </template>
15 |     <template #placeholder>
16 |       <button disabled>Loading...</button>
17 |     </template>
18 |   </AuthState>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/app/components/AuthContainer.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | defineEmits(['login'])
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="p-8 flex flex-col gap-4">
 7 |     <UIcon name="i-heroicons-user-circle" class="text-4xl text-primary" />
 8 |     <span class="font-bold text-2xl">Login</span>
 9 |     <span class="text-gray-500 dark:text-gray-400"
10 |       >Login to your GitHub account to be able to view your traffic data.</span
11 |     >
12 |     <UButton icon="i-simple-icons-github" class="space-y-3" block size="xl" color="white" to="/auth/github" external>
13 |       GitHub
14 |     </UButton>
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/app/components/AuthModal.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const { showAuthModal } = useAuth()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <UModal v-model="showAuthModal">
 7 |     <AuthContainer />
 8 |   </UModal>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/app/components/RepoButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import siteMetadata from '~/siteMetadata'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <UButton
 7 |     :to="siteMetadata.repoUrl"
 8 |     target="_blank"
 9 |     icon="i-simple-icons-github"
10 |     aria-label="GitHub"
11 |     color="gray"
12 |     variant="ghost"
13 |   />
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/RepoList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 | 
 9 | </script>
10 | 
11 | <style>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/app/components/RepoTrafficChart.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import {
 3 |   Chart as ChartJS,
 4 |   CategoryScale,
 5 |   LinearScale,
 6 |   PointElement,
 7 |   LineElement,
 8 |   Title,
 9 |   Tooltip,
10 |   Legend,
11 | } from 'chart.js'
12 | import { Line } from 'vue-chartjs'
13 | 
14 | ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
15 | 
16 | interface Props {
17 |   repository: RepositoryViewModel
18 | }
19 | const props = defineProps<Props>()
20 | 
21 | const lineOptions = {
22 |   scales: {
23 |     y: {
24 |       grid: {
25 |         color: 'rgb(156 163 175)',
26 |       },
27 |     },
28 |     x: {
29 |       grid: {
30 |         color: 'rgb(156 163 175)',
31 |       },
32 |     },
33 |   },
34 | }
35 | 
36 | const lineChartData = computed(() => {
37 |   const labels = props.repository.trafficData.views.map((view) => view.timestamp)
38 |   const data = props.repository.trafficData.views.map((view) => view.count)
39 | 
40 |   return {
41 |     labels,
42 |     datasets: [
43 |       {
44 |         label: 'Views',
45 |         data,
46 |         borderColor: '#2BD3EE',
47 |         backgroundColor: '#2BD3EE',
48 |         fill: false,
49 |       },
50 |     ],
51 |   }
52 | })
53 | </script>
54 | 
55 | <template>
56 |   <UDashboardCard :title="repository.name">
57 |     <Line :data="lineChartData" :options="lineOptions" />
58 |   </UDashboardCard>
59 | </template>
60 | 


--------------------------------------------------------------------------------
/app/components/TheFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const links = [
 3 |   {
 4 |     label: 'Privacy Policy',
 5 |     to: '/privacy-policy',
 6 |   },
 7 | ]
 8 | </script>
 9 | 
10 | <template>
11 |   <UFooter :links="links">
12 |     <template #left>
13 |       Created by
14 |       <NuxtLink to="https://mokkapps.de" target="_blank" external class="text-primary cursor-pointer">
15 |         Michael Hoffmann
16 |       </NuxtLink>
17 |     </template>
18 |   </UFooter>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/app/components/TheHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const links = [
 3 |   {
 4 |     label: 'Traffic Data',
 5 |     icon: 'i-heroicons-presentation-chart-line',
 6 |     to: '/traffic-data',
 7 |   },
 8 | ]
 9 | </script>
10 | 
11 | <template>
12 |   <UHeader :links="links">
13 |     <template #logo>
14 |       <span class="text-sm md:text-xl">GitHub Traffic Viewer</span>
15 |     </template>
16 | 
17 |     <template #right>
18 |       <AuthButton />
19 |       <UColorModeButton />
20 |       <RepoButton />
21 |     </template>
22 |   </UHeader>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/app/components/TrafficData/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | interface Props {
 3 |   isLoadingTrafficData: boolean
 4 |   repositories: Array<RepositoryViewModel>
 5 | }
 6 | defineProps<Props>()
 7 | 
 8 | type Emits = {
 9 |   select: [number]
10 | }
11 | defineEmits<Emits>()
12 | 
13 | const repoNameInput = defineModel('name')
14 | const showForkedRepos = defineModel('showForkedRepos')
15 | const showPrivateRepos = defineModel('showPrivateRepos')
16 | const trafficTimeFrame = defineModel('trafficTimeFrame')
17 | 
18 | const trafficTimeFrameOptions = [
19 |   {
20 |     value: 'day',
21 |     label: 'Per day',
22 |   },
23 |   {
24 |     value: 'week',
25 |     label: 'Per week',
26 |   },
27 | ]
28 | </script>
29 | 
30 | <template>
31 |   <div class="flex flex-col gap-4 col-span-3 overflow-auto">
32 |     <UFormGroup label="Show forked repositories">
33 |       <UToggle v-model="showForkedRepos" color="primary" :disabled="isLoadingTrafficData" />
34 |     </UFormGroup>
35 |     <UFormGroup label="Show private repositories">
36 |       <UToggle v-model="showPrivateRepos" color="primary" :disabled="isLoadingTrafficData" />
37 |     </UFormGroup>
38 |     <URadioGroup v-model="trafficTimeFrame" legend="Traffic Time Frame" :options="trafficTimeFrameOptions" />
39 |     <UDivider />
40 |     <UFormGroup label="Your repositories">
41 |       <UInput
42 |         v-model="repoNameInput"
43 |         icon="i-heroicons-magnifying-glass"
44 |         :disabled="isLoadingTrafficData"
45 |         placeholder="Search..."
46 |         autocomplete="off"
47 |         class="mt-2 mx-1"
48 |         :ui="{ icon: { trailing: { pointer: '' } } }"
49 |       >
50 |         <template #trailing>
51 |           <UButton
52 |             v-show="repoNameInput !== ''"
53 |             color="gray"
54 |             variant="link"
55 |             icon="i-heroicons-x-mark-20-solid"
56 |             :padded="false"
57 |             @click="repoNameInput = ''"
58 |           />
59 |         </template>
60 |       </UInput>
61 |       <ul class="overflow-auto">
62 |         <UDivider class="mt-4 mb-2" />
63 |         <li v-for="repo of repositories" :key="repo.id" class="flex items-center gap-2 mb-1">
64 |           <UButton variant="link" :disabled="isLoadingTrafficData" @click="$emit('select', repo.id)">
65 |             {{ repo.name }}
66 |           </UButton>
67 |           <UBadge v-if="repo.isFork" variant="outline" color="white" size="xs">Fork</UBadge>
68 |           <UBadge v-if="repo.isPrivate" variant="outline" color="white" size="xs">Private</UBadge>
69 |         </li>
70 |       </ul>
71 |     </UFormGroup>
72 |   </div>
73 | </template>
74 | 


--------------------------------------------------------------------------------
/app/composables/useAuth.ts:
--------------------------------------------------------------------------------
1 | const showAuthModal = ref(false)
2 | 
3 | export const useAuth = () => {
4 |   return {
5 |     showAuthModal,
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/app/composables/useTrafficData.ts:
--------------------------------------------------------------------------------
  1 | export const useTrafficData = () => {
  2 |   const { session } = useUserSession()
  3 |   const githubUserName = computed(() => session.value?.user?.githubUsername)
  4 |   const githubAccessToken = computed(() => session.value?.user?.githubAccessToken)
  5 | 
  6 |   const route = useRoute()
  7 |   const router = useRouter()
  8 | 
  9 |   const showForkedRepos = ref(false)
 10 |   const showPrivateRepos = ref(false)
 11 |   const trafficTimeFrame = ref<'day' | 'week'>('week')
 12 |   const selectedRepositoryId = ref<number | null>(null)
 13 |   const searchRepositoryName = ref('')
 14 | 
 15 |   const { data, error, status } = useAsyncData(
 16 |     'traffic-data',
 17 |     async () => {
 18 |       if (!githubUserName.value) {
 19 |         return
 20 |       }
 21 | 
 22 |       if (!githubAccessToken.value) {
 23 |         throw new Error('No GitHub access token found. Please try to login again.')
 24 |       }
 25 | 
 26 |       const headers = {
 27 |         Accept: 'application/vnd.github+json',
 28 |         'X-GitHub-Api-Version': '2022-11-28',
 29 |         Authorization: `Bearer ${githubAccessToken.value}`,
 30 |       }
 31 | 
 32 |       const REPOS_PER_PAGE = 100
 33 |       const NEXT_PATTERN = /(?<=<)([\S]*)(?=>; rel="Next")/i
 34 |       let pagesRemaining = true
 35 |       let repos: Array<GithubRepositoryDTO> = []
 36 | 
 37 |       // https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#list-repositories-for-the-authenticated-user
 38 |       let url = `https://api.github.com/user/repos?per_page=${REPOS_PER_PAGE}&page=1`
 39 | 
 40 |       while (pagesRemaining) {
 41 |         const reposResponse = await $fetch.raw(url, { headers })
 42 | 
 43 |         repos = [...repos, ...(reposResponse._data as Array<GithubRepositoryDTO>)]
 44 | 
 45 |         const linkHeader = reposResponse.headers.get('link')
 46 | 
 47 |         pagesRemaining = linkHeader && linkHeader.includes('rel="next"')
 48 | 
 49 |         if (pagesRemaining) {
 50 |           url = linkHeader.match(NEXT_PATTERN)[0]
 51 |         }
 52 |       }
 53 | 
 54 |       const mappedRepos: Array<Pick<RepositoryViewModel, 'id' | 'isFork' | 'isPrivate' | 'name'>> = repos.map(
 55 |         (repo) => ({
 56 |           name: repo.name,
 57 |           isFork: repo.fork,
 58 |           isPrivate: repo.private,
 59 |           id: repo.id,
 60 |         }),
 61 |       )
 62 | 
 63 |       const results = await Promise.allSettled(
 64 |         mappedRepos.map(async (mappedRepo) => {
 65 |           // https://docs.github.com/en/rest/metrics/traffic?apiVersion=2022-11-28#get-page-views
 66 |           const trafficData = await $fetch<TrafficData>(
 67 |             `https://api.github.com/repos/${githubUserName.value}/${mappedRepo.name}/traffic/views?per=${trafficTimeFrame.value}`,
 68 |             {
 69 |               headers,
 70 |             },
 71 |           )
 72 |           return {
 73 |             ...mappedRepo,
 74 |             trafficData,
 75 |           }
 76 |         }),
 77 |       )
 78 | 
 79 |       return results
 80 |         .filter((result) => result.status === 'fulfilled')
 81 |         .map((result) => result.value as RepositoryViewModel)
 82 |     },
 83 |     { watch: [githubUserName, githubAccessToken, trafficTimeFrame] },
 84 |   )
 85 | 
 86 |   const isLoadingTrafficData = computed(() => status.value === 'pending')
 87 | 
 88 |   const selectedRepositoryData = computed(() => {
 89 |     if (!filteredRepositoriesData.value) {
 90 |       return undefined
 91 |     }
 92 | 
 93 |     return filteredRepositoriesData.value.find((repo) => repo.id === selectedRepositoryId.value)
 94 |   })
 95 | 
 96 |   const filteredRepositoriesData = computed(() => {
 97 |     if (!data.value) {
 98 |       return []
 99 |     }
100 | 
101 |     return data.value.filter((repo) => {
102 |       if (
103 |         searchRepositoryName.value !== '' &&
104 |         !repo.name.toLowerCase().includes(searchRepositoryName.value.toLowerCase())
105 |       ) {
106 |         return false
107 |       }
108 | 
109 |       if (!showForkedRepos.value && repo.isFork) {
110 |         return false
111 |       }
112 | 
113 |       if (!showPrivateRepos.value && repo.isPrivate) {
114 |         return false
115 |       }
116 | 
117 |       return true
118 |     })
119 |   })
120 | 
121 |   watch(data, () => {
122 |     if (data.value && data.value[0] && !selectedRepositoryId.value) {
123 |       selectedRepositoryId.value = data.value[0].id
124 |     }
125 |   })
126 | 
127 |   watch(
128 |     selectedRepositoryId,
129 |     (newSelectedRepositoryId) => {
130 |       router.push({
131 |         query: {
132 |           ...route.query,
133 |           selectedRepositoryId: newSelectedRepositoryId,
134 |         },
135 |       })
136 |     },
137 |     { immediate: true },
138 |   )
139 | 
140 |   watch(
141 |     showForkedRepos,
142 |     (newShowForkedRepos) => {
143 |       router.push({
144 |         query: {
145 |           ...route.query,
146 |           showForkedRepos: newShowForkedRepos ? 'true' : undefined,
147 |         },
148 |       })
149 |     },
150 |     { immediate: true },
151 |   )
152 | 
153 |   watch(
154 |     showPrivateRepos,
155 |     (newShowPrivateRepos) => {
156 |       router.push({
157 |         query: {
158 |           ...route.query,
159 |           showPrivateRepos: newShowPrivateRepos ? 'true' : undefined,
160 |         },
161 |       })
162 |     },
163 |     { immediate: true },
164 |   )
165 | 
166 |   watch(
167 |     searchRepositoryName,
168 |     (newSearchName) => {
169 |       router.push({
170 |         query: {
171 |           ...route.query,
172 |           q: newSearchName || '',
173 |         },
174 |       })
175 |     },
176 |     { immediate: true },
177 |   )
178 | 
179 |   watch(
180 |     trafficTimeFrame,
181 |     (newTrafficTimeFrame) => {
182 |       router.push({
183 |         query: {
184 |           ...route.query,
185 |           trafficTimeFrame: newTrafficTimeFrame,
186 |         },
187 |       })
188 |     },
189 |     { immediate: true },
190 |   )
191 | 
192 |   onBeforeMount(() => {
193 |     if (route.query.selectedRepositoryId) {
194 |       selectedRepositoryId.value = Number(route.query.selectedRepositoryId)
195 |     }
196 |     if (route.query.showForkedRepos) {
197 |       showForkedRepos.value = route.query.showForkedRepos === 'true'
198 |     }
199 |     if (route.query.showPrivateRepos) {
200 |       showPrivateRepos.value = route.query.showPrivateRepos === 'true'
201 |     }
202 |     if (route.query.trafficTimeFrame) {
203 |       trafficTimeFrame.value = route.query.trafficTimeFrame as 'day' | 'week'
204 |     }
205 |     if (route.query.q) {
206 |       searchRepositoryName.value = route.query.q as string
207 |     }
208 |   })
209 | 
210 |   return {
211 |     showForkedRepos,
212 |     showPrivateRepos,
213 |     searchRepositoryName,
214 |     trafficTimeFrame,
215 |     selectedRepositoryData,
216 |     repositories: filteredRepositoriesData,
217 |     isLoadingTrafficData,
218 |     error,
219 |     selectedRepositoryId,
220 |     githubUserName,
221 |   }
222 | }
223 | 


--------------------------------------------------------------------------------
/app/error.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { NuxtError } from '#app'
 3 | 
 4 | defineProps<{
 5 |   error: NuxtError
 6 | }>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <div>
11 |     <TheHeader />
12 | 
13 |     <UContainer>
14 |       <UMain>
15 |         <UPage>
16 |           <UPageError :error="error" />
17 |         </UPage>
18 |       </UMain>
19 |     </UContainer>
20 | 
21 |     <TheFooter />
22 |   </div>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/app/layouts/dashboard.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <TheHeader />
 4 | 
 5 |     <UMain>
 6 |       <UContainer>
 7 |         <UPage>
 8 |           <slot />
 9 |           <AuthModal />
10 |         </UPage>
11 |       </UContainer>
12 |     </UMain>
13 | 
14 |     <TheFooter />
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/app/middleware/auth.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware(async () => {
2 |   const { loggedIn } = useUserSession()
3 | 
4 |   if (!loggedIn.value) {
5 |     return navigateTo('/login')
6 |   }
7 | })
8 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import siteMetadata from '~/siteMetadata'
 3 | 
 4 | defineOgImageComponent('NuxtSeo', {
 5 |   title: siteMetadata.projectName,
 6 |   description: siteMetadata.description,
 7 |   theme: '#0F172A',
 8 |   colorMode: 'dark',
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <div>
14 |     <ULandingHero :title="siteMetadata.projectName" :description="siteMetadata.description">
15 |       <template #links>
16 |         <UButton to="/traffic-data" size="xl">Get started - It's free</UButton>
17 |       </template>
18 | 
19 |       <template #default>
20 |         <img
21 |           src="https://mokkapps.twic.pics/github-traffic-viewer/hero-v2.png?twic=v1/cover=2048"
22 |           class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 p-4"
23 |         />
24 |       </template>
25 |     </ULandingHero>
26 |   </div>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/app/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import siteMetadata from '~/siteMetadata'
 3 | 
 4 | defineOgImageComponent('NuxtSeo', {
 5 |   title: siteMetadata.projectName,
 6 |   description: siteMetadata.description,
 7 |   theme: '#0F172A',
 8 |   colorMode: 'dark',
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <UPageBody>
14 |     <UPageHeader title="Login" description="Login to your GitHub account to be able to view your traffic data." />
15 |     <UButton icon="i-simple-icons-github" class="space-y-3" block size="xl" color="white" to="/auth/github">
16 |       GitHub
17 |     </UButton>
18 |   </UPageBody>
19 | </template>
20 | ~/siteMetadata
21 | 


--------------------------------------------------------------------------------
/app/pages/privacy-policy.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import siteMetadata from '~/siteMetadata'
  3 | 
  4 | defineOgImageComponent('NuxtSeo', {
  5 |   title: siteMetadata.projectName,
  6 |   description: siteMetadata.description,
  7 |   theme: '#0F172A',
  8 |   colorMode: 'dark',
  9 | })
 10 | </script>
 11 | 
 12 | <template>
 13 |   <UPageBody prose>
 14 |     <UPageHeader title="Privacy Policy" description="Effective date: November 11, 2018" />
 15 |     <div class="flex flex-col">
 16 |       <p>GitHub Traffic Viewer ("us", "we", or "our") operates this website (the "Service").</p>
 17 | 
 18 |       <p>
 19 |         This page informs you of our policies regarding the collection, use, and disclosure of personal data when you
 20 |         use our Service and the choices you have associated with that data. Our Privacy Policy for GitHub Traffic Viewer
 21 |         is managed through{' '}
 22 |         <NuxtLink external href="https://www.freeprivacypolicy.com/free-privacy-policy-generator.php">
 23 |           Free Privacy Policy
 24 |         </NuxtLink>
 25 |         .
 26 |       </p>
 27 | 
 28 |       <p>
 29 |         We use your data to provide and improve the Service. By using the Service, you agree to the collection and use
 30 |         of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, terms used in
 31 |         this Privacy Policy have the same meanings as in our Terms and Conditions, accessible from
 32 |         <NuxtLink external href="https://github-traffic-viewer.netlify.app/">
 33 |           https://github-traffic-viewer.netlify.app/
 34 |         </NuxtLink>
 35 |       </p>
 36 | 
 37 |       <h2>Information Collection And Use</h2>
 38 | 
 39 |       <p>
 40 |         We collect several different types of information for various purposes to provide and improve our Service to
 41 |         you.
 42 |       </p>
 43 | 
 44 |       <h3>Types of Data Collected</h3>
 45 | 
 46 |       <h4>Personal Data</h4>
 47 | 
 48 |       <p>
 49 |         While using our Service, we may ask you to provide us with certain personally identifiable information that can
 50 |         be used to contact or identify you ("Personal Data"). Personally identifiable information may include, but is
 51 |         not limited to:
 52 |       </p>
 53 | 
 54 |       <ul>
 55 |         <li>Cookies and Usage Data</li>
 56 |       </ul>
 57 | 
 58 |       <h4>Usage Data</h4>
 59 | 
 60 |       <p>
 61 |         We may also collect information how the Service is accessed and used ("Usage Data"). This Usage Data may include
 62 |         information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version,
 63 |         the pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique
 64 |         device identifiers and other diagnostic data.
 65 |       </p>
 66 | 
 67 |       <h4>Tracking & Cookies Data</h4>
 68 |       <p>
 69 |         We use cookies and similar tracking technologies to track the activity on our Service and hold certain
 70 |         information.
 71 |       </p>
 72 |       <p>
 73 |         Cookies are files with small amount of data which may include an anonymous unique identifier. Cookies are sent
 74 |         to your browser from a website and stored on your device. Tracking technologies also used are beacons, tags, and
 75 |         scripts to collect and track information and to improve and analyze our Service.
 76 |       </p>
 77 |       <p>
 78 |         You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you
 79 |         do not accept cookies, you may not be able to use some portions of our Service.
 80 |       </p>
 81 |       <p>Examples of Cookies we use:</p>
 82 |       <ul>
 83 |         <li><strong>Session Cookies.</strong> We use Session Cookies to operate our Service.</li>
 84 |         <li>
 85 |           <strong>Preference Cookies.</strong> We use Preference Cookies to remember your preferences and various
 86 |           settings.
 87 |         </li>
 88 |         <li><strong>Security Cookies.</strong> We use Security Cookies for security purposes.</li>
 89 |       </ul>
 90 | 
 91 |       <h2>Use of Data</h2>
 92 | 
 93 |       <p>GitHub Traffic Viewer uses the collected data for various purposes:</p>
 94 |       <ul>
 95 |         <li>To provide and maintain the Service</li>
 96 |         <li>To notify you about changes to our Service</li>
 97 |         <li>To allow you to participate in interactive features of our Service when you choose to do so</li>
 98 |         <li>To provide customer care and support</li>
 99 |         <li>To provide analysis or valuable information so that we can improve the Service</li>
100 |         <li>To monitor the usage of the Service</li>
101 |         <li>To detect, prevent and address technical issues</li>
102 |       </ul>
103 | 
104 |       <h2>Transfer Of Data</h2>
105 |       <p>
106 |         Your information, including Personal Data, may be transferred to — and maintained on — computers located outside
107 |         of your state, province, country or other governmental jurisdiction where the data protection laws may differ
108 |         than those from your jurisdiction.
109 |       </p>
110 |       <p>
111 |         If you are located outside Germany and choose to provide information to us, please note that we transfer the
112 |         data, including Personal Data, to Germany and process it there.
113 |       </p>
114 |       <p>
115 |         Your consent to this Privacy Policy followed by your submission of such information represents your agreement to
116 |         that transfer.
117 |       </p>
118 |       <p>
119 |         GitHub Traffic Viewer will take all steps reasonably necessary to ensure that your data is treated securely and
120 |         in accordance with this Privacy Policy and no transfer of your Personal Data will take place to an organization
121 |         or a country unless there are adequate controls in place including the security of your data and other personal
122 |         information.
123 |       </p>
124 | 
125 |       <h2>Disclosure Of Data</h2>
126 | 
127 |       <h3>Legal Requirements</h3>
128 |       <p>
129 |         GitHub Traffic Viewer may disclose your Personal Data in the good faith belief that such action is necessary to:
130 |       </p>
131 |       <ul>
132 |         <li>To comply with a legal obligation</li>
133 |         <li>To protect and defend the rights or property of GitHub Traffic Viewer</li>
134 |         <li>To prevent or investigate possible wrongdoing in connection with the Service</li>
135 |         <li>To protect the personal safety of users of the Service or the public</li>
136 |         <li>To protect against legal liability</li>
137 |       </ul>
138 | 
139 |       <h2>Security Of Data</h2>
140 |       <p>
141 |         The security of your data is important to us, but remember that no method of transmission over the Internet, or
142 |         method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect
143 |         your Personal Data, we cannot guarantee its absolute security.
144 |       </p>
145 | 
146 |       <h2>Service Providers</h2>
147 |       <p>
148 |         We may employ third party companies and individuals to facilitate our Service ("Service Providers"), to provide
149 |         the Service on our behalf, to perform Service-related services or to assist us in analyzing how our Service is
150 |         used.
151 |       </p>
152 |       <p>
153 |         These third parties have access to your Personal Data only to perform these tasks on our behalf and are
154 |         obligated not to disclose or use it for any other purpose.
155 |       </p>
156 | 
157 |       <h3>Analytics</h3>
158 |       <p>We monitor and analyze the use of our Service.</p>
159 |       <ul>
160 |         <li>
161 |           <p>
162 |             <strong>Analytics</strong>
163 |           </p>
164 |           <p>
165 |             We use a self-hosted analytics solution with server in Germany to track data like browser, operating system
166 |             and visited pages.
167 |           </p>
168 |         </li>
169 |       </ul>
170 | 
171 |       <h2>Links To Other Sites</h2>
172 |       <p>
173 |         Our Service may contain links to other sites that are not operated by us. If you click on a third party link,
174 |         you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every
175 |         site you visit.
176 |       </p>
177 |       <p>
178 |         We have no control over and assume no responsibility for the content, privacy policies or practices of any third
179 |         party sites or services.
180 |       </p>
181 | 
182 |       <h2>Children's Privacy</h2>
183 |       <p>Our Service does not address anyone under the age of 18 ("Children").</p>
184 |       <p>
185 |         We do not knowingly collect personally identifiable information from anyone under the age of 18. If you are a
186 |         parent or guardian and you are aware that your Children has provided us with Personal Data, please contact us.
187 |         If we become aware that we have collected Personal Data from children without verification of parental consent,
188 |         we take steps to remove that information from our servers.
189 |       </p>
190 | 
191 |       <h2>Changes To This Privacy Policy</h2>
192 |       <p>
193 |         We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy
194 |         Policy on this page.
195 |       </p>
196 |       <p>
197 |         We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective
198 |         and update the "effective date" at the top of this Privacy Policy.
199 |       </p>
200 |       <p>
201 |         You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are
202 |         effective when they are posted on this page.
203 |       </p>
204 | 
205 |       <h2>Contact Us</h2>
206 |       <p>If you have any questions about this Privacy Policy, please contact us:</p>
207 |       <ul>
208 |         <li>By email: <NuxtLink to="mailto:mail@mokkapps.de" target="_blank" external>mail@mokkapps.de</NuxtLink></li>
209 |       </ul>
210 |     </div>
211 |   </UPageBody>
212 | </template>
213 | ~/siteMetadata
214 | 


--------------------------------------------------------------------------------
/app/pages/traffic-data.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import siteMetadata from '~/siteMetadata'
 3 | 
 4 | const {
 5 |   showForkedRepos,
 6 |   showPrivateRepos,
 7 |   searchRepositoryName,
 8 |   selectedRepositoryData,
 9 |   repositories,
10 |   trafficTimeFrame,
11 |   isLoadingTrafficData,
12 |   error,
13 |   selectedRepositoryId,
14 |   githubUserName,
15 | } = useTrafficData()
16 | 
17 | definePageMeta({
18 |   layout: 'dashboard',
19 |   middleware: ['auth'],
20 | })
21 | 
22 | defineOgImageComponent('NuxtSeo', {
23 |   title: siteMetadata.projectName,
24 |   description: siteMetadata.description,
25 |   theme: '#0F172A',
26 |   colorMode: 'dark',
27 | })
28 | </script>
29 | 
30 | <template>
31 |   <UDashboardLayout>
32 |     <UDashboardPanel :width="350" :resizable="{ min: 300, max: 600 }" collapsible>
33 |       <UDashboardSidebar>
34 |         <template #header>
35 |           <NuxtLink to="/" class="text-lg font-bold py-2.5"> GitHub Traffic Viewer </NuxtLink>
36 |         </template>
37 | 
38 |         <UDivider />
39 | 
40 |         <TrafficDataSidebar
41 |           v-model:show-forked-repos="showForkedRepos"
42 |           v-model:show-private-repos="showPrivateRepos"
43 |           v-model:name="searchRepositoryName"
44 |           v-model:traffic-time-frame="trafficTimeFrame"
45 |           :is-loading-traffic-data="isLoadingTrafficData"
46 |           :repositories="repositories"
47 |           @select="selectedRepositoryId = $event"
48 |         />
49 |       </UDashboardSidebar>
50 |     </UDashboardPanel>
51 | 
52 |     <UDashboardPage>
53 |       <UDashboardPanel grow>
54 |         <UDashboardNavbar>
55 |           <template #title>
56 |             <span
57 |               >Traffic data for your GitHub user <span class="italic font-bold">{{ githubUserName }}</span></span
58 |             >
59 |           </template>
60 |           <template #right>
61 |             <AuthButton />
62 |             <UColorModeButton />
63 |             <RepoButton />
64 |           </template>
65 |         </UDashboardNavbar>
66 | 
67 |         <UDashboardPanelContent>
68 |           <div class="col-span-9 p-8">
69 |             <UDashboardCard v-if="isLoadingTrafficData">
70 |               <div class="flex flex-col gap-10">
71 |                 <USkeleton class="h-6 w-[300px]" />
72 |                 <div class="flex flex-col gap-8">
73 |                   <USkeleton v-for="n of 13" :key="n" class="h-4 w-full" />
74 |                 </div>
75 |               </div>
76 |             </UDashboardCard>
77 |             <RepoTrafficChart v-else-if="selectedRepositoryData" :repository="selectedRepositoryData" />
78 |             <UAlert
79 |               v-else-if="error"
80 |               icon="i-heroicons-exclamation-circle"
81 |               color="red"
82 |               variant="outline"
83 |               title="An error occurred"
84 |               :description="error.message"
85 |             />
86 |           </div>
87 |         </UDashboardPanelContent>
88 |       </UDashboardPanel>
89 |     </UDashboardPage>
90 |   </UDashboardLayout>
91 | </template>
92 | ~/siteMetadata
93 | 


--------------------------------------------------------------------------------
/app/siteMetadata.ts:
--------------------------------------------------------------------------------
 1 | const siteMetadata = {
 2 |   projectName: 'GitHub Traffic Viewer',
 3 |   domain: 'github-traffic-viewer.netlify.app/',
 4 |   url: 'https://github-traffic-viewer.netlify.app',
 5 |   repoUrl: 'https://github.com/Mokkapps/github-traffic-viewer-website',
 6 |   description: 'Instant analytics for views of your repositories empowering you to optimize them effortlessly.',
 7 |   contactEmail: 'mail@mokkapps.de',
 8 | }
 9 | 
10 | export default siteMetadata
11 | 


--------------------------------------------------------------------------------
/app/types/types.ts:
--------------------------------------------------------------------------------
 1 | export interface TrafficData {
 2 |   count: number
 3 |   uniques: number
 4 |   views: Array<{ timestamp: string; count: number; uniques: number }>
 5 | }
 6 | 
 7 | export interface GithubRepositoryDTO {
 8 |   fork: boolean
 9 |   name: string
10 |   private: boolean
11 |   id: number
12 | }
13 | 
14 | export interface RepositoryViewModel {
15 |   name: string
16 |   isFork: boolean
17 |   isPrivate: boolean
18 |   id: number
19 |   trafficData: TrafficData
20 | }
21 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import withNuxt from './.nuxt/eslint.config.mjs'
 2 | 
 3 | export default withNuxt(
 4 |   {
 5 |     ignores: ['dist', '.nuxt', 'node_modules'],
 6 |   },
 7 |   {
 8 |     files: ['**/*.vue'],
 9 |     rules: {
10 |       'vue/multi-word-component-names': 0,
11 |       'vue/max-attributes-per-line': 'off',
12 |       'vue/no-v-html': 0,
13 |     },
14 |   },
15 | )
16 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import siteMetadata from './app/siteMetadata'
 2 | 
 3 | // https://nuxt.com/docs/api/configuration/nuxt-config
 4 | export default defineNuxtConfig({
 5 |   extends: ['@nuxt/ui-pro'],
 6 | 
 7 |   compatibilityDate: '2024-08-12',
 8 | 
 9 |   future: {
10 |     compatibilityVersion: 4,
11 |   },
12 | 
13 |   devtools: {
14 |     enabled: true,
15 |   },
16 | 
17 |   modules: ['@nuxt/ui', '@nuxtjs/seo', '@nuxt/eslint', 'nuxt-auth-utils', 'nuxt-umami'],
18 | 
19 |   app: {
20 |     head: {
21 |       noscript: [{ textContent: 'Javascript is required' }],
22 |     },
23 |   },
24 | 
25 |   devServer: {
26 |     port: 4004,
27 |   },
28 | 
29 |   imports: {
30 |     dirs: ['./types/**'],
31 |   },
32 | 
33 |   routeRules: {
34 |     '/traffic-data': { ssr: false },
35 |   },
36 | 
37 |   site: {
38 |     url: 'https://github-traffic-viewer.netlify.app',
39 |     name: siteMetadata.projectName,
40 |     description: siteMetadata.description,
41 |     defaultLocale: 'en',
42 |   },
43 | 
44 |   umami: {
45 |     ignoreLocalhost: true,
46 |     proxy: 'cloak',
47 |     logErrors: true,
48 |   },
49 | })
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "github-traffic-viewer-website",
 3 |   "private": true,
 4 |   "description": "A website that shows a list of traffic graphs of your own GitHub repositories.",
 5 |   "keywords": [
 6 |     "nuxt",
 7 |     "github",
 8 |     "traffic"
 9 |   ],
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/Mokkapps/github-traffic-viewer-website"
13 |   },
14 |   "license": "MIT",
15 |   "author": "Michael Hoffmann <mail@mokkapps.de>",
16 |   "type": "module",
17 |   "scripts": {
18 |     "build": "nuxt build",
19 |     "dev": "nuxt dev",
20 |     "generate": "nuxt generate",
21 |     "postinstall": "nuxt prepare",
22 |     "lint": "eslint .",
23 |     "preview": "nuxt preview",
24 |     "typecheck": "nuxt typecheck"
25 |   },
26 |   "devDependencies": {
27 |     "@iconify-json/heroicons": "^1.2.0",
28 |     "@iconify-json/simple-icons": "^1.2.2",
29 |     "@nuxt/eslint": "^0.6.0",
30 |     "@nuxt/eslint-config": "^0.5.7",
31 |     "@nuxt/ui-pro": "^1.4.4",
32 |     "@nuxtjs/seo": "2.0.0-rc.21",
33 |     "chart.js": "^4.4.4",
34 |     "eslint": "^9.10.0",
35 |     "nuxt": "^3.13.1",
36 |     "nuxt-auth-utils": "^0.3.8",
37 |     "nuxt-umami": "^3.0.1",
38 |     "prettier": "^3.3.3",
39 |     "vue": "3.5.4",
40 |     "vue-chartjs": "^5.3.1",
41 |     "vue-tsc": "^2.1.6"
42 |   },
43 |   "dependencies": {
44 |     "@aws-sdk/client-ses": "3.675.0",
45 |     "@iconify-json/ri": "1.2.1",
46 |     "@nuxtjs/supabase": "1.4.1",
47 |     "@playwright/test": "1.48.1",
48 |     "@types/node": "22.7.8",
49 |     "sass": "1.80.3",
50 |     "supabase": "1.207.8",
51 |     "tailwindcss": "3.4.14",
52 |     "twitter-api-v2": "1.18.0",
53 |     "typescript": "5.6.3"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mokkapps/github-traffic-viewer-website/741cad868fb7b9d5f6b53c925fce0521ae762846/public/favicon.ico


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "@nuxtjs"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/server/routes/auth/github.get.ts:
--------------------------------------------------------------------------------
 1 | export default oauthGitHubEventHandler({
 2 |   config: {
 3 |     scope: ['repo', 'metadata:read', 'administration:read'],
 4 |   },
 5 |   async onSuccess(event, { user, tokens }) {
 6 |     await setUserSession(event, {
 7 |       user: {
 8 |         githubId: user.id,
 9 |         githubUsername: user.login,
10 |         githubAccessToken: tokens.access_token,
11 |       },
12 |     })
13 |     return sendRedirect(event, '/traffic-data')
14 |   },
15 |   // Optional, will return a json error and 401 status code by default
16 |   onError(event, error) {
17 |     console.error('GitHub OAuth error:', error)
18 |     return sendRedirect(event, '/')
19 |   },
20 | })
21 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------