socksthewolf.com
Schedule posts to Bluesky with Cloudflare workers.
skyscheduler.work
cf
tool
bsky-tool
cloudflare
bluesky
schedule
bsky
service
social-media
cloudflare-workers
split up css
yum yum
+1
-1
README.md
+1
-1
README.md
···
108
108
109
109
### Minimization
110
110
111
-
The application by default is configured to use the minified versions of the scripts in `assets/js`. By default all client JS files will rebuild whenever any typescript file is changed or the application is deployed/ran.
111
+
The application by default is configured to use the minified versions of the scripts in `assets/js` and `assets/css`. By default, all minimized files will rebuild whenever any typescript file is changed or the application is deployed/ran.
112
112
113
113
## Project Structure
114
114
+224
assets/css/dashboard.css
+224
assets/css/dashboard.css
···
1
+
/** SIDEBAR **/
2
+
3
+
.postItemHeader {
4
+
min-height: 50px;
5
+
button:has(+ button) {
6
+
margin-right: 10px;
7
+
}
8
+
}
9
+
10
+
.sidebar-block {
11
+
margin-top: -.2rem;
12
+
padding-bottom: 0.5rem;
13
+
}
14
+
15
+
@media (min-width: 510px) and (max-width:1200px) {
16
+
.logoBox h4 {
17
+
display: none;
18
+
}
19
+
}
20
+
21
+
.row-fluid, .pico .row-fluid {
22
+
padding-left: 30px;
23
+
padding-right: 30px;
24
+
}
25
+
26
+
@media (max-width:1060px) {
27
+
.row-fluid, .pico .row-fluid {
28
+
padding-left: 0px;
29
+
padding-right: 0px;
30
+
}
31
+
}
32
+
33
+
/* Setting and refresh buttons */
34
+
.postControls {
35
+
margin-top: 0.6rem;
36
+
}
37
+
38
+
.postControls > button, .postControls > a {
39
+
margin-right: 10px;
40
+
margin-bottom: 5px;
41
+
}
42
+
43
+
/** POSTS **/
44
+
#posts {
45
+
max-height: 55dvh;
46
+
overflow-y: auto;
47
+
overflow-x: hidden;
48
+
}
49
+
50
+
.postText {
51
+
white-space: pre-wrap;
52
+
}
53
+
54
+
.btn-sm, .pico .btn-sm {
55
+
width: 25px !important;
56
+
height: 30px;
57
+
padding: unset;
58
+
line-height: unset;
59
+
}
60
+
61
+
.btn-delete, .pico .btn-delete {
62
+
float: right;
63
+
svg, img {
64
+
margin-top: -7px;
65
+
}
66
+
}
67
+
68
+
/** THREADS **/
69
+
.pico #posts blockquote {
70
+
margin: 0 !important;
71
+
padding: 0 !important;
72
+
}
73
+
74
+
/* Highlighting when post is edited */
75
+
.highlight, .highlight div, .highlight header, .highlight footer {
76
+
background-color: rgba(210, 166, 8, 0.891) !important;
77
+
}
78
+
79
+
.thread-cancel {
80
+
margin-top: -2rem;
81
+
}
82
+
83
+
.addThreadPost {
84
+
svg, img {
85
+
margin-top: -7px;
86
+
margin-left: 1.3px;
87
+
}
88
+
}
89
+
90
+
/** DASHBOARD CLASSES **/
91
+
.w-full {
92
+
width: 100%;
93
+
}
94
+
95
+
.w-half {
96
+
width: 50% !important;
97
+
}
98
+
99
+
.dashboard {
100
+
padding-top: 1px;
101
+
}
102
+
103
+
#count, .editImgThumb, .editAltBlock {
104
+
display: inline-block;
105
+
}
106
+
107
+
#refresh-posts > span, #settingsButton > span, .repostIcon {
108
+
margin-right: 5px;
109
+
}
110
+
111
+
/** VIOLATIONS **/
112
+
.warning-box {
113
+
position: relative;
114
+
padding: 3px;
115
+
background: linear-gradient(to right, orange, orangered);
116
+
margin-bottom: 5px;
117
+
}
118
+
119
+
.warning {
120
+
color: white;
121
+
}
122
+
123
+
/** SETTINGS **/
124
+
#accountResponse .btn-error *, #accountDeleteResponse .btn-error * {
125
+
margin-left: 5px;
126
+
color: white;
127
+
}
128
+
129
+
#deleteAccount {
130
+
z-index: 20;
131
+
}
132
+
133
+
dialog button.btn-error {
134
+
float: left;
135
+
}
136
+
137
+
/** MAKING/EDITING POSTS **/
138
+
textarea, .pico textarea {
139
+
resize: none;
140
+
}
141
+
142
+
.uploadGuidelines, .editAltBlock {
143
+
margin-left: 10px;
144
+
}
145
+
146
+
/* Character Counts */
147
+
.smallLabel {
148
+
display: block;
149
+
width: 100%;
150
+
margin-top: calc(var(--pico-spacing) * -.75);
151
+
margin-bottom: var(--pico-spacing);
152
+
color: var(--pico-muted-color);
153
+
}
154
+
155
+
.tooLong {
156
+
color: red;
157
+
}
158
+
159
+
/* Retweet Options */
160
+
.repostScheduleSimple {
161
+
display: inherit !important;
162
+
text-align: center;
163
+
select {
164
+
width: 10%;
165
+
height: 50px;
166
+
margin-left: 15px;
167
+
margin-right: 15px;
168
+
padding-top: 10px;
169
+
}
170
+
}
171
+
172
+
.capitialize {
173
+
text-transform: capitalize;
174
+
}
175
+
176
+
/* Checkbox Input Helpers */
177
+
.checkboxLine {
178
+
width: unset !important;
179
+
}
180
+
181
+
.noselect {
182
+
user-select: none;
183
+
}
184
+
185
+
/* ALT TEXT */
186
+
#altTextField {
187
+
margin-top: 10px;
188
+
}
189
+
190
+
#altThumbImg, .editImgThumb {
191
+
max-width: 25vw;
192
+
max-height: 25vh;
193
+
overflow: hidden;
194
+
}
195
+
196
+
/* EDIT POST */
197
+
.editPostKeyboard {
198
+
svg, img {
199
+
margin-top: -7px;
200
+
}
201
+
text-decoration: none;
202
+
padding: 0;
203
+
color: white;
204
+
display: inline-block;
205
+
}
206
+
207
+
.editPostAlt {
208
+
margin-right: 5px;
209
+
font-size: 0.75rem;
210
+
padding: 5px;
211
+
}
212
+
213
+
/** REFRESH ANIMATION **/
214
+
215
+
/* Lightly adapted from https://github.com/n3r4zzurr0/svg-spinners */
216
+
@keyframes refreshPostSpinner {
217
+
100% {
218
+
transform:rotate(-360deg)
219
+
}
220
+
}
221
+
.svgAnim svg, .svgAnim img {
222
+
transform-origin:center;
223
+
animation:refreshPostSpinner .75s infinite linear;
224
+
}
+21
assets/css/dropzoneMods.css
+21
assets/css/dropzoneMods.css
···
24
24
.dz-filename {
25
25
width: 65%;
26
26
float: right;
27
+
white-space: nowrap !important;
28
+
overflow: hidden !important;
29
+
text-overflow: ellipsis !important;
27
30
}
28
31
29
32
html {
···
34
37
font-size: 0.5em;
35
38
font-weight: bold;
36
39
color: black;
40
+
}
41
+
42
+
.file-item-group {
43
+
height: 15%;
44
+
display: block !important;
45
+
button {
46
+
margin-top: 10px;
47
+
margin-bottom: 10px !important;
48
+
margin-left: 10px !important;
49
+
text-wrap: nowrap;
50
+
vertical-align: center !important;
51
+
padding-top: 0px;
52
+
}
53
+
}
54
+
55
+
.has-alt-text {
56
+
border: var(--pico-border-width) solid green !important;
57
+
color: green !important;
37
58
}
-246
assets/css/stylesheet.css
-246
assets/css/stylesheet.css
···
1
-
.tooLong {
2
-
color: red;
3
-
}
4
-
5
1
.hidden {
6
2
display: none !important;
7
-
}
8
-
9
-
.sidebar-block {
10
-
margin-top: -.2rem;
11
-
padding-bottom: 0.5rem;
12
-
}
13
-
14
-
.postItemHeader {
15
-
min-height: 50px;
16
-
button:has(+ button) {
17
-
margin-right: 10px;
18
-
}
19
3
}
20
4
21
5
.navHeader, .logoBox {
···
35
19
}
36
20
}
37
21
38
-
@media (min-width: 510px) and (max-width:1200px) {
39
-
.logoBox h4 {
40
-
display: none;
41
-
}
42
-
}
43
-
44
-
45
-
.repostScheduleSimple {
46
-
display: inherit !important;
47
-
text-align: center;
48
-
select {
49
-
width: 10%;
50
-
height: 50px;
51
-
margin-left: 15px;
52
-
margin-right: 15px;
53
-
padding-top: 10px;
54
-
}
55
-
}
56
-
57
-
.pico #posts blockquote {
58
-
margin: 0 !important;
59
-
padding: 0 !important;
60
-
}
61
-
62
-
.dz-filename, .truncate {
63
-
width: 80%;
64
-
white-space: nowrap;
65
-
overflow: hidden;
66
-
text-overflow: ellipsis;
67
-
}
68
-
69
-
.postText {
70
-
white-space: pre-wrap;
71
-
}
72
-
73
-
.checkboxLine {
74
-
width: unset !important;
75
-
}
76
-
77
22
.btn-error, .pico .btn-error {
78
23
border: var(--pico-border-width) solid red;
79
24
color: red;
···
90
35
color: white;
91
36
}
92
37
93
-
.btn-success, .pico .btn-success {
94
-
border: var(--pico-border-width) solid green;
95
-
color: green;
96
-
}
97
-
98
-
.btn-sm, .pico .btn-sm {
99
-
width: 25px !important;
100
-
height: 30px;
101
-
padding: unset;
102
-
line-height: unset;
103
-
104
-
}
105
-
106
-
.btn-delete, .pico .btn-delete {
107
-
float: right;
108
-
svg, img {
109
-
margin-top: -7px;
110
-
}
111
-
}
112
-
.thread-cancel {
113
-
margin-top: -2rem;
114
-
}
115
-
116
-
.addThreadPost {
117
-
svg, img {
118
-
margin-top: -7px;
119
-
margin-left: 1.3px;
120
-
}
121
-
}
122
-
123
-
.w-full {
124
-
width: 100%;
125
-
}
126
-
127
-
.w-half {
128
-
width: 50% !important;
129
-
}
130
-
131
-
.w-third {
132
-
width: 33% !important;
133
-
}
134
-
135
-
.dashboard {
136
-
padding-top: 1px;
137
-
}
138
-
139
-
.row-fluid, .pico .row-fluid {
140
-
padding-left: 30px;
141
-
padding-right: 30px;
142
-
}
143
-
144
-
@media (max-width:1060px) {
145
-
.row-fluid, .pico .row-fluid {
146
-
padding-left: 0px;
147
-
padding-right: 0px;
148
-
}
149
-
}
150
-
151
-
#posts {
152
-
max-height: 55dvh;
153
-
overflow-y: auto;
154
-
overflow-x: hidden;
155
-
}
156
-
157
-
.imgbtn {
158
-
height: 15%;
159
-
display: block;
160
-
button {
161
-
margin-top: 10px;
162
-
margin-bottom: 10px;
163
-
margin-left: 10px !important;
164
-
text-wrap: nowrap;
165
-
vertical-align: center;
166
-
padding-top: 0px;
167
-
}
168
-
}
169
-
170
-
#count, .editImgThumb, .editAltBlock {
171
-
display: inline-block;
172
-
}
173
-
174
-
#refresh-posts > span, #settingsButton > span, .repostIcon {
175
-
margin-right: 5px;
176
-
}
177
-
178
-
.postControls {
179
-
margin-top: 0.6rem;
180
-
}
181
-
182
-
.postControls > button, .postControls > a {
183
-
margin-right: 10px;
184
-
margin-bottom: 5px;
185
-
}
186
-
187
-
.smallest {
188
-
text-align: center;
189
-
font-size: smaller;
190
-
padding-top: 5px;
191
-
padding-bottom: 5px;
192
-
color: var(--pico-muted-color);
193
-
}
194
-
195
38
#loginForm button[type="submit"] {
196
39
width: 50%;
197
40
}
···
200
43
margin-top: unset;
201
44
}
202
45
203
-
.noselect {
204
-
user-select: none;
205
-
}
206
-
207
-
#deleteAccount {
208
-
z-index: 20;
209
-
}
210
-
211
46
#footerLinks span:not(:last-child):after {
212
47
content: " | "
213
48
}
···
216
51
margin-left: 5px;
217
52
}
218
53
219
-
.warning-box {
220
-
position: relative;
221
-
padding: 3px;
222
-
background: linear-gradient(to right, orange, orangered);
223
-
margin-bottom: 5px;
224
-
}
225
-
226
-
.warning {
227
-
color: white;
228
-
}
229
-
230
-
#accountResponse .btn-error *, #accountDeleteResponse .btn-error * {
231
-
margin-left: 5px;
232
-
color: white;
233
-
}
234
-
235
-
dialog button.btn-error {
236
-
float: left;
237
-
}
238
-
239
-
.uploadGuidelines, .editAltBlock {
240
-
margin-left: 10px;
241
-
}
242
-
243
-
#altTextField {
244
-
margin-top: 10px;
245
-
}
246
-
247
-
#altThumbImg, .editImgThumb {
248
-
max-width: 25vw;
249
-
max-height: 25vh;
250
-
overflow: hidden;
251
-
}
252
-
253
54
[role="tablist"], .pico [role="tablist"] {
254
55
display: block;
255
56
}
256
57
257
-
textarea, .pico textarea {
258
-
resize: none;
259
-
}
260
-
261
-
.editPostKeyboard {
262
-
svg, img {
263
-
margin-top: -7px;
264
-
}
265
-
text-decoration: none;
266
-
padding: 0;
267
-
color: white;
268
-
display: inline-block;
269
-
}
270
-
271
-
.editPostAlt {
272
-
margin-right: 5px;
273
-
font-size: 0.75rem;
274
-
padding: 5px;
275
-
}
276
-
277
58
.logout {
278
59
color: orangered;
279
-
}
280
-
281
-
.smallLabel {
282
-
display: block;
283
-
width: 100%;
284
-
margin-top: calc(var(--pico-spacing) * -.75);
285
-
margin-bottom: var(--pico-spacing);
286
-
color: var(--pico-muted-color);
287
-
}
288
-
289
-
.capitialize {
290
-
text-transform: capitalize;
291
60
}
292
61
293
62
.serverFunds {
···
295
64
top: -10px;
296
65
}
297
66
298
-
.highlight, .highlight div, .highlight header, .highlight footer {
299
-
background-color: rgba(210, 166, 8, 0.891) !important;
300
-
}
301
-
302
67
[data-tooltip]:before, .pico [data-tooltip]:before {
303
68
white-space: preserve-breaks !important;
304
69
}
305
-
306
-
/* Lightly adapted from https://github.com/n3r4zzurr0/svg-spinners */
307
-
@keyframes refreshPostSpinner {
308
-
100% {
309
-
transform:rotate(-360deg)
310
-
}
311
-
}
312
-
.svgAnim svg, .svgAnim img {
313
-
transform-origin:center;
314
-
animation:refreshPostSpinner .75s infinite linear;
315
-
}
+2
-2
assets/js/altTextHelper.js
+2
-2
assets/js/altTextHelper.js
···
26
26
const newAltTextData = altTextField.value;
27
27
saveCallback(newAltTextData);
28
28
if (newAltTextData === "") {
29
-
altTextButton.classList.remove("btn-success");
29
+
altTextButton.classList.remove("has-alt-text");
30
30
} else {
31
-
altTextButton.classList.add("btn-success");
31
+
altTextButton.classList.add("has-alt-text");
32
32
}
33
33
closeAltModal();
34
34
};
+1
-1
assets/js/postHelper.js
+1
-1
assets/js/postHelper.js
···
96
96
return;
97
97
}
98
98
setElementVisible(sectionLinkAttach, false);
99
-
const buttonHolder = Dropzone.createElement("<fieldset role='group' class='imgbtn'></fieldset>");
99
+
const buttonHolder = Dropzone.createElement("<fieldset role='group' class='file-item-group'></fieldset>");
100
100
const removeButton = Dropzone.createElement("<button class='fileDel outline btn-error' disabled><small>Remove file</small></button>");
101
101
const addAltText = Dropzone.createElement("<button class='outline' disabled><small>Add Alt Text</small></button><br />");
102
102
+3
-2
package.json
+3
-2
package.json
···
26
26
"minify:main": "minify assets/js/main.js > assets/js/main.min.js",
27
27
"minify:app": "cat assets/js/*Helper.js | minify --js > assets/js/app.min.js",
28
28
"minify:settings": "minify assets/js/settings.js > assets/js/settings.min.js",
29
-
"minify:style": "minify assets/css/stylesheet.css > assets/css/stylesheet.min.css",
30
-
"minify": "run-p minify:*",
29
+
"minify:style:site": "minify assets/css/stylesheet.css > assets/css/stylesheet.min.css",
30
+
"minify:style:dash": "minify assets/css/dashboard.css > assets/css/dashboard.min.css",
31
+
"minify": "run-p minify:**",
31
32
"sitemap:make": "sscli > assets/sitemap.xml",
32
33
"sitemap:clean": "replace-in-file \"/homepage|\\.tsx/g\" \"\" assets/sitemap.xml",
33
34
"sitemap": "run-s sitemap:*",
+1
src/pages/dashboard.tsx
+1
src/pages/dashboard.tsx
···
20
20
const ctx: Context = props.c;
21
21
// 3rd party dependencies
22
22
const defaultDashboardPreloads: PreloadRules[] = [
23
+
{href: "/css/dashboard.min.css", type: "style"},
23
24
{href: "/dep/countable.min.js", type: "script"},
24
25
{href: "/dep/form-json.min.js", type: "script"},
25
26
{href: "/dep/modal.js", type: "script"},
+1
-1
src/utils/appScripts.ts
+1
-1
src/utils/appScripts.ts
···
1
1
// Change this value to break out of any caching that might be happening
2
2
// for the runtime scripts (ex: main.js & postHelper.js)
3
-
export const CURRENT_SCRIPT_VERSION: string = "1.5.2";
3
+
export const CURRENT_SCRIPT_VERSION: string = "1.5.3";
4
4
5
5
export const getAppScriptStr = (scriptName: string) => `/js/${scriptName}.min.js?v=${CURRENT_SCRIPT_VERSION}`;
6
6