jens-cool-guy-git-workshop/index.html at main · yendtm/jens-cool-guy-git-workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
  <head>
    <title>Jen's Cool Guy Git Workshop</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- This script tag injects VueJS (or just "Vue") into this application. https://vuejs.org/v2/guide/ -->
    <script src="https://unpkg.com/vue"></script>
    <!-- This is a CSS library called TailwindCSS. https://tailwindcss.com/ -->
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <!-- These are Google Font script tags that allow us to use Google Fonts without installing them
    or bundling them with our webpage. -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap"
      rel="stylesheet"
    />
    <style>
      /* This adds a corkboard image to the background of the main page. */
      body {
        background-image: url("assets/corkboard.jpg");
        background-repeat: repeat;
      }
      /* Here is where we add the Google Font to the title tag. */
      #bulletin-title {
        font-family: "Love Ya Like A Sister", cursive;
      }
      /* These are specifically-named CSS classes that Vue recognizes to add smooth
      animations to items that enter and leave the screen. You'll notice that we don't manually
      apply these classes anywhere; it's done automatically by Vue. */
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
      }
    </style>
  </head>
  <!-- Most of the CSS classes you see here are from TailwindCSS. -->
  <body class="h-screen">
    <div id="app" class="container mx-auto w-5/6 h-full">
      <div
        id="bulletin-title"
        class="w-full h-16 text-center flex justify-between content-center items-center text-4xl"
      >
        <span>📌</span>
        <span class="text-white font-bold">Bulletin Board</span>
        <span>📌</span>
      </div>
      <div
        class="w-full h-5/6 border-8 border-rounded border-yellow-900 p-2 bg-white"
      >
        <transition name="fade">
          <!-- Your HTML content will show up inside this iframe automatically thanks to our Vue code. -->
          <iframe
            id="cool-guy-content"
            v-bind:src="customPagePath"
            v-if="show"
            class="w-full h-full"
          ></iframe>
        </transition>
      </div>
    </div>

    <script>

      /**
       * Uses the GitHub API to fetch the names of the pages currently on the main branch of the repository.
       * You can read more about how to use this API here: https://docs.github.com/en/rest
       *
       * WARNING: Because we're not using an authentication token, we're limited to making 60 calls - or fetches - per hour.
       * @returns the list of paths for each page as an array of strings.
       */
      async function fetchPagePathsFromGithub() {
        var pagePaths = [];

        // We'll use Javascript's native fetch api to make this request, which will return a 'Response' object.
        // You can read more about the fetch api here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
        var response = await fetch('https://api.github.com/repos/the-new-developers/jens-cool-guy-git-workshop/contents/pages');

        // The response object can tell us if our request was successful; here, 'ok' is the same as an HTTP 200 status.
        if (response.ok) {

          // The response object has a method that allows us to parse it into a JSON object, which will make it easier for us to work
          // with using Javascript
          var data = await response.json();

          // We'll iterate over each item in the data array and pull out each item's name property into a new array of strings
          pagePaths = data.map(datum => 'pages/' + datum.name);

        } else {

          // If we're hitting this, it means the response has failed; maybe we hit the limit, maybe something else went wrong.
          // Either way, we're going to send back a list of pages that we know will be there.
          pagePaths = [
            'pages/jen.html',
            'pages/rodney\'s awesome page.html',
            'pages/template.html'
          ]
        }

        return pagePaths;
      }

      // This is the beginning of our Vue code. You don't need to modify anything inside here.
      var app = new Vue({
        el: "#app",
        data: {
          show: true,
          carouselCounter: 0,
          customPagePaths: [],
        },
        computed: {
          customPagePath: function () {
            return this.customPagePaths[this.carouselCounter];
          },
        },
        methods: {
          updateContent: function () {
            this.show = false;
            setTimeout(() => {
              // This is the function that slowly rotates through all our HTML files.
              // If it hits the end, it starts back over at the beginning.
              if (this.carouselCounter + 1 == this.customPagePaths.length) {
                this.carouselCounter = 0;
              } else {
                this.carouselCounter++;
              }
            }, 500);
            setTimeout(() => (this.show = true), 500);
          },
        },
        created: async function () {
          setInterval(this.updateContent, 4000);
          this.customPagePaths = await fetchPagePathsFromGithub()
        },
      });
    </script>
  </body>
</html>