Skip to content

Commit a5bd82c

Browse files
HoloPollockHoloPollock
committed
fix comments
1 parent d4611f0 commit a5bd82c

File tree

5 files changed

+75
-96
lines changed

5 files changed

+75
-96
lines changed

‎index.html

+51-53
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,57 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
8+
<link rel="icon" type="image/png" href="./favicon.png">
9+
<link rel="apple-touch-icon" sizes="130x130" href="./apple-touch-icon.png">
10+
<meta name="theme-color" content="#191e25">
11+
<meta name="twitter:card" content="summary_large_image">
12+
<meta name="twitter:site" content="@GoodbyteStudio">
13+
<meta name="twitter:creator" content="@GoodbyteStudio">
14+
<meta name="twitter:title" content="Film Frequency: a contribution graph for Letterboxd">
15+
<meta name="twitter:description" content="See your logged Letterboxd films as a Github-like frequency graph">
16+
<meta name="twitter:image" content="https://www.filmfrequency.com/socialmediabanner.png">
17+
<meta property="og:url" content="https://www.filmfrequency.com">
18+
<meta property="og:type" content="website">
19+
<meta property="og:description" content="See your logged Letterboxd films as a Github-like frequency graph">
20+
<meta property="og:image" content=https://www.filmfrequency.com/socialmediabanner.png> <meta property="og:title"
21+
content="Film Frequency: a contribution graph for Letterboxd">
22+
<title>Film Frequency: a contribution graph for Letterboxd</title>
23+
</head>
324

4-
<head>
5-
<meta charset="utf-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8-
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
9-
<link rel="icon" type="image/png" href="./favicon.png">
10-
<link rel="apple-touch-icon" sizes="130x130" href="./apple-touch-icon.png">
11-
<meta name="theme-color" content="#191e25">
12-
<meta name="twitter:card" content="summary_large_image">
13-
<meta name="twitter:site" content="@GoodbyteStudio">
14-
<meta name="twitter:creator" content="@GoodbyteStudio">
15-
<meta name="twitter:title" content="Film Frequency: a contribution graph for Letterboxd">
16-
<meta name="twitter:description" content="See your logged Letterboxd films as a Github-like frequency graph">
17-
<meta name="twitter:image" content="https://www.filmfrequency.com/socialmediabanner.png">
18-
<meta property="og:url" content="https://www.filmfrequency.com">
19-
<meta property="og:type" content="website">
20-
<meta property="og:description" content="See your logged Letterboxd films as a Github-like frequency graph">
21-
<meta property="og:image" content=https://www.filmfrequency.com/socialmediabanner.png> <meta property="og:title"
22-
content="Film Frequency: a contribution graph for Letterboxd">
23-
<title>Film Frequency: a contribution graph for Letterboxd</title>
24-
</head>
25+
<body>
26+
<noscript>
27+
<p>
28+
<a href="https://github.com/GoodbyteCo/Letterboxd-Film-Frequency">Film Frequency</a>
29+
requires Javascript to run. Please enable it to use the site. See:
30+
<em><a href="https://enable-javascript.com">how to turn on Javascript</a></em>.
31+
</p>
32+
<style>
33+
body,
34+
html {
35+
margin: 0;
36+
background: #191e25;
37+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
38+
-webkit-font-smoothing: antialiased;
39+
-moz-osx-font-smoothing: grayscale;
40+
}
2541

26-
<body>
27-
<noscript>
28-
<p>
29-
<a href="https://github.com/GoodbyteCo/Letterboxd-Film-Frequency">Film Frequency</a>
30-
requires Javascript to run. Please enable it to use the site. See:
31-
<em><a href="https://enable-javascript.com">how to turn on Javascript</a></em>.
32-
</p>
33-
<style>
34-
body,
35-
html {
36-
margin: 0;
37-
background: #191e25;
38-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
39-
-webkit-font-smoothing: antialiased;
40-
-moz-osx-font-smoothing: grayscale;
41-
}
42-
43-
p {
44-
color: #adbed0;
45-
margin: 120px auto;
46-
max-width: 52ch;
47-
padding: 0 30px;
48-
}
49-
50-
a {
51-
color: #01e054;
52-
}
53-
</style>
54-
</noscript>
55-
<main id="app"></main>
56-
<script type="module" src="/src/main.ts"></script>
57-
</body>
42+
p {
43+
color: #adbed0;
44+
margin: 120px auto;
45+
max-width: 52ch;
46+
padding: 0 30px;
47+
}
5848

49+
a {
50+
color: #01e054;
51+
}
52+
</style>
53+
</noscript>
54+
<main id="app"></main>
55+
<script type="module" src="/src/main.ts"></script>
56+
</body>
5957
</html>

‎src/App.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,10 @@
2020
const username = ref('')
2121
const year = ref(new Date().getFullYear())
2222
const lowestYear = ref(2011) // default to Letterboxd create date
23-
const films = ref({})
23+
const films = ref<Record<string, Record<string, number>>>({})
2424
const statusMessage = ref('Enter your Letterboxd username to get data.')
2525
const statusType = ref('') // 'error', 'info', or empty
2626
27-
2827
watch(username, (newUsername) => {
2928
updateGraph(newUsername)
3029
})
@@ -65,8 +64,8 @@
6564
.then(function(json) {
6665
console.log(json.data)
6766
films.value = json.data
68-
const keyVals = Object.keys(json.data).map<number>(value => +value)
69-
lowestYear.value = Math.min(...keyVals)
67+
const years = Object.keys(json.data).map<number>(value => +value)
68+
lowestYear.value = Math.min(...years)
7069
})
7170
}
7271

‎src/components/Graph.vue

+3-10
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<script setup lang="ts">
3939
import { computed } from 'vue'
4040
import { directive } from 'vue-tippy'
41-
import useDates from '../composables/useDates'
41+
import { getDate, getWeekDay, getWeekNumber, getDaysInTheYear } from '../utils/date'
4242
4343
// Cant move to own file see: https://github.com/vuejs/vue-next/issues/4294
4444
type GraphProps = {
@@ -48,13 +48,6 @@
4848
}
4949
const props = defineProps<GraphProps>()
5050
51-
const {
52-
getDate,
53-
getWeekDay,
54-
getWeekNumber,
55-
getDaysInTheYear
56-
} = useDates()
57-
5851
// scale increment = 1/5th the maximum watched in any one day
5952
// or if object is undefined, scale increment = 1
6053
const scale = computed(() => {
@@ -68,8 +61,8 @@
6861
6962
// Helpers
7063
const filmsWatchedOn = (year: number, day: number) => {
71-
var date = getDate(year, day);
72-
var formattedDate = (date.getMonth() + 1) + '/' + date.getDate()
64+
const date = getDate(year, day);
65+
const formattedDate = (date.getMonth() + 1) + '/' + date.getDate()
7366
7467
try {
7568
return +props.films[year][formattedDate] || 0

‎src/composables/useDates.ts

-29
This file was deleted.

‎src/utils/date.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export const getDate = (year: number, day: number) => {
2+
const date = new Date(year, 0)
3+
return new Date(date.setDate(day))
4+
}
5+
6+
export const getWeekDay = (year: number, day: number) => {
7+
return getDate(year, day).getDay()
8+
}
9+
10+
export const getWeekNumber = (year: number, day: number) => {
11+
const firstDay = (getWeekDay(year, 0) + 1) % 7
12+
return Math.ceil((day + firstDay) / 7) - 1
13+
}
14+
15+
export const getDaysInTheYear = (year: number) => {
16+
const isLeapYear = (new Date(year, 1, 29).getDate() === 29)
17+
return isLeapYear ? 366 : 365
18+
}

0 commit comments

Comments
 (0)