tholps.site / tholps-site
this repo has no description
0
fork

Configure Feed

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

thwebzone 2.0

Tholp1 bc121ff4 fd1b9868

+1149 -256
+146
content/res/dl/tholp.theme.css
··· 1 + /** 2 + * @name tholp5 3 + * @description Allows you to customize Discord's native Color Scheme. 4 + * @author Tholp 5 + * @version 1.0.0 6 + */ 7 + /* Uses https://bdeditor.dev/theme/discordrecolor but I've added or changed a handful of things to my liking, I use it with my fork of https://github.com/craftablescience/Discord-Square-Theme , (https://github.com/Tholp1/Discord-Square-Theme) */ 8 + 9 + @import url('https://mwittrien.github.io/BetterDiscordAddons/Themes/DiscordRecolor/DiscordRecolor.css'); 10 + 11 + :root { 12 + --accentcolor: 202,193,35; 13 + --accentcolor2: 255,115,250; 14 + --accentcolor3: 52, 113, 44; 15 + --accentcolor4: 12, 50, 00; 16 + --linkcolor: 0,176,244; 17 + --mentioncolor: 202,193,35; 18 + --textbrightest: 255,255,255; 19 + --textbrighter: 222,222,222; 20 + --textbright: 185,185,185; 21 + --textdark: 140,140,140; 22 + --textdarker: 115,115,115; 23 + --textdarkest: 80,80,80; 24 + --font: Noto Sans; 25 + --backgroundaccent: 202,193,35; 26 + --backgroundprimary: 26,55,27; 27 + --backgroundsecondary: 0,21,0; 28 + --backgroundsecondaryalt: 0,16,0; 29 + --backgroundtertiary: 12,37,10; 30 + --backgroundfloating: 100,120, 0; 31 + /* --backgroundfloating: 255, 0, 0; */ 32 + --settingsicons: 1; 33 + 34 + } 35 + 36 + /* Any custom CSS below here */ 37 + 38 + /* Theme selectors and whatever */ 39 + .bd-description-wrap, .bd-footer { 40 + background: rgb(var(--backgroundtertiary)); 41 + } 42 + 43 + .unreadIcon__7aaec, .barText__7aaec { 44 + color: rgb(var(--textdarkest)) !important; 45 + } 46 + 47 + .unreadImportant__2ea32 { 48 + background-color: rgb(var(--accentcolor)) !important; 49 + } 50 + 51 + .modeUnreadImportant__2ea32 .icon__2ea32, .modeUnreadImportant__2ea32:hover .icon__2ea32, .modeUnreadImportant__2ea32 .name__2ea32 { 52 + color: rgb(var(--accentcolor)) !important; 53 + } 54 + 55 + .button_f7ecac { 56 + color: rgb(var(--textdarker)); 57 + } 58 + 59 + /* Server unread dot */ 60 + .item__58105 { 61 + background-color: rgb(var(--accentcolor)) !important; 62 + } 63 + 64 + /* align text channel message box to status */ 65 + .channelTextArea_f75fb0 { 66 + margin-bottom: var(--space-xs); 67 + } 68 + 69 + /* Server status (vc, stream, activity) badge bg */ 70 + .icon__2b1f5, .numberBadge__2b1f5 { 71 + background: rgb(var(--accentcolor3)) !important; 72 + } 73 + 74 + /* server status icon */ 75 + .icon__2b1f5 path, .numberBadge__2b1f5 { 76 + fill: rgb(var(--accentcolor)) !important; 77 + color: rgb(var(--accentcolor)) !important; 78 + } 79 + 80 + .button_f7ecac { 81 + /* color: rgb(var(--textdarkest)); */ 82 + color: rgb(var(--accentcolor)) !important; 83 + } 84 + 85 + #app-mount .wrapper_f7ecac:not(.buttonsInner__5126c) { 86 + background: rgb(var(--backgroundfloating)) !important; 87 + } 88 + 89 + /* Quick react was broken */ 90 + .emoji__040f0 { 91 + display: block !important; 92 + } 93 + 94 + /* VC status text previously unreadable */ 95 + .statusText__5cda9 96 + { 97 + color: rgb(var(--textdark)); 98 + } 99 + 100 + /* VC buttons (screenshare, activities, soundboard) */ 101 + .button_e131a9 .buttonColor_e131a9, .button_e131a9.buttonColor_e131a9 102 + { 103 + background-color: rgb(var(--backgroundtertiary)); 104 + } 105 + 106 + /* hovered VC buttons */ 107 + .button_e131a9 .buttonColor_e131a9:hover, .button_e131a9.buttonColor_e131a9:hover 108 + { 109 + background-color: rgba(var(--accentcolor), 1); 110 + } 111 + 112 + /* profile status */ 113 + .statusText_ab8609 { 114 + color: rgb(var(--textdarkest)); 115 + } 116 + 117 + /* Scrollbar */ 118 + ::-webkit-scrollbar { 119 + width: 14px !important; 120 + } 121 + 122 + ::-webkit-scrollbar-thumb:hover { 123 + border: 0px solid black !important; 124 + background-color: rgb(var(--accentcolor)) !important; 125 + } 126 + 127 + ::-webkit-scrollbar-thumb { 128 + border: 0px solid black !important; 129 + background-color: rgb(var(--accentcolor4)) !important; 130 + } 131 + 132 + ::-webkit-scrollbar-track { 133 + visibility: visible !important; 134 + border: 3px solid transparent !important; 135 + background-color: transparent !important; 136 + background-clip: padding-box !important; 137 + } 138 + 139 + .fade__99f8c::-webkit-scrollbar-thumb, .fade__99f8c::-webkit-scrollbar-track { 140 + visibility: visible; 141 + } 142 + 143 + ul[data-list-id='guildsnav'] ::-webkit-scrollbar { 144 + display: grid; 145 + width: 10px !important; 146 + }
content/res/fonts/Gontserrat-Black.ttf

This is a binary file and will not be displayed.

content/res/fonts/Gontserrat-Regular.ttf

This is a binary file and will not be displayed.

content/res/fonts/Gontserrat-SemiBold.ttf

This is a binary file and will not be displayed.

content/res/fonts/GreatVibes-Regular.ttf

This is a binary file and will not be displayed.

content/res/fonts/Nexa-ExtraLight.ttf

This is a binary file and will not be displayed.

content/res/fonts/Nexa-Heavy.ttf

This is a binary file and will not be displayed.

content/res/fonts/Striker.ttf

This is a binary file and will not be displayed.

content/res/gifs/creepypastavortwalk3.gif

This is a binary file and will not be displayed.

content/res/gifs/mariowhenhehastheleaf.gif

This is a binary file and will not be displayed.

content/res/gifs/notinfrontofmypomni.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/alien.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/bearwalk.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/catleg.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/cereal.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/didsomeonesay.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/fall.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/frier.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/greenlight.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/gtgwhat.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/hater.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/lostmedia.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/matrix.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/mother.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/nobody.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/noted.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/pibcon.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/pibfam.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/pibgma.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/pyat.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/rejection.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/rock.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/season2.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/season3.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/season4.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/season5.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/smokinglaptop.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/thevideogameadventure.gif

This is a binary file and will not be displayed.

content/res/gifs/pibby/traitor.gif

This is a binary file and will not be displayed.

content/res/gifs/tepbee.gif

This is a binary file and will not be displayed.

content/res/icons/dllink.png

This is a binary file and will not be displayed.

content/res/icons/totop.png

This is a binary file and will not be displayed.

content/res/images/construction-sign.png

This is a binary file and will not be displayed.

content/res/images/coolmario.png

This is a binary file and will not be displayed.

content/res/images/costruxion.png

This is a binary file and will not be displayed.

content/res/images/deathknightfavi.png

This is a binary file and will not be displayed.

content/res/images/dmcrskulldrag.png

This is a binary file and will not be displayed.

content/res/images/dmcrskulldrag2.jpg

This is a binary file and will not be displayed.

content/res/images/hairy.png

This is a binary file and will not be displayed.

content/res/images/hellosko.png

This is a binary file and will not be displayed.

content/res/images/missing.webp

This is a binary file and will not be displayed.

content/res/images/pibbybitch.png

This is a binary file and will not be displayed.

content/res/images/pibbywarning.png

This is a binary file and will not be displayed.

content/res/images/refraggablehot.jpg

This is a binary file and will not be displayed.

content/res/images/slenderquest.png

This is a binary file and will not be displayed.

content/res/images/spmbrainrot.png

This is a binary file and will not be displayed.

+130 -85
content/res/scripts/bsky-comments.js
··· 26 26 // Modified by Tholp for their own purposes 27 27 // original at https://github.com/nsideras/bluesky-js-comments 28 28 29 - const rootElement = document.querySelector("#comments"); 30 29 31 - var atProto = ToAtProtoUri(rootElement.dataset.uri); 30 + function makeComments() 31 + { 32 + var rootElement = document.querySelector("#bsky_comments"); 33 + if (rootElement.dataset.uri == "placeholder") 34 + { 35 + var earlyNotice = document.createElement("div"); 36 + earlyNotice.setAttribute("class", "divcenter nocomments"); 37 + earlyNotice.innerHTML = "<em>This is where the comments section would be but...<br>You are viewing this before I've posted about this blogpost to Bluesky and updated this to point at that post, check back in a few minutes?</em>"; 38 + rootElement.appendChild(earlyNotice); 32 39 33 - fetch( 34 - "https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=" + atProto 35 - ) 36 - .then((response) => { 37 - if (!response.ok) { 38 - throw new Error(`HTTP error, status = ${response.status}`); 39 - } 40 - return response.json(); 41 - }) 42 - .then((data) => { 43 - if ( 44 - typeof data.thread.replies != "undefined" && 45 - data.thread.replies.length > 0 46 - ) { 47 - rootElement.appendChild(renderComments(data.thread)); 48 - } else { 49 - const noReplies = document.createElement("em"); 50 - noReplies.innerText = "No replies."; 51 - rootElement.appendChild(noReplies); 52 - } 53 - }) 54 - .catch((error) => { 55 - const p = document.createElement("p"); 56 - p.appendChild(document.createTextNode(`Error: ${error.message}`)); 57 - document.body.appendChild(p, rootElement); 58 - }); 40 + var notice = document.querySelector("#comment_notice"); 41 + notice.parentElement.removeChild(notice); 42 + notice = document.querySelector("#comment_media_notice"); 43 + notice.parentElement.removeChild(notice); 44 + return; 45 + } 46 + if (rootElement.dataset.uri == "closed") 47 + { 48 + var noComments = document.createElement("div"); 49 + noComments.setAttribute("class", "divcenter nocomments"); 50 + noComments.innerHTML = "This post is closed to comments."; 51 + rootElement.appendChild(noComments); 59 52 60 - function ToBskyUrl(uri) { 61 - var splitUri = uri.split('/'); 62 - if(splitUri[0] === 'at:') 63 - { 64 - return 'https://bsky.app/profile/' + splitUri[2] + '/post/' + splitUri[4]; 65 - } 66 - else 67 - { 68 - return uri; 69 - } 70 - } 53 + var notice = document.querySelector("#comment_notice"); 54 + notice.parentElement.removeChild(notice); 55 + notice = document.querySelector("#comment_media_notice"); 56 + notice.parentElement.removeChild(notice); 57 + return; 58 + } 59 + 60 + var atProto = ToAtProtoUri(rootElement.dataset.uri); 61 + 62 + fetch( 63 + "https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=" + atProto 64 + ) 65 + .then((response) => { 66 + if (!response.ok) { 67 + throw new Error(`HTTP error, status = ${response.status}`); 68 + return; 69 + } 70 + return response.json(); 71 + }) 72 + .then((data) => { 73 + if ( 74 + typeof data.thread.replies != "undefined" && 75 + data.thread.replies.length > 0 76 + ) { 77 + rootElement.appendChild(renderComments(data.thread)); 78 + } else { 79 + const noReplies = document.createElement("div"); 80 + noReplies.setAttribute("class", "divcenter nocomments"); 81 + noReplies.innerHTML = "<em>No replies Yet.</em>"; 82 + rootElement.appendChild(noReplies); 83 + } 84 + }) 85 + .catch((error) => { 86 + // const p = document.createElement("p"); 87 + // p.appendChild(document.createTextNode(`Error: ${error.message}`)); 88 + // document.body.appendChild(p, rootElement); 89 + 90 + const err = document.createElement("div"); 91 + err.setAttribute("class", "divcenter nocomments"); 92 + err.innerHTML = "<em>Bluesky API for this post was unreachable :( [ " + error.message +" ]</em>"; 93 + rootElement.appendChild(err); 94 + }); 95 + } 96 + 97 + function ToBskyUrl(uri) { 98 + var splitUri = uri.split('/'); 99 + if(splitUri[0] === 'at:') 100 + { 101 + return 'https://bsky.app/profile/' + splitUri[2] + '/post/' + splitUri[4]; 102 + } 103 + else 104 + { 105 + return uri; 106 + } 107 + } 71 108 72 - function ToAtProtoUri(url) 73 - { 74 - var splitUri = url.split('/'); 75 - if(splitUri[0] === 'https:' || splitUri[0] === 'http:') 76 - { 77 - return 'at://' + splitUri[4] + '/app.bsky.feed.post/' + splitUri[6]; 78 - } 79 - else 80 - { 81 - return url; 82 - } 83 - } 109 + function ToAtProtoUri(url) 110 + { 111 + var splitUri = url.split('/'); 112 + if(splitUri[0] === 'https:' || splitUri[0] === 'http:') 113 + { 114 + return 'at://' + splitUri[4] + '/app.bsky.feed.post/' + splitUri[6]; 115 + } 116 + else 117 + { 118 + return url; 119 + } 120 + } 84 121 85 - function renderComments(thread) 86 - { 87 - const commentsNode = document.createElement("div"); 88 - for (const comment of thread.replies) { 89 - var renderedString = renderComment(comment); 90 - var htmlContent = createElementFromHTML(renderedString); 122 + function renderComments(thread) 123 + { 124 + const commentsNode = document.createElement("div"); 125 + for (const comment of thread.replies) 126 + { 127 + var renderedString = renderComment(comment); 128 + var htmlContent = createElementFromHTML(renderedString); 91 129 92 - htmlContent.querySelector(".replies").appendChild(renderComments(comment)); 130 + htmlContent.querySelector(".replies").appendChild(renderComments(comment)); 93 131 94 - commentsNode.appendChild(htmlContent); 95 - } 132 + commentsNode.appendChild(htmlContent); 133 + } 96 134 97 - return commentsNode; 98 - } 135 + return commentsNode; 136 + } 99 137 100 - //https://stackoverflow.com/a/494348 101 - function createElementFromHTML(htmlString) { 102 - var div = document.createElement('div'); 103 - div.innerHTML = htmlString.trim(); 138 + //https://stackoverflow.com/a/494348 139 + function createElementFromHTML(htmlString) 140 + { 141 + var div = document.createElement('div'); 142 + div.innerHTML = htmlString.trim(); 104 143 105 - // Change this to div.childNodes to support multiple top-level nodes. 106 - return div.firstChild; 107 - } 144 + // Change this to div.childNodes to support multiple top-level nodes. 145 + return div.firstChild; 146 + } 108 147 109 - function renderComment(comment) { 110 - var replyDate = new Date(comment.post.record.createdAt); 148 + function renderComment(comment) 149 + { 150 + var replyDate = new Date(comment.post.record.createdAt); 111 151 112 - return `<ul class="bsky_comment" style="display: flex; list-style: none;"> 113 - <li style="margin-right: 10px;"> 114 - <img src="${comment.post.author.avatar}" width="64px" height="64px" /> 115 - </li> 116 - <li> 117 - <div><a class="bsky_handle" href="https://bsky.app/profile/${comment.post.author.handle}" rel="ugc" style="color: #000; text-decoration: none;"> 152 + return `<ul class="bsky_comment" style="display: flex; list-style: none;"> 153 + <li style="margin-right: 10px;"> 154 + <img src="${comment.post.author.avatar}" width="64px" height="64px" /> 155 + </li> 156 + <li> 157 + <div> 158 + <a class="bsky_handle" href="https://bsky.app/profile/${comment.post.author.handle}" rel="ugc" style="color: #000; text-decoration: none;"> 118 159 <strong class="bsky_display-name" style="white-space: nowrap;">${comment.post.author.displayName}</strong> 119 160 <span class="bsky_handle" style="white-space: nowrap;">@${comment.post.author.handle}</span> 120 161 <span class="bsky_time" style="white-space: nowrap;">${replyDate.toLocaleString()}</span> 121 - </a></div> 122 - <a href="${ToBskyUrl(comment.post.uri)}" rel="ugc" style="color: #000; text-decoration: none;"> 123 - <div class="bsky_comment_content">${comment.post.record.text}</div> 124 - <div class="bsky_stats"> 162 + </a> 163 + </div> 164 + <a href="${ToBskyUrl(comment.post.uri)}" rel="ugc" style="color: #000; text-decoration: none;"> 165 + <div class="bsky_comment_content">${comment.post.record.text}</div> 166 + <div class="bsky_stats"> 125 167 <!-- icons from https://www.systemuicons.com/ --> 126 - <span style="margin-right: 1em;"> 168 + <span style="margin-right: 1em;"> 127 169 <svg class="bsky_reply_icon" style="position: relative; top: .3em;" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"> 128 170 <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M11 16.517c4.418 0 8-3.284 8-7.017S15.418 3 11 3S3 6.026 3 9.759c0 1.457.546 2.807 1.475 3.91L3.5 18.25l3.916-2.447a9.2 9.2 0 0 0 3.584.714" /> 129 171 </svg> 130 - ${comment.post.replyCount}</span> 172 + ${comment.post.replyCount} 173 + </span> 131 174 132 175 133 - <span style="margin-right: 1em;"> 176 + <span style="margin-right: 1em;"> 134 177 <svg class="bsky_repost_icon" style="position: relative; top: .3em;" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"> 135 178 <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" style="fill-opacity:0;stroke-width:2;"> 136 179 <path d="m13.5 13.5l3 3l3-3" /> ··· 153 196 </div> 154 197 </li> 155 198 </ul>`; 156 - } 199 + } 200 + 201 + makeComments();
content/res/sound/nubbyfart.mp3

This is a binary file and will not be displayed.

content/res/videos/donot.mp4

This is a binary file and will not be displayed.

+169 -17
content/style.css
··· 12 12 src: url("/res/fonts/FuturaExtraBlackCondesed.otf"); 13 13 } 14 14 15 + @font-face { 16 + font-family: "freaky"; 17 + src: url("/res/fonts/GreatVibes-Regular.ttf"); 18 + } 19 + 20 + @font-face { 21 + font-family: "Striker"; 22 + src: url("/res/fonts/Striker.ttf"); 23 + } 24 + 25 + @font-face { 26 + font-family: "Nexa"; 27 + src: url("/res/fonts/Nexa-ExtraLight.ttf"); 28 + } 29 + 30 + @font-face { 31 + font-family: "Nexa Heavy"; 32 + src: url("/res/fonts/Nexa-Heavy.ttf"); 33 + } 34 + 35 + @font-face { 36 + font-family: "Gontserrat"; 37 + src: url("/res/fonts/Gontserrat-Regular.ttf"); 38 + } 39 + 40 + @font-face { 41 + font-family: "Gontserrat Semibold"; 42 + src: url("/res/fonts/Gontserrat-SemiBold.ttf"); 43 + } 44 + 45 + :root { 46 + --accent: #cac123; 47 + /* --container-color: #436633; */ 48 + --container-color: rgb(26,55,27); 49 + --clickable: rgb(0,21,0); 50 + 51 + --text-mild: #b07a5f; 52 + 53 + font-family: "Gontserrat", "Noto Sans", sans-serif 54 + } 55 + 15 56 /* Classes */ 16 57 .fullscreen { 17 58 vertical-align: top; ··· 41 82 align-items: center; 42 83 } 43 84 85 + .construction_notice 86 + { 87 + justify-content: center; 88 + text-align: center; 89 + align-items: center; 90 + 91 + display: flex; 92 + color: var(--accent); 93 + } 44 94 45 95 .blog_container { 46 96 border: solid; 47 97 border-radius: 8px; 48 - background-color: #436633; 98 + background-color: var(--container-color); 49 99 justify-content: center; 50 100 text-align: left; 51 101 align-items: center; ··· 96 146 text-align: center; 97 147 height: 3em; 98 148 99 - color: #cac123; 149 + color: var(--accent); 100 150 /* padding: 1%; */ 101 151 } 102 152 103 153 .blog_songblurb { 104 - margin-left: 15%; 105 - margin-right: 15%; 154 + margin-left: 5%; 155 + margin-right: 5%; 106 156 margin-top: 1em; 107 157 margin-bottom: 1em; 108 158 padding: 1%; ··· 128 178 /* width: 35%; */ 129 179 } 130 180 181 + .blog_section 182 + { 183 + text-decoration: none; 184 + } 185 + 186 + .blog_section h2, .blog_section h3 { 187 + text-decoration: underline; 188 + } 189 + 131 190 .bluesky-embed{ 132 191 margin-left: auto; 133 192 margin-right: auto; ··· 141 200 bottom: 2em; 142 201 } 143 202 203 + .top_button:before { 204 + background-image: url('/res/icons/totop.png'); 205 + 206 + --size: 0.8em; 207 + 208 + background-size: var(--size) var(--size); 209 + display: inline-block; 210 + width: var(--size); 211 + height: var(--size); 212 + content:""; 213 + margin-left: 0.25em; 214 + } 215 + 144 216 .asterisk { 145 217 color: #FF0000; 146 218 } ··· 235 307 .landingbg { 236 308 width: 100%; 237 309 height: 100vh; 238 - position: relative 239 - background: #001500; 310 + position: relative; 311 + /* background: #001500; */ 240 312 241 313 } 242 314 ··· 247 319 left: 0; 248 320 right: 0; 249 321 background: #001000; 322 + padding-top: 15vh; 323 + padding-bottom: 10vh; 250 324 } 251 325 252 326 .landingimg { ··· 262 336 } 263 337 264 338 .landingblocks { 265 - @media (width >= 1500px) { 266 - width: 1500px; 339 + @media (width >= 1900px) { 340 + width: 1900px; 267 341 } 268 342 269 - @media (width < 1500px) { 343 + @media (width < 1900px) { 270 344 width: 95%; 271 345 } 272 346 ··· 277 351 .landingblock { 278 352 border: solid; 279 353 border-radius: 8px; 280 - background-color: #436633; 354 + background-color: var(--container-color); 281 355 justify-content: center; 282 356 text-align: left; 283 357 align-items: center; ··· 286 360 margin-left: auto; 287 361 margin-right: auto; 288 362 289 - width: 33.3%; 363 + width: 25%; 364 + } 365 + 366 + .innercool { 367 + display: inline-block; 368 + } 369 + 370 + .innercool a { 371 + float:left; 372 + display: inline; 373 + } 374 + 375 + .landingblock h2 { 376 + margin-top: 0; 377 + } 378 + 379 + .aboutmeblock { 380 + width: 50%; 290 381 } 291 382 292 383 .coolblock { 293 384 border: solid; 294 385 border-radius: 8px; 295 - background-color: #436633; 386 + background-color: var(--container-color); 296 387 justify-content: center; 297 388 text-align: left; 298 389 align-items: center; ··· 354 445 } 355 446 356 447 .bsky_display-name { 357 - color: #cac123; 448 + color: var(--accent); 358 449 } 359 450 360 451 .bsky_handle { ··· 385 476 stroke: #9b9; 386 477 } 387 478 479 + .nocomments { 480 + color: #9b9; 481 + } 482 + 483 + .junk_drawer, .junk_drawer > ul { 484 + display: flex; 485 + } 486 + 487 + .gallery_row { 488 + display: flex; 489 + flex-wrap: wrap; 490 + padding: 0 4px; 491 + } 492 + 493 + .gallery_column { 494 + flex: 25%; 495 + max-width: calc(25% - 16px); 496 + padding: 0 4px; 497 + } 498 + 499 + .gallery_column img { 500 + margin-top: 8px; 501 + vertical-align: middle; 502 + width: 100%; 503 + } 504 + 388 505 389 506 390 507 /* Elements */ 391 508 392 509 body { 393 510 background-color: #001500; 394 - font-family: "Noto Sans", sans-serif; 511 + /* font-family: "Noto Sans", sans-serif; */ 512 + margin-left: 0; 513 + margin-right: 0; 395 514 /* background: #663300; */ 396 515 } 397 516 398 517 a { 399 - color: #cac123; 518 + color: var(--accent); 400 519 /* font-size: 8vh; */ 401 520 } 402 521 403 - a[target="_blank"] { 522 + a[target="_blank"], a[download] { 404 523 align-items: center; 405 524 /* display: flex; */ 406 525 ··· 420 539 margin-left: 0.25em; 421 540 } 422 541 542 + a[download]:after { 543 + background-image: url('/res/icons/dllink.png'); 544 + 545 + --size: 0.8em; 546 + 547 + background-size: var(--size) var(--size); 548 + display: inline-block; 549 + width: var(--size); 550 + height: var(--size); 551 + content:""; 552 + margin-left: 0.25em; 553 + } 554 + 423 555 p { 424 556 color: #FFFFFF; 425 557 } ··· 437 569 } 438 570 439 571 footer { 440 - color: #cac123; 572 + color: var(--accent); 441 573 justify-content: center; 442 574 text-algin:center; 443 575 } ··· 494 626 tr:nth-child(odd) { 495 627 background: #333; 496 628 } 629 + 630 + button { 631 + background: var(--clickable); 632 + color: var(--accent); 633 + border: 2px solid var(--accent); 634 + } 635 + 636 + button:hover { 637 + background: var(--accent); 638 + color: var(--clickable); 639 + border: 2px solid var(--clickable); 640 + } 641 + 642 + .blog_container h5:not([class="asterisk"]), .blog_container h4, figcaption { 643 + color: var(--text-mild); 644 + } 645 + 646 + h1, h2, h3 { 647 + font-family: "Gontserrat Semibold", sans-serif; 648 + }
+27 -3
skid/blog/blog1.sk
··· 12 12 13 13 And heres what it looks as you're reading this: 14 14 <div class="divcenter"> 15 - <iframe width="95%" height="55%" src="/blog/blog1.html" title="Tholps site"></iframe> 15 + <iframe style="width: 95%; height:55%;" src="/blog/blog1.html" title="Tholps site" referer></iframe> 16 16 </div> 17 17 18 18 Pretty nice right? ··· 28 28 29 29 !blog_songblurb("Intro" "The Lazy Eyes" "Songbook" "/res/albumart/lazyeyes-songbook.png" "#AA0000") 30 30 {{{ 31 - I thought a fun idea would be to have kind of a song recomendation at the bottom of blog posts that maybe have something to do thematically with the post contents or just something I've been listening to. Gives me an oppurtunity to talk about songs I like if I'd like. 31 + I thought a fun idea would be to have kind of a song recomendation at the bottom of blog posts that maybe has something to do thematically with the post contents or just something I've been listening to. Gives me an oppurtunity to talk about songs I like - if I'd like. 32 32 33 33 Not sure how often I'll use this or if I'll decide I hate it later, we'll see. 34 34 ··· 51 51 </div> 52 52 }}} 53 53 54 - &to_top() 54 + &bsky_comments("placeholder") 55 55 56 56 &copy_footer() 57 + 58 + <script> 59 + // Disable links while viewing through the joke iframe 60 + function iframe_check() 61 + { 62 + var inframe; 63 + try { 64 + inframe = window.self !== window.top; 65 + } catch (err) { 66 + inframe = true; // i've read some browsers block window.top from iframes 67 + } 68 + 69 + if (inframe) 70 + { 71 + let links = document.querySelectorAll("*[href]:not(*[href='#'])"); // Every link except the to-top button 72 + 73 + for (var i = 0; i < links.length; i++) 74 + { 75 + links[i].style.pointerEvents = "none"; 76 + } 77 + } 78 + } 79 + iframe_check(); 80 + </script>
+319 -92
skid/blog/blog2.sk
··· 1 1 &insert("//style.sk") 2 2 &insert("blog_templates.sk") 3 3 4 - !blog_post( 2 "An Overview on Skidmark" "In Progress" "Nominative determinism in software") 4 + !blog_post( 2 "An Overview on Skidmark" "2025-7-11" "Nominative determinism in software") 5 5 {{{ 6 - What is [Skidmark](https://github.com/Tholp1/Skidmark)? 7 - 8 - How about I let you know when I figure that out. 9 - 10 - Putting the singular joke aside, it's a tool I've been developing to build this website easier and to teach myself Rust. I think its been alright at that second part but if we're being honest it probably would have been easier to forgo developing anything myself, but anyone that knows me knows that my classic catchphrase that I always say multiple times on the daily is "It's about the journey, not the destination". And I suppose that it's true in this case if we're stretching it a bit. 11 - 12 - ...Anyways, 6 + This post will cover the current features and some future plans of my tool I've been working on, [Skidmark](https://github.com/Tholp1/Skidmark). If you have no interest in such a thing avert your eyes. 13 7 14 8 ## What? 15 - Skidmark is a language that compiles to Github Flavored Markdown!asterisk(1) which is then compiled to HTML. It's main functionality is ease of reusing blocks of HTML or markdown to build webpages. Things can also be determined at compile time, such as the time you can see at the bottom of the page. 9 + Skidmark is a language that compiles to GitHub Flavored Markdown!asterisk(1) which is then compiled to HTML. It's main functionality is ease of reusing blocks of HTML or markdown to build web pages. Things can also be determined at compile time, such as the time you can see at the bottom of the page. 16 10 17 11 !asterisk_def(1 "slightly modified from spec for legibility when writing HTML inline with it") 18 12 ··· 23 17 24 18 ## Terminology 25 19 26 - - **.sk** is the file extensionn for Skidmark input. 20 + - **.sk** is the file extension for Skidmark input. 27 21 - **.sko** is the file extension for Skidmark output before its converted to HTML, just Markdown and any written inline HTML in these files. 28 22 - **Skidmark** only refers to the tool. 29 23 - **Skid** refers to any size section of text inside a .sk file, usually talking about text that includes macros. ··· 33 27 34 28 ## Features 35 29 36 - * HTML Templates 37 30 * GFM to HTML conversion 31 + * Templates 38 32 * Pre-built specialty macros 39 33 34 + ### Markdown Conversion 35 + 36 + This part is all handled by [markdown-rs](https://github.com/wooorm/markdown-rs). If I rolled this myself you would not be reading this right now !colored(":P" "#00FF00"). 37 + 38 + Skidmark uses the [GitHub Flavored Markdown](https://github.github.com/gfm) settings but slightly tweaked. 39 + 40 + * Indentation no longer puts things into a code block 41 + * All HTML tags are allowed 42 + * Image sources can come from anywhere 43 + 44 + You should be able to do anything so I've disabled anything intended for sanitizing user input. 45 + 40 46 ### Templates 41 47 42 - Lets start with templates, this is the current version of the templates I use for making a basic blog post for example: 48 + Templates are the cornerstone feature of Skidmark, This is the current version of the templates I use for making a blog post like this for example: 43 49 44 50 45 51 ```html ··· 49 55 <title>[[title]]</title> 50 56 }}} 51 57 58 + \!template(basic_embed title text) 59 + {{{ 60 + <meta content="[[title]]" property="og:title" /> 61 + <meta content="[[text]]" property="og:description" /> 62 + <meta content="#cac123" data-react-helmet="true" name="theme-color" /> 63 + }}} 64 + 65 + \!template(construction) 66 + {{{ 67 + <div class="construction_notice"> 68 + <style> 69 + .hardhat { 70 + width: 5em; 71 + margin-left: 1em; 72 + margin-right: 1em; 73 + } 74 + </style> 75 + <image class="hardhat" src="/res/images/construction-sign.png"></image> 76 + This webzone is presentable by my standards, but still a work in progress. 77 + <image class="hardhat" src="/res/images/construction-sign.png"></image> 78 + </div> 79 + }}} 80 + 81 + 52 82 \!template(blog_post number title date) 53 83 {{{ 84 + \&page_title("Blog #[[number]]: [[title]]") 85 + \&basic_embed("Blog #[[number]]: [[title]]" "[[desc]]") 54 86 55 - \&page_title("Blog #[[number]]: [[title]]") 87 + <header style="text-align: center;"> 88 + 89 + [home](/) 90 + 91 + </header> 92 + 93 + \!construction() 56 94 57 95 <div align="center" class="blog_container"> 96 + <!-- <sub>#[[number]]</sub>--> 97 + !colored("#[[number]]" #0F0) 58 98 59 - \!&section(){{{ <a style="color: #009900;" href="blog[[number]].html"> <h1> [[title]] </h1> </a> }}} 99 + !&section(){{{ <a style="color: #009900;" href="blog[[number]].html"> <h1> [[title]] </h1> </a> }}} 100 + 101 + &section(){{{ <h1> [[title]] </h1> }}} 60 102 61 - \&section(){{{ <h1> [[title]] </h1> }}} 62 103 63 - #### [[date]] 104 + #### [[date]] 64 105 65 - [[\{}]] 106 + ##### [[desc]] 107 + <div id="blog_contents"> 108 + [[\{}]] 109 + </div> 66 110 </div> 67 - 111 + <script> 112 + function linkize_headers() 113 + { 114 + var htwo = document.querySelectorAll("#blog_contents > h2"); 115 + var hthree = document.querySelectorAll("#blog_contents > h3"); 116 + for (var i = 0; i < htwo.length; i++) 117 + { 118 + var a = document.createElement("a"); 119 + a.setAttribute("id", htwo[i].innerHTML); 120 + a.setAttribute("href", "#" + htwo[i].innerHTML); 121 + a.setAttribute("class", "blog_section"); 122 + a.innerHTML = "<h2>" + htwo[i].innerHTML + "</h2>"; 123 + htwo[i].parentNode.replaceChild(a, htwo[i]); 124 + } 125 + for (var i = 0; i < hthree.length; i++) 126 + { 127 + var a = document.createElement("a"); 128 + a.setAttribute("id", hthree[i].innerHTML); 129 + a.setAttribute("href", "#" + hthree[i].innerHTML); 130 + a.setAttribute("class", "blog_section"); 131 + a.innerHTML = "<h3>" + hthree[i].innerHTML + "</h3>"; 132 + hthree[i].parentNode.replaceChild(a, hthree[i]); 133 + } 134 + } 135 + linkize_headers(); 136 + </script> 68 137 }}} 69 138 70 139 ``` 71 - !note("(Sorry, coloring is kind of bad, I want to make a Skidmark language plugin and my own CSS for [highlight.js](https://highlightjs.org/) *eventually*, if that happens this note will be removed)") 140 + !note("(Sorry, coloring is kind of bad, there isn't really anything suitable bundled in [highlight.js](https://highlightjs.org/) )") 72 141 73 142 Templates are defined with the `template` macro, `template`'s first parameter is the name of the new template, additional arguments are used as parameters for the new template. within the block is the content of the template, the values of a template's parameters are used by enclosing the name of it in double brackets, like this: `[[arg]]` a template can also use blocks with `[[\{}]]`, and accept trailing arguments outside of the initial definition with `[[..]]` or `[[".."]]`. `[[..]]` pastes all trailing arguments space separated, `[[".."]]` pastes all arguments with quotes around them, also space separated. 74 143 75 - First thing to understand about Skidmark is every word, whitespace character, and a handful of punctuation are split into "tokens". A token is just a container for its contents that also keeps track of its origin file and line number. When a tokens are inserted into a file from another using `\!insert(file.sk)` the origin file for those tokens is 'file.sk', however when using a template the origin file of the tokens from the expanded template is set to where it was expanded at. 76 - 77 - You may have noticed the different prefixes on macros notably: `\!&section()` and `\&section()`. The `section` macro has the uninteresting behavior of expanding to it's unmodified input block but it's prefix is what makes it useful. All macros can be prefixed with `\!`, `\&` or `\!&`. Which is chosen changes how it behaves when inserted into another file. 144 + You may have noticed the different prefixes on macros notably: `\!&section()` and `\&section()`. The `section` macro has the uninteresting behavior of expanding to it's unmodified input block, it's prefix is what makes it useful. All macros can be prefixed with `\!`, `\&` or `\!&`. Which is chosen changes how it behaves when inserted into another file. 78 145 79 146 * `\!` will always expand no matter where it came from 80 147 * `\&` will only expand if its file of origin is the same as the one currently being processed. 81 148 * `\!&` will only expand if its file of origin is *not* the same as the once currently being processed. 82 149 83 - This is needed to make reuse of skid easy and built into every macro, I can write this blog post in it's own file and in the blog aggregate page put a `\!insert("blog2.sk")` and it will have slightly different content on the aggregate page and the stand alone page. 150 + This exists to make reuse of entire files easier, though this website does not currently make use of this anymore. 151 + 152 + Moving on; You can template pretty much anything, heres a template I made to generate CSS on the shoutouts section of the home page: 153 + 154 + !tabs( "blog2_css_templating" "📝 Jotter - 📂 Template CSS Example" "index.sk" "index.html") 155 + {{{ 156 + !tab_content("blog2_css_templating" "index.sk") 157 + {{{ 158 + ```html 159 + \!template(friend_link link img) 160 + {{{ 161 + <style> 162 + a[href= "https://[[link]]" ] { 163 + align-items:center; 164 + margin-right: 0.4em; 165 + } 166 + a[href="https://[[link]]" ]:before { 167 + background-image: url( "[[img]]" ); 168 + --size: 0.8em; 169 + background-size: var(--size) var(--size); 170 + display: inline-block; 171 + width: var(--size); 172 + height: var(--size); 173 + content:""; 174 + margin-left: 0.25em;} 175 + </style> 176 + 177 + \!poplink("[[link]]" "https://[[link]]") 178 + }}} 179 + 180 + ... 181 + 182 + \!friend_link("Coaxion.games" "https://coaxion.games/res/favicon.ico") 183 + 184 + ``` 185 + }}} 186 + 187 + !tab_content("blog2_css_templating" "index.html") 188 + {{{ 189 + ```html 190 + <style> 191 + a[href= "https://Coaxion.games" ] { 192 + align-items:center; 193 + margin-right: 0.4em; 194 + } 195 + a[href="https://Coaxion.games" ]:before { 196 + background-image: url( "https://coaxion.games/res/favicon.ico" ); 197 + --size: 0.8em; 198 + background-size: var(--size) var(--size); 199 + display: inline-block; 200 + width: var(--size); 201 + height: var(--size); 202 + content:""; 203 + margin-left: 0.25em;} 204 + </style> 205 + <a href="https://Coaxion.games" target="_blank" rel="noopener noreferrer">Coaxion.games</a> 206 + ``` 207 + }}} 208 + 209 + }}} 210 + 211 + Javascript can also be templated, the tabbed file containers I've been using in this blogpost make use of this: 212 + 213 + !tabs( "blog2_js_templating" "📝 Jotter - 📂 Template JS Example" "blog_templates.sk" "blogx.sk") 214 + {{{ 215 + 216 + !tab_content("blog2_js_templating" "blog_templates.sk") 217 + {{{ 218 + ```html 219 + \!template(tabs id title default) 220 + {{{ 221 + <div class="tabscontainer"> 222 + <div class="tab tab_[[id]]"> 223 + <div class="tabtitle"><b><u>[[title]]</u></b></div> 224 + <span class="tabheader tabheader_[[id]]" id="tabheader_[[id]]_[[default]]" data-active="true" onclick="tab_select_e_[[id]](event, '[[default]]')"> 📄 [[default]] </span> 225 + \!for_each_arg(tabname [[".."]]) 226 + {{{ 227 + <span class="tabheader tabheader_[[id]]" id="tabheader_[[id]]_[[tabname..1]]" data-active="false" onclick="tab_select_e_[[id]](event, '[[tabname..1]]')"> 📄 [[tabname..1]] </span> 228 + }}} 229 + </div> 230 + <!--contents--> 231 + [[\{}]] 232 + </div> 233 + 234 + <script> 235 + 236 + function tab_select_[[id]]() 237 + { 238 + var tabcontents = document.getElementsByClassName('tabcontent_[[id]]') 239 + for (var i = 0; i < tabcontents.length; i++) 240 + { 241 + tabcontents[i].style.display = 'none'; 242 + } 243 + var tabheaders = document.getElementsByClassName('tabheader_[[id]]') 244 + for (var i = 0; i < tabheaders.length; i++) 245 + { 246 + tabheaders[i].setAttribute('data-active', false); 247 + } 248 + } 84 249 85 - In this example the aggregate page will have the blog post title be a link to the stand alone page, and the stand alone page will have the title just be text, and also set the tab title. 250 + function tab_select_e_[[id]](event, tabname) 251 + { 252 + tab_select_[[id]](tabname); 253 + document.getElementById('tabcontent_[[id]]_' + tabname).style.display = 'block'; 254 + event.currentTarget.setAttribute('data-active', true); 255 + } 86 256 87 - ### Markdown Conversion 257 + tab_select_[[id]](); 258 + document.getElementById('tabcontent_[[id]]_[[default]]').style.display = 'block'; 259 + document.getElementById('tabheader_[[id]]_[[default]]').setAttribute('data-active', true); 260 + </script> 88 261 89 - This part is all handled by [markdown-rs](https://github.com/wooorm/markdown-rs). If I rolled this myself you would not be reading this right now !colored(":P" "#00FF00"). 262 + }}} 90 263 91 - Skidmark uses the [Github Flavored Markdown](https://github.github.com/gfm) settings but slightly tweaked. 264 + <!-- id should be the same as \!tabs --> 265 + \!template(tab_content id tabname) 266 + {{{ 267 + <div class="tabcontent tabcontent_[[id]]" id="tabcontent_[[id]]_[[tabname]]"> 268 + [[\{}]] 269 + </div> 270 + }}} 271 + ``` 92 272 93 - * "Dangerous" HTML is enabled 94 - * Tag filter is disabled 95 - * Indentation no longer puts things into a code block 96 - * Input(buttons, checkboxes, etc) tags are re-enabled 97 - * Image sources can come from anywhere 273 + }}} 274 + 275 + !tab_content( "blog2_js_templating" "blogx.sk") 276 + {{{ 277 + ```html 278 + <!-- used like this: --> 279 + \!tabs("blog2_js_templating" "blog_templates.sk" "blogx.sk") 280 + {{{ 281 + 282 + \!tab_content("blog2_js_templating" "blog_templates.sk") 283 + {{{ 284 + ...stuff... 285 + }}} 286 + 287 + \!tab_content("blog2_js_templating" "blogx.sk") 288 + {{{ 289 + ..stuff2... 290 + }}} 291 + 292 + }}} 293 + ``` 294 + }}} 98 295 99 - You should be able to do anything so I've disabled anything intended for sanitizing user input. 296 + }}} 100 297 101 298 ### Included Macros 102 299 103 - I'm adding new ones basically every time I work on this website so this list is not exhaustive(I've had to rewrite a couple sections a couple times because I keep adding stuff), a full list will be maintained on the Github page once I get around to making a README for it. (just read the code for now lol!) !note("I'm serious, check `src/macros/mod.rs` in the repo for a list") 300 + I'm adding new ones basically every time I work on this website so this list is not exhaustive(I've had to rewrite a couple sections a couple times because I keep adding stuff), a full list will be maintained on the GitHub page once I get around to making a README for it. (just read the code for now lol!) !note("I'm serious, check `src/macros/mod.rs` in the repo for a list") 104 301 105 302 | Name | Takes Block | Parameters | Description | 106 303 | :--: | :---: | :------: | :------- | 107 - | `insert` | No | `file` | Exapnds into the contents of `file`, prefix `file` with `//` to search for the file from project root instead of relative to where `insert` is being called | 108 - | `time` | No | `format` | Exapnds into the filled out version of the given [time format string](https://docs.rs/chrono/latest/chrono/format/strftime/index.html#specifiers) with the current time | 109 - | `filename` | No | None | Exapnds into the filename relative to project root | 110 - | `filename_canonical` | No | None | Exapnds into the filename relative to root | 304 + | `insert` | No | `file` | Expands into the contents of `file`, prefix `file` with `//` to search for the file from project root instead of relative to where `insert` is being called | 305 + | `time` | No | `format` | Expands into the filled out version of the given [time format string](https://docs.rs/chrono/latest/chrono/format/strftime/index.html#specifiers) with the current time | 306 + | `filename` | No | None | Expands into the filename relative to project root | 307 + | `filename_canonical` | No | None | Expands into the filename relative to root | 111 308 | `reminder` | No | `msg` | Prints `msg` to console, expands into nothing | 112 - | `repeat` | Yes | `count` | Exapnds into it's block repeated `count` times | 309 + | `repeat` | Yes | `count` | Expands into it's block repeated `count` times | 113 310 | `section` | Yes | None | Expands into its block contents, to be used as container for anything else | 114 - | `template` | Yes | `name`, `...` | Defines a template of name `name` with parameters `...`, arguemnts are use by putting `[[argname]]` inside the defining block, trailing arguments on template use are accepted if the template defining block contains `[[..]]` or `[[".."]]`, these will paste every trailing argument space seperated or space seperated with quotes around each argument, `[[\{}]]` will paste the block | 115 - | `for_each_arg` | Yes | `varname`, `...` | Exapnds into a modified version of it's block multiple times depending on the number of arguments given, use `[[varname..1]]`, `[[varname..2]]` and so on within the block to set how many arguments are used per cycle and where | 311 + | `template` | Yes | `name`, `...` | Defines a template of name `name` with parameters `...`, arguments are use by putting `[[argname]]` inside the defining block, trailing arguments on template use are accepted if the template defining block contains `[[..]]` or `[[".."]]`, these will paste every trailing argument space separated or space separated with quotes around each argument, `[[\{}]]` will paste the block | 312 + | `for_each_arg` | Yes | `varname`, `...` | Expands into a modified version of it's block multiple times depending on the number of arguments given, use `[[varname..1]]`, `[[varname..2]]` and so on within the block to set how many arguments are used per cycle and where | 313 + 314 + ## Usage 315 + 316 + Every Skidmark project uses a `skidmark.toml` file in the root of the project. They look something like this: 317 + 318 + !file_preview("📝 Jotter - 📄 skidmark.toml (Read-Only)" "toml") 319 + {{{ 320 + [settings] 321 + inputFolder = "skid" # relative to this file 322 + outputFolder = "content" 323 + 324 + [fileGroups] 325 + 326 + [fileGroups.blog] 327 + files = ["blog/blog1.sk", "blog/blog2.sk",] 328 + 329 + [fileGroups.misc] 330 + files = ["index.sk", "blog/index.sk", "404.sk", "sinister.sk", "junk-drawer.sk"] 331 + 332 + [fileGroups.blog_rss] 333 + files = ["blog/rss.sk"] 334 + outputExtention = "xml" 335 + convertHTML = false 336 + }}} 337 + 338 + Basically no features are implemented with project files as of writing, this will *probably* change later. ( a `for_file_in_group` will likely happen ) 339 + 340 + Once you have a project file written and Skidmark built and in your PATH just run `skidmark` somewhere in the project folder to build the website. 341 + 342 + The output HTML is a bit malformed as of now (Missing `<!DOCTYPE>` and `<html>` tags) but every browser I've tested still loads the page fine so I'm not sure if I care yet. 343 + 344 + Also: no proper docs, sorry! Stuff is still kinda changing and writing propper docs for at max like maybe 3 ish people is not really worth my time. The language is pretty simple for now so I think it should be pretty easy how to figure out from the examples and the macro table in this post though feel free to message me on Discord or Bluesky about it, I'll be happy to answer. 345 + 346 + As mentioned in my first post: the source to this website will probably be public Soon™️ as a more complex/complete example. I've been trying to setup a !poplink("tangled.sh" "https://tangled.sh") knot to host it on since it seems cool but the docker setup has been giving me trouble. !note("I've since asked about this in the Discord and the Docker setup apparently doesn't work on specifically Debian?? I'm not familiar enough with differences between Ubuntu and Debian to troubleshoot this myself.") 116 347 117 348 ## Current Caveats 118 349 ··· 120 351 * No math / variables 121 352 * Limited loops, No conditionals 122 353 * Insertion options are more limited than I'd like 123 - * Windwoes 354 + * Some behavior is not intuitive 124 355 125 - I plan to address all these eventually but it'll be on a "when I need it" basis. 356 + I plan to address all these eventually but it'll be mostly on a "when I need to" basis. 126 357 127 358 ### Comments 128 359 The current way to comment skid out is with the `comment` macro, which in use looks like this ··· 231 462 232 463 }}} 233 464 234 - ## Other Concerns 235 465 236 - ### Windwoes 466 + ### Un-obvious Behavior 467 + Markdown-rs, the Markdown library I use, has some quirks with newlines that can be pretty frustrating if you are not familiar with how it works. In particular `<script>` and `<style>` tags will get some symbols mangled to their HTML safe versions if they contain a empty line, rendering the tag non-functional. It doesn't happen in every situation with a newline which makes it more annoying to troubleshoot. I will get this fixed at some point since its a pretty big pain point when making readable templates. 237 468 238 - I do not build or test at all on Windows right now, it probably works idk 👍. 469 + HTML and Markdown being right next to each other verses having an empty line between also affects output, the Markdown is either untouched and becomes the tag's `#text` or is compiled to HTML, respectively. 239 470 240 - Come kill me with hammers if you actually want this. 471 + For example: 241 472 242 - ## Another operator? 243 - <blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:h3ogy4c4ljm7iumhga2uplae/app.bsky.feed.post/3lmljw7zjjs23" data-bluesky-cid="bafyreihycaakric72b3euy3b37tukcfkzyk3hrzjfsdhxynuswa3ggt4iu" data-bluesky-embed-color-mode="dark"><p lang="en">thought about it more, some structures just wont work if i do this so i can either 244 - 1. hard code certain things to expand differently 245 - 2. add an operator that lets you choose 🧠 (mockup attached, going to call it the lazy operator or somthing)<br><br><a href="https://bsky.app/profile/did:plc:h3ogy4c4ljm7iumhga2uplae/post/3lmljw7zjjs23?ref_src=embed">[image or embed]</a></p>&mdash; Tholp (<a href="https://bsky.app/profile/did:plc:h3ogy4c4ljm7iumhga2uplae?ref_src=embed">@tholps.site</a>) <a href="https://bsky.app/profile/did:plc:h3ogy4c4ljm7iumhga2uplae/post/3lmljw7zjjs23?ref_src=embed">April 11, 2025 at 9:56 PM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script> 473 + ```markdown 474 + <!-- no space --> 475 + <div> 476 + # Header 477 + </div> 246 478 247 - I had written this Bluesky post about an issue I foresaw with certain types of block accepting macros, but my internal paradigm of how things should work has shifted a bit so I'm not too sure if I still need to do this. 479 + <!-- has spacer line --> 480 + <div> 248 481 249 - If it needs to happen it will I suppose. 482 + # Header 483 + </div> 484 + ``` 250 485 251 - ## Is this really ready to share? 252 - No. 253 - 254 - ## Usage 486 + yields 255 487 256 - Every Skidmark project uses a `skidmark.toml` file in the root of the project. They look something like this: 488 + ```HTML 489 + <!-- no space --> 490 + <div> 491 + # Header 492 + </div> 257 493 258 - !filepreview("📝 Jotter - 📄 skidmark.toml (Read-Only)" "toml") 259 - {{{ 260 - [settings] 261 - # relative to this file 262 - inputFolder = "skid" 263 - # webroot 264 - outputFolder = "content" 265 - 266 - 267 - [fileGroups] 268 - 269 - [fileGroups.blog] 270 - # relative to inputFolder 271 - files = ["blog/test.sk", "blog/blog1.sk", "blog/blog2.sk",] 494 + <!-- has spacer line --> 495 + <div> 496 + <h1>Header</h1> 497 + <div> 498 + ``` 272 499 273 - [fileGroups.misc] 274 - files = ["blog/index.sk", "404.sk"] 500 + This will probably stay as its maybe useful. 275 501 276 - [fileGroups.rss] 277 - files = ["blog/rss.sk"] 278 - outputExtention = "xml" 279 - convertHTML = false 502 + ## Expected Questions & Concerns 280 503 504 + ### Can I use this on my inferior operating system? 505 + Your strange inferiority complex aside: I do not build or test at all on Windows right now, it probably works idk 👍. 281 506 282 - }}} 507 + It wouldn't be difficult so come kill me with hammers if you actually want this. 283 508 284 - Basically no features are implemented with project files as of writing, this will *probably* change later. ( a `for_file_in_group` will likely happen ) 509 + ### Another operator? 510 + <blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:h3ogy4c4ljm7iumhga2uplae/app.bsky.feed.post/3lmljw7zjjs23" data-bluesky-cid="bafyreihycaakric72b3euy3b37tukcfkzyk3hrzjfsdhxynuswa3ggt4iu" data-bluesky-embed-color-mode="dark"><p lang="en">thought about it more, some structures just wont work if i do this so i can either 511 + 1. hard code certain things to expand differently 512 + 2. add an operator that lets you choose 🧠 (mockup attached, going to call it the lazy operator or somthing)<br><br><a href="https://bsky.app/profile/did:plc:h3ogy4c4ljm7iumhga2uplae/post/3lmljw7zjjs23?ref_src=embed">[image or embed]</a></p>&mdash; Tholp (<a href="https://bsky.app/profile/did:plc:h3ogy4c4ljm7iumhga2uplae?ref_src=embed">@tholps.site</a>) <a href="https://bsky.app/profile/did:plc:h3ogy4c4ljm7iumhga2uplae/post/3lmljw7zjjs23?ref_src=embed">April 11, 2025 at 9:56 PM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script> 285 513 286 - Once you have a project file written and Skidmark built amd in your PATH just run `skidmark` somewhere in the project folder to build the website. 514 + I had written this Bluesky post about an issue I foresaw with certain types of block accepting macros, but my internal paradigm of how things should work has shifted a bit so I'm not too sure if I still need to do this. 287 515 288 - The output HTML is a bit malformed as of now (Missing `<!DOCTYPE>` and `<html>` tags) but every browser I've tested still loads the page fine so I'm not sure if I care yet. 516 + ### Triple curly bracket enclosers are ugly 517 + yuurrrp. They may change at some point but it doesn't really bother me right now. 289 518 290 - Ok so heres the rub: No propper docs, sorry! Stuff is still kinda changing fast and writing docs for at max like maybe 3 ish people is not really worth my time. The language is pretty simple for now so I think it should be pretty easy how to figure out from the examples and the macro table in this post though feel free to message me on Discord about it, I'll be happy to answer. 519 + ### Is this really ready to share? 520 + no 💚. 291 521 292 - As mentioned in my first post the source to this website will probably be public Soon™️ as a more complex example. 522 + ### Will you come tuck me in and read me a bedtime story if i use this? 523 + probably not, sorry. 293 524 294 525 ## Conclusion 295 526 296 - Thats whats in so far and my plans, still prety bare bones but I've got it setup now where I can add new features pretty quickly so hopefully the current issues don't stick around too long. 527 + Thats whats in so far and my plans, still pretty bare bones but I've got it setup now where I can add new features kind of quickly so hopefully the current issues don't stick around too long. 297 528 298 529 !blog_songblurb("Hazy" "Red Vox" "What Could Go Wrong" "/res/albumart/redvox-wcgw.png" "rgb(132, 31, 32)") 299 530 {{{ 300 - This song usually sums up the progression of how I feel whenever I work on anything, most recently Coplay. 301 - 302 - My self confidence has steadily rising the past year just as I hammer out more stuff and hanging around some cool people without feeling like the odd one out more often, so looking back a few months I don't really remember having that much doubt about the project when starting out. Though to be fair it seems much less intimidating than nailing extra netwroking crap to the Source engine. 531 + This song finds its way into my rotation every time I get over the threshold of progress where I know something is going to work out. 303 532 304 - !note("( I probably should have and taken longer to think it through, I may be knee deep in technical debt)") 305 - 306 - Funny story, before I started putting the real work into Skidmark I had described the concept in 2 seperate Discord servers and in each had a person share that they tried making something like it before but they were spending too long developing the tool instead of their website and just switched to using Liquid or Hugo. Encouraging. 533 + Funny story, before I started putting the real work in on Skidmark I had described the concept in 2 separate Discord servers and in each had a person share that they tried making something like it before but they were spending too long developing the tool instead of their website and switched to using Liquid or Hugo instead. I had time to burn though. 307 534 }}} 308 535 309 536 }}} 310 537 &blog_nav_no_next("blog1.html" "blog3.html") 311 538 312 539 313 - &to_top() 540 + &bsky_comments("placeholder") 314 541 315 542 &copy_footer()
+44 -6
skid/blog/blog_templates.sk
··· 35 35 !template(blog_post number title date desc) 36 36 {{{ 37 37 &page_title("Blog #[[number]]: [[title]]") 38 - &basic_embed("Thlog #[[number]]: [[title]]" "[[desc]]") 38 + &basic_embed("Blog #[[number]]: [[title]]" "[[desc]]") 39 + 40 + !construction() 41 + 42 + <header style="text-align: center;"> 43 + 44 + [home](/) 45 + 46 + </header> 39 47 40 48 <div align="center" class="blog_container"> 41 49 <!-- <sub>#[[number]]</sub>--> ··· 49 57 #### [[date]] 50 58 51 59 ##### [[desc]] 52 - 60 + <div id="blog_contents"> 53 61 [[{}]] 54 62 </div> 63 + </div> 64 + <script> 65 + function linkize_headers() 66 + { 67 + // var contents = document.getElementById("blog_contents"); 68 + // var htwo = contents.getElementsByTagName("h2"); 69 + // var hthree = contents.getElementsByTagName("h3"); 70 + var htwo = document.querySelectorAll("#blog_contents > h2"); 71 + var hthree = document.querySelectorAll("#blog_contents > h3"); 72 + for (var i = 0; i < htwo.length; i++) 73 + { 74 + var a = document.createElement("a"); 75 + a.setAttribute("id", htwo[i].innerHTML); 76 + a.setAttribute("href", "#" + htwo[i].innerHTML); 77 + a.setAttribute("class", "blog_section"); 78 + a.innerHTML = "<h2>" + htwo[i].innerHTML + "</h2>"; 79 + htwo[i].parentNode.replaceChild(a, htwo[i]); 80 + } 81 + for (var i = 0; i < hthree.length; i++) 82 + { 83 + var a = document.createElement("a"); 84 + a.setAttribute("id", hthree[i].innerHTML); 85 + a.setAttribute("href", "#" + hthree[i].innerHTML); 86 + a.setAttribute("class", "blog_section"); 87 + a.innerHTML = "<h3>" + hthree[i].innerHTML + "</h3>"; 88 + hthree[i].parentNode.replaceChild(a, hthree[i]); 89 + } 90 + } 91 + linkize_headers(); 92 + </script> 55 93 }}} 56 94 57 95 !template(blog_image imgsrc alt caption) ··· 139 177 </div> 140 178 }}} 141 179 142 - !template(filepreview name lang) 180 + !template(file_preview name lang) 143 181 {{{ 144 182 <!-- <div class="filepreview"> --> 145 183 <div class="tab tabtitle"><b><u>[[name]]</u></b></div> ··· 155 193 156 194 !template(bsky_comments postlink) 157 195 {{{ 158 - <h4 class="blog_footer"> This post is open to comments via !poplink("Bluesky" "[[postlink]]")</h4> 159 - <h5 class="blog_footer">!note("Attached media is hidden.")</h5> 160 - <div id="comments" data-uri="[[postlink]]"></div> 196 + <h4 class="blog_footer" id="comment_notice"> This post is open to comments via !poplink("Bluesky" "[[postlink]]")</h4> 197 + <h5 class="blog_footer" id="comment_media_notice">!note("Attached media not shown.")</h5> 198 + <div id="bsky_comments" data-uri="[[postlink]]"></div> 161 199 <script src="/res/scripts/bsky-comments.js"></script> 162 200 }}}
+4 -2
skid/blog/index.sk
··· 14 14 </div> 15 15 }}} 16 16 17 + !construction() 18 + 17 19 <header style="text-align: center;"> 18 20 19 21 [home](/) 20 22 21 23 </header> 22 24 23 - !blog_stub( 2 "An Overview on Skidmark" "In Progress" "Nominative determinism in software") 25 + !blog_stub( 2 "An Overview on Skidmark" "2025-7-11" "Nominative determinism in software") 24 26 !blog_stub( 1 "Is This Thing On?" "2025-6-2" "The 'thlog'? probably not.") 25 27 26 - &to_top() 28 + 27 29 28 30 &copy_footer() 29 31
+83 -23
skid/index.sk
··· 1 1 &insert("//style.sk") 2 2 &insert("//templates_generic.sk") 3 - &page_title("tholp zone") 3 + &page_title("Tholps Site") 4 4 5 5 !template(friend_link link img) 6 6 {{{ 7 7 <style> 8 8 a[href= "https://[[link]]" ] { 9 9 align-items:center; 10 + margin-right: 0.4em; 10 11 } 11 12 a[href="https://[[link]]" ]:before { 12 13 background-image: url( "[[img]]" ); ··· 18 19 content:""; 19 20 margin-left: 0.25em;} 20 21 </style> 21 - * [ [[link]] ](https://[[link]]) 22 + <!-- * [ [[link]] ](https://[[link]]) --> 23 + !poplink("[[link]]" "https://[[link]]") 24 + 25 + }}} 26 + 27 + !template(friend_link_display link img display) 28 + {{{ 29 + <style> 30 + a[href= "https://[[link]]" ] { 31 + align-items:center; 32 + margin-right: 0.4em; 33 + } 34 + a[href="https://[[link]]" ]:before { 35 + background-image: url( "[[img]]" ); 36 + --size: 0.8em; 37 + background-size: var(--size) var(--size); 38 + display: inline-block; 39 + width: var(--size); 40 + height: var(--size); 41 + content:""; 42 + margin-left: 0.25em;} 43 + </style> 44 + <!-- * [ [[link]] ](https://[[link]]) --> 45 + !poplink("[[display]]" "https://[[link]]") 22 46 23 47 }}} 24 48 49 + <audio id="fart" src="/res/sound/nubbyfart.mp3" onended="fartend()"></audio> 50 + <script> 51 + function fart() 52 + { 53 + document.title = '💨'; 54 + document.getElementById('fart').play(); 55 + } 56 + 57 + function fartend() 58 + { 59 + location.reload(); 60 + } 61 + </script> 62 + 25 63 <div class="landingbg"> 64 + 65 + !construction() 26 66 27 67 <div class="landingblocks"> 28 68 <div class="landingblock"> 29 69 30 70 ## Links 31 71 32 - [Bluesky](https://bsky.app/profile/tholps.site) 72 + !poplink("Bluesky" "https://bsky.app/profile/tholps.site") 33 73 34 - [Github](https://github.com/tholp1) 74 + !poplink("Github" "https://github.com/tholp1") 35 75 36 - [Website](/) 76 + <a onClick="fart()" style="cursor: pointer;"><u>Website</u></a> 37 77 38 - Anything not here either is not me or is inactive or uninteresting. 78 + Anything not here is either not me, inactive or uninteresting. 39 79 </div> 40 - <div class="landingblock"> 80 + <div class="landingblock aboutmeblock"> 41 81 42 82 ## About Me 43 83 44 84 Welcome to the coolest webpage you can find at this specific URL right now! 45 85 46 - Hi, I go by Tholp online, in my free time if I'm not rotting I'm probably programming or messing with something computer related. 86 + Hi, I go by Tholp online, in my free time if I'm not rotting I'm probably programming or messing with something computer/electronics related. Most of my experience is with C++ though I can hack stuff together in a number of other languages. IRL I currently work in the automotive subsect of the janitorial industry. 47 87 48 88 Personal Projects: 49 89 50 - * [Curlse: a Curseforge Minecraft modpack downloader](https://github.com/tholp1/curlse) 51 - * [Skidmark: The tool used to build this website](https://github.com/tholp1/skidmark) 90 + * !poplink("Coplay: Implementation of Steam Networking for older Source SDK versions" "https://github.com/coaXioN-Games/coplay") (Obsolete) 91 + * !poplink("Curlse: a Curseforge Minecraft modpack downloader" "https://github.com/tholp1/curlse") (Rust rewrite eventually) 92 + * !poplink("Skidmark: The tool used to build this website" "https://github.com/tholp1/skidmark") (C++ rewrite never) 52 93 53 - Collaborative Projects: 94 + Collaborative Project~~s~~: 54 95 55 - * [Deathmatch Classic: Refragged: A Remake/Continuation of Valve's Deathmatch Classic](https://coaxion.games/?=deathmatch_classic_refragged) (Programming/Infrastructure Lead) 96 + * !poplink("Deathmatch Classic: Refragged: A Remake/Continuation of Valve's Deathmatch Classic" "https://coaxion.games/?=deathmatch_classic_refragged") !nobr("(Programming &amp; Infrastructure Lead)") 56 97 57 98 I have been a part of more projects than listed but I either don't think what I contributed was substantial or I don't like what the project has become. 58 99 </div> ··· 62 103 63 104 [Blog](/blog) 64 105 106 + [Junk Drawer](/junk-drawer.html) 107 + 108 + [Third More Sinister Thing](/sinister.html) 109 + 65 110 More to come... Maybe. 66 111 </div> 67 112 </div> 68 - <div class="coolblock"> 113 + <div class="landingblock coolblock"> 114 + 115 + ## Shoutouts 116 + 117 + Links to pages of groups/people I am friends or acquaintances with whom I think are cool. Order is meaningless. 69 118 70 - ## Cool websites and people 119 + Mostly arbitrarily restricted to the elite class of website havers. 71 120 72 - !friend_link("Coaxion.games" "https://coaxion.games/res/favicon.ico") (pronounced Co-Action) Chill and talented team of Source engine modders, I have met many friends here. 121 + <div class="innercool"> 122 + !friend_link_display("Coaxion.games" "https://coaxion.games/res/favicon.ico" "Coaxion.games (biased)") 73 123 !friend_link("Rahimali.net" "https://rahimali.net/favicon.ico") 124 + !friend_link("Sorlag.com" "https://sorlag.com/favicon.ico") 125 + !friend_link_display( "sites.google.com/view/deathknight/dethknigt" "/res/images/deathknightfavi.png" "dethknigt") 74 126 !friend_link("Flare145.com" "https://flare145.com/favicon.ico") 75 127 !friend_link("Kleadron.net" "https://kleadron.net/favicon.ico") 76 - !friend_link("Hellbie.github.io" "") 128 + !friend_link("Hellbie.github.io" "/res/images/missing.webp") 129 + !friend_link("KMatter.net" "/res/images/missing.webp") 130 + !friend_link("Sourdani.dev" "https://sourdani.dev/images/avatar.png") 131 + !friend_link_display("Bsky.app/profile/mtd.coaxion.games" "https://web-cdn.bsky.app/static/favicon.png" "MTD.Coaxion.games") 132 + !friend_link("Craftablescience.info" "https://craftablescience.info/favicon.ico") 133 + !friend_link("Fenixdoes.dev" "https://fenixdoes.dev/favicon.jpg") 134 + 135 + </div> 77 136 </div> 78 137 79 138 <img src="/res/images/someguys.png" class="landingimg"/> ··· 81 140 </div> 82 141 <!-- <image src="/res/blog/1/writing.png" class="fullscreen"></img> --> 83 142 84 - <div class="lowerlanding"> 143 + <div class="lowerlanding"> 85 144 86 - <div class="contactblock"> 145 + <div class="contactblock"> 87 146 88 - # Contact 147 + # Contact 89 148 90 - I can be reached with a very long arm, on discord `@tholp`, by Bluesky DM or via <a href="mailto:tholp@tholps.site">email</a>. I'll be happy to talk to you but please be upfront else I might assume you're a bot or other non person thing like a scammer if I don't recognize your name. 149 + I can be reached with a very long arm, on Discord `@tholp`, by Bluesky DM or via <a href="mailto:tholp@tholps.site">email</a>. I'll be happy to talk to you but please be upfront else I might assume you are a bot or some other non-person thing like a scammer if I don't already recognize your name. 91 150 92 - </div> 151 + </div> 93 152 94 153 95 - &copy_footer() 96 - </div> 154 + &copy_footer() 97 155 </div> 156 + <!-- </div> --> 157 +
+114
skid/junk-drawer.sk
··· 1 + &insert("//style.sk") 2 + &insert("//templates_generic.sk") 3 + &page_title("Junk Drawer") 4 + 5 + !template(download text dl) 6 + {{{ 7 + <a href="[[dl]]" download> [[text]] </a> 8 + }}} 9 + 10 + !construction() 11 + 12 + <header style="text-align: center;"> 13 + 14 + [home](/) 15 + 16 + # The Junk Drawer 17 + ### Dumping ground for loosely catagorized things I have made that can't really be called a "Project". 18 + 19 + </header> 20 + 21 + <div class="blog_container"> 22 + 23 + ## Theming & Webdev stuff 24 + 25 + <div class="junk_drawer"> 26 + 27 + * !download("My Better Discord theme" "/res/dl/tholp.theme.css") 28 + 29 + </div> 30 + 31 + </div> 32 + 33 + <div class="blog_container"> 34 + 35 + ## Images & Gifs 36 + Various captioned gifs or image edits. 37 + 38 + ### the pibsons 39 + My friend Rahim kept bringing up *Learning with Pibby* for literally no reason so I looked through my favorited gifs in Discord and added captions to some over the course of a day to spam in the chat all at once. 40 + 41 + Feel free to use them to annoy your friends 😁. 42 + <div class="divcenter"> 43 + <img src="/res/images/pibbywarning.png" width="40%"> 44 + </div> 45 + 46 + <div class="gallery_row"> 47 + <div class="gallery_column"> 48 + <img src="/res/gifs/pibby/alien.gif"> 49 + <img src="/res/gifs/pibby/bearwalk.gif"> 50 + <img src="/res/gifs/pibby/catleg.gif"> 51 + <img src="/res/gifs/pibby/cereal.gif"> 52 + <img src="/res/gifs/pibby/didsomeonesay.gif"> 53 + <img src="/res/gifs/pibby/rock.gif"> 54 + </div> 55 + <div class="gallery_column"> 56 + <img src="/res/gifs/pibby/greenlight.gif"> 57 + <img src="/res/gifs/pibby/gtgwhat.gif"> 58 + <img src="/res/gifs/pibby/hater.gif"> 59 + <img src="/res/gifs/pibby/lostmedia.gif"> 60 + <img src="/res/gifs/pibby/matrix.gif"> 61 + <img src="/res/gifs/pibby/mother.gif"> 62 + <img src="/res/gifs/pibby/nobody.gif"> 63 + <img src="/res/gifs/pibby/frier.gif"> 64 + </div> 65 + <div class="gallery_column"> 66 + <img src="/res/gifs/pibby/noted.gif"> 67 + <img src="/res/gifs/pibby/pibcon.gif"> 68 + <img src="/res/gifs/pibby/pibfam.gif"> 69 + <img src="/res/gifs/pibby/pibgma.gif"> 70 + <img src="/res/gifs/pibby/pyat.gif"> 71 + <img src="/res/gifs/pibby/traitor.gif"> 72 + </div> 73 + <div class="gallery_column"> 74 + <img src="/res/gifs/pibby/season2.gif"> 75 + <img src="/res/gifs/pibby/season3.gif"> 76 + <img src="/res/gifs/pibby/season4.gif"> 77 + <img src="/res/gifs/pibby/season4.gif"> 78 + <img src="/res/gifs/pibby/smokinglaptop.gif"> 79 + <img src="/res/gifs/pibby/thevideogameadventure.gif"> 80 + <img src="/res/gifs/pibby/rejection.gif"> 81 + </div> 82 + </div> 83 + 84 + <div class="divcenter"> 85 + <img src="/res/images/pibbybitch.png" width="40%"> 86 + </div> 87 + 88 + ### Misc 89 + most of this sucks. 90 + 91 + <div class="gallery_row"> 92 + <div class="gallery_column"> 93 + <img src="/res/gifs/mariowhenhehastheleaf.gif"> 94 + <img src="/res/images/dmcrskulldrag.png"> 95 + <img src="/res/images/coolmario.png"> 96 + </div> 97 + <div class="gallery_column"> 98 + <img src="/res/gifs/notinfrontofmypomni.gif"> 99 + <img src="/res/images/dmcrskulldrag2.jpg"> 100 + <img src="/res/images/hellosko.png"> 101 + </div> 102 + <div class="gallery_column"> 103 + <img src="/res/gifs/tepbee.gif"> 104 + <img src="/res/gifs/creepypastavortwalk3.gif"> 105 + <img src="/res/images/spmbrainrot.png"> 106 + </div> 107 + <div class="gallery_column"> 108 + <img src="/res/images/slenderquest.png"> 109 + <img src="/res/images/refraggablehot.jpg"> 110 + <img src="/res/images/costruxion.png"> 111 + </div> 112 + </div> 113 + 114 + </div>
+67
skid/sinister.sk
··· 1 + &insert("//style.sk") 2 + &insert("//templates_generic.sk") 3 + &page_title("dot dot dot...") 4 + 5 + !construction() 6 + 7 + <header style="text-align: center;"> 8 + 9 + [Last chance to leave](/) 10 + 11 + </header> 12 + 13 + <style> 14 + @keyframes fadeIn { 15 + 0% { opacity: 0; } 16 + 100% { opacity: 1; } 17 + } 18 + 19 + .base { 20 + opacity: 0; 21 + } 22 + 23 + .animate { 24 + animation: fadeIn 20s; 25 + width: 80%; 26 + height: 80%; 27 + } 28 + </style> 29 + 30 + <div class="divcenter"> 31 + <button onclick="enter()"> Do? </button> 32 + 33 + <video playsinline oncanplay="this.play()" onended="document.querySelector('audio').play();document.title = '💀💨';" class="base" src="/res/videos/donot.mp4"></video> 34 + <audio id="fart" src="/res/sound/nubbyfart.mp3" onended="fartend()"></audio> 35 + 36 + <span style="color: var(--accent);font-family: 'freaky';font-size: xxx-large;" class="base"> Please Remain Seated For The Entire Duration Of The Film. </span> 37 + 38 + </div> 39 + 40 + <script> 41 + 42 + document.querySelector("span").classList.add("base") 43 + 44 + function enter() 45 + { 46 + var v = document.querySelector("video"); 47 + v.classList.remove("base"); 48 + v.classList.add("animate"); 49 + v.play(); 50 + 51 + var s = document.querySelector("span"); 52 + s.classList.remove("base"); 53 + s.classList.add("animate"); 54 + 55 + document.querySelector("button").remove(); 56 + document.querySelector("a[href='/'").remove(); 57 + 58 + document.querySelector(".construction_notice").remove(); 59 + 60 + document.title = "The Third More Sinister Thing"; 61 + } 62 + 63 + function fartend() 64 + { 65 + window.location.replace("/") 66 + } 67 + </script>
+25
skid/style.sk
··· 1 + <!-- Generic stuff applicable to every page --> 1 2 <link rel="stylesheet" href="/style.css"> 2 3 <html lang="en"> 3 4 <meta charset="UTF-8"> ··· 14 15 <script src="/res/scripts/highlighter/highlight.min.js"></script> 15 16 <script>hljs.highlightAll();</script> 16 17 18 + <a href="#" id="backtotopbutton"> 19 + <div class="top_button"> 20 + back to top 21 + </div> 22 + </a> 23 + 24 + <script> 25 + function update_totop() 26 + { 27 + var button = document.getElementById("backtotopbutton"); 28 + if (document.body.scrollTop > screen.height ) 29 + { 30 + button.style.display = "block"; 31 + } 32 + else 33 + { 34 + button.style.display = "none"; 35 + } 36 + // console.log("update"); 37 + } 38 + update_totop(); 39 + document.addEventListener("scroll", update_totop); 40 + window.addEventListener("resize", update_totop); 41 + </script>
+19 -20
skid/templates_generic.sk
··· 20 20 21 21 !template(asterisk level) 22 22 {{{ 23 - <sup><a href="#asterisk_!filename()_[[level]]">*[[level]]</a></sup> 23 + <sup><a href="#asterisk_!filename()_[[level]]" class="asterisk">*[[level]]</a></sup> 24 24 }}} 25 25 26 26 !template(asterisk_def level text) ··· 45 45 <meta content="#cac123" data-react-helmet="true" name="theme-color" /> 46 46 }}} 47 47 48 - !template(to_top) 48 + !template(nobr text) 49 49 {{{ 50 - <a href="#" id="backtotopbutton"> 51 - <div class="top_button"> 52 - back to top 53 - </div> 54 - </a> 55 - <script> 56 - { 57 - var button = document.getElementById("backtotopbutton"); 58 - if (document.body.scrollHeight > screen.height) 59 - { 60 - button.style.display = "block"; 61 - } 62 - else 63 - { 64 - button.style.display = "none"; 65 - } 66 - } 67 - </script> 50 + <span style="white-space: pre;">[[text]]</span> 51 + }}} 52 + 53 + !template(construction) 54 + {{{ 55 + <div class="construction_notice"> 56 + <style> 57 + .hardhat { 58 + width: 5em; 59 + margin-left: 1em; 60 + margin-right: 1em; 61 + } 62 + </style> 63 + <image class="hardhat" src="/res/images/construction-sign.png"></image> 64 + This webzone is presentable by my standards, but still a work in progress. 65 + <image class="hardhat" src="/res/images/construction-sign.png"></image> 66 + </div> 68 67 }}}
+2 -8
skidmark.toml
··· 1 1 [settings] 2 2 inputFolder = "skid" # relative to this file 3 3 outputFolder = "content" 4 - #preInsertGlobal = "preinsert_global.sk" 5 - #postInsertGlobal = "postinsert_global.sk" 6 - #createDefaultFileGroup = true 7 4 8 5 [fileGroups] 9 6 10 7 [fileGroups.blog] 11 - #relative to inputFolder 12 - #folder = "blog" # recursively adds all .sk files in inputFolder/folder 13 - files = ["blog/blog1.sk", "blog/blog2.sk",] # or use an array like this to manually specify 14 - #files = ["blog/test.sk"] 8 + files = ["blog/blog1.sk", "blog/blog2.sk",] 15 9 16 10 [fileGroups.misc] 17 - files = ["index.sk", "blog/index.sk", "404.sk"] 11 + files = ["index.sk", "blog/index.sk", "404.sk", "sinister.sk", "junk-drawer.sk"] 18 12 19 13 [fileGroups.blog_rss] 20 14 files = ["blog/rss.sk"]