diff --git a/public/assets/css/style.css b/public/assets/css/style.css index afe8e45..d3356ed 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,6 +1,7 @@ -html, body { +html, +body { width: 100%; - height:100%; + height: 100%; color: #aaaaaa; } @@ -21,13 +22,21 @@ html, body { } @-webkit-keyframes spin { - 0% { -webkit-transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); } + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } /* Add animation to "page content" */ @@ -36,17 +45,29 @@ html, body { -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; - animation-duration: 1s + animation-duration: 1s; } @-webkit-keyframes animatebottom { - from { bottom:-100px; opacity:0 } - to { bottom:0px; opacity:1 } + from { + bottom: -100px; + opacity: 0; + } + to { + bottom: 0px; + opacity: 1; + } } @keyframes animatebottom { - from{ bottom:-100px; opacity:0 } - to{ bottom:0; opacity:1 } + from { + bottom: -100px; + opacity: 0; + } + to { + bottom: 0; + opacity: 1; + } } #main { @@ -111,10 +132,12 @@ html, body { .b-example-divider { height: 3rem; - background-color: rgba(0, 0, 0, .1); - border: solid rgba(0, 0, 0, .15); + background-color: rgba(0, 0, 0, 0.1); + border: solid rgba(0, 0, 0, 0.15); border-width: 1px 0; - box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); + box-shadow: + inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1), + inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15); } .b-example-vr { @@ -124,7 +147,7 @@ html, body { } .bi { - vertical-align: -.125em; + vertical-align: -0.125em; fill: currentColor; } @@ -176,3 +199,21 @@ html, body { display: none; } } + +.article-card { + text-align: center; + /* border: 1px solid #444; */ + border-radius: 10px; +/* background-color: #353535; */ + margin-top: 2rem; + margin-bottom: 2rem; +} + +.shadow-10-10-20-black { + box-shadow: 10px 10px 20px black; +} + + +.shadow-15-15-30-black { + box-shadow: 15px 15px 30px black; +} diff --git a/public/assets/js/mastodon.js b/public/assets/js/mastodon.js index 6dc4b3c..199ac44 100644 --- a/public/assets/js/mastodon.js +++ b/public/assets/js/mastodon.js @@ -1,152 +1,166 @@ async function fetchData(log, tpl) { - var log = document.getElementById('log'); + var log = document.getElementById("log"); - var server_address = `techhub.social`; + var server_address = `techhub.social`; - // const response = await fetch('json/posts.json'); + // const response = await fetch('json/posts.json'); - const response = await fetch(`https://${server_address}/api/v1/accounts/111518136987654656/statuses`); + const response = await fetch( + `https://${server_address}/api/v1/accounts/111518136987654656/statuses`, + ); - const data = await response.json(); + const data = await response.json(); - data.forEach(obj => { - let post_tpl = tpl; - var media_link = ""; - Object.entries(obj).forEach(([key, value]) => { - if(key == "id") { - post_tpl = post_tpl.replace(/{post_id}/g, `${value}`); + data.forEach((obj) => { + let post_tpl = tpl; + var media_link = ""; + Object.entries(obj).forEach(([key, value]) => { + if (key == "id") { + post_tpl = post_tpl.replace(/{post_id}/g, `${value}`); + } + + if (key == "account") { + post_tpl = post_tpl.replace(/{id}/g, `${value.id}`); + post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`); + post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`); + post_tpl = post_tpl.replace( + /{account_name}/g, + `@${value.username}@${server_address}`, + ); + // post_tpl = post_tpl.replace('{avatar}', `${value.username}'s Avatar`); + post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`); + post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`); + } + + if (key == "content") { + let text = value; + + let youtube_frame_arr = []; + let spl_arr = text.split('"'); + let youtube_links_start = [ + "https://www.youtube.com/watch?v=", + "https://youtube.com/watch?v=", + "https://youtube.com/v/", + "https://m.youtube.com/watch?v=", + "https://m.youtube.com/v/", + ]; + + for (let i = 0; i < spl_arr.length; i++) { + youtube_links_start.forEach((youtube_link_start) => { + if (spl_arr[i].indexOf(youtube_link_start) === 0) { + let id = spl_arr[i].replace(youtube_link_start, ""); + let text_frame = ``; + youtube_frame_arr.push(text_frame); } + }); + } - if(key == "account") { - post_tpl = post_tpl.replace(/{id}/g, `${value.id}`); - post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`); - post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`); - post_tpl = post_tpl.replace(/{account_name}/g, `@${value.username}@${server_address}`); - // post_tpl = post_tpl.replace('{avatar}', `${value.username}'s Avatar`); - post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`); - post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`); - } - - if(key == "content") { - let text = value; - - let youtube_frame_arr = []; - let spl_arr = text.split('"'); - let youtube_link_start = 'https://www.youtube.com/watch?v='; - - for (let i = 0; i < spl_arr.length; i++) { - if (spl_arr[i].indexOf(youtube_link_start) === 0) { - let id = spl_arr[i].replace(youtube_link_start, ''); - let text_frame = ``; - youtube_frame_arr.push(text_frame); - } - } - - youtube_frame_arr.forEach(function(elem) { - text += elem; - }); - - // let regular = /(.*?)<\/a>/g; - // text = text.replace(regular, ''); - - value = text; - - post_tpl = post_tpl.replace('{content}', `${value}`); - } - - if(key == "media_attachments") { - value.forEach(obj1 => { - Object.entries(obj1).forEach(([k, v]) => { - if(k == "preview_url") { - media_link += ``; - } - - }); - }); - - post_tpl = post_tpl.replace('{media_attachments}', `${media_link}`); - } - - if(key == "created_at") { - post_tpl = post_tpl.replace(/{created_at}/g, `${value}`); - } - - if(key == "created_at") { - var isoDate = `${value}`; - var d = new Date(isoDate); - var datetime_ = d.toLocaleString('en-GB', { hour12: false, timeZone: "Asia/Yekaterinburg" }); - //var datetime_ = d.toLocaleString('ru-RU', { hour12: false, timeZone: "Asia/Yekaterinburg" }); - - post_tpl = post_tpl.replace(/{created_at_show}/g, `${datetime_}`); - } - - if(key == "edited_at") { - post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`); - } - - if(key == "favorites_count") { - post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`); - } - - if(key == "replies_count") { - post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`); - } - - if(key == "reblogs_count") { - post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`); - } - - // log.innerHTML = log.innerHTML + `${key} ${value}` + '
'; + youtube_frame_arr.forEach(function (elem) { + text += elem; }); - log.innerHTML += `${post_tpl}
`; + + // let regular = /(.*?)<\/a>/g; + // text = text.replace(regular, ''); + + value = text; + + post_tpl = post_tpl.replace("{content}", `${value}`); + } + + if (key == "media_attachments") { + value.forEach((obj1) => { + Object.entries(obj1).forEach(([k, v]) => { + if (k == "preview_url") { + media_link += ``; + } + }); + }); + + post_tpl = post_tpl.replace("{media_attachments}", `${media_link}`); + } + + if (key == "created_at") { + post_tpl = post_tpl.replace(/{created_at}/g, `${value}`); + } + + if (key == "created_at") { + var isoDate = `${value}`; + var d = new Date(isoDate); + //var datetime_ = d.toLocaleString('en-GB', { hour12: false, timeZone: "Asia/Yekaterinburg" }); + var datetime_ = d.toLocaleString("ru-RU", { + hour12: false, + timeZone: "Asia/Yekaterinburg", + }); + + post_tpl = post_tpl.replace(/{created_at_show}/g, `${datetime_}`); + } + + if (key == "edited_at") { + post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`); + } + + if (key == "favorites_count") { + post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`); + } + + if (key == "replies_count") { + post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`); + } + + if (key == "reblogs_count") { + post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`); + } + + // log.innerHTML = log.innerHTML + `${key} ${value}` + '
'; }); + log.innerHTML += `${post_tpl}
`; + }); } async function openInNewTab(url) { - window.open(url, '_blank').focus(); + window.open(url, "_blank").focus(); } async function getLog() { - let log = document.getElementById('log'); - if(log == null) { - setTimeout(getLog, 1000); - } else { - getMastodonPage(); - } + let log = document.getElementById("log"); + if (log == null) { + setTimeout(getLog, 1000); + } else { + getMastodonPage(); + } } async function getMastodonPage() { - let log = document.getElementById('log'); + let log = document.getElementById("log"); - let tplUrl = '/json/mastodon-tpl.html'; - let response = await fetch(tplUrl); - var tpl = ""; + let tplUrl = "/json/mastodon-tpl.html"; + let response = await fetch(tplUrl); + var tpl = ""; - log.innerHTML = ""; + log.innerHTML = ""; - const controller = new AbortController(); - const signal = controller.signal; + const controller = new AbortController(); + const signal = controller.signal; - // Cancel the fetch request in 500ms - setTimeout(() => controller.abort(), 500); + // Cancel the fetch request in 500ms + setTimeout(() => controller.abort(), 500); - try { - const response = await fetch(tplUrl, {signal}); - tpl = await response.text(); + try { + const response = await fetch(tplUrl, { signal }); + tpl = await response.text(); + } catch (error) { + // DOMException: The user aborted a request. + console.log("Error: ", error); + log.innerHTML = "

1) Ой всё сломалось :(

"; + } - } catch(error) { - // DOMException: The user aborted a request. - console.log('Error: ', error); - log.innerHTML = "

1) Ой всё сломалось :(

"; - } + if (!tpl) { + log.innerHTML = "

2) Ой всё сломалось :(

"; + } - if(!tpl) { - log.innerHTML = "

2) Ой всё сломалось :(

"; - } - - fetchData(log, tpl); + fetchData(log, tpl); } let query = window.location.pathname; if (query == "/" || query == "/news") { - getLog(); + getLog(); } diff --git a/public/assets/js/script.js b/public/assets/js/script.js index d7b5123..8f04b88 100644 --- a/public/assets/js/script.js +++ b/public/assets/js/script.js @@ -94,6 +94,10 @@ switch (query) { bodyFetch(query); break; + case "/reading": + bodyFetch(query); + break; + default: bodyFetch(); } diff --git a/public/index.html b/public/index.html index ec52743..137c7cd 100644 --- a/public/index.html +++ b/public/index.html @@ -72,16 +72,16 @@ - +
-
-