├── pages
    ├── loading.vue
    ├── post
    │   ├── index.vue
    │   └── _post
    │   │   ├── embed.vue
    │   │   └── index.vue
    ├── topic
    │   ├── index.vue
    │   └── _topic.vue
    ├── user
    │   ├── index.vue
    │   └── _username.vue
    ├── browse
    │   ├── index.vue
    │   └── _id.vue
    ├── docs
    │   ├── index.vue
    │   └── _slug.vue
    ├── youtube
    │   └── _id.vue
    ├── starred.vue
    ├── login.vue
    ├── index.vue
    ├── confirm-login.vue
    ├── react
    │   └── _id.vue
    ├── banner.vue
    ├── dashboard
    │   ├── index.vue
    │   └── users.vue
    └── search.vue
├── bun.lockb
├── static
    ├── favicon.ico
    ├── icon white.png
    ├── emojis
    │   ├── ocular.png
    │   └── squirrel.png
    ├── reaction-screenshot.png
    ├── original icon.svg
    └── icon.svg
├── assets
    ├── banner-blank.png
    ├── README.md
    └── category-map.js
├── plugins
    ├── vue-tooltip.js
    ├── vue-good-table.js
    ├── README.md
    └── auth.js
├── components
    ├── Emoji.vue
    ├── PostCount.vue
    ├── PostTime.vue
    ├── PostList.vue
    ├── Status.vue
    ├── TopicTime.vue
    ├── TopicList.vue
    ├── Error.vue
    ├── TopicListItem.vue
    ├── Star.vue
    ├── Footer.vue
    ├── Header.vue
    ├── ForumSelector.vue
    ├── Loading.vue
    ├── Post.vue
    ├── ReactionButtons.vue
    └── Render.vue
├── middleware
    ├── README.md
    ├── admin.js
    ├── notauthenticated.js
    └── authenticated.js
├── store
    ├── README.md
    ├── index.js
    ├── counts.js
    ├── statuses.js
    └── auth.js
├── content
    └── docs
    │   ├── gallery.md
    │   ├── about.md
    │   ├── privacy.md
    │   └── api.md
├── package.json
├── .github
    └── ISSUE_TEMPLATE
    │   ├── ------feature-request.md
    │   └── ---bug-report.md
├── README.md
├── .gitignore
├── nuxt.config.js
└── layouts
    └── default.vue


/pages/loading.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <Loading />
3 | </template>


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffalo/ocular/HEAD/bun.lockb


--------------------------------------------------------------------------------
/pages/post/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <h1>/post/:post</h1>
3 | </template>


--------------------------------------------------------------------------------
/pages/topic/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <h1>/topic/:topic</h1>
3 | </template>


--------------------------------------------------------------------------------
/pages/user/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <h1>/user/:username</h1>
3 | </template>


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffalo/ocular/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/static/icon white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffalo/ocular/HEAD/static/icon white.png


--------------------------------------------------------------------------------
/assets/banner-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffalo/ocular/HEAD/assets/banner-blank.png


--------------------------------------------------------------------------------
/static/emojis/ocular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffalo/ocular/HEAD/static/emojis/ocular.png


--------------------------------------------------------------------------------
/static/emojis/squirrel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffalo/ocular/HEAD/static/emojis/squirrel.png


--------------------------------------------------------------------------------
/plugins/vue-tooltip.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VTooltip from 'v-tooltip'
3 | 
4 | Vue.use(VTooltip)


--------------------------------------------------------------------------------
/static/reaction-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeffalo/ocular/HEAD/static/reaction-screenshot.png


--------------------------------------------------------------------------------
/components/Emoji.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <span class="emoji"><slot></slot></span>
3 | </template>
4 | 
5 | <style scoped>
6 | .emoji {
7 |   font-weight: normal;
8 | }
9 | </style>


--------------------------------------------------------------------------------
/plugins/vue-good-table.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueGoodTablePlugin from 'vue-good-table';
3 | 
4 | // import the styles
5 | import 'vue-good-table/dist/vue-good-table.css'
6 | 
7 | Vue.use(VueGoodTablePlugin);


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/plugins/auth.js:
--------------------------------------------------------------------------------
 1 | export default ({store}, inject) => {
 2 |     // Inject $hello(msg) in Vue, context and store.
 3 |     let auth = {
 4 |         loggedIn() {
 5 |             return !!store.state.auth.user
 6 |         },
 7 |         user() {
 8 |             return store.state.auth.user
 9 |         },
10 |         token() {
11 |             return store.state.auth.token
12 |         }
13 |     }
14 |     inject('auth', auth)
15 | }


--------------------------------------------------------------------------------
/static/original icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.145 18.29c-5.042 0-9.145-4.102-9.145-9.145s4.103-9.145 9.145-9.145 9.145 4.103 9.145 9.145-4.102 9.145-9.145 9.145zm0-15.167c-3.321 0-6.022 2.702-6.022 6.022s2.702 6.022 6.022 6.022 6.023-2.702 6.023-6.022-2.702-6.022-6.023-6.022zm9.263 12.443c-.817 1.176-1.852 2.188-3.046 2.981l5.452 5.453 3.014-3.013-5.42-5.421z"/></svg>


--------------------------------------------------------------------------------
/pages/browse/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header :crumbs="[{ link: `/browse/${id}`, text: 'browse' }]" />
 4 |     <div class="margined">
 5 |       <h1>browse topics</h1>
 6 |       <p>note: this feature is in beta and may be changed at any time. it's also a bit slow due to scratchdb things.</p>
 7 |       <ForumSelector selected="31" />
 8 |       <Footer />
 9 |     </div>
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/static/icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0fbd8c" d="M9.145 18.29c-5.042 0-9.145-4.102-9.145-9.145s4.103-9.145 9.145-9.145 9.145 4.103 9.145 9.145-4.102 9.145-9.145 9.145zm0-15.167c-3.321 0-6.022 2.702-6.022 6.022s2.702 6.022 6.022 6.022 6.023-2.702 6.023-6.022-2.702-6.022-6.023-6.022zm9.263 12.443c-.817 1.176-1.852 2.188-3.046 2.981l5.452 5.453 3.014-3.013-5.42-5.421z"/></svg>


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/components/PostCount.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span class="post-count">{{ count || '0+' }} posts</span>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: ["user"],
 8 |   data() {
 9 |     return {
10 |       count: 0,
11 |     };
12 |   },
13 |   async fetch() {
14 |     this.count = await this.$store.dispatch('counts/loadUser', {name: this.user})
15 |   },
16 |   fetchOnServer: false
17 | };
18 | </script>
19 | 
20 | <style scoped>
21 | .post-count {
22 |   display: block;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/components/PostTime.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span>
 3 |     <a :href="`/post/${linkid}`" class="date full">{{ new Date(time) }}</a>
 4 |     <a :href="`/post/${linkid}`" class="date mobile">{{ new Date(time).toLocaleDateString("en-US") + ' - ' + new Date(time).toLocaleTimeString("en-US") }}</a>
 5 |   </span>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: ["time", "linkid"],
11 |   ssr: false,
12 | };
13 | </script>
14 | 
15 | <style scoped>
16 | .date {
17 |   color: white;
18 |   text-decoration: none;
19 | }
20 | </style>


--------------------------------------------------------------------------------
/content/docs/gallery.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: ocular api usage gallery
 3 | headertitle: api gallery
 4 | description: how are people using the ocular api?
 5 | ---
 6 | 
 7 | - a browser extension. i wish i could tell you which one, but [no](/topic/284272).
 8 | - [Scratch Forum Leaderboards](https://shefwerld.rirurin.com/post/)
 9 | - [postpercent](https://postpercent.rirurin.com/)
10 | - [Scratory](https://scratory.vercel.app/)
11 | - [Scratch Tools](https://scratchtools.edu.eu.org/)
12 | - [Magnifier](https://magnifier.potatophant.net/)
13 | 
14 | want to add something? [edit this page](https://github.com/jeffalo/ocular/blob/main/content/docs/gallery.md)
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ocular",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate"
10 |   },
11 |   "dependencies": {
12 |     "@nuxt/content": "^1.15.1",
13 |     "@nuxtjs/redirect-module": "^0.3.1",
14 |     "cookie": "^0.4.2",
15 |     "core-js": "^3.37.1",
16 |     "js-cookie": "^2.2.1",
17 |     "nuxt": "^2.17.4",
18 |     "v-tooltip": "^2.1.3",
19 |     "vue-good-table": "^2.21.11",
20 |     "vue-plausible": "^1.3.2"
21 |   },
22 |   "devDependencies": {
23 |     "@nuxtjs/color-mode": "^2.1.1"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/components/PostList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Loading v-if="loading" />
 4 |     <div v-if="!loading">
 5 |       <Post
 6 |         v-for="post of posts"
 7 |         v-bind:key="post.id"
 8 |         v-bind:post="post"
 9 |         v-bind:isOP="op == post.username"
10 |       />
11 |       <Error
12 |         v-if="posts && posts.length == 0"
13 |         error="No posts found"
14 |         details="Please try refining your query."
15 |       ></Error>
16 |       <button @click="$emit('loadMore')" v-if="showLoadMore">Load More</button>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   props: ["posts", "loading", "showLoadMore", "op"],
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/------feature-request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: "\U0001F468‍\U0001F4BB feature request"
 3 | about: do you have a new feature for ocular or my ocular? if so this is the template
 4 |   for you.
 5 | title: ''
 6 | labels: ''
 7 | assignees: ''
 8 | 
 9 | ---
10 | 
11 | **Is your feature request related to a problem? Please describe.**
12 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
13 | 
14 | **Describe the solution you'd like**
15 | A clear and concise description of what you want to happen.
16 | 
17 | **Describe alternatives you've considered**
18 | A clear and concise description of any alternative solutions or features you've considered.
19 | 
20 | **Additional context**
21 | Add any other context or screenshots about the feature request here.
22 | 


--------------------------------------------------------------------------------
/middleware/admin.js:
--------------------------------------------------------------------------------
 1 | const serverCookie = process.server ? require('cookie') : undefined
 2 | const clientCookie = process.client ? require('js-cookie') : undefined
 3 | 
 4 | // make sure to keep this the same as authetnicated.js
 5 | 
 6 | export default async function ({ $auth, redirect, req, store }) {
 7 |     let token = null
 8 |     if (process.server) {
 9 |         if (req.headers.cookie) {
10 |             const parsed = serverCookie.parse(req.headers.cookie)
11 |             token = parsed['my-ocular-token']
12 |         }
13 |     } else {
14 |         token = clientCookie.get('my-ocular-token')
15 |     }
16 | 
17 |     await store.dispatch('auth/login', token) // reload just incase logged out on another tab or something
18 | 
19 |     if (!$auth.user().admin) {
20 |         return redirect('/')
21 |     }
22 | }


--------------------------------------------------------------------------------
/pages/docs/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header
 4 |       :crumbs="[{link:'/docs', text:'docs'}]"
 5 |     />
 6 |     <div class="margined">
 7 |       <h1>documentation home</h1>
 8 |       <ul>
 9 |         <li v-for="doc of documents" :key="doc.path">
10 |             <nuxt-link :to="doc.path">{{ doc.title }}</nuxt-link>
11 |         </li>
12 |       </ul>
13 |       <Footer />
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   head: {
21 |     title: 'docs'
22 |   },
23 |   async asyncData({ $content, params, error }) {
24 |     const documents = await $content('docs').only(['title', 'path'])
25 |       .fetch()
26 |       .catch((err) => {
27 |           error(err);
28 |       });
29 |     return { documents }
30 |   },
31 | };
32 | </script>


--------------------------------------------------------------------------------
/middleware/notauthenticated.js:
--------------------------------------------------------------------------------
 1 | const serverCookie = process.server ? require('cookie') : undefined
 2 | const clientCookie = process.client ? require('js-cookie') : undefined
 3 | 
 4 | // make sure to keep this the same as authetnicated.js
 5 | 
 6 | export default async function ({ $auth, redirect, req, store }) {
 7 |     let token = null
 8 |     if (process.server) {
 9 |         if (req.headers.cookie) {
10 |             const parsed = serverCookie.parse(req.headers.cookie)
11 |             token = parsed['my-ocular-token']
12 |         }
13 |     } else {
14 |         token = clientCookie.get('my-ocular-token')
15 |     }
16 | 
17 |     await store.dispatch('auth/login', token) // reload just incase logged out on another tab or something
18 | 
19 |     if ($auth.loggedIn()) {
20 |         return redirect('/')
21 |     }
22 | }


--------------------------------------------------------------------------------
/middleware/authenticated.js:
--------------------------------------------------------------------------------
 1 | const serverCookie = process.server ? require('cookie') : undefined
 2 | const clientCookie = process.client ? require('js-cookie') : undefined
 3 | 
 4 | // make sure to keep this the same as notauthetnicated.js
 5 | 
 6 | export default async function ({ $auth, redirect, req, store }) {
 7 |     let token = null
 8 |     if (process.server) {
 9 |         if (req.headers.cookie) {
10 |             const parsed = serverCookie.parse(req.headers.cookie)
11 |             token = parsed['my-ocular-token']
12 |         }
13 |     } else {
14 |         token = clientCookie.get('my-ocular-token')
15 |     }
16 | 
17 |     await store.dispatch('auth/login', token) // reload just incase logged out on another tab or something
18 | 
19 |     if (!$auth.loggedIn()) {
20 |         return redirect('/login')
21 |     }
22 | }


--------------------------------------------------------------------------------
/content/docs/about.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: about
 3 | description: about ocular
 4 | ---
 5 | 
 6 | ## what is ocular?
 7 | ocular is a tool for searching the [scratch forums](https://scratch.mit.edu/discuss/). it contains some cool features like statuses, reactions and starring to make using the scratch forums more fun!
 8 | 
 9 | ## what is/was my-ocular?
10 | my-ocular previously was a site where you could set your ocular status. for technical reasons this had to be maintained separately from ocular, however in april 2021, all of my-ocular's features were migrated to ocular. my-ocular only remains as a backend/api.
11 | 
12 | ## what is an ocular status?
13 | an ocular status is a short message and favourite colour, which is displayed across ocular and [other sites](/docs/gallery). an ocular status is not required to use ocular, but they allow you to customize your profile a little bit. :)
14 | 
15 | [set your ocular status](/dashboard)
16 | 


--------------------------------------------------------------------------------
/components/Status.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span class="container">
 3 |     <i class="status">{{ status }}</i>
 4 |     <span
 5 |       class="status-color"
 6 |       :style="`background-color: ${color}`"
 7 |       v-if="color"
 8 |     ></span>
 9 |   </span>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   props: ["user"],
15 |   data() {
16 |     return {
17 |       status: "",
18 |       color: "",
19 |     };
20 |   },
21 |   async fetch() {
22 |     let data = await this.$store.dispatch('statuses/loadUser', {name: this.user})
23 |     if (data.status) {
24 |       this.status = data.status;
25 |       this.color = data.color;
26 |     }
27 |   },
28 |   fetchOnServer: false,
29 | };
30 | </script>
31 | 
32 | <style scoped>
33 | .status-color {
34 |   height: 10px;
35 |   width: 10px;
36 |   margin-left: 3px;
37 |   background-color: rgb(32, 116, 57);
38 |   border-radius: 50%;
39 |   display: inline-block;
40 | }
41 | </style>


--------------------------------------------------------------------------------
/components/TopicTime.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span>
 3 |     {{ date }}
 4 |   </span>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: ["time"],
10 |   computed: {
11 |     date() {
12 |       let date = new Date(this.time);
13 |       let now = new Date();
14 | 
15 |       let day = `${new Intl.DateTimeFormat("en-US", { month: "short" }).format(
16 |         date
17 |       )}  ${date.getDate()},`;
18 | 
19 |       let year = ` ${date.getFullYear()}`;
20 | 
21 |       if (now.getDate() == date.getDate()) {
22 |         day = "Today";
23 |         year = "";
24 |       }
25 | 
26 |       if (now.getDate() - 1 == date.getDate()) {
27 |         day = "Yesterday";
28 |         year = "";
29 |       }
30 | 
31 |       let time = ` ${("0" + date.getHours()).slice(-2)}:${(
32 |         "0" + date.getMinutes()
33 |       ).slice(-2)}:${("0" + date.getSeconds()).slice(-2)}`;
34 | 
35 |       return `${day}${year}${time}`;
36 |     },
37 |   },
38 | };
39 | </script>


--------------------------------------------------------------------------------
/pages/youtube/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header :crumbs="[{link:`/youtube/${$nuxt.context.route.params.id}`, text:'youtube'}]" />
 4 |     <div class="margined">
 5 |       <h1>youtube</h1>
 6 |       <p>scratch converts youtube links to links to their own player page to prevent people from seeing youtube or something. this page is here to simulate the true scratch experience.</p>
 7 |       <a :href="`https://youtube.com/watch?v=${$nuxt.context.route.params.id}`">watch on youtube</a>
 8 |       <iframe class="youtube-player" type="text/html" width="538" height="324" :src="`https://www.youtube.com/embed/${$nuxt.context.route.params.id}`" frameborder="0" allowfullscreen="true"></iframe>
 9 |       <Footer />
10 |     </div>
11 |   </div>
12 | </template>
13 | <style scoped>
14 | .youtube-player{
15 |   display: block;
16 | }
17 | </style>
18 | 
19 | <script>
20 | export default {
21 |   head: {
22 |     title: 'youtube player'
23 |   },
24 | }
25 | </script>


--------------------------------------------------------------------------------
/components/TopicList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <table cellspacing="0">
 4 |       <thead>
 5 |         <tr>
 6 |           <th class="tcl" scope="col">Topic</th>
 7 |           <th class="tc2" scope="col">Replies</th>
 8 |           <th class="tcr" scope="col">Last Post</th>
 9 |         </tr>
10 |       </thead>
11 |       <tbody>
12 |         <TopicListItem v-for="topic in topics" :key="topic.id" :topic="topic" />
13 |       </tbody>
14 |     </table>
15 |     <button @click="$emit('loadMore')" class="load-more" v-if="showLoadMore">Load More</button>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   props: ["topics", "showLoadMore"],
22 | };
23 | </script>
24 | 
25 | <style scoped>
26 | table {
27 |   width: 100%;
28 | }
29 | 
30 | thead tr th {
31 |   background: var(--table-stripe);
32 |   padding: 5px;
33 |   border-top-left-radius: 5px;
34 |   border-top-right-radius: 5px;
35 |   border-style: solid;
36 |   border-width: 1px;
37 |   border-color: var(--input-border);
38 | }
39 | 
40 | .load-more {
41 |   margin-top: 20px;
42 | }
43 | </style>


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/---bug-report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: "\U0001F41B bug report"
 3 | about: are you facing an issue with ocular or my ocular? if so this is the template
 4 |   for you.
 5 | title: ''
 6 | labels: bug
 7 | assignees: ''
 8 | 
 9 | ---
10 | 
11 | **Describe the bug**
12 | A clear and concise description of what the bug is.
13 | 
14 | **To Reproduce**
15 | Steps to reproduce the behavior:
16 | 1. Go to '...'
17 | 2. Click on '....'
18 | 3. Scroll down to '....'
19 | 4. See error
20 | 
21 | **Expected behavior**
22 | A clear and concise description of what you expected to happen.
23 | 
24 | **Screenshots**
25 | If applicable, add screenshots to help explain your problem.
26 | 
27 | **Desktop (please complete the following information):**
28 |  - OS: [e.g. iOS]
29 |  - Browser [e.g. chrome, safari]
30 |  - Version [e.g. 22]
31 | 
32 | **Smartphone (please complete the following information):**
33 |  - Device: [e.g. iPhone6]
34 |  - OS: [e.g. iOS8.1]
35 |  - Browser [e.g. stock browser, safari]
36 |  - Version [e.g. 22]
37 | 
38 | **Additional context**
39 | Add any other context about the problem here.
40 | 


--------------------------------------------------------------------------------
/components/Error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="{ error: true, fullwidth: fullwidth }">
 3 |     <h1>{{ error }}</h1>
 4 |     <p>{{ details }}</p>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     error: {
12 |       type: String,
13 |       default: "Error",
14 |     },
15 |     details: {
16 |       type: String,
17 |       default: "We hit an error we weren't prepared for.",
18 |     },
19 |     fullwidth: {
20 |       type: Boolean,
21 |       default: false,
22 |     },
23 |   },
24 | };
25 | </script>
26 | 
27 | <style>
28 | .error {
29 |   background-color: var(--input-background);
30 |   width: max-content;
31 |   padding: 20px 30px;
32 |   border-width: 1px;
33 |   border-style: solid;
34 |   border-color: var(--quote-border);
35 |   border-radius: 5px;
36 |   margin: 20px 0;
37 | }
38 | 
39 | p {
40 |   color: var(--footer-text);
41 | }
42 | 
43 | @media only screen and (max-width: 800px) {
44 |   .error {
45 |     width: 100%;
46 |     margin: auto;
47 |     margin-bottom: 20px;
48 |     text-align: center;
49 |   }
50 | }
51 | 
52 | .fullwidth {
53 |   width: 100%;
54 |   text-align: center;
55 | }
56 | </style>


--------------------------------------------------------------------------------
/components/TopicListItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <tr>
 3 |     <td class="title">
 4 |       <div>
 5 |         <span>
 6 |           <nuxt-link :to="`/topic/${topic.id}/`">{{ topic.title }}</nuxt-link>
 7 |         </span>
 8 |         <span>by {{ topic.first_post.username }}</span>
 9 |       </div>
10 |     </td>
11 |     <td class="replies">{{ topic.post_count }}</td>
12 |     <td>
13 |       <nuxt-link :to="`/post/${topic.last_post.id}`">
14 |         <TopicTime :time="topic.last_post.time.posted" />
15 |       </nuxt-link>
16 |       <span> by {{ topic.last_post.username }} </span>
17 |     </td>
18 |   </tr>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   props: ["topic"],
24 | };
25 | </script>
26 | 
27 | <style scoped>
28 | .replies {
29 |   text-align: center;
30 |   background: var(--table-stripe);
31 | }
32 | 
33 | .title {
34 |   padding-left: 20px;
35 |   padding-right: 20px;
36 | }
37 | 
38 | td,th {
39 |   border-style: solid;
40 |   border-width: 1px;
41 |   border-color: var(--input-border);
42 | }
43 | 
44 | td {
45 |   padding: 8px 6px;
46 | }
47 | 
48 | td span {
49 |   overflow-wrap: break-word;
50 |   word-break: break-word;
51 | }
52 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🔍 ocular
 2 | ocular is the search tool for the scratch forums.
 3 | 
 4 | it's up at [ocular.jeffalo.net](https://ocular.jeffalo.net)
 5 | 
 6 | ## behind the scenes
 7 | - data from [DatOneLefty's ScratchDB](https://scratchdb.lefty.one/)
 8 | - styling taken from [Maximouse](https://scratch.mit.edu/users/Maximouse)'s userstyle
 9 | - big inspiration from [forums.scratchstats.com](https://forums.scratchstats.com)
10 | - nuxt because SSR
11 | - hosted at home
12 | - and obviously scratch!
13 | 
14 | ## how to run
15 | 
16 | you will need your own my-ocular server if you don't want to use production data, otherwise you can use the production my-ocular server by setting the `BACKEND_URL` env variable to `https://my-ocular.jeffalo.net`. keep in mind you will get cors errors unless you run the nuxt server on `localhost` port `8000` or `8001`. you can change the nuxt server port via the `PORT` env variable.
17 | 
18 | ```bash
19 | # install dependencies
20 | $ npm install
21 | 
22 | # serve with hot reload at localhost:3000
23 | $ npm run dev
24 | 
25 | # build for production and launch server
26 | $ npm run build
27 | $ npm run start
28 | 
29 | # generate static project
30 | $ npm run generate
31 | ```
32 | 


--------------------------------------------------------------------------------
/pages/starred.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header :crumbs="[{link:'/starred', text:'starred'}]" />
 4 |     <div class="margined">
 5 |       <h1>starred posts</h1>
 6 |       <Loading v-if="$fetchState.pending" />
 7 |       <div v-if="!$fetchState.pending">
 8 |         <PostList :posts="posts" :loading="$fetchState.pending" @loadMore="loadMore()" :showLoadMore="showLoadMore"/>
 9 |       </div>
10 |       <Footer />
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   middleware: "authenticated",
18 |   head: {
19 |     title: 'starred posts'
20 |   },
21 |   data() {
22 |     return {
23 |       page: 0,
24 |       posts: {},
25 |       showLoadMore: false
26 |     };
27 |   },
28 |   methods: {
29 |     async loadMore() {
30 |       this.showLoadMore = false
31 |       this.page++;
32 | 
33 |       let res = await fetch(`${process.env.backendURL}/api/starred?page=${this.page}`, {
34 |           headers: {
35 |               Authorization: this.$auth.token()
36 |           }
37 |       });
38 |       let data = await res.json();
39 |       this.posts.push(...data);
40 | 
41 |       this.showLoadMore = true
42 |     },
43 |   },
44 |   async fetch() {
45 |     let res = await fetch(`${process.env.backendURL}/api/starred?page=${this.page}`, {
46 |         headers: {
47 |             Authorization: this.$auth.token()
48 |         }
49 |     });
50 |     let data = await res.json();
51 | 
52 |     this.posts = data;
53 | 
54 |     this.showLoadMore = true;
55 |   },
56 |   fetchOnServer: false,
57 | };
58 | </script>


--------------------------------------------------------------------------------
/components/Star.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a class="star-button" v-if="$auth.loggedIn()" :class="{ grayscale: !starred }" @click="star(post.id)">⭐</a>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: ['post'],
 8 |   data() {
 9 |     return {
10 |       starred: false,
11 |       stars: 0
12 |     };
13 |   },
14 |   methods: {
15 |     async star(id) {
16 |       // toggle star state
17 |       await this.$store.dispatch("auth/login", this.$auth.token()); // refresh user details
18 |       if(this.$auth.user()){
19 |         let res = await fetch(`${process.env.backendURL}/api/star/${id}`, {
20 |           method: "POST",
21 |           headers: {
22 |             Authorization: this.$auth.token(),
23 |             "Content-Type": "application/json",
24 |           },
25 |         });
26 |         let data = await res.json();
27 |         this.starred = data.starred;
28 |         // this.stars = data.stars;
29 |       }
30 |     },
31 |   },
32 |   async fetch() {
33 |     let res = await fetch(`${process.env.backendURL}/api/starred/${this.post.id}`, {
34 |       headers: {
35 |         Authorization: this.$auth.token(),
36 |         "Content-Type": "application/json",
37 |       },
38 |     });
39 |     let data = await res.json();
40 |     this.starred = data.starred;
41 |     // this.stars = data.stars;
42 |   },
43 |   fetchOnServer: false,
44 | };
45 | </script>
46 | 
47 | <style scoped>
48 | .star-button{
49 |   font-weight: normal;
50 |   cursor: pointer;
51 |   user-select: none;
52 | }
53 | 
54 | .star-button.grayscale{
55 |   filter: grayscale()
56 | }
57 | </style>


--------------------------------------------------------------------------------
/pages/docs/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header
 4 |       :crumbs="[{link: '/docs', text:'docs'}, {link: page.path, text: page.headertitle || page.title}]"
 5 |     />
 6 |     <div class="margined">
 7 |       <h1>{{ page.title }}</h1>
 8 |       <div class="table" v-if="page.toc.length > 0">
 9 |         <h3>table of contents: </h3>
10 |         <ul>
11 |           <li
12 |             v-for="link of page.toc"
13 |             :key="link.id"
14 |             :class="{ toc2: link.depth === 2, toc3: link.depth === 3 }">
15 | 
16 |             <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
17 |           </li>
18 |         </ul>
19 |       </div>
20 |       <nuxt-content :document="page" />
21 |       <Footer />
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | export default {
28 |   head() {
29 |     return {
30 |       title: this.page.title,
31 |     };
32 |   },
33 |   async asyncData({ $content, params, error }) {
34 |     const slug = params.slug || "index";
35 |     const page = await $content('docs', slug)
36 |       .fetch()
37 |       .catch((err) => {
38 |         error({ statusCode: 404, message: "This page could not be found" });
39 |       });
40 | 
41 |     return {
42 |       page,
43 |     };
44 |   },
45 | };
46 | </script>
47 | 
48 | <style scoped>
49 | .table {
50 |   margin: 12px 0;
51 |   padding: 2px 18px;
52 |   border-style: solid;
53 |   border-width: 1px;
54 |   border-color: var(--quote-border);
55 |   background-color: var(--quote-background);
56 | }
57 | 
58 | .toc2 {
59 |     margin-left: 5px;
60 | }
61 | 
62 | .toc3 {
63 |     margin-left: 40px;
64 | }
65 | </style>


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | const cookie = process.server ? require('cookie') : undefined
 2 | 
 3 | export const actions = {
 4 |     async nuxtServerInit({ commit }, { req, res }) {
 5 |         // handle auth stuff
 6 | 
 7 |         let token = null
 8 |         if (req.headers.cookie) {
 9 |             const parsed = cookie.parse(req.headers.cookie)
10 |             try {
11 |                 token = parsed['my-ocular-token']
12 |             } catch (error) {
13 |                 console.log(error)
14 |             }
15 |         }
16 |         // if the cookie exists, then get user data
17 |         if (token !== null && token !== false) {
18 |             await fetch(`${process.env.backendURL}/auth/me`, {
19 |                 headers: {
20 |                     'Authorization': token
21 |                 }
22 |             })
23 |                 .then(res => res.json())
24 |                 .then((data) => {
25 |                     if (data.error) {
26 |                         // if theres an error (token invalid or user deleted, log the user out and remove the token)
27 |                         commit('auth/reset_user', null)
28 |                         commit('auth/set_token', null)
29 |                         res.setHeader('Set-Cookie', [`my-ocular-token=false; expires=Thu, 01 Jan 1970 00:00:00 GMT`])
30 |                     } else {
31 |                         // if data, save to store
32 |                         commit('auth/set_user', data)
33 |                         commit('auth/set_token', token)
34 |                     }
35 |                 }).catch((error) => {
36 |                     console.warn(error)
37 |                 })
38 |         }
39 |     }
40 | }


--------------------------------------------------------------------------------
/pages/post/_post/embed.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Loading v-if="$fetchState.pending" />
 4 |     <Post v-if="!$fetchState.pending && post && !error" v-bind:post="post" />
 5 |     <Error
 6 |       v-if="error"
 7 |       :error="error.title"
 8 |       :details="error.details"
 9 |       :fullwidth="true"
10 |     />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   head() {
17 |     return {
18 |       title: this.post?.content?.bb
19 |         ? `${this.post.username}: "${this.post.content.bb}"`
20 |         : `post id ${this.id}`,
21 |     };
22 |   },
23 |   data() {
24 |     return {
25 |       id: this.$route.params.post,
26 |       post: {
27 |         time: {},
28 |         content: {},
29 |         parser: {},
30 |         topic: {},
31 |       },
32 |       error: null,
33 |     };
34 |   },
35 |   async fetch() {
36 |     var postRes = await fetch(
37 |       `https://scratchdb.lefty.one/search/indexes/forum_posts/search?filter=id=${this.id}`,
38 |       {
39 |         headers: {
40 |           authorization:
41 |             "Bearer 3396f61ef5b02abf801096be5f0b0ee620de304dd92fc6045aeb99539cd0bec4",
42 |         },
43 |       }
44 |     ).catch((err) => {
45 |       this.error = {
46 |         title: "Network Error",
47 |         details: "Failed to connect to ScratchDB.",
48 |       };
49 |     });
50 |     var postData = await postRes.json();
51 | 
52 |     if (!postData?.hits[0]) {
53 |       return (this.error = {
54 |         title: "Post not found",
55 |         details: "The requested post could not be found.",
56 |       });
57 |     }
58 | 
59 |     this.post = postData.hits[0];
60 |   },
61 |   fetchOnServer: false,
62 | };
63 | </script>
64 | 
65 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 
92 | # update.sh file
93 | update.sh


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header :crumbs="[{link:'/login', text:'login'}]" />
 4 |     <div class="margined">
 5 |       <h1>login</h1>
 6 |       <div :class="`alert error`" v-if="$route.query.error">
 7 |         {{ errorMessages[$route.query.error] }}
 8 |       </div>
 9 |       <p>
10 |         logging into ocular will allow you to customize your profile, save posts and more! if you do not have an account, this will create one for you
11 |       </p>
12 |       <button @click="login"><Emoji>🐈</Emoji> login with scratch</button>
13 |       <Footer />
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   middleware: 'notauthenticated',
21 |   head: {
22 |     title: 'login'
23 |   },
24 |   data() {
25 |     return {
26 |       username: "",
27 |       errorMessages: [
28 |       'failed fluffyscratch auth: keep in mind login currently does not support new scratchers.',
29 |       'somehow you authenticated correctly but your scratch account couldnt be found. contact jeffalo.'
30 |       ],
31 |       usernames: ['Jeffalo', 'CatsUnited', 'Za-Chary', 'fdreerf', 'mybearworld', '-InsanityGames-', 'Paddle2See', 'Harakou', 'leahcimto', 'WindOctahedron', 'DatOneLefty', 'Virus6120', 'GrahamSH']
32 |       // just some random usernames to make stuff more lively. TODO: api endpoint on my-ocular for random user?
33 |     };
34 |   },
35 |   computed: {
36 |     randomUsername () {
37 |       return this.usernames[Math.floor(Math.random() * this.usernames.length)];
38 |     }
39 |   },
40 |   methods: {
41 |     async login() {
42 |       window.location.href = `${process.env.backendURL}/auth/begin?user=${this.username}`;
43 |     },
44 |   },
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/store/counts.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |     users: []
 3 | })
 4 | 
 5 | let findUser = (state, name) => {
 6 |     return state.users.find(user => user.name.toLowerCase() == name.toLowerCase())
 7 | }
 8 | 
 9 | export const actions = {
10 |     async loadUser({ state, commit }, { name }) {
11 |         let found = findUser(state, name)
12 |         if (found && !found.loading) {
13 |             // its ready, just send it
14 |             return found.count
15 |         }
16 | 
17 |         if (found && found.loading) {
18 |             // its loading, return the promise
19 |             return found.promise
20 |         }
21 | 
22 |         // this is the first time
23 | 
24 |         let promise = new Promise((resolve, reject) => {
25 |             fetch("https://scratchdb.lefty.one/v3/forum/user/info/" + name)
26 |             .then((res) => res.json())
27 |             .then(data => {
28 |                 resolve(data.counts.total.count)
29 |                 commit('setUser', { name, count: data.counts.total.count, promise, loading: false })
30 |             })
31 |           });          
32 | 
33 | 
34 |         commit('initUser', { name, promise, loading: true })
35 | 
36 |         return promise
37 |     }
38 | }
39 | 
40 | export const mutations = {
41 |     setUser(state, { name, count, promise, loading }) {
42 |         let found = findUser(state, name)
43 |         if (found) {
44 |             found = { name, count, promise, loading }
45 |         } else {
46 |             state.users.push({ name, count, promise, loading })
47 |         }
48 |     },
49 |     initUser(state, { name, promise } ) {
50 |         let found = findUser(state, name)
51 |         if (!found) {
52 |             state.users.push({ name, count: 0, promise, loading: true })
53 |         }
54 |     }
55 | }


--------------------------------------------------------------------------------
/pages/post/_post/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header :crumbs="[{ link: `/post/${id}`, text: 'post' }]" />
 4 |     <div class="margined">
 5 |       <Loading v-if="$fetchState.pending" />
 6 |       <Post v-if="!$fetchState.pending && post && !error" v-bind:post="post" />
 7 |       <Error
 8 |         v-if="error"
 9 |         :error="error.title"
10 |         :details="error.details"
11 |         :fullwidth="true"
12 |       />
13 |       <Footer />
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   head() {
21 |     return {
22 |       title: this.post?.content?.bb
23 |         ? `${this.post.username}: "${this.post.content.bb}"`
24 |         : `post id ${this.id}`,
25 |     };
26 |   },
27 |   data() {
28 |     return {
29 |       id: this.$route.params.post,
30 |       post: {
31 |         time: {},
32 |         content: {},
33 |         parser: {},
34 |         topic: {},
35 |       },
36 |       error: null,
37 |     };
38 |   },
39 |   async fetch() {
40 |     var postRes = await fetch(
41 |       `https://scratchdb.lefty.one/search/indexes/forum_posts/search?filter=id=${this.id}`,
42 |       {
43 |         headers: {
44 |           authorization:
45 |             "Bearer 3396f61ef5b02abf801096be5f0b0ee620de304dd92fc6045aeb99539cd0bec4",
46 |         },
47 |       }
48 |     ).catch((err) => {
49 |       this.error = {
50 |         title: "Network Error",
51 |         details: "Failed to connect to ScratchDB.",
52 |       };
53 |     });
54 |     var postData = await postRes.json();
55 | 
56 |     if (!postData?.hits[0]) {
57 |       return (this.error = {
58 |         title: "Post not found",
59 |         details: "The requested post could not be found.",
60 |       });
61 |     }
62 | 
63 |     this.post = postData.hits[0];
64 |   },
65 |   fetchOnServer: false,
66 | };
67 | </script>
68 | 
69 | 


--------------------------------------------------------------------------------
/content/docs/privacy.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: privacy
 3 | description: ocular privacy stuff.
 4 | ---
 5 | 
 6 | *TLDR: ocular only collects basic analytics data, registered user data and data that powers features such as reactions and starring. I don't want your private info.*
 7 | 
 8 | ocular uses a number of services to provide various tools to enhance the experience. These services may collect and or use data according to their privacy policies.
 9 | 
10 | - To collect basic usage analytics, ocular uses a self-hosted instance of [Plausible Analytics](https://plausible.io). You can find out more about what kind of information is collected at the [Plausible Analytics website](https://plausible.io).
11 | 
12 | - ocular uses [CloudFlare](https://cloudflare.com) to proxy requests, this keeps the site running smoothly and allows me to host ocular right from my home.
13 | 
14 | - Data about Scratch forum posts comes from [ScratchDB](https://scratchdb.lefty.one), and Scratch based authentication is handled by [Scratch Auth](https://auth.itinerary.eu.org/). All other Scratch data comes straight from [the official Scratch API](https://github.com/llk/scratch-rest-api).
15 | 
16 | - ocular does not store any Scratch data. ocular's purpose is to present data from the APIs listed above. Outside of analytics, ocular only stores registered user data, and data to power reactions and starring. User accounts are not required to use the base functionality of ocular.
17 | 
18 | - ocular (and my other projects) are hosted on a server running NGINX. For security purposes, NGINX logs may include IP addresses.
19 | 
20 | - If you would like data deletion from ocular, contact me at `jeffalobob at gmail`
21 | 
22 | - For external services, please consult their sites for information about how data is stored and used, if you have any questions about your privacy when using ocular feel free to contact me about it.
23 | 


--------------------------------------------------------------------------------
/store/statuses.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |     users: []
 3 | })
 4 | 
 5 | let findUser = (state, name) => {
 6 |     return state.users.find(user => user.name.toLowerCase() == name.toLowerCase())
 7 | }
 8 | 
 9 | export const actions = {
10 |     async loadUser({ state, commit }, { name }) {
11 |         let found = findUser(state, name)
12 |         if (found && !found.loading) {
13 |             // its ready, just send it
14 |             return found.data
15 |         }
16 | 
17 |         if (found && found.loading) {
18 |             // its loading, return the promise
19 |             return found.promise
20 |         }
21 | 
22 |         // this is the first time
23 | 
24 |         let promise = new Promise((resolve, reject) => {
25 |             fetch(`${process.env.backendURL}/api/user/` + name)
26 |             .then((res) => res.json())
27 |             .then(data => {
28 |                 resolve(data)
29 |                 commit('setUser', { name, data, promise, loading: false })
30 |             })
31 |           });          
32 | 
33 | 
34 |         commit('initUser', { name, promise, loading: true })
35 | 
36 |         return promise
37 |     }
38 | }
39 | 
40 | export const mutations = {
41 |     setUser(state, { name, data, promise, loading }) {
42 |         let found = findUser(state, name)
43 |         if (found) {
44 |             found = { name, data, promise, loading }
45 |         } else {
46 |             state.users.push({ name, data, promise, loading })
47 |         }
48 |     },
49 |     removeUser(state, { name }) {
50 |         state.users = state.users.filter(user => {
51 |             return user.name !== name;
52 |         })
53 |     },
54 |     initUser(state, { name, promise } ) {
55 |         let found = findUser(state, name)
56 |         if (!found) {
57 |             state.users.push({ name, data: {}, promise, loading: true })
58 |         }
59 |     }
60 | }


--------------------------------------------------------------------------------
/pages/browse/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header :crumbs="[{ link: `/browse/${id}`, text: 'browse' }]" />
 4 |     <div class="margined">
 5 |       <h1>browse topics</h1>
 6 |       <p>
 7 |         note: this feature is in beta and may change at any time. also it's a
 8 |         bit slow due to scratchdb things.
 9 |       </p>
10 |       <ForumSelector :selected="id" />
11 |       <Loading v-if="$fetchState.pending" />
12 |       <Error v-if="error" :error="error.title" :details="error.details" />
13 |       <TopicList
14 |         :topics="topics"
15 |         v-if="!$fetchState.pending && !error"
16 |         :showLoadMore="showLoadMore"
17 |         @loadMore="loadMore()"
18 |       />
19 |       <Footer />
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import map from "@/assets/category-map.js";
26 | 
27 | export default {
28 |   data() {
29 |     return {
30 |       id: this.$route.params.id,
31 |       category: "",
32 |       topics: [],
33 |       page: 0,
34 |       showLoadMore: false,
35 |       error: null,
36 |     };
37 |   },
38 |   async asyncData({ params, error }) {
39 |     const category = map.get(params.id);
40 |     if (!category) error("unknown category");
41 |     return { category };
42 |   },
43 |   methods: {
44 |     async loadMore() {
45 |       this.page++;
46 |       await this.fetchTopics(this.page);
47 |     },
48 |     async fetchTopics(page) {
49 |       return new Promise(async (resolve, reject) => {
50 |         this.showLoadMore = false;
51 |         let topicListRes = await fetch(
52 |           `https://scratchdb.lefty.one/v3/forum/category/topics/${this.category}/${page}/?detail=2`
53 |         ).catch((err) => {
54 |           this.error = {
55 |             title: "Network Error",
56 |             details: "Failed to connect to ScratchDB.",
57 |           };
58 |           resolve();
59 |         });
60 |         let topicList = await topicListRes.json();
61 | 
62 |         this.topics.push(...topicList);
63 | 
64 |         this.showLoadMore = true;
65 |         resolve();
66 |       });
67 |     },
68 |   },
69 |   async fetch() {
70 |     await this.fetchTopics(this.page);
71 |   },
72 |   fetchOnServer: false,
73 | };
74 | </script>
75 | 


--------------------------------------------------------------------------------
/store/auth.js:
--------------------------------------------------------------------------------
 1 | import cookies from 'js-cookie'
 2 | 
 3 | export const state = () => ({
 4 |     user: null,
 5 |     token: null
 6 | })
 7 | 
 8 | export const mutations = {
 9 |     set_user(store, data) {
10 |         store.user = data
11 |     },
12 |     set_token(store, data) {
13 |         store.token = data
14 |     },
15 |     reset_user(store) {
16 |         store.user = null
17 |     },
18 |     reset_token(store, data) {
19 |         store.token = null
20 |     }
21 | }
22 | 
23 | export const actions = {
24 |     async login({ commit, dispatch }, token) { // this is also used as a general purpose "refresh user details" in middlewares and dashboard.vue
25 |         return new Promise((resolve, reject) => {
26 |             fetch(`${process.env.backendURL}/auth/me`, {
27 |                 headers: {
28 |                     Authorization: token
29 |                 }
30 |             })
31 |             .then(res => res.json())
32 |             .then(data => {
33 |                 if (data.error) {
34 |                     // console.warn(data.error)
35 |                     dispatch('logout')
36 |                     resolve(data.error) // i could use reject but i'd need to handle it everywhere and i dont feel like doing that
37 |                 } else {
38 |                     commit('set_user', data)
39 |                     commit('set_token', token)
40 |                     resolve(data)
41 |                 }
42 |             })
43 |         })
44 |     },
45 |     async logout({ commit }) {
46 |         return new Promise(async (resolve, reject) => {
47 |             let token = cookies.get('my-ocular-token')
48 |             let res = await fetch(`${process.env.backendURL}/auth/remove/?token=${token}`, {
49 |                 method: "POST"
50 |             })
51 |             let data = await res.json()
52 |             
53 |             cookies.remove('my-ocular-token')
54 |             commit('reset_user')
55 |             commit('reset_token')
56 | 
57 |             if(data.error){
58 |                 resolve(data.error) // i could use reject but i'd need to handle it everywhere and i dont feel like doing that
59 |             } else {
60 |                 resolve('logged out')
61 |             }
62 |         })
63 |     }
64 | }


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer>
 3 |     <a href="https://scratchdb.lefty.one/">ocular gets data from ScratchDB, which is currently down due to data loss. click here for more information.</a>
 4 |     <br>
 5 |     ocular is an open source project, with styling aspects inspired by the Scratch Foundation<br />
 6 |     API and data from
 7 |     <a class="footer-link" href="https://scratchdb.lefty.one/">@DatOneLefty</a>
 8 |     | authentication api from
 9 |     <a class="footer-link" href="https://auth.itinerary.eu.org/">@Looky1173</a>
10 |     <br /><br />this forum viewer tool falls under Creative Commons
11 |     Attribution-ShareAlike 2.0 license <br /><br />
12 |     <nuxt-link class="footer-link" to="/docs/privacy">privacy</nuxt-link>
13 |     | <button class="footer-link" @click="toggleTheme()"><Emoji>🎨</Emoji> theme ({{ $colorMode.preference }})</button>
14 |     <span v-if="$colorMode.preference == 'catsunited'">|</span>
15 |     <button class="footer-link full" v-if="$colorMode.preference == 'catsunited'" @click="dog()">cat</button>
16 |     <img v-if="dogURL" :src="dogURL" style="display: block; margin-top: 10px;" width="200">
17 |   </footer>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   data() {
23 |     return {
24 |       dogURL: ""
25 |     }
26 |   },
27 |   methods: {
28 |     toggleTheme() {
29 |       let current = this.$colorMode.preference
30 |       let themes = ['system', 'light', 'purple', 'dark', 'dark-purple', 'gray', 'scratch', 'catsunited', 'classic-dark']
31 |       let switchTo = themes[themes.indexOf(current)+1]
32 |       this.$colorMode.preference = switchTo || 'system'
33 |     },
34 |     async dog() {
35 |       this.dogURL = ""
36 |       let dog = await fetch('https://dog.ceo/api/breeds/image/random').then(res => res.json())
37 | 
38 |       this.dogURL = dog.message
39 |     }
40 |   }
41 | }
42 | </script>
43 | 
44 | <style scoped>
45 | footer {
46 |   padding-top: 10px;
47 |   margin-top: 10px;
48 |   color: var(--footer-text);
49 |   padding-bottom: 10px;
50 | }
51 | .footer-link {
52 |   color: var(--footer-text);
53 |   /* reset for buttons */
54 |   font-weight: bold;
55 |   background: none;
56 |   border: none;
57 |   border-radius: 0;
58 |   padding: 0;
59 |   margin: 0;
60 |   line-height: normal;
61 |   cursor: pointer;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // Global page headers (https://go.nuxtjs.dev/config-head)
 3 |   head: {
 4 |     titleTemplate: (titleChunk) => {
 5 |       return titleChunk ? `ocular | ${titleChunk}` : 'ocular';
 6 |     },
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: 'scratch forum search and more!' }
11 |     ],
12 |     script: [
13 |       {
14 |         src: '/lib/scratchblocks.min.js'
15 |       }
16 |     ],
17 |     link: [
18 |       { rel: 'icon', type: 'image/x-icon', href: '/icon.svg' }
19 |     ]
20 |   },
21 | 
22 |   // Global CSS (https://go.nuxtjs.dev/config-css)
23 |   css: [
24 |   ],
25 | 
26 |   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
27 |   plugins: ['~/plugins/auth.js', { src: '~/plugins/vue-good-table', ssr: false }, '~/plugins/vue-tooltip.js'],
28 | 
29 |   // Auto import components (https://go.nuxtjs.dev/config-components)
30 |   components: true,
31 | 
32 |   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
33 |   buildModules: [
34 |     '@nuxtjs/color-mode'
35 |   ],
36 | 
37 |   // Modules (https://go.nuxtjs.dev/config-modules)
38 |   modules: [
39 |     'vue-plausible',
40 |     '@nuxtjs/redirect-module',
41 |     '@nuxt/content'
42 |   ],
43 |   plausible: {
44 |     domain: 'ocular.jeffalo.net',
45 |     apiHost: 'https://analytics.jeffalo.net'
46 |   },
47 | 
48 |   redirect: [
49 |     { from: '^/discuss/(.*)$', to: '/$1' },
50 |     { from: '^/users/(.*)$', to: '/user/$1' },
51 |     { from: '^/@(.*)$', to: '/user/$1' },
52 |     { from: '^/u/(.*)$', to: '/user/$1' },
53 |     { from: '^/t/(.*)$', to: '/topic/$1' },
54 |     { from: '^/p/(.*)$', to: '/post/$1' },
55 |     { from: '^/privacy', to: '/docs/privacy' },
56 |     { from: '^/about', to: '/docs/about' },
57 |     { from: '^/admin', to: 'https://jeffalo.net/internal/admin/' }
58 |   ],
59 | 
60 |   env: {
61 |     backendURL: process.env.BACKEND_URL || 'http://localhost:8081'
62 |   },
63 | 
64 |   // Build Configuration (https://go.nuxtjs.dev/config-build)
65 |   build: {
66 |     transpile: ['vue-good-table']
67 |   },
68 | 
69 |   loading: {
70 |     color: 'white',
71 |     height: '2px'
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header />
 4 |     <div class="margined">
 5 |       <h1>ocular</h1>
 6 |       <p>scratch forum search and more!</p>
 7 |       <div class="grid">
 8 |         <!-- todo why is this grid smaller? -->
 9 |         <nuxt-link to="/search">
10 |           <div class="content"><span><Emoji>🔍</Emoji> search</span></div>
11 |         </nuxt-link>
12 |         <nuxt-link to="/browse">
13 |           <div class="content"><span><Emoji>🌐</Emoji> browse</span></div>
14 |         </nuxt-link>
15 |         <nuxt-link to="/dashboard">
16 |           <div class="content"><span><Emoji>💻</Emoji> dashboard</span></div>
17 |         </nuxt-link>
18 |         <nuxt-link to="/docs">
19 |           <div class="content"><span><Emoji>📜</Emoji> docs</span></div>
20 |         </nuxt-link>
21 |         <!-- 
22 |         <a href="stats.html">
23 |           <div class="content"><span>📊 stats</span></div>
24 |         </a>
25 |         <a href="live.html">
26 |           <div class="content"><span>🔴 live</span></div>
27 |         </a>
28 |         -->
29 |       </div>
30 |       <Footer />
31 |     </div>
32 |   </div>
33 | </template>
34 | <style scoped>
35 | .grid {
36 |   display: grid;
37 |   grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
38 |   grid-auto-rows: 1fr;
39 |   /*fade*/
40 |   animation-iteration-count: 1;
41 |   animation-fill-mode: forwards;
42 | }
43 | 
44 | .grid::before {
45 |   content: "";
46 |   width: 0;
47 |   padding-bottom: 100%;
48 |   grid-row: 1 / 1;
49 |   grid-column: 1 / 1;
50 | }
51 | 
52 | .grid > *:first-child {
53 |   grid-row: 1 / 1;
54 |   grid-column: 1 / 1;
55 | }
56 | 
57 | /* Just to make the grid visible */
58 | 
59 | .grid > * {
60 |   background: var(--brand);
61 |   margin: 1px;
62 |   background-position: center center;
63 |   background-size: cover;
64 | }
65 | 
66 | .content {
67 |   width: 100%;
68 |   height: 100%;
69 |   display: flex;
70 |   justify-content: center;
71 |   align-items: center;
72 |   font-weight: bold;
73 |   cursor: pointer;
74 |   color: white;
75 |   font-size: 135%;
76 |   user-select: none;
77 |   transition: 125ms;
78 |   text-align: center;
79 | }
80 | 
81 | .content:hover {
82 |   backdrop-filter: brightness(0.75);
83 | }
84 | 
85 | .content:active {
86 |   backdrop-filter: brightness(0.5);
87 | }
88 | </style>


--------------------------------------------------------------------------------
/pages/confirm-login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header :crumbs="[{link:'/confirm-login', text:'login confirmation'}]"/>
 4 |     <div class="margined">
 5 |         <h1>login as {{name}}</h1>
 6 |         <img :src="`${backendURL}/api/user/${name}/picture`"
 7 |             width="50"
 8 |             height="50"
 9 |             class="confirm-pfp"
10 |         />
11 |         <p>logging in will allow you to customize your ocular profile, save posts for later and more</p>
12 |         <button @click="confirm">confirm</button>
13 |         <button class="deny-button" @click="deny">deny</button>
14 |       <Footer />
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import cookies from 'js-cookie'
21 | export default {
22 |     middleware: 'notauthenticated',
23 |     head: {
24 |         title: 'confirm login'
25 |     },
26 |     data() {
27 |         return {
28 |             name: '',
29 |             token: '',
30 |             oneTimeToken: this.$route.query.token,
31 |             backendURL: process.env.backendURL
32 |         }
33 |     },
34 |     methods: {
35 |         async confirm(){
36 |             cookies.set('my-ocular-token', this.token, { expires: new Date(253402300000000) })
37 |             await this.$store.dispatch('auth/login', this.token)
38 |             this.$router.push({
39 |                 path: '/'
40 |             })
41 |         },
42 |         async deny(){
43 |             let res = await fetch(`${process.env.backendURL}/auth/remove/?token=${this.token}`, {
44 |                 method: "POST"
45 |             })
46 |             let data = await res.json()
47 |             console.log(data)
48 |             if(data.error){
49 |                 console.warn(data.error)
50 |             } else {
51 |                 this.$router.push({
52 |                     path: '/'
53 |                 })
54 |             }
55 |         }
56 |     },
57 |     async asyncData({route, redirect, error}) {
58 |         let res = await fetch(`${process.env.backendURL}/auth/info/?token=${route.query.token}`)
59 |         let data = await res.json()
60 |         if(data.error) {
61 |             error(`error: ${data.error}`)
62 |             //redirect('/')
63 |         } else {
64 |             return {name: data.name, token: data.token}
65 |         }
66 |     }
67 | }
68 | </script>
69 | 
70 | <style scoped>
71 | .confirm-pfp{
72 |     border-radius: 5px;
73 | }
74 | .deny-button{
75 |     background-color: grey;
76 | }
77 | </style>


--------------------------------------------------------------------------------
/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bigheader">
 3 |     <div class="box-head">
 4 |         <h1 class="margined">
 5 |           <nuxt-link to="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon"><path d="M9.145 18.29c-5.042 0-9.145-4.102-9.145-9.145s4.103-9.145 9.145-9.145 9.145 4.103 9.145 9.145-4.102 9.145-9.145 9.145zm0-15.167c-3.321 0-6.022 2.702-6.022 6.022s2.702 6.022 6.022 6.022 6.023-2.702 6.023-6.022-2.702-6.022-6.023-6.022zm9.263 12.443c-.817 1.176-1.852 2.188-3.046 2.981l5.452 5.453 3.014-3.013-5.42-5.421z"></path></svg>
 6 |             ocular</nuxt-link>
 7 |             <span v-if="crumbs">
 8 |               <span v-for="crumb of crumbs" :key="crumb.link">
 9 |                 <span class="bread"> / </span>
10 |                 <nuxt-link :to="crumb.link">{{ crumb.text }}</nuxt-link>
11 |               </span>
12 |             </span>
13 |         </h1>
14 |         <div class="margined">
15 |           <nuxt-link to="/docs/about">about</nuxt-link> <span>|</span>
16 |           <a href="https://github.com/jeffalo/ocular" class="header-link">github</a> <span class="full">|</span>
17 |           <a href="https://scratchdb.lefty.one" class="header-link full">api and data from datonelefty</a>
18 |           <div v-if="$auth.loggedIn()" class="header-user">
19 |             <nuxt-link :to="`/user/${$auth.user().name}`">@{{ $auth.user().name }}</nuxt-link> <span>|</span> <nuxt-link :to="`/starred`">starred</nuxt-link> | <nuxt-link :to="`/dashboard`">dashboard</nuxt-link> | <a @click="logout()" class="logout">logout</a>
20 |           </div>
21 |         </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | <style scoped>
26 | .bigheader {
27 |   margin-bottom: 20px;
28 |   padding-top: 40px;
29 |   padding-bottom: 40px;
30 |   border: none;
31 |   border-radius: 0;
32 |   background: var(--brand);
33 |   color: white;
34 | }
35 | 
36 | .bigheader h1 {
37 |   font-size: 30px;
38 | }
39 | 
40 | .bigheader a {
41 |   color: white;
42 |   font-weight: bold;
43 | }
44 | 
45 | .icon {
46 |   fill: white;
47 | }
48 | 
49 | .bread {
50 |   font-weight: lighter;
51 | }
52 | 
53 | .header-user{
54 |   float: right
55 | }
56 | 
57 | .logout {
58 |   cursor: pointer;
59 | }
60 | </style>
61 | 
62 | <script>
63 | export default {
64 |   props: ['crumbs'],
65 |   methods: {
66 |     async logout() {
67 |       await this.$store.dispatch('auth/logout',)
68 | 
69 |       this.$router.push({
70 |         path: '/'
71 |       })
72 |     }
73 |   }
74 | }
75 | </script>
76 | 


--------------------------------------------------------------------------------
/assets/category-map.js:
--------------------------------------------------------------------------------
 1 | export default new Map(
 2 |     // i don't think you understand the pain i went through to create this list.. feel free to use it for whatever with credit (to jeffalo) though.
 3 |     [
 4 |         ["1", "Suggestions"],
 5 |         ["2", "Dustbin"],
 6 |         ["3", "Bugs and Glitches"],
 7 |         ["4", "Questions about Scratch"],
 8 |         ["5", "Announcements"],
 9 |         ["6", "New Scratchers"],
10 |         ["7", "Help With Scripts"],
11 |         ["8", "Show and Tell"],
12 |         ["9", "Project Ideas"],
13 |         ["10", "Collaboration"],
14 |         ["11", "Requests"],
15 |         ["12", "Moderators"],
16 |         ["13", "Deutsch"],
17 |         ["14", "Español"],
18 |         ["15", "Français"],
19 |         ["16", "中文"],
20 |         ["17", "Polski"],
21 |         ["18", "日本語"],
22 |         ["19", "Nederlands"],
23 |         ["20", "Português"],
24 |         ["21", "Italiano"],
25 |         ["22", "עברית"],
26 |         ["23", "한국어"],
27 |         ["24", "Norsk"],
28 |         ["25", "Türkçe"],
29 |         ["26", "Ελληνικά"],
30 |         ["27", "Pусский"],
31 |         ["28", "Translating Scratch"],
32 |         ["29", "Things I'm Making and Creating"],
33 |         ["30", "Things I'm Reading and Playing"],
34 |         ["31", "Advanced Topics"],
35 |         ["32", "Connecting to the Physical World"],
36 |         ["33", "Català"],
37 |         ["34", "Other Languages"],
38 |         ["35", "Mentors Forum"],
39 |         ["36", "Bahasa Indonesia"],
40 |         ["37", "Scratch Day 2014"],
41 |         ["38", "Spam Dustbin"],
42 |         ["39", "Scratch Helper Groups"],
43 |         ["40", "Camp Counselor Forum"],
44 |         ["41", "Extension Developer's Forum "],
45 |         ["42", "Scratch Stability Team Forum"],
46 |         // 43 returns 404
47 |         ["44", "Scratch Day 2015"],
48 |         // 45 returns 404
49 |         ["46", "Scratch Design Studio Forum "],
50 |         // 47 returns 404
51 |         ["48", "Developing Scratch Extensions"],
52 |         ["49", "Open Source Projects"],
53 |         ["50", "Welcoming Committee"],
54 |         ["51", "Community Blocks Forum"],
55 |         ["52", "Scratch Day 2016"],
56 |         // ["53", "[unknown to the rest of the world 😉]"],
57 |         ["54", "Scratch Day 2017"],
58 |         ["55", "Africa"],
59 |         ["56", "Scratch Day 2018"],
60 |         ["57", "Scratch 3.0 Beta"],
61 |         ["58", "Camp Counselors 2020"],
62 |         ["59", "فارسی"],
63 |         ["60", "Project Save & Level Codes"],
64 |         ["61", "April Fools Day - Suggest-Show-Question-Bugs-Help-Glitch-Tell-Etc"],
65 |     ]
66 | );
67 | 


--------------------------------------------------------------------------------
/components/ForumSelector.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="changeForum(selectedForum)">
 3 |     <select v-model="selectedForum">
 4 |       <optgroup label="Welcome to Scratch">
 5 |         <option value="5">Announcements</option>
 6 |         <option value="6">New Scratchers</option>
 7 |       </optgroup>
 8 |       <optgroup label="Making Scratch Projects">
 9 |         <option value="7">Help with Scripts</option>
10 |         <option value="8">Show and Tell</option>
11 |         <option value="9">Project Ideas</option>
12 |         <option value="10">Collaboration</option>
13 |         <option value="11">Requests</option>
14 |       </optgroup>
15 |       <optgroup label="About Scratch">
16 |         <option value="4">Questions about Scratch</option>
17 |         <option value="1">Suggestions</option>
18 |         <option value="3">Bugs and Glitches</option>
19 |         <option value="31">Advanced Topics</option>
20 |         <option value="32">Connecting to the Physical World</option>
21 |         <option value="48">Developing Scratch Extensions</option>
22 |         <option value="49">Open Source Projects</option>
23 |       </optgroup>
24 |       <optgroup label="Interests Beyond Scratch">
25 |         <option value="29">Things I’m Making and Creating</option>
26 |         <option value="30">Things I’m Reading and Playing</option>
27 |       </optgroup>
28 |       <optgroup label="Scratch Around the World">
29 |         <option value="55">Africa</option>
30 |         <option value="36">Bahasa Indonesia</option>
31 |         <option value="33">Català</option>
32 |         <option value="13">Deutsch</option>
33 |         <option value="26">Ελληνικά</option>
34 |         <option value="14">Español</option>
35 |         <option value="59">فارسی</option>
36 |         <option value="15">Français</option>
37 |         <option value="22">עברית</option>
38 |         <option value="23">한국어</option>
39 |         <option value="21">Italiano</option>
40 |         <option value="19">Nederlands</option>
41 |         <option value="18">日本語</option>
42 |         <option value="24">Norsk</option>
43 |         <option value="17">Polski</option>
44 |         <option value="20">Português</option>
45 |         <option value="27">Pусский</option>
46 |         <option value="25">Türkçe</option>
47 |         <option value="16">中文</option>
48 |         <option value="34">
49 |           Other Languages For languages not listed above
50 |         </option>
51 |         <option value="28">Translating Scratch</option>
52 |       </optgroup>
53 |     </select>
54 |     <button type="submit" class="form-button">go</button>
55 |   </form>
56 | </template>
57 | 
58 | <script>
59 | export default {
60 |   props: ["selected"],
61 |   data() {
62 |     return {
63 |       selectedForum: this.selected,
64 |     };
65 |   },
66 |   methods: {
67 |     changeForum(newID) {
68 |       this.$router.push({
69 |         path: `/browse/${newID}`,
70 |       });
71 |     },
72 |   },
73 | };
74 | </script>
75 | 
76 | <style scoped>
77 | select {
78 |   width: 50%;
79 | }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/pages/react/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <main class="margined">
 3 |         <div v-if="$auth.loggedIn()" v-show="!loading">
 4 |             are you sure you want to toggle reaction to <a :href="`https://scratch.mit.edu/discuss/post/${$route.params.id}`">{{ text }}</a> with "{{ $route.query.emoji }}"?
 5 |             <button autofocus @click="react($route.params.id, $route.query.emoji)">yes</button>
 6 |             <button @click="close()">no</button>
 7 |         </div>
 8 |         <div v-show="loading && !done">
 9 |             loading... this could take a second.
10 |         </div>
11 |         <div v-if="!$auth.loggedIn()">
12 |             please <a href="/login" target="_blank" rel="noopener noreferrer">login to ocular</a> to react to posts. come back when you're done. don't worry.. i'll wait.
13 |         </div>
14 |     </main>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |     data() {
20 |         return {
21 |             loading: false,
22 |             done: false
23 |         }
24 |     },
25 |     methods: {
26 |         async react(id, emoji) {
27 |             this.loading = true
28 |             await this.$store.dispatch("auth/login", this.$auth.token()); // refresh user details
29 |             if(this.$auth.user()){
30 |                 let res = await fetch(`${process.env.backendURL}/api/reactions/${id}`, {
31 |                     method: "POST",
32 |                     headers: {
33 |                         Authorization: this.$auth.token(),
34 |                         "Content-Type": "application/json",
35 |                     },
36 |                     body: JSON.stringify({
37 |                         emoji: emoji
38 |                     })
39 |                 });
40 |                 let data = await res.json();
41 |                 this.loading = false
42 |                 this.done = true
43 |                 if (!window.opener && !window.opener !== window) {
44 |                     // user is not in a popup
45 |                     this.$router.push({
46 |                         path: `/post/${this.$route.params.id}`
47 |                     })
48 |                 }
49 |                 if(data.error) {
50 |                     alert(data.error)
51 |                 } else {
52 |                     close()
53 |                 }
54 |             }
55 |         },
56 |         close() {
57 |             window.close()
58 |             if(!window.closed){
59 |                 alert('please close this window')
60 |             }
61 |         }
62 |     },
63 |     async asyncData({ route }) {
64 |         return {text: `post id ${route.params.id}`} // temporarily fix while scratchdb is down
65 |         let postData = await fetch(`https://scratchdb.lefty.one/v3/forum/post/info/${route.params.id}`).then(res=>res.json())
66 |         if(postData.username) {
67 |             return {text: `${postData.username}'s post`}
68 |         } else {
69 |             return {text: `post id ${route.params.id}`}
70 |         }
71 |     }
72 | }
73 | </script>
74 | 
75 | <style scoped>
76 | main {
77 |     padding: 10px
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/pages/banner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <Header :crumbs="[{ link: `/banner`, text: 'banner generator' }]" />
  4 |     <div class="margined">
  5 |       <h1>somewhat unnecessary banner generator</h1>
  6 |       <p>
  7 |         requires arial font installed for the end result to be accurate. thanks
  8 |         fdreerf for the numbers.
  9 |       </p>
 10 |       <hr />
 11 |       <h2>heading</h2>
 12 |       <input type="text" v-model="heading" @input="draw()" />
 13 |       <input type="text" v-model="headingSize" @input="draw()" />
 14 |       <input type="text" v-model="headingPos[0]" @input="draw()" />
 15 |       <input type="text" v-model="headingPos[1]" @input="draw()" />
 16 |       <hr />
 17 |       <h2>subtitle</h2>
 18 |       <input type="text" v-model="subtitle" @input="draw()" />
 19 |       <input type="text" v-model="subtitleSize" @input="draw()" />
 20 |       <input type="text" v-model="subtitlePos[0]" @input="draw()" />
 21 |       <input type="text" v-model="subtitlePos[1]" @input="draw()" />
 22 |       <hr />
 23 |       <h2>link</h2>
 24 |       <input type="text" v-model="link" @input="draw()" />
 25 |       <input type="text" v-model="linkSize" @input="draw()" />
 26 |       <input type="text" v-model="linkPos[0]" @input="draw()" />
 27 |       <input type="text" v-model="linkPos[1]" @input="draw()" />
 28 |       <hr />
 29 |       <canvas
 30 |         ref="canvas"
 31 |         width="1800"
 32 |         height="400"
 33 |         style="width: 90%"
 34 |       ></canvas>
 35 |       <br />
 36 |       download by right clicking
 37 |       <Footer />
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | import banner from "~/assets/banner-blank.png";
 44 | 
 45 | export default {
 46 |   data() {
 47 |     return {
 48 |       width: 0,
 49 |       height: 0,
 50 |       heading: "ocular",
 51 |       headingSize: "200pt",
 52 |       headingPos: [1764, 224],
 53 |       subtitle: "forum search, statistics and more",
 54 |       subtitleSize: "50pt",
 55 |       subtitlePos: [1720, 290],
 56 |       link: "ocular.jeffalo.net",
 57 |       linkSize: "30pt",
 58 |       linkPos: [1715, 340],
 59 |       canvas: null,
 60 |       image: null,
 61 |     };
 62 |   },
 63 |   methods: {
 64 |     draw() {
 65 |       let canvas = this.canvas;
 66 |       let bg = new Image();
 67 | 
 68 |       bg.onload = () => {
 69 |         canvas.fillStyle = "#0FBD8C";
 70 |         canvas.fillRect(0, 0, this.width, this.height);
 71 | 
 72 |         canvas.drawImage(bg, 0, 0);
 73 |         canvas.fillStyle = "white";
 74 | 
 75 |         // heading
 76 |         canvas.textAlign = "right";
 77 |         canvas.font = `bold ${this.headingSize} Arial`;
 78 |         canvas.fillText(this.heading, ...this.headingPos);
 79 | 
 80 |         // subtitle
 81 |         canvas.font = `italic ${this.subtitleSize} Arial`;
 82 |         canvas.fillText(this.subtitle, ...this.subtitlePos);
 83 | 
 84 |         // link
 85 |         canvas.font = `${this.linkSize} Arial`;
 86 |         canvas.fillText(this.link, ...this.linkPos);
 87 |       };
 88 |       bg.src = banner;
 89 |     },
 90 |   },
 91 |   mounted() {
 92 |     var canvas = this.$refs.canvas;
 93 |     var ctx = canvas.getContext("2d");
 94 | 
 95 |     this.width = canvas.width;
 96 |     this.height = canvas.height;
 97 |     this.canvas = ctx;
 98 | 
 99 |     this.draw();
100 |   },
101 | };
102 | </script>


--------------------------------------------------------------------------------
/pages/topic/_topic.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <Header :crumbs="[{ link: `/topic/${topic}`, text: 'topic' }]" />
  4 |     <div class="margined">
  5 |       <Loading v-if="$fetchState.pending" />
  6 |       <Error
  7 |         v-if="error"
  8 |         :error="error.title"
  9 |         :details="error.details"
 10 |         :fullwidth="true"
 11 |       />
 12 |       <div v-if="!$fetchState.pending">
 13 |         <div v-if="data.hits && data.hits[0]">
 14 |           <h1 style="display: inline-block">{{ data.hits[0].topic.title }}</h1>
 15 |           <p>
 16 |             id: <b>{{ data.hits[0].topic.id }}</b>
 17 |           </p>
 18 |           <p>
 19 |             category:
 20 |             <b
 21 |               ><nuxt-link :to="`/browse/${category}`">{{
 22 |                 data.hits[0].topic.category
 23 |               }}</nuxt-link></b
 24 |             >
 25 |           </p>
 26 |         </div>
 27 |         <PostList
 28 |           :posts="data.hits"
 29 |           :loading="$fetchState.pending"
 30 |           @loadMore="loadMore()"
 31 |           :showLoadMore="showLoadMore"
 32 |           :op="op"
 33 |         />
 34 |       </div>
 35 |       <Footer />
 36 |     </div>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import map from "@/assets/category-map.js";
 42 | 
 43 | function getKey(map, value) {
 44 |   // thanks https://stackoverflow.com/a/53313763/9918633
 45 |   return [...map].find(([key, val]) => val == value)[0];
 46 | }
 47 | 
 48 | export default {
 49 |   head() {
 50 |     return {
 51 |       title:
 52 |         this.data?.hits && this.data.hits[0]
 53 |           ? this.data.hits[0].topic.title
 54 |           : `topic id ${this.topic}`,
 55 |     };
 56 |   },
 57 |   data() {
 58 |     return {
 59 |       topic: this.$route.params.topic,
 60 |       page: 0,
 61 |       data: {},
 62 |       category: "",
 63 |       showLoadMore: false,
 64 |       error: null,
 65 |       op: "",
 66 |     };
 67 |   },
 68 |   methods: {
 69 |     async loadMore() {
 70 |       this.showLoadMore = false;
 71 |       this.page++;
 72 | 
 73 |       var postsRes = await fetch(
 74 |         `https://scratchdb.lefty.one/search/indexes/forum_posts/search?hitsPerPage=50&page=${
 75 |           this.page + 1
 76 |         }&sort=id:asc&filter=topic.id=${this.topic}`,
 77 |         {
 78 |           headers: {
 79 |             authorization:
 80 |               "Bearer 3396f61ef5b02abf801096be5f0b0ee620de304dd92fc6045aeb99539cd0bec4",
 81 |           },
 82 |         }
 83 |       ).catch((err) => {
 84 |         this.error = {
 85 |           title: "Network Error",
 86 |           details: "Failed to connect to ScratchDB.",
 87 |         };
 88 |       });
 89 |       var postData = await postsRes.json();
 90 |       this.data.hits.push(...postData.hits);
 91 | 
 92 |       this.showLoadMore = true;
 93 |     },
 94 |   },
 95 |   async fetch() {
 96 |     var postsRes = await fetch(
 97 |       `https://scratchdb.lefty.one/search/indexes/forum_posts/search?hitsPerPage=50&page=${
 98 |         this.page + 1
 99 |       }&sort=id:asc&filter=topic.id=${this.topic}`,
100 |       {
101 |         headers: {
102 |           authorization:
103 |             "Bearer 3396f61ef5b02abf801096be5f0b0ee620de304dd92fc6045aeb99539cd0bec4",
104 |         },
105 |       }
106 |     ).catch((err) => {
107 |       this.error = {
108 |         title: "Network Error",
109 |         details: "Failed to connect to ScratchDB.",
110 |       };
111 |     });
112 |     var postData = await postsRes.json();
113 | 
114 |     this.data = postData;
115 |     this.op = postData.hits[0].username;
116 |     this.category = getKey(map, postData.hits[0].topic.category); //get category id from name
117 |     this.showLoadMore = true;
118 |   },
119 |   fetchOnServer: false,
120 | };
121 | </script>
122 | 
123 | 


--------------------------------------------------------------------------------
/pages/user/_username.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <Header :crumbs="[{ link: `/user/${user}`, text: 'user' }]" />
  4 |     <div class="margined">
  5 |       <Loading v-if="$fetchState.pending" />
  6 |       <div v-if="!$fetchState.pending">
  7 |         <h1 class="user-name">{{ user }}</h1>
  8 |         <h3 class="view-scratch">
  9 |           <a
 10 |             :href="`https://scratch.mit.edu/users/${user}`"
 11 |             class="view-scratch"
 12 |             >scratch profile</a
 13 |           >
 14 |         </h3>
 15 |         <Status :user="user" class="user-status" />
 16 |         <details class="signature-spoiler">
 17 |           <summary>signature</summary>
 18 |           <div class="signature">
 19 |             <Render v-if="info.signature" :content="info.signature" />
 20 |           </div>
 21 |         </details>
 22 |         <h2>{{ user }}'s posts</h2>
 23 |         <PostList
 24 |           :posts="posts"
 25 |           :loading="$fetchState.pending"
 26 |           @loadMore="loadMore()"
 27 |           :showLoadMore="showLoadMore"
 28 |         />
 29 |       </div>
 30 |       <Footer />
 31 |     </div>
 32 |   </div>
 33 | </template>
 34 | 
 35 | <script>
 36 | export default {
 37 |   head() {
 38 |     return {
 39 |       title: `${this.user}'s scratch forum posts`,
 40 |     };
 41 |   },
 42 |   data() {
 43 |     return {
 44 |       user: this.$route.params.username,
 45 |       page: 0,
 46 |       posts: {},
 47 |       info: {},
 48 |       showLoadMore: false,
 49 |     };
 50 |   },
 51 |   methods: {
 52 |     async loadMore() {
 53 |       this.showLoadMore = false;
 54 |       this.page++;
 55 | 
 56 |       var postsRes = await fetch(
 57 |         `https://scratchdb.lefty.one/search/indexes/forum_posts/search?hitsPerPage=50&page=${
 58 |           this.page + 1
 59 |         }&sort=id:desc&filter=username=${this.user}`,
 60 |         {
 61 |           headers: {
 62 |             authorization:
 63 |               "Bearer 3396f61ef5b02abf801096be5f0b0ee620de304dd92fc6045aeb99539cd0bec4",
 64 |           },
 65 |         }
 66 |       ).catch((err) => {
 67 |         this.error = {
 68 |           title: "Network Error",
 69 |           details: "Failed to connect to ScratchDB.",
 70 |         };
 71 |       });
 72 |       var postData = await postsRes.json();
 73 |       this.posts.push(...postData.hits);
 74 | 
 75 |       this.showLoadMore = true;
 76 |     },
 77 |   },
 78 |   async fetch() {
 79 |     var postsRes = await fetch(
 80 |       `https://scratchdb.lefty.one/search/indexes/forum_posts/search?hitsPerPage=50&page=${
 81 |         this.page + 1
 82 |       }&sort=id:desc&filter=username=${this.user}`,
 83 |       {
 84 |         headers: {
 85 |           authorization:
 86 |             "Bearer 3396f61ef5b02abf801096be5f0b0ee620de304dd92fc6045aeb99539cd0bec4",
 87 |         },
 88 |       }
 89 |     ).catch((err) => {
 90 |       this.error = {
 91 |         title: "Network Error",
 92 |         details: "Failed to connect to ScratchDB.",
 93 |       };
 94 |     });
 95 |     var postData = await postsRes.json();
 96 | 
 97 |     this.posts = postData.hits;
 98 |     this.showLoadMore = true;
 99 |   },
100 |   fetchOnServer: false,
101 | };
102 | </script>
103 | 
104 | <style scoped>
105 | .signature-spoiler {
106 |   margin-bottom: 15px;
107 |   padding: 12px 20px;
108 |   border-style: solid;
109 |   border-width: 1px;
110 |   border-color: var(--quote-border);
111 |   background-color: var(--quote-background);
112 | }
113 | 
114 | .signature-spoiler summary {
115 |   cursor: pointer;
116 | }
117 | 
118 | .signature-spoiler .signature {
119 |   margin-top: 10px;
120 | }
121 | 
122 | .user-name {
123 |   display: inline-block;
124 | }
125 | 
126 | .user-status {
127 |   display: inline-block;
128 | }
129 | 
130 | .view-scratch {
131 |   float: right;
132 |   text-decoration: none;
133 |   display: inline-block;
134 | }
135 | </style>
136 | 
137 | 


--------------------------------------------------------------------------------
/content/docs/api.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: API documentation
  3 | headertitle: api
  4 | description: ocular api documentation.
  5 | ---
  6 | 
  7 | ocular's api is integrated into a [handful of scratch-related projects](/docs/gallery). that's pretty cool in my opinion.
  8 | 
  9 | the public ocular api is designed for retrieving data, not for setting it. in the future i might include some api token stuff, but that gets complicated and un-fun. please don't use the internal api endpoints (the ones not documented here) to update data automatically. it makes moderation harder.
 10 | 
 11 | all api endpoints should be assumed to be under `my-ocular.jeffalo.net` unless otherwise noted.
 12 | 
 13 | ## get an ocular user
 14 | 
 15 | make a GET request to `/api/user/:username`
 16 | 
 17 | you can use the query parameter `?noReplace=true` to retrieve raw status data (without replacing the elements described later)
 18 | 
 19 | ### example response
 20 | 
 21 | (from `https://my-ocular.jeffalo.net/api/user/Jeffalo`)
 22 | 
 23 | ```json
 24 | {
 25 |   "_id": "5fb91a89532f943b9046e3ba",
 26 |   "name": "Jeffalo",
 27 |   "status": "{joke}",
 28 |   "color": "#0fbd8c",
 29 |   "admin": true,
 30 |   "meta": {
 31 |     "updated": "2021-05-09T13:24:30.021Z",
 32 |     "updatedBy": "Jeffalo"
 33 |   }
 34 | }
 35 | ```
 36 | 
 37 | <div :class="`alert error`">
 38 |     the content of `status` is not sanitized against HTML. you are expected to do that yourself. in vanilla javascript, it is as simple as setting `innerText`, instead of `innerHTML`.
 39 | </div>
 40 | 
 41 | note that some users have less data stored for them. you should only ever assume that `name`, `status` and `color` exist.
 42 | 
 43 | ### example of how to display a status
 44 | 
 45 | <Status user="Jeffalo"></Status>
 46 | <br><br>
 47 | 
 48 | ## get reactions for a post
 49 | 
 50 | make a GET request to `/api/reactions/:post-id`
 51 | 
 52 | ### example response
 53 | 
 54 | (from `https://my-ocular.jeffalo.net/api/reactions/5213429`)
 55 | 
 56 | ```json
 57 | [
 58 |   {
 59 |     "emoji": "👍",
 60 |     "reactions": [
 61 |       
 62 |     ]
 63 |   },
 64 |   {
 65 |     "emoji": "👎",
 66 |     "reactions": [
 67 |       
 68 |     ]
 69 |   },
 70 |   {
 71 |     "emoji": "😄",
 72 |     "reactions": [
 73 |       
 74 |     ]
 75 |   },
 76 |   {
 77 |     "emoji": "🎉",
 78 |     "reactions": [
 79 |       
 80 |     ]
 81 |   },
 82 |   {
 83 |     "emoji": "😕",
 84 |     "reactions": [
 85 |       
 86 |     ]
 87 |   },
 88 |   {
 89 |     "emoji": "❤️",
 90 |     "reactions": [
 91 |       
 92 |     ]
 93 |   },
 94 |   {
 95 |     "emoji": "🚀",
 96 |     "reactions": [
 97 |       {
 98 |         "_id": "60981f3ba1422d902532f0da",
 99 |         "post": "5213429",
100 |         "user": "Jeffalo",
101 |         "emoji": "🚀"
102 |       }
103 |     ]
104 |   },
105 |   {
106 |     "emoji": "👀",
107 |     "reactions": [
108 |       
109 |     ]
110 |   }
111 | ]
112 | ```
113 | 
114 | ## prompt to set reactions for a post
115 | 
116 | this is a special page on `ocular.jeffalo.net`, it works well with the my-ocular endpoint to get reactions for a post
117 | 
118 | ### use it in your site
119 | 
120 | 1. open a popup for `https://ocular.jeffalo.net/react/:post-id?emoji=:emoji`
121 | 2. if you're using the my-ocular endpoint to get reactions, when the pop up is closed re-fetch the reactions.
122 | 
123 | ### example screenshot
124 | 
125 | (from from `https://ocular.jeffalo.net/react/5213429?emoji=🚀`)
126 | 
127 | ![screenshot of ocular reaction popup](/reaction-screenshot.png)
128 | 
129 | ## ocular status secrets
130 | 
131 | hey you! did you know you can include automatically updating elements to your ocular statuses? place one of these in your status make yourself look cool and knowledgeable!
132 | 
133 | - `{joke}` for a funny joke
134 | - `{total}` for the total amount of registered ocular users
135 | - `{count}` for your post count
136 | 
137 | ### bonus tip
138 | 
139 | you can escape these with a backslash `\` if you don't want them to be replaced
140 | 


--------------------------------------------------------------------------------
/components/Loading.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1>
  4 |       <div class="lds-hourglass"></div>
  5 |       loading...
  6 |     </h1>
  7 |     <i>did you know: {{ fact }}</i>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | export default {
 13 |   data() {
 14 |     const facts = [
 15 |       "gobo might have been the mascot for scratch",
 16 |       "the scratch team owns the domain scratch.team",
 17 |       'this is the third "did you know" message i have written',
 18 |       "there was a small window of time where you could backpack scratchblocks from the forums",
 19 |       'ocular was originally called "Jeffalo Post Viewer"',
 20 |       "according to all known laws of aviation there is no way a bee should be able to fly",
 21 |       "only cool people have an ocular statuses?",
 22 |       'the word "notch" was originally "oche" but people misheard it when others said "an oche"',
 23 |       "the scratch team can see your gender",
 24 |       'you cannot sign up to scratch with the name "qnb02mclepghwic9"',
 25 |       "scratch projects are never deleted unless specifically you ask the scratch team to",
 26 |       "it is currently 9:51 while i write this",
 27 |       "scratch owns the domain scratch.pizza",
 28 |       "scratch owns the domain scratch.love",
 29 |       "We are experiencing a disruption with email delivery. If you are not receiving emails from us, please try after 8am EST.",
 30 |       "backpack.scratch.mit.edu has a funny ghost",
 31 |       "download.scratch.mit.edu says Scratch On!",
 32 |       "downloads.scratch.mit.edu has a one of a kind error page",
 33 |       "downloads.scratch.ly just says No",
 34 |       "projects.scratch.mit.edu has an easter egg in the HTTP response headers",
 35 |       "during scratch 2's development there was a built in scrolling system for projects",
 36 |       "scratch has a discussion forum",
 37 |       "archbtw uses arch btw",
 38 |       'scratch has some code for an unused "disable studio notifications" button',
 39 |       "each of gobo's friends names come from the metric prefix for powers of 10",
 40 |       "today is probably someone's birthday on scratch",
 41 |       "ocular",
 42 |       "ocular is currently loading",
 43 |       "the first scratch project was id 104, everything with a lower id was added later",
 44 |       "jeffalo's real name is not actually jeff or anything similar",
 45 |       "this isnt a did you know message",
 46 |       "i am running out of trivia",
 47 |       "the scratch wiki has a wacky domain name",
 48 |       "the scratch team's admin panel may have at some point had a template specifically for fnaf project alerts",
 49 |       "jeffalo did not write this message",
 50 |       "scratchdb might stand for scratch donut buffet",
 51 |       "jeffalo starts with a letter",
 52 |       "ocular statuses are displayed on a variety of websites",
 53 |       "any scratch url starting https://scratch.mit.edu/go leads to a 403",
 54 |       'you can no longer sign up to scratch with the name "jeffalo"',
 55 |       "when scratchdb is down, ocular may not work",
 56 |       "you are reading this, or maybe not",
 57 |       "the",
 58 |       "ocular uses vue",
 59 |       "no",
 60 |       "the word ocular has three vowels and three consonants",
 61 |       "you can't spell ocular without u",
 62 |       "the word ocular is related to vision",
 63 |       "ocular's API is in a separate repository from the rest of ocular",
 64 |       "there is a svelte version of ocular that is currently unreleased",
 65 |       "i wrote this at 2:22 PM",
 66 |       "ocular is at least a year old",
 67 |       "ocular's privacy policy is something you should read",
 68 |       "there are a few people contributing to ocular's open source code",
 69 |       '"coural" is an anagram of "ocular"',
 70 |       "ocular works on obscure platforms, such as watchOS (ALTHOUGH THIS IS UNSUPPORTED)",
 71 |     ];
 72 |     return {
 73 |       fact: facts[Math.floor(Math.random() * facts.length)],
 74 |     };
 75 |   },
 76 | };
 77 | </script>
 78 | 
 79 | <style scoped>
 80 | .lds-hourglass {
 81 |   display: inline-block;
 82 |   position: relative;
 83 |   width: 50px;
 84 |   height: 35px;
 85 | }
 86 | .lds-hourglass:after {
 87 |   content: " ";
 88 |   display: block;
 89 |   border-radius: 50%;
 90 |   width: 0;
 91 |   height: 0;
 92 |   margin: 8px;
 93 |   box-sizing: border-box;
 94 |   border: 15px solid var(--brand);
 95 |   border-color: var(--brand) transparent var(--brand) transparent;
 96 |   animation: lds-hourglass 1.25s infinite;
 97 | }
 98 | @keyframes lds-hourglass {
 99 |   0% {
100 |     transform: rotate(0);
101 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
102 |   }
103 |   50% {
104 |     transform: rotate(900deg);
105 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
106 |   }
107 |   100% {
108 |     transform: rotate(1800deg);
109 |   }
110 | }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/components/Post.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="post">
  3 |     <div class="header">
  4 |       <PostTime :time="post.time_posted" :linkid="post.id" />
  5 |       <nuxt-link :to="`/topic/${post.topic.id}`" class="topic-link">{{
  6 |         post.topic.title
  7 |       }}</nuxt-link>
  8 |       <a
  9 |         :href="`https://scratch.mit.edu/discuss/post/${post.id}`"
 10 |         class="view-scratch"
 11 |         >view on scratch</a
 12 |       >
 13 |     </div>
 14 |     <div class="post-wrap">
 15 |       <section class="main-content">
 16 |         <Render class="post-content" :content="post.content" />
 17 |         <p v-if="post.time_last_edited" class="last-edited">
 18 |           Last edited by {{ post.last_edited_by }} ({{ post.time_last_edited }})
 19 |         </p>
 20 |         <div class="post-footer">
 21 |           <ReactionButtons :post="post" /> |
 22 |           <span v-if="$auth.loggedIn()"> <Star :post="post" /> | </span
 23 |           ><a
 24 |             target="_blank"
 25 |             :href="`https://scratch.mit.edu/discuss/misc/?action=report&post_id=${post.id}`"
 26 |             >Report</a
 27 |           >
 28 |         </div>
 29 |       </section>
 30 |       <nav class="main-nav">
 31 |         <nuxt-link :to="`/user/${post.username}`" class="username"
 32 |           >{{ post.username }}
 33 |           <p
 34 |             v-if="isOP"
 35 |             class="op-badge"
 36 |             title="Original poster (creator of this topic)"
 37 |           >
 38 |             OP
 39 |           </p></nuxt-link
 40 |         >
 41 |         <nuxt-link :to="`/user/${post.username}`">
 42 |           <img
 43 |             :src="`${backendURL}/api/user/${post.username}/picture`"
 44 |             width="90"
 45 |             height="90"
 46 |             class="pfp"
 47 |           />
 48 |         </nuxt-link>
 49 |         <!-- <span class="rank">Scratcher</span> -->
 50 |         <PostCount :user="post.username" />
 51 |         <Status :user="post.username" style="display: block" />
 52 |       </nav>
 53 |     </div>
 54 |   </div>
 55 | </template>
 56 | 
 57 | <script>
 58 | export default {
 59 |   props: ["post", "isOP"],
 60 |   data() {
 61 |     return {
 62 |       backendURL: process.env.backendURL,
 63 |     };
 64 |   },
 65 |   async fetch() {
 66 |     let res = await fetch(
 67 |       `${process.env.backendURL}/api/starred/${this.post.id}`,
 68 |       {
 69 |         headers: {
 70 |           Authorization: this.$auth.token(),
 71 |           "Content-Type": "application/json",
 72 |         },
 73 |       }
 74 |     );
 75 |     let data = await res.json();
 76 |     this.starred = data.starred;
 77 |   },
 78 |   fetchOnServer: false,
 79 | };
 80 | </script>
 81 | 
 82 | <style scoped>
 83 | .post {
 84 |   margin-bottom: 20px;
 85 | }
 86 | 
 87 | .post-wrap {
 88 |   display: flex;
 89 |   border: 1px solid var(--sidebar-border);
 90 |   border-left: none;
 91 | }
 92 | 
 93 | .main-content {
 94 |   order: 2;
 95 |   width: 85%;
 96 |   background: var(--background);
 97 |   overflow: hidden;
 98 |   display: flex;
 99 |   flex-flow: row wrap;
100 | }
101 | 
102 | .post-content {
103 |   display: block;
104 |   width: 100%;
105 | }
106 | 
107 | .main-nav {
108 |   order: 1;
109 |   width: 15%;
110 |   flex: 0 0 auto;
111 |   background: var(--sidebar-background);
112 | }
113 | 
114 | .main-content,
115 | .main-sidebar,
116 | .main-nav {
117 |   padding: 0.75em 1em;
118 |   box-shadow: inset 1px 0 var(--sidebar-border);
119 |   overflow-wrap: break-word;
120 | }
121 | 
122 | .pfp {
123 |   width: 90px;
124 |   height: 90px;
125 | }
126 | 
127 | .post-footer {
128 |   line-height: 28px;
129 |   padding-top: 2em;
130 |   align-self: flex-end;
131 |   text-align: right;
132 |   display: block;
133 |   width: 100%;
134 | }
135 | 
136 | .header {
137 |   background-color: var(--brand);
138 |   padding: 10px;
139 |   font-weight: bold;
140 |   color: white;
141 |   border-top-left-radius: 10px;
142 |   border-top-right-radius: 10px;
143 |   overflow: hidden;
144 |   white-space: nowrap;
145 | }
146 | 
147 | .rank {
148 |   display: block;
149 | }
150 | 
151 | .view-scratch {
152 |   float: right;
153 |   color: white;
154 |   text-decoration: none;
155 | }
156 | 
157 | .topic-link {
158 |   color: white;
159 |   text-decoration: none;
160 |   padding-left: 10px;
161 | }
162 | 
163 | .topic {
164 |   float: right;
165 |   color: white;
166 |   text-decoration: none;
167 | }
168 | 
169 | .username {
170 |   color: var(--text);
171 |   font-weight: bold;
172 |   padding-bottom: 5px;
173 |   display: block;
174 | }
175 | 
176 | .last-edited {
177 |   padding-top: 15px;
178 |   color: var(--footer-text);
179 | }
180 | 
181 | .op-badge {
182 |   display: inline-block;
183 |   padding: 3px 4px;
184 |   background: var(--brand);
185 |   color: var(--text);
186 |   border-radius: 5px;
187 |   line-height: 1em;
188 | }
189 | 
190 | @media only screen and (max-width: 750px) {
191 |   .pfp {
192 |     width: 75%;
193 |     height: auto;
194 |   }
195 |   .main-nav {
196 |     width: 20%;
197 |   }
198 | }
199 | </style>
200 | 
201 | 


--------------------------------------------------------------------------------
/components/ReactionButtons.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <span>
  3 |     <span v-if="$auth.loggedIn() && $auth.user().admin">
  4 |       <form class="admin-reaction-form" @submit.prevent="customReaction()">
  5 |         <input
  6 |           class="admin-reaction-input"
  7 |           type="text"
  8 |           v-model="adminCustomReaction"
  9 |           placeholder="custom reaction"
 10 |         />
 11 |       </form>
 12 |     </span>
 13 |     <a
 14 |       v-for="reaction of filteredReactions"
 15 |       :key="reaction.emoji"
 16 |       class="reaction-button"
 17 |       :class="{
 18 |         selected:
 19 |           $auth.loggedIn() &&
 20 |           reaction.reactions.find((r) => r.user == $auth.user().name),
 21 |         loading,
 22 |       }"
 23 |       @click="react(post.id, reaction.emoji)"
 24 |       v-tooltip="reaction.reactions.map((r) => r.user).join(', ')"
 25 |     >
 26 |       <img
 27 |         :src="`/emojis/${reaction.emoji.substring(1, reaction.emoji.length-1)}.png`"
 28 |         v-if="reaction.emoji.startsWith(':') && reaction.emoji.endsWith(':')"
 29 |       />
 30 |       <Emoji v-else>{{ reaction.emoji }}</Emoji>
 31 |       {{ reaction.reactions.length }}</a
 32 |     >
 33 |     <v-popover
 34 |       placement="top"
 35 |       class="reactions-popover"
 36 |       v-if="$auth.loggedIn()"
 37 |     >
 38 |       <!-- This will be the popover target (for the events and position) -->
 39 |       <button class="open-reaction-popover">😀</button>
 40 |       <!-- This will be the content of the popover -->
 41 |       <div slot="popover">
 42 |         <a
 43 |           v-for="reaction of reactions"
 44 |           :key="reaction.emoji"
 45 |           class="reaction-button-popover"
 46 |           v-close-popover
 47 |           :class="{
 48 |             selected: reaction.reactions.find(
 49 |               (r) => r.user == $auth.user().name
 50 |             ),
 51 |             loading,
 52 |           }"
 53 |           @click="react(post.id, reaction.emoji)"
 54 |         >
 55 |           <img
 56 |             :src="`/emojis/${reaction.emoji.substring(1, reaction.emoji.length-1)}.png`"
 57 |             v-if="reaction.emoji.startsWith(':') && reaction.emoji.endsWith(':')"
 58 |           />
 59 |           <Emoji v-else>{{ reaction.emoji }}</Emoji>
 60 |           {{ reaction.reactions.length }}</a
 61 |         >
 62 |       </div>
 63 |     </v-popover>
 64 |   </span>
 65 | </template>
 66 | 
 67 | <script>
 68 | export default {
 69 |   props: ["post"],
 70 |   data() {
 71 |     return {
 72 |       reactions: [],
 73 |       adminCustomReaction: "",
 74 |       loading: false,
 75 |     };
 76 |   },
 77 |   computed: {
 78 |     filteredReactions() {
 79 |       return this.reactions.filter((r) => r.reactions.length > 0);
 80 |     },
 81 |   },
 82 |   methods: {
 83 |     async react(id, emoji) {
 84 |       this.loading = true;
 85 |       await this.$store.dispatch("auth/login", this.$auth.token()); // refresh user details
 86 |       if (this.$auth.user()) {
 87 |         let res = await fetch(`${process.env.backendURL}/api/reactions/${id}`, {
 88 |           method: "POST",
 89 |           headers: {
 90 |             Authorization: this.$auth.token(),
 91 |             "Content-Type": "application/json",
 92 |           },
 93 |           body: JSON.stringify({
 94 |             emoji: emoji,
 95 |           }),
 96 |         });
 97 |         let data = await res.json();
 98 |         if (data.error) {
 99 |           alert(data.error);
100 |         } else {
101 |           this.reactions = data;
102 |           this.loading = false;
103 |         }
104 |       } else {
105 |         this.$router.push({
106 |           path: "/login",
107 |         });
108 |       }
109 |     },
110 |     customReaction() {
111 |       this.react(this.post.id, this.adminCustomReaction);
112 |       this.adminCustomReaction = "";
113 |     },
114 |   },
115 |   async fetch() {
116 |     let res = await fetch(
117 |       `${process.env.backendURL}/api/reactions/${this.post.id}`
118 |     );
119 |     let data = await res.json();
120 |     this.reactions = Object.values(data);
121 |   },
122 |   fetchOnServer: false,
123 | };
124 | </script>
125 | 
126 | <style scoped>
127 | .reaction-button {
128 |   color: var(--text);
129 |   cursor: pointer;
130 |   user-select: none;
131 |   background-color: var(--sidebar-background);
132 |   margin: 0px 5px;
133 |   padding: 4px;
134 |   display: inline-block; /* don't wrap in the middle of a reaction */
135 |   line-height: normal;
136 |   border-radius: 6px;
137 |   box-shadow: 0 0 2px var(--brand);
138 |   opacity: 1;
139 |   transition: opacity 500ms;
140 | }
141 | 
142 | .reaction-button-popover {
143 |   padding: 4px;
144 |   color: white;
145 |   margin: 4px;
146 |   border-radius: 4px;
147 |   cursor: pointer;
148 |   opacity: 1;
149 |   transition: opacity 500ms;
150 |   user-select: none;
151 | }
152 | 
153 | .reaction-button-popover:hover {
154 |   opacity: 0.75;
155 | }
156 | 
157 | .reaction-button-popover.selected {
158 |   background-color: var(--brand);
159 | }
160 | 
161 | .reaction-button.selected {
162 |   color: white;
163 |   background-color: var(--brand);
164 | }
165 | 
166 | .reaction-button.loading {
167 |   opacity: 0.5;
168 | }
169 | 
170 | .open-reaction-popover {
171 |   background: none;
172 |   font-weight: normal;
173 |   filter: grayscale();
174 |   transition: filter 500ms;
175 |   user-select: none;
176 | }
177 | 
178 | .open .open-reaction-popover {
179 |   filter: none;
180 | }
181 | 
182 | .reactions-popover {
183 |   display: inline;
184 | }
185 | 
186 | .admin-reaction-form {
187 |   display: inline-block;
188 | }
189 | 
190 | .admin-reaction-input {
191 |   width: 100px;
192 |   border-radius: 5px;
193 |   padding: 3px;
194 |   border: 1px solid var(--input-border);
195 |   background-color: var(--input-background);
196 |   color: var(--text);
197 | }
198 | </style>


--------------------------------------------------------------------------------
/pages/dashboard/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <Header :crumbs="[{link:'/dashboard', text:'dashboard'}]" />
  4 |     <div class="margined">
  5 |       <h1>account dashboard</h1>
  6 |       <img
  7 |         :src="`${backendURL}/api/user/${$auth.user().name}/picture`"
  8 |         width="30"
  9 |         height="30"
 10 |         class="dashboard-pfp"
 11 |       />
 12 |       <h2 class="dashboard-username">{{ $auth.user().name }}</h2>
 13 |       <nuxt-link :to="`/user/${$auth.user().name}`">(visit ocular profile)</nuxt-link>
 14 |       <a :href="`https://postpercent.rirurin.com/users/${$auth.user().name}`" target="_blank" rel="noopener noreferrer">(view on postpercent ↗️)</a>
 15 |       <div v-for="(alert, index) in alerts" :key="`alert-${index}`">
 16 |         <div :class="`alert ${alert.type}`" v-if="alert.body">
 17 |           {{ alert.body }}
 18 |         <span class="close-btn" @click="alert.body = ''">x</span>
 19 |       </div>
 20 |       </div>
 21 |       <form @submit.prevent="updateUser()">
 22 |           <div v-if="$auth.user().admin">
 23 |             <label for="user">user: </label><input name="user" type="text" class="input dashboard" autocomplete="off" v-model="user">
 24 |             <br>
 25 |             {{ adminMessage }}
 26 |           </div>
 27 |           <label for="status">status: </label><input name="status" type="text" class="input dashboard" maxlength="300" v-model="status">
 28 |           <br>
 29 |           <label for="color">favourite colour: </label><input name="color" type="color" class="color-input" v-model="color">
 30 |           <br>
 31 |           <p>ocular statuses must follow <a href="https://scratch.mit.edu/community_guidelines">Scratch's community guidelines</a>.</p>
 32 |           <br>
 33 |           <div v-if="$auth.user().admin">
 34 |             <label for="banned">banned: </label><input type="checkbox" name="banned" v-model="banned">
 35 |             <br><br>
 36 |             <a href="#" @click="deleteUser()">⚠ delete this user's data</a><br>
 37 |           </div>
 38 |           <button type="submit" class="update-btn">update</button>
 39 |       </form>
 40 |       <br>
 41 |       <nuxt-link to="/dashboard/users" v-if="$auth.user().admin">user list</nuxt-link>
 42 |       <Footer />
 43 |     </div>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script>
 48 | export default {
 49 |   middleware: "authenticated",
 50 |   head: {
 51 |     title: 'dashboard'
 52 |   },
 53 |   data() {
 54 |     return {
 55 |       user: this.$auth.user().admin ? (this.$route.query.name || this.$auth.user().name) : this.$auth.user().name,
 56 |       status: this.$auth.user().status,
 57 |       color: this.$auth.user().color,
 58 |       banned: this.$auth.user().banned,
 59 |       alerts: [],
 60 |       backendURL: process.env.backendURL,
 61 |       adminMessage: ''
 62 |     }
 63 |   },
 64 |   async fetch () {
 65 |     if (this.user !== this.$auth.user().name) {
 66 |       const userInfo = await (await fetch(`${this.backendURL}/api/user/${this.user}?noReplace=true`)).json();
 67 |       ({
 68 |         status: this.status, color: this.color, banned: this.banned
 69 |       } = userInfo);
 70 |     }
 71 |   },
 72 |   watch: {
 73 |     user: function(username) {
 74 |       this.adminFeedback()
 75 |     }
 76 |   },
 77 |   methods: {
 78 |     async updateUser() {
 79 |       await this.$store.dispatch("auth/login", this.$auth.token()); // refresh user details
 80 |       if(this.$auth.user()){
 81 |         let res = await fetch(
 82 |           `${process.env.backendURL}/api/user/${this.user}`,
 83 |           {
 84 |             method: "PUT",
 85 |             headers: {
 86 |               Authorization: this.$auth.token(),
 87 |               "Content-Type": "application/json",
 88 |             },
 89 |             body: JSON.stringify({
 90 |               status: this.status,
 91 |               color: this.color,
 92 |               banned: this.banned
 93 |             }),
 94 |           }
 95 |         );
 96 | 
 97 |         let data = await res.json()
 98 | 
 99 |         this.$store.commit("statuses/removeUser", {name: this.user}) // remove user from ocular cache so they'll see real status
100 | 
101 |         if(data){
102 |           if(!data.error) {
103 |             this.alerts.unshift({
104 |               body: data.ok,
105 |               type: 'success'
106 |             })
107 |           } else {
108 |             this.alerts.unshift({
109 |               body: data.error,
110 |               type: 'error'
111 |             })
112 |           }
113 |         }
114 |       } else {
115 |         this.$router.push({
116 |           path: '/login'
117 |         })
118 |       }
119 |     },
120 |     async deleteUser() {
121 |       if(confirm(`are you sure you want to delete all data for ${this.user}?`) && confirm("do you know what you're doing? theres like one use case for this and its really rare. pressing [OK] will delete all of this user's data with no way to go back.")) {
122 |         let res = await fetch(`${process.env.backendURL}/api/user/${this.user}`, {
123 |           method: "DELETE",
124 |           headers: {
125 |             Authorization: this.$auth.token(),
126 |             "Content-Type": "application/json",
127 |           }
128 |         });
129 | 
130 |         let data = await res.json()
131 | 
132 |         this.$store.commit("statuses/removeUser", {name: this.user}) // remove user from ocular cache
133 | 
134 |         if(data){
135 |           if(!data.error) {
136 |             this.alerts.unshift({
137 |               body: data.ok,
138 |               type: 'success'
139 |             })
140 |           } else {
141 |             this.alerts.unshift({
142 |               body: data.error,
143 |               type: 'error'
144 |             })
145 |           }
146 |         }
147 |       }    
148 |     },
149 |     async adminFeedback() {
150 |       // return info on what's going to happen when an admin presses update and match inputs with user data
151 |       if(this.user !== '') {
152 |         let res = await fetch(`${process.env.backendURL}/api/user/${this.user}?noReplace=true`)
153 |         let data = await res.json()
154 |         this.status = data.status || ''
155 |         this.color = data.color || ''
156 |         this.banned = data.banned || false
157 |         if(!data._id) {
158 |           this.adminMessage = `${this.user} does not have an ocular account. this will create a new one for them`
159 |         } else {
160 |           this.adminMessage = ''
161 |         }
162 |       } else {
163 |         this.status = ''
164 |         this.color = ''
165 |         this.adminMessage = 'you need to put in a username lol'
166 |       }
167 |     }
168 |   },
169 | };
170 | </script>
171 | 
172 | <style scoped>
173 | /* .color.input {
174 | 
175 | } */
176 | .dashboard-username{
177 |   display: inline-block;
178 | }
179 | .dashboard-pfp{
180 |   border-radius: 50%;
181 |   display: inline-block;
182 | }
183 | 
184 | .update-btn{
185 |   margin-top: 15px;
186 | }
187 | </style>
188 | 


--------------------------------------------------------------------------------
/components/Render.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content" v-html="blockifiedContent">
  3 |   </div>
  4 | </template>
  5 | 
  6 | <script>
  7 | export default {
  8 |   props: ['content'],
  9 |   computed: {
 10 |     blockifiedContent() {
 11 |       // adapted from https://github.com/scratchblocks/scratchblocks/blob/master/index.js
 12 |       let content = this.content;
 13 |       let options = {
 14 |         style: "scratch3",
 15 |         languages: ["en"],
 16 |         scale: 0.675,
 17 | 
 18 |         read: scratchblocks.read, // function(el, options) => code
 19 |         parse: scratchblocks.parse, // function(code, options) => doc
 20 |         render: scratchblocks.render, // function(doc) => svg
 21 |       };
 22 |       const parser = new DOMParser();
 23 | 
 24 |       const doc = parser.parseFromString(content, "text/html");
 25 | 
 26 |       let results = [].slice.apply(
 27 |         doc.querySelectorAll("pre.blocks:not(.scratchblockrendered)")
 28 |       );
 29 |       results.forEach(function (el) {
 30 |         var code = options.read(el, options);
 31 | 
 32 |         var parsed = options.parse(code, options);
 33 | 
 34 |         var svg = options.render(parsed, options);
 35 | 
 36 |         var container = doc.createElement("div");
 37 |         container.className = "scratchblocks";
 38 |         container.appendChild(svg);
 39 |         el.innerHTML = "";
 40 |         el.appendChild(container);
 41 |       });
 42 |       return doc.documentElement.innerHTML;
 43 |     },
 44 |   },
 45 | };
 46 | </script>
 47 | 
 48 | <style scoped>
 49 | .content >>> img {
 50 |   max-width: 100%;
 51 |   max-height: 100%;
 52 | }
 53 | 
 54 | .content >>> blockquote {
 55 |   margin: 12px 0;
 56 |   padding: 12px 20px;
 57 |   border-style: solid;
 58 |   border-width: 1px;
 59 |   border-color: var(--quote-border);
 60 |   background-color: var(--quote-background);
 61 | }
 62 | 
 63 | .content >>> .code {
 64 |   margin: 12px 0;
 65 |   padding: 12px 20px;
 66 |   border-style: solid;
 67 |   border-width: 1px;
 68 |   border-color: var(--quote-border);
 69 |   background-color: var(--quote-background);
 70 |   overflow: auto;
 71 |   max-height: 450px;
 72 | }
 73 | 
 74 | .content >>> .code pre {
 75 |   margin: 0;
 76 | }
 77 | 
 78 | .content >>> .bb-quote-author {
 79 |   color: var(--text-color);
 80 |   font-weight: bold;
 81 | }
 82 | 
 83 | .content >>> .bb-italic {
 84 |   font-style: italic;
 85 | }
 86 | 
 87 | .content >>> .bb-bold {
 88 |   font-weight: bold;
 89 | }
 90 | 
 91 | .content >>> .bb-small {
 92 |   font-size: 10px;
 93 | }
 94 | 
 95 | .content >>> .bb-big {
 96 |   font-size: 17px;
 97 | }
 98 | 
 99 | .content >>> .bb-strikethrough {
100 |   text-decoration: line-through;
101 | }
102 | 
103 | .content >>> .bb-underline {
104 |   text-decoration: underline;
105 | }
106 | </style>
107 | 
108 | 
109 | <style scoped>
110 | /* code highlighting i am so sorry */
111 | .content >>> .hll {
112 |   background-color: #ffffcc;
113 | }
114 | .content >>> .c {
115 |   color: #408080;
116 |   font-style: italic;
117 | } /* Comment */
118 | .content >>> .content >>> .err {
119 |   border: 1px solid #ff0000;
120 | } /* Error */
121 | .content >>> .k {
122 |   color: #008000;
123 |   font-weight: bold;
124 | } /* Keyword */
125 | .content >>> .o {
126 |   color: #666666;
127 | } /* Operator */
128 | .content >>> .cm {
129 |   color: #408080;
130 |   font-style: italic;
131 | } /* Comment.Multiline */
132 | .content >>> .cp {
133 |   color: #bc7a00;
134 | } /* Comment.Preproc */
135 | .content >>> .c1 {
136 |   color: #408080;
137 |   font-style: italic;
138 | } /* Comment.Single */
139 | .content >>> .cs {
140 |   color: #408080;
141 |   font-style: italic;
142 | } /* Comment.Special */
143 | .content >>> .gd {
144 |   color: #a00000;
145 | } /* Generic.Deleted */
146 | .content >>> .ge {
147 |   font-style: italic;
148 | } /* Generic.Emph */
149 | .content >>> .gr {
150 |   color: #ff0000;
151 | } /* Generic.Error */
152 | .content >>> .gh {
153 |   color: #000080;
154 |   font-weight: bold;
155 | } /* Generic.Heading */
156 | .content >>> .gi {
157 |   color: #00a000;
158 | } /* Generic.Inserted */
159 | .content >>> .go {
160 |   color: #808080;
161 | } /* Generic.Output */
162 | .content >>> .gp {
163 |   color: #000080;
164 |   font-weight: bold;
165 | } /* Generic.Prompt */
166 | .content >>> .gs {
167 |   font-weight: bold;
168 | } /* Generic.Strong */
169 | .content >>> .gu {
170 |   color: #800080;
171 |   font-weight: bold;
172 | } /* Generic.Subheading */
173 | .content >>> .gt {
174 |   color: #0040d0;
175 | } /* Generic.Traceback */
176 | .content >>> .kc {
177 |   color: #008000;
178 |   font-weight: bold;
179 | } /* Keyword.Constant */
180 | .content >>> .kd {
181 |   color: #008000;
182 |   font-weight: bold;
183 | } /* Keyword.Declaration */
184 | .content >>> .kn {
185 |   color: #008000;
186 |   font-weight: bold;
187 | } /* Keyword.Namespace */
188 | .content >>> .kp {
189 |   color: #008000;
190 | } /* Keyword.Pseudo */
191 | .content >>> .kr {
192 |   color: #008000;
193 |   font-weight: bold;
194 | } /* Keyword.Reserved */
195 | .content >>> .kt {
196 |   color: #b00040;
197 | } /* Keyword.Type */
198 | .content >>> .m {
199 |   color: #666666;
200 | } /* Literal.Number */
201 | .content >>> .s {
202 |   color: #ba2121;
203 | } /* Literal.String */
204 | .content >>> .na {
205 |   color: #7d9029;
206 | } /* Name.Attribute */
207 | .content >>> .nb {
208 |   color: #008000;
209 | } /* Name.Builtin */
210 | .content >>> .nc {
211 |   color: #0000ff;
212 |   font-weight: bold;
213 | } /* Name.Class */
214 | .content >>> .no {
215 |   color: #880000;
216 | } /* Name.Constant */
217 | .content >>> .nd {
218 |   color: #aa22ff;
219 | } /* Name.Decorator */
220 | .content >>> .ni {
221 |   color: #999999;
222 |   font-weight: bold;
223 | } /* Name.Entity */
224 | .content >>> .ne {
225 |   color: #d2413a;
226 |   font-weight: bold;
227 | } /* Name.Exception */
228 | .content >>> .nf {
229 |   color: #0000ff;
230 | } /* Name.Function */
231 | .content >>> .nl {
232 |   color: #a0a000;
233 | } /* Name.Label */
234 | .content >>> .nn {
235 |   color: #0000ff;
236 |   font-weight: bold;
237 | } /* Name.Namespace */
238 | .content >>> .nt {
239 |   color: #008000;
240 |   font-weight: bold;
241 | } /* Name.Tag */
242 | .content >>> .nv {
243 |   color: #19177c;
244 | } /* Name.Variable */
245 | .content >>> .ow {
246 |   color: #aa22ff;
247 |   font-weight: bold;
248 | } /* Operator.Word */
249 | .content >>> .w {
250 |   color: #bbbbbb;
251 | } /* Text.Whitespace */
252 | .content >>> .mf {
253 |   color: #666666;
254 | } /* Literal.Number.Float */
255 | .content >>> .mh {
256 |   color: #666666;
257 | } /* Literal.Number.Hex */
258 | .content >>> .mi {
259 |   color: #666666;
260 | } /* Literal.Number.Integer */
261 | .content >>> .mo {
262 |   color: #666666;
263 | } /* Literal.Number.Oct */
264 | .content >>> .sb {
265 |   color: #ba2121;
266 | } /* Literal.String.Backtick */
267 | .content >>> .sc {
268 |   color: #ba2121;
269 | } /* Literal.String.Char */
270 | .content >>> .sd {
271 |   color: #ba2121;
272 |   font-style: italic;
273 | } /* Literal.String.Doc */
274 | .content >>> .s2 {
275 |   color: #ba2121;
276 | } /* Literal.String.Double */
277 | .content >>> .se {
278 |   color: #bb6622;
279 |   font-weight: bold;
280 | } /* Literal.String.Escape */
281 | .content >>> .sh {
282 |   color: #ba2121;
283 | } /* Literal.String.Heredoc */
284 | .content >>> .si {
285 |   color: #bb6688;
286 |   font-weight: bold;
287 | } /* Literal.String.Interpol */
288 | .content >>> .sx {
289 |   color: #008000;
290 | } /* Literal.String.Other */
291 | .content >>> .sr {
292 |   color: #bb6688;
293 | } /* Literal.String.Regex */
294 | .content >>> .s1 {
295 |   color: #ba2121;
296 | } /* Literal.String.Single */
297 | .content >>> .ss {
298 |   color: #19177c;
299 | } /* Literal.String.Symbol */
300 | .content >>> .bp {
301 |   color: #008000;
302 | } /* Name.Builtin.Pseudo */
303 | .content >>> .vc {
304 |   color: #19177c;
305 | } /* Name.Variable.Class */
306 | .content >>> .vg {
307 |   color: #19177c;
308 | } /* Name.Variable.Global */
309 | .content >>> .vi {
310 |   color: #19177c;
311 | } /* Name.Variable.Instance */
312 | .content >>> .il {
313 |   color: #666666;
314 | } /* Literal.Number.Integer.Long */
315 | </style>
316 | 


--------------------------------------------------------------------------------
/pages/dashboard/users.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <Header :crumbs="[{link:'/dashboard', text:'dashboard'}, {link:'/dashboard/users', text:'users'}]" />
  4 |     <div class="margined">
  5 |       <client-only>
  6 |         <div class="unsaved-changes" :style="{ opacity: changed.includes(true) ? 1 : 0 }">
  7 |           You have unsaved changes. <button @click="saveChanges()">Save</button>
  8 |         </div>
  9 |         <vue-good-table
 10 |           :columns="columns"
 11 |           :rows="rows"
 12 |           :pagination-options="{ enabled: true }"
 13 |           :search-options="{ enabled: true }"
 14 |           :theme="$colorMode.value == 'dark' || $colorMode.value == 'catsunited' || $colorMode.value == 'classic-dark' ? 'nocturnal' : ''"
 15 |           @on-sort-change="unchangedRows = JSON.parse(JSON.stringify(rows))"
 16 |           >
 17 |           <template v-slot:table-row="{ row, column, formattedRow }">
 18 |             <span v-if="column.field === 'name'">
 19 |               {{ row.name }} <a :href="`/dashboard?name=${row.name}`" target="_blank">d</a> <a :href="`https://scratch.mit.edu/users/${row.name}/`" target="_blank">s</a>
 20 |             </span>
 21 |             <span v-else-if="column.field === 'status'">
 22 |               <div
 23 |                 contenteditable
 24 |                 class="status-edit"
 25 |                 @blur="statusChanged(row.originalIndex, $event.target.innerText)"
 26 |                 >
 27 |                 {{ row.status }}
 28 |               </div>
 29 |             </span>
 30 |             <span v-else-if="column.field === 'color'">
 31 |               <input type="color" :value="row.color" @change="updateColor(row.originalIndex, $event.target.value)" />
 32 |               {{ row.color }}
 33 |             </span>
 34 |             <span v-else-if="column.field === 'banned'">
 35 |               <input type="checkbox" :checked="row.banned" @change="setBanned(row.originalIndex, $event.target.checked)" />
 36 |               {{ !!row.banned }}
 37 |             </span>
 38 |             <span v-else>
 39 |               {{ formattedRow[column.field] }}
 40 |             </span>
 41 |           </template>
 42 |         </vue-good-table>
 43 |       </client-only>
 44 |       <Footer />
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 |   import vgtDefaultType from "vue-good-table/src/components/types/default.js";
 51 |   import vgtBoolType from "vue-good-table/src/components/types/boolean.js";
 52 | 
 53 |   const [{
 54 |     compare: compareString
 55 |   }, {
 56 |     compare: compareBool
 57 |   }] = [vgtDefaultType, vgtBoolType];
 58 | 
 59 |   export default {
 60 |     middleware: 'admin',
 61 |     head: {
 62 |       title: 'user list'
 63 |     },
 64 |     data() {
 65 |       return {
 66 |         columns: [{
 67 |           label: 'internal id',
 68 |           field: '_id',
 69 |           globalSearchDisabled: true,
 70 |         },
 71 |           {
 72 |             label: 'name',
 73 |             field: 'name',
 74 |           },
 75 |           {
 76 |             label: 'status',
 77 |             field: 'status',
 78 |             sortFn: this.sortWithoutChangingWheneverYouChangeAnything
 79 |           },
 80 |           {
 81 |             label: 'color',
 82 |             field: 'color',
 83 |             sortFn: this.sortWithoutChangingWheneverYouChangeAnything
 84 |           },
 85 |           {
 86 |             label: 'banned?',
 87 |             field: 'banned',
 88 |             globalSearchDisabled: true,
 89 |             sortFn: this.sortWithoutChangingWheneverYouChangeAnything,
 90 |             type: 'boolean'
 91 |           },
 92 |           {
 93 |             label: 'admin?',
 94 |             field: 'admin',
 95 |             globalSearchDisabled: true,
 96 |             type: 'boolean'
 97 |           },
 98 |           {
 99 |             label: 'updated at',
100 |             field: 'meta.updated',
101 |             globalSearchDisabled: true,
102 |           },
103 |           {
104 |             label: 'updated by',
105 |             field: 'meta.updatedBy'
106 |           },
107 |         ],
108 |         rows: [],
109 |         unchangedRows: [],
110 |         changed: []
111 |       };
112 |     },
113 |     async fetch() {
114 |       let res = await fetch(`${process.env.backendURL}/api/users`, {
115 |         method: "GET",
116 |         headers: {
117 |           Authorization: this.$auth.token(),
118 |         },
119 |       });
120 |       let data = await res.json();
121 |       this.rows = data;
122 |       this.changed = Array.from({
123 |         length: data.length
124 |       }).fill(false);
125 |       this.unchangedRows = JSON.parse(JSON.stringify(this.rows));
126 |     },
127 |     methods: {
128 |       sortWithoutChangingWheneverYouChangeAnything(x, y, col, rowx, rowy) {
129 |         return (col.type === "boolean" ? compareBool: compareString)(this.unchangedRows.find(x => x._id === rowx._id)[col.field], this.unchangedRows.find(y => y._id === rowy._id)[col.field]);
130 |       },
131 |       updateChanged (index, value) {
132 |         this.$set(this.changed, index, value);
133 |       },
134 |       statusChanged(index, status) {
135 |         if (status === this.rows[index].status) {
136 |           return;
137 |         }
138 |         this.$set(this.rows[index], "status", status);
139 |         this.updateChanged(index, true);
140 |       },
141 |       updateColor(index, color) {
142 |         if (color === this.rows[index.color]) return;
143 |         this.$set(this.rows[index], "color", color);
144 |         this.updateChanged(index, true);
145 |       },
146 |       setBanned(index, banned) {
147 |         if (!!banned === !!this.rows[index].banned) return;
148 |         this.$set(this.rows[index], "banned", banned);
149 |         this.updateChanged(index, true);
150 |       },
151 |       async saveChanges() {
152 |         this.unchangedRows = JSON.parse(JSON.stringify(this.rows));
153 |         await this.$store.dispatch("auth/login", this.$auth.token()); // refresh user details
154 |         if (this.$auth.user()) {
155 |           for (const index in this.changed) {
156 |             // for each index of users that have had their details changed
157 |             if (!this.changed[index]) continue;
158 |             let user = this.rows[index]; // this is the actual user object
159 |             let res = await fetch(// updare user
160 |               `${process.env.backendURL}/api/user/${user.name}`,
161 |               {
162 |                 method: "PUT",
163 |                 headers: {
164 |                   Authorization: this.$auth.token(),
165 |                   "Content-Type": "application/json",
166 |                 },
167 |                 body: JSON.stringify({
168 |                   status: user.status,
169 |                   color: user.color,
170 |                   banned: user.banned
171 |                 }),
172 |               }
173 |             );
174 | 
175 |             let data = await res.json();
176 | 
177 |             this.$store.commit("statuses/removeUser", {
178 |               name: user.name
179 |             }) // remove user from ocular cache so they'll see real status
180 | 
181 |             if (data) {
182 |               if (data.error) {
183 |                 alert(data.error);
184 |                 this.$nuxt.refresh();
185 |                 return;
186 |               }
187 |             }
188 |           }
189 |           alert("User(s) updated");
190 |           this.$nuxt.refresh(); // refresh table
191 |         } else {
192 |           this.$router.push({
193 |             path: '/login'
194 |           });
195 |         }
196 |       }
197 |     },
198 |   };
199 |   </script>
200 | 
201 |   <style scoped>
202 |     div.status-edit {
203 |       border: dashed 1px var(--input-border);
204 |       background: var(--input-background);
205 |       color: var(--text);
206 |       padding: 4px;
207 |     }
208 |     div.unsaved-changes {
209 |       position: sticky;
210 |       top: 0;
211 |       z-index: 99;
212 |       width: 100%;
213 |       background: var(--background);
214 |       padding-top: 5px;
215 |       padding-bottom: 5px;
216 |       text-align: center;
217 |       transition: opacity 0.5s;
218 |     }
219 |   </style>
220 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Nuxt />
  4 |   </div>
  5 | </template>
  6 | 
  7 | <style>
  8 | :root {
  9 |   --brand: #0fbd8c;
 10 |   --background: white;
 11 |   --input-background: white;
 12 |   --input-border: #e0e0e0;
 13 |   --sidebar-background: #f2f2f2;
 14 |   --sidebar-border: #e0e0e0;
 15 |   --quote-background: #f7f7f7;
 16 |   --quote-border: #ccc;
 17 |   --table-stripe: #f2f2f2;
 18 |   --table-hover: #e6e6e6;
 19 |   --table-border: #ddd;
 20 |   --text: #575e75;
 21 |   --footer-text: #8d96b3;
 22 | }
 23 | 
 24 | .dark-mode {
 25 |   --brand: #075e46; /* CC5500 looks cool too (orange), FF6600 good too */
 26 |   --background: #111;
 27 |   --input-background: #141414;
 28 |   --input-border: #2c2c2c;
 29 |   --sidebar-background: #0a0a0a;
 30 |   --sidebar-border: #2c2c2c;
 31 |   --quote-background: #0a0a0a;
 32 |   --quote-border: #2c2c2c;
 33 |   --table-stripe: #252525;
 34 |   --table-hover: #2c2c2c;
 35 |   --table-border: #2c2c2c;
 36 |   --text: white;
 37 |   --footer-text: #a1a1a1;
 38 | }
 39 | 
 40 | .dark-purple-mode {
 41 |   --brand: #855cd6; /* CC5500 looks cool too (orange), FF6600 good too */
 42 |   --background: #111;
 43 |   --input-background: #141414;
 44 |   --input-border: #2c2c2c;
 45 |   --sidebar-background: #0a0a0a;
 46 |   --sidebar-border: #2c2c2c;
 47 |   --quote-background: #0a0a0a;
 48 |   --quote-border: #2c2c2c;
 49 |   --table-stripe: #252525;
 50 |   --table-hover: #2c2c2c;
 51 |   --table-border: #2c2c2c;
 52 |   --text: white;
 53 |   --footer-text: #a1a1a1;
 54 | }
 55 | 
 56 | .gray-mode {
 57 |   --brand: #222222;
 58 |   --background: #111;
 59 |   --input-background: #141414;
 60 |   --input-border: #2c2c2c;
 61 |   --sidebar-background: #0a0a0a;
 62 |   --sidebar-border: #2c2c2c;
 63 |   --quote-background: #0a0a0a;
 64 |   --quote-border: #2c2c2c;
 65 |   --table-stripe: #252525;
 66 |   --table-hover: #2c2c2c;
 67 |   --table-border: #2c2c2c;
 68 |   --text: white;
 69 |   --footer-text: #a1a1a1;
 70 | }
 71 | 
 72 | .scratch-mode{
 73 |   --brand: #28a5da;
 74 | }
 75 | 
 76 | .purple-mode {
 77 |   --brand: #855cd6;
 78 | }
 79 | 
 80 | .catsunited-mode {
 81 |   --brand: #4e1117; 
 82 |   --background: #131313;
 83 |   --input-background: #1C1C1C;
 84 |   --input-border: #4e1117;
 85 |   --sidebar-background: #131313;
 86 |   --sidebar-border: #131313;
 87 |   --quote-background: #0a0a0a;
 88 |   --quote-border: #4e1117;
 89 |   --table-stripe: #1C1C1C;
 90 |   --table-hover: #0e0e0e;
 91 |   --table-border: #4e1117;
 92 |   --text: white;
 93 |   --footer-text: #a1a1a1;
 94 | }
 95 | 
 96 | .classic-dark-mode {
 97 |   --brand: #df5900; /* previously FF6600, slightly darker for eyes */
 98 |   --background: #111;
 99 |   --input-background: #141414;
100 |   --input-border: #2c2c2c;
101 |   --sidebar-background: #0a0a0a;
102 |   --sidebar-border: #2c2c2c;
103 |   --quote-background: #0a0a0a;
104 |   --quote-border: #2c2c2c;
105 |   --table-stripe: #252525;
106 |   --table-hover: #2c2c2c;
107 |   --table-border: #2c2c2c;
108 |   --text: white;
109 |   --footer-text: #a1a1a1;
110 | }
111 | 
112 | .missing-glasses-mode{
113 |   filter: blur(2px)
114 | }
115 | 
116 | html,body {
117 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
118 |   font-size: 13px;
119 |   background-color: var(--background);
120 |   color: var(--text);
121 |   padding: 0;
122 |   margin: 0;
123 | }
124 | 
125 | body{
126 |   overflow-y: scroll; /* Show scrollbars */
127 | }
128 | 
129 | * {
130 |   -webkit-box-sizing: border-box;
131 |   -moz-box-sizing: border-box;
132 |   box-sizing: border-box;
133 | }
134 | 
135 | h1, h2 {
136 |   font: bold 2em;
137 |   margin: 0 0 0.5em 0;
138 | }
139 | 
140 | h2 {
141 |   font-size: 1.5em;
142 | }
143 | 
144 | p {
145 |   margin: 0 0 1em 0;
146 | }
147 | 
148 | a {
149 |   color: #4d97ff;
150 |   font-weight: bold;
151 |   text-decoration: none;
152 | }
153 | 
154 | .margined {
155 |   margin-left: 282.600px;
156 |   margin-right: 282.600px;
157 | }
158 | 
159 | button,button {
160 |   border-radius: 4px;
161 |   border: none;
162 |   background: #4d97ff;
163 |   box-shadow: none;
164 |   font-family: inherit;
165 |   font-weight: bold;
166 |   color: #fff;
167 |   text-shadow: none;
168 |   cursor: pointer;
169 |   display: inline-block;
170 |   line-height: 30px;
171 | }
172 | 
173 | .input {
174 |   width: 600px;
175 |   border-radius: 5px;
176 |   padding: 10px;
177 |   border: 1px solid var(--input-border);
178 |   background-color: var(--input-background);
179 |   color: var(--text);
180 |   margin-bottom: 0.5em;
181 | }
182 | 
183 | select {
184 |   width: 120px;
185 |   border-radius: 5px;
186 |   padding: 10px;
187 |   border: 1px solid var(--input-border);
188 |   background-color: var(--input-background);
189 |   color: var(--text);
190 |   margin-bottom: 0.5em;
191 | }
192 | 
193 | .form-button {
194 |   padding: 10px;
195 |   line-height: normal;
196 | }
197 | 
198 | .alert {
199 | 	padding: 15px;
200 | 	background-color: white;
201 | 	color: black;
202 | 	margin-bottom: 15px;
203 | }
204 | 
205 | .alert .close-btn{
206 |   float: right;
207 |   cursor: pointer;
208 | }
209 | 
210 | .alert.error {
211 | 	background-color: #f44336;
212 | 	color: white
213 | }
214 | 
215 | .alert.information {
216 | 	background-color: #2196F3;
217 | 	color: white
218 | }
219 | 
220 | .alert.success {
221 | 	background-color: var(--brand);
222 | 	color: white
223 | }
224 | 
225 | .tooltip {
226 |   display: block !important;
227 |   z-index: 10000;
228 | }
229 | 
230 | .tooltip .tooltip-inner {
231 |   background: black;
232 |   color: white;
233 |   border-radius: 16px;
234 |   padding: 5px 10px 4px;
235 | }
236 | 
237 | .tooltip .tooltip-arrow {
238 |   width: 0;
239 |   height: 0;
240 |   border-style: solid;
241 |   position: absolute;
242 |   margin: 5px;
243 |   border-color: black;
244 |   z-index: 1;
245 | }
246 | 
247 | .tooltip[x-placement^="top"] {
248 |   margin-bottom: 5px;
249 | }
250 | 
251 | .tooltip[x-placement^="top"] .tooltip-arrow {
252 |   border-width: 5px 5px 0 5px;
253 |   border-left-color: transparent !important;
254 |   border-right-color: transparent !important;
255 |   border-bottom-color: transparent !important;
256 |   bottom: -5px;
257 |   left: calc(50% - 5px);
258 |   margin-top: 0;
259 |   margin-bottom: 0;
260 | }
261 | 
262 | .tooltip[x-placement^="bottom"] {
263 |   margin-top: 5px;
264 | }
265 | 
266 | .tooltip[x-placement^="bottom"] .tooltip-arrow {
267 |   border-width: 0 5px 5px 5px;
268 |   border-left-color: transparent !important;
269 |   border-right-color: transparent !important;
270 |   border-top-color: transparent !important;
271 |   top: -5px;
272 |   left: calc(50% - 5px);
273 |   margin-top: 0;
274 |   margin-bottom: 0;
275 | }
276 | 
277 | .tooltip[x-placement^="right"] {
278 |   margin-left: 5px;
279 | }
280 | 
281 | .tooltip[x-placement^="right"] .tooltip-arrow {
282 |   border-width: 5px 5px 5px 0;
283 |   border-left-color: transparent !important;
284 |   border-top-color: transparent !important;
285 |   border-bottom-color: transparent !important;
286 |   left: -5px;
287 |   top: calc(50% - 5px);
288 |   margin-left: 0;
289 |   margin-right: 0;
290 | }
291 | 
292 | .tooltip[x-placement^="left"] {
293 |   margin-right: 5px;
294 | }
295 | 
296 | .tooltip[x-placement^="left"] .tooltip-arrow {
297 |   border-width: 5px 0 5px 5px;
298 |   border-top-color: transparent !important;
299 |   border-right-color: transparent !important;
300 |   border-bottom-color: transparent !important;
301 |   right: -5px;
302 |   top: calc(50% - 5px);
303 |   margin-left: 0;
304 |   margin-right: 0;
305 | }
306 | 
307 | .tooltip.popover .popover-inner {
308 |   background: #000000b5;
309 |   color: white;
310 |   padding: 10px;
311 |   border-radius: 5px;
312 |   box-shadow: 0 5px 30px rgba(black, .1);
313 | }
314 | 
315 | .tooltip.popover .popover-arrow {
316 |   border-color: #000000b5;
317 | }
318 | 
319 | .tooltip[aria-hidden='true'] {
320 |   visibility: hidden;
321 |   opacity: 0;
322 |   transition: opacity .15s, visibility .15s;
323 | }
324 | 
325 | .tooltip[aria-hidden='false'] {
326 |   visibility: visible;
327 |   opacity: 1;
328 |   transition: opacity .15s;
329 | }
330 | 
331 | .mobile {
332 |   display: none;
333 | }
334 | 
335 | @media only screen and (max-width: 750px) {
336 |   .full {
337 |     display: none;
338 |   }
339 |   .mobile {
340 |     display: initial;
341 |   }
342 | }
343 | 
344 | @media only screen and (max-width: 1350px) {
345 |   .margined {
346 |     /*background-color: lightblue;*/
347 |     margin-left: 10px;
348 |     margin-right: 10px;
349 |   }
350 | }
351 | </style>
352 | 


--------------------------------------------------------------------------------
/pages/search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <Header :crumbs="[{ link: '/search', text: 'search' }]" />
  4 |     <div class="margined">
  5 |       <h1>search</h1>
  6 |       <form method="get">
  7 |         <input
  8 |           required
  9 |           name="q"
 10 |           type="text"
 11 |           placeholder="search query"
 12 |           ref="searchbox"
 13 |           class="input"
 14 |           v-model="search"
 15 |         />
 16 |         <select
 17 |           name="sort"
 18 |           id="sorting"
 19 |           :value="$route.query.sort || 'relevance'"
 20 |         >
 21 |           <option value="relevance">relevance</option>
 22 |           <option value="newest">newest</option>
 23 |           <option value="oldest">oldest</option>
 24 |         </select>
 25 |         <button type="submit" class="form-button">go</button>
 26 |         <details :open="filterOpen">
 27 |           <summary>Filtering</summary>
 28 |           <input
 29 |             type="text"
 30 |             ref="filteringbox"
 31 |             :name="boundFilter ? 'filter' : ''"
 32 |             v-model="boundFilter"
 33 |             class="input"
 34 |             placeholder="post_number = 1"
 35 |           />
 36 |           <div class="speed">
 37 |             speed:
 38 |             <button type="button" @click="addParameter('username')">
 39 |               written by
 40 |             </button>
 41 |             <button type="button" @click="addParameter('last_edited_by')">
 42 |               edited by
 43 |             </button>
 44 |             <button type="button" @click="addParameter('topic.category')">
 45 |               in category
 46 |             </button>
 47 |             <button type="button" @click="addParameter('time_posted')">
 48 |               time posted
 49 |             </button>
 50 |           </div>
 51 |         </details>
 52 |       </form>
 53 |       <!--<div v-show="splash">
 54 |         <h2>search parameters</h2>
 55 |         <p>searches from scratchdb use a pretty neat format.</p>
 56 |         <p>
 57 |           each requirement is in the format <code>+requirement:"value"</code>,
 58 |           if you don't include a requirement it's assumed you mean content
 59 |         </p>
 60 | 
 61 |         <p>
 62 |           prefix a requirement with <code>+</code> to require it to be true,
 63 |           <code>-</code> to require it to be false and <code>~</code> if it
 64 |           should be true, but is not required
 65 |         </p>
 66 | 
 67 |         <table class="info">
 68 |           <thead>
 69 |             <tr>
 70 |               <th>Requirement</th>
 71 |               <th>What it does</th>
 72 |             </tr>
 73 |           </thead>
 74 |           <tbody>
 75 |             <tr>
 76 |               <td>username</td>
 77 |               <td>requires that the resulting posts be by a certain user</td>
 78 |             </tr>
 79 |             <tr>
 80 |               <td>category</td>
 81 |               <td>
 82 |                 requires that the resulting posts be in a category (this does
 83 |                 not have to be complete, +category:"Advanced" will match
 84 |                 Advanced Topics)
 85 |               </td>
 86 |             </tr>
 87 |             <tr>
 88 |               <td>topic</td>
 89 |               <td>
 90 |                 requires that the resulting posts be from a topic with the id
 91 |               </td>
 92 |             </tr>
 93 |             <tr>
 94 |               <td>title</td>
 95 |               <td>
 96 |                 requires that the resulting posts be from a topic with a topic
 97 |                 title (this does not have to be complete, +title:"help" will
 98 |                 match anything with help in the title.)
 99 |               </td>
100 |             </tr>
101 |             <tr>
102 |               <td>id</td>
103 |               <td>requires that the resulting post has an id</td>
104 |             </tr>
105 |             <tr>
106 |               <td>content</td>
107 |               <td>
108 |                 requires that the resulting posts have this in their content
109 |               </td>
110 |             </tr>
111 |             <tr>
112 |               <td>closed</td>
113 |               <td>
114 |                 specifies whether the containing topics are closed. use "1" to
115 |                 only get posts in topics that are closed, and "0" to get posts
116 |                 only in topics that are open
117 |               </td>
118 |             </tr>
119 |             <tr>
120 |               <td>status</td>
121 |               <td>
122 |                 requires the poster to be a member of the matching group (for
123 |                 example, +status:"Scratch Team" returns only posts from the
124 |                 scratch team)
125 |               </td>
126 |             </tr>
127 |           </tbody>
128 |         </table>
129 |         <br />
130 |         <h2>other</h2>
131 |         <p><code>/user/:username</code> will show posts by the user</p>
132 |         <p><code>/topic/:topic</code> will show posts in a topic by id</p>
133 |         <p><code>/post/:post</code> will show a single post by id</p>
134 |       </div>
135 |        -->
136 |       <div v-show="splash">
137 |         <h2>ocular search</h2>
138 |         <p>⚠️ expect to see some broken-ness!</p>
139 |         <p>
140 |           this is a simplified version of ocular search to replace the old
141 |           broken one that depended on scratchdb v3. it is missing features (and
142 |           has an incomplete database), but at least it works.
143 |         </p>
144 |         <p>watch this space for improvements!</p>
145 |       </div>
146 |       <div v-show="!splash">
147 |         <Error v-if="error" :error="error.title" :details="error.details" />
148 |         <PostList
149 |           :posts="data.hits"
150 |           :loading="$fetchState.pending"
151 |           @loadMore="loadMore()"
152 |           :showLoadMore="showLoadMore"
153 |         />
154 |       </div>
155 |       <Footer />
156 |     </div>
157 |   </div>
158 | </template>
159 | 
160 | <style scoped>
161 | details {
162 |   background-color: var(--input-background);
163 |   width: max-content;
164 |   border-width: 1px;
165 |   border-style: solid;
166 |   border-color: var(--quote-border);
167 |   border-radius: 5px;
168 |   margin: 1em 0;
169 |   padding: 0 1.5em;
170 | }
171 | 
172 | summary {
173 |   cursor: pointer;
174 |   margin: 1.5em 0;
175 | }
176 | 
177 | .speed {
178 |   margin-bottom: 2em;
179 | }
180 | 
181 | .info {
182 |   border-collapse: collapse;
183 |   width: 100%;
184 | }
185 | 
186 | .info td,
187 | .info th {
188 |   border: 1px solid var(--table-border);
189 |   padding: 8px;
190 | }
191 | 
192 | .info tr:nth-child(even) {
193 |   background-color: var(--table-stripe);
194 |   transition: 250ms;
195 | }
196 | 
197 | .info tr:nth-child(odd) {
198 |   background-color: var(--background);
199 |   transition: 250ms;
200 | }
201 | 
202 | .info tr:hover {
203 |   background-color: var(--table-hover);
204 | }
205 | 
206 | .info th {
207 |   padding-top: 12px;
208 |   padding-bottom: 12px;
209 |   text-align: left;
210 |   background-color: var(--brand);
211 |   color: white;
212 | }
213 | 
214 | @media only screen and (max-width: 800px) {
215 |   .input {
216 |     width: 200px;
217 |   }
218 | }
219 | </style>
220 | <script>
221 | export default {
222 |   head: {
223 |     title: "scratch forum search",
224 |   },
225 |   ssr: true,
226 |   watch: {
227 |     "$route.query": "$fetch",
228 |   },
229 |   data() {
230 |     return {
231 |       search: encodeURIComponent(decodeURIComponent(this.$route.query.q || "")),
232 |       boundFilter: this.$route.query.filter,
233 |       filter: this.$route.query.filter
234 |         ? `&filter=${encodeURIComponent(
235 |             decodeURIComponent(this.$route.query.filter)
236 |           )}`
237 |         : "",
238 |       filterOpen: !!this.$route.query.filter,
239 |       sort:
240 |         this.$route.query.sort == "newest"
241 |           ? "&sort=id:desc"
242 |           : this.$route.query.sort == "oldest"
243 |           ? "&sort=id:asc"
244 |           : "",
245 |       showLoadMore: false,
246 |       page: 0,
247 |       data: {},
248 |       splash: false,
249 |       ssr: true,
250 |       error: null,
251 |     };
252 |   },
253 |   methods: {
254 |     async loadMore() {
255 |       this.showLoadMore = false;
256 |       this.page++;
257 | 
258 |       var res = await fetch(
259 |         `https://scratchdb.lefty.one/search/indexes/forum_posts/search?attributesToSearchOn=content&hitsPerPage=50&q=${
260 |           this.search
261 |         }&page=${this.page + 1}${this.sort}${this.filter}`,
262 |         {
263 |           headers: {
264 |             authorization:
265 |               "Bearer 3396f61ef5b02abf801096be5f0b0ee620de304dd92fc6045aeb99539cd0bec4",
266 |           },
267 |         }
268 |       ).catch((err) => {
269 |         this.error = {
270 |           title: "Network Error",
271 |           details: "Failed to connect to ScratchDB.",
272 |         };
273 |       });
274 | 
275 |       var data = await res.json();
276 |       this.data.hits.push(...data.hits);
277 | 
278 |       this.showLoadMore = true;
279 |     },
280 |     addParameter(param) {
281 |       let box = this.$refs.filteringbox;
282 |       box.value += `${box.value.length == 0 ? "" : " AND "}${param} = ""`;
283 |       box.focus();
284 |       box.setSelectionRange(box.value.length - 1, box.value.length - 1);
285 |     },
286 |   },
287 |   async fetch() {
288 |     if (this.search) {
289 |       let that = this;
290 |       this.data = await fetch(
291 |         `https://scratchdb.lefty.one/search/indexes/forum_posts/search?attributesToSearchOn=content&hitsPerPage=50&q=${this.search}${this.sort}${this.filter}`,
292 |         {
293 |           headers: {
294 |             authorization:
295 |               "Bearer 3396f61ef5b02abf801096be5f0b0ee620de304dd92fc6045aeb99539cd0bec4",
296 |           },
297 |         }
298 |       )
299 |         .then((res) => res.json())
300 |         .catch((err) => {
301 |           this.error = {
302 |             title: "Network Error",
303 |             details: "Failed to connect to ScratchDB.",
304 |           };
305 |           return { posts: [] };
306 |         });
307 |       if (this.data.message) {
308 |         return (this.error = {
309 |           title: "Search error",
310 |           details: this.data.message,
311 |         });
312 |       }
313 |       this.splash = false;
314 |       this.showLoadMore = true;
315 |       return;
316 |     }
317 | 
318 |     this.splash = true;
319 |   },
320 |   fetchOnServer: false,
321 | };
322 | </script>
323 | 


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