schoolbox web extension :)
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

style: format

willow dc1353d6 5f2720f1

+36 -38
+1 -1
.prettierrc.json
··· 3 3 "bracketSameLine": true, 4 4 "plugins": ["prettier-plugin-svelte", "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"], 5 5 "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }], 6 - "tailwindStylesheet": "./src/entrypoints/app.css" 6 + "tailwindStylesheet": "./src/entrypoints/popup/app.css" 7 7 }
+2 -2
src/entrypoints/popup/App.svelte
··· 46 46 </script> 47 47 48 48 <main 49 - class="bg-ctp-base flex flex-col items-center p-6 {globalSettings.state.themeFlavour}" 49 + class="flex flex-col items-center bg-ctp-base p-6 {globalSettings.state.themeFlavour}" 50 50 style="--ctp-accent: {accentRgb}"> 51 - <nav class="text-ctp-text mb-4 flex rounded-xl px-4 py-2" id="navbar"> 51 + <nav class="mb-4 flex rounded-xl px-4 py-2 text-ctp-text" id="navbar"> 52 52 <a href="#/" class="navbutton-left" use:active={{ className: "active" }}>Settings</a> 53 53 <a href="#/plugins" class="navbutton-center" use:active={{ className: "active" }}>Plugins</a> 54 54 <a href="#/themes" class="navbutton-center" use:active={{ className: "active" }}>Themes</a>
+11 -11
src/entrypoints/popup/app.css
··· 5 5 6 6 body { 7 7 width: 450px; /* max: 1000px */ 8 - @apply bg-ctp-base text-ctp-text font-lexend text-base; 8 + @apply bg-ctp-base font-lexend text-base text-ctp-text; 9 9 } 10 10 11 11 @theme { ··· 27 27 mask: var(--icon) no-repeat; 28 28 mask-size: 100% 100%; 29 29 background-color: currentColor; 30 - @apply text-(--ctp-accent) h-16 w-20; 30 + @apply h-16 w-20 text-(--ctp-accent); 31 31 } 32 32 33 33 .slider { 34 - @apply bg-ctp-surface1 after:bg-ctp-text peer-checked:after:bg-ctp-mantle peer-checked:bg-(--ctp-accent) ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg p-1 duration-500 ease-in-out after:rounded-lg after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6; 34 + @apply ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg bg-ctp-surface1 p-1 duration-500 ease-in-out peer-checked:bg-(--ctp-accent) after:rounded-lg after:bg-ctp-text after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6 peer-checked:after:bg-ctp-mantle; 35 35 } 36 36 37 37 .slider.big { ··· 59 59 } 60 60 61 61 #card { 62 - @apply bg-ctp-mantle bg-linear-to-b outline-(--ctp-accent) outline-solid flex w-full flex-col items-center justify-center rounded-3xl p-6 shadow-xl outline-2; 62 + @apply flex w-full flex-col items-center justify-center rounded-3xl bg-ctp-mantle bg-linear-to-b p-6 shadow-xl outline-2 outline-(--ctp-accent) outline-solid; 63 63 } 64 64 65 65 #card h1 { 66 - @apply from-ctp-blue to-ctp-teal bg-linear-to-r bg-clip-text text-5xl font-bold text-transparent; 66 + @apply bg-linear-to-r from-ctp-blue to-ctp-teal bg-clip-text text-5xl font-bold text-transparent; 67 67 68 68 &.ctp { 69 69 background-image: linear-gradient( ··· 79 79 } 80 80 81 81 #card h2 { 82 - @apply text-(--ctp-accent) text-4xl font-semibold; 82 + @apply text-4xl font-semibold text-(--ctp-accent); 83 83 } 84 84 85 85 #card h3 { ··· 95 95 } 96 96 97 97 button#toggle { 98 - @apply text-ctp-base rounded-xl px-4 py-2 text-xl font-bold; 98 + @apply rounded-xl px-4 py-2 text-xl font-bold text-ctp-base; 99 99 } 100 100 101 101 button.small { ··· 123 123 } 124 124 125 125 .navbutton-left { 126 - @apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 rounded-l-xl py-2 pl-4 pr-2 outline-1; 126 + @apply rounded-l-xl py-2 pr-2 pl-4 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80; 127 127 } 128 128 129 129 .navbutton-center { 130 - @apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 p-2 outline-1; 130 + @apply p-2 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80; 131 131 } 132 132 133 133 .navbutton-right { 134 - @apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 rounded-r-xl py-2 pl-2 pr-4 outline-1; 134 + @apply rounded-r-xl py-2 pr-4 pl-2 outline-1 outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80; 135 135 } 136 136 137 137 div[title] { ··· 139 139 } 140 140 141 141 div[title]:hover::after { 142 - @apply bg-ctp-surface0 text-ctp-text absolute bottom-full left-1/2 whitespace-nowrap; 142 + @apply absolute bottom-full left-1/2 bg-ctp-surface0 whitespace-nowrap text-ctp-text; 143 143 content: attr(title); 144 144 transform: translateX(-50%); 145 145 padding: 0.5rem;
+1 -1
src/entrypoints/popup/components/Banner.svelte
··· 4 4 5 5 {#if visible} 6 6 <button 7 - class="banner bg-ctp-blue text-ctp-crust mb-4 flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg p-4" 7 + class="banner mb-4 flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-ctp-blue p-4 text-ctp-crust" 8 8 {onclick}> 9 9 {@render children()} 10 10 <p>{message}</p>
+4 -4
src/entrypoints/popup/components/Footer.svelte
··· 31 31 <GitBranch size={18} /> v{version} 32 32 <!-- show ripple badge if the extension has been updated (unread release notes) --> 33 33 {#if updated.state.changelog} 34 - <span class="absolute right-0 top-0 -mr-1 -mt-1 flex size-3"> 35 - <span class="bg-ctp-blue absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"></span> 36 - <span class="bg-ctp-blue relative inline-flex size-3 rounded-full"></span> 34 + <span class="absolute top-0 right-0 -mt-1 -mr-1 flex size-3"> 35 + <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-ctp-blue opacity-75"></span> 36 + <span class="relative inline-flex size-3 rounded-full bg-ctp-blue"></span> 37 37 </span> 38 38 {/if} 39 39 </Button> ··· 52 52 onclick={() => { 53 53 window.open("https://discord.gg/rZxtGJ98BE", "_blank"); 54 54 }} 55 - ><svg class="fill-ctp-text h-[22px]" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" 55 + ><svg class="h-[22px] fill-ctp-text" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" 56 56 ><title>Discord</title><path 57 57 d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" /></svg 58 58 ></Button>
+2 -2
src/entrypoints/popup/components/Modal.svelte
··· 15 15 onclick={(e) => { 16 16 if (e.target === dialog) dialog.close(); 17 17 }} 18 - class="bg-ctp-base text-ctp-text open:animate-zoom-in relative m-auto rounded-lg backdrop:backdrop-blur-md"> 19 - <button autofocus onclick={() => dialog?.close()} class="small bg-ctp-surface1 absolute right-0 top-0 m-2" 18 + class="relative m-auto rounded-lg bg-ctp-base text-ctp-text backdrop:backdrop-blur-md open:animate-zoom-in"> 19 + <button autofocus onclick={() => dialog?.close()} class="small absolute top-0 right-0 m-2 bg-ctp-surface1" 20 20 ><X /></button> 21 21 22 22 <div class="p-4">
+1 -1
src/entrypoints/popup/components/Motd.svelte
··· 12 12 </script> 13 13 14 14 <!-- MOTD --> 15 - <div class="text-ctp-subtext0 text-center italic"> 15 + <div class="text-center text-ctp-subtext0 italic"> 16 16 <!-- eslint-disable-next-line svelte/no-at-html-tags --> 17 17 <p>{@html motd.state.motd}</p> 18 18 <!-- Free and <a href='https://github.com/schooltape/schooltape' class='text-(--ctp-accent)'> open source</a>! -->
+1 -1
src/entrypoints/popup/components/Title.svelte
··· 10 10 let { update, title = "", checked }: Props = $props(); 11 11 </script> 12 12 13 - <label for="theme-toggle" class="text-ctp-text group relative flex items-center justify-between p-2 text-xl"> 13 + <label for="theme-toggle" class="group relative flex items-center justify-between p-2 text-xl text-ctp-text"> 14 14 <h2>{title}</h2> 15 15 <Toggle id="theme-toggle" size="big" {checked} {update} /> 16 16 </label>
+1 -1
src/entrypoints/popup/components/inputs/Button.svelte
··· 12 12 let { children, title, id, onclick, classList = "text-ctp-text hover:bg-ctp-surface1" }: Props = $props(); 13 13 </script> 14 14 15 - <button {title} {id} class="bg-ctp-surface0 small flex h-8 cursor-pointer items-center gap-3 {classList}" {onclick}> 15 + <button {title} {id} class="small flex h-8 cursor-pointer items-center gap-3 bg-ctp-surface0 {classList}" {onclick}> 16 16 {@render children()} 17 17 </button>
+2 -2
src/entrypoints/popup/components/inputs/Slider.svelte
··· 15 15 16 16 <div class="mt-4 space-y-2"> 17 17 {#if name} 18 - <label for={id} class="text-ctp-text block">{name}</label> 18 + <label for={id} class="block text-ctp-text">{name}</label> 19 19 {/if} 20 20 <div class="flex items-center gap-4"> 21 21 <input ··· 34 34 {max} 35 35 {value} 36 36 class="styled-slider slider-progress" /> 37 - <span id={id + "-value"} class="text-ctp-text text-sm font-medium">{currentValue}</span> 37 + <span id={id + "-value"} class="text-sm font-medium text-ctp-text">{currentValue}</span> 38 38 </div> 39 39 {#if description} 40 40 <p class="text-ctp-overlay1">{description}</p>
+2 -2
src/entrypoints/popup/components/inputs/TextInput.svelte
··· 11 11 </script> 12 12 13 13 <div class="flex w-full items-center justify-center"> 14 - <input {id} class="bg-ctp-surface0 text-ctp-text w-full rounded-l-xl p-2" bind:value {placeholder} type="text" /> 15 - <button class="text-ctp-crust bg-(--ctp-accent) rounded-r-xl p-2" type="submit" {onclick}>{label}</button> 14 + <input {id} class="w-full rounded-l-xl bg-ctp-surface0 p-2 text-ctp-text" bind:value {placeholder} type="text" /> 15 + <button class="rounded-r-xl bg-(--ctp-accent) p-2 text-ctp-crust" type="submit" {onclick}>{label}</button> 16 16 </div>
+2 -2
src/entrypoints/popup/components/inputs/Toggle.svelte
··· 14 14 let { update, checked, id, size = "big", text = "", description = "", children }: Props = $props(); 15 15 </script> 16 16 17 - <label class="text-ctp-text group relative flex cursor-pointer items-center justify-between py-2"> 17 + <label class="group relative flex cursor-pointer items-center justify-between py-2 text-ctp-text"> 18 18 <h4 class="text-ctp-text">{text}</h4> 19 19 <input 20 20 {id} ··· 29 29 </label> 30 30 31 31 <div 32 - class="text-ctp-overlay1 group-hover:text-ctp-subtext0 flex items-center justify-between transition-colors duration-500 ease-in-out"> 32 + class="flex items-center justify-between text-ctp-overlay1 transition-colors duration-500 ease-in-out group-hover:text-ctp-subtext0"> 33 33 <div>{description}</div> 34 34 <div>{@render children?.()}</div> 35 35 </div>
+3 -3
src/entrypoints/popup/routes/Snippets.svelte
··· 60 60 {/each} 61 61 </div> 62 62 <div class="w-full"> 63 - <h3 class="text-ctp-text my-4">User Snippets</h3> 64 - <p class="text-ctp-overlay2 mb-4"> 63 + <h3 class="my-4 text-ctp-text">User Snippets</h3> 64 + <p class="mb-4 text-ctp-overlay2"> 65 65 To learn how to make your own snippets, please read the 66 66 <a 67 67 class="text-ctp-blue hover:underline" ··· 95 95 await globalSettings.storage.setValue(settings); 96 96 }}>Remove</button> 97 97 <a href={snippet.url} target="_blank" 98 - ><button class="xsmall hover:text-ctp-mantle hover:bg-(--ctp-accent)">Gist</button></a> 98 + ><button class="xsmall hover:bg-(--ctp-accent) hover:text-ctp-mantle">Gist</button></a> 99 99 </div> 100 100 {/each} 101 101 </div>
+2 -2
src/entrypoints/popup/routes/Themes.svelte
··· 48 48 globalSettings.set({ themeLogo: logoId as LogoId }); 49 49 }} 50 50 class:highlight={globalSettings.state.themeLogo === logoId} 51 - class="border-(--ctp-accent) flex flex-col rounded-lg border p-2"> 51 + class="flex flex-col rounded-lg border border-(--ctp-accent) p-2"> 52 52 <span>{logo.name}</span> 53 53 {#if logo.disable !== true} 54 54 <div class="flex h-full w-full items-center justify-center"> ··· 84 84 globalSettings.set({ themes: toggled }); 85 85 }} /> 86 86 87 - <div id="flavours" class="text-ctp-text my-6 flex rounded-xl py-2"> 87 + <div id="flavours" class="my-6 flex rounded-xl py-2 text-ctp-text"> 88 88 {#each flavours as flavour (flavour)} 89 89 <button 90 90 class:active={globalSettings.state.themeFlavour === flavour}
+1 -3
src/utils/storage/plugins.ts
··· 88 88 89 89 export const plugins = buildPluginsFromConfig(pluginConfig); 90 90 91 - function buildPluginsFromConfig( 92 - config: Record<string, Types.PluginConfig>, 93 - ): Record<Types.PluginId, Types.PluginData> { 91 + function buildPluginsFromConfig(config: Record<string, Types.PluginConfig>): Record<Types.PluginId, Types.PluginData> { 94 92 const plugins: Partial<Record<Types.PluginId, Types.PluginData>> = {}; 95 93 96 94 for (const [pluginId, pluginConfig] of Object.entries(config)) {