litruv/lit.ruv.wtf
1
0
Fork 0
mirror of https://github.com/litruv/lit.ruv.wtf.git synced 2026-07-24 02:36:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

misc

Browse Source
This commit is contained in:
Litruv
2024-12-02 12:39:02 +11:00
parent b2093b70d3
commit 883ff0104e
2 changed files with 3 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -30,13 +30,14 @@
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<title>Litruv - Dev/Tech Artist</title>
</head>
<body>
<div class="bg-pattern"></div>
<div class="container">
<img src="avatar.webp" alt="Avatar" class="avatar-img">
<img src="avatar.webp" alt="Avatar" class="avatar-img" width="250" height="250">
<header>
<h1>Litruv</h1>
<div class="subtext">Dev/Tech Artist @<a href="https://mates.dev/">MatesMedia</a>
@@ -63,9 +64,5 @@
</header>
<div id="posts"></div>
</div>
<!-- FontAwesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
</body>
</html>

101
main.js
View File

@@ -1,100 +1 @@
function formatDate(dateString) {
return new Date(dateString).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
function getRandomRotation() {
return Math.random() * 3 - 1.5
}
function createPost(post) {
const article = document.createElement('div');
article.className = 'post';
article.style.transform = `rotate(${getRandomRotation()}deg)`;
const postLink = document.createElement('a');
postLink.href = post.url;
postLink.target = "_blank";
postLink.style.textDecoration = "none";
const imageHTML = post.embed.length > 0
? post.embed.map(img => `
<a href="${img.url}" target="_blank">
<img class="image-placeholder" src="${img.url}" alt="${img.alt || 'Image'}" style="width: 100%;" />
</a>
`).join('')
: '';
const formattedText = post.text.replace(/\n/g, '<br>');
article.innerHTML = `
<div class="post-header">
<div class="avatar">
<img src="${post.avatar}" alt="${post.author}" style="width: 100%; height: 100%; object-fit: cover;" />
</div>
<div>
<div style="font-weight: bold;">${post.author} (@${post.handle})</div>
<div style="font-size: 0.875rem; color: #666;">
${formatDate(post.createdAt)}
</div>
</div>
</div>
<div class="post-content">${formattedText}</div>
${imageHTML}
<div class="post-actions">
<button class="action-btn like">♥ ${post.likes}</button>
<button class="action-btn repost">⟲ ${post.reposts}</button>
</div>
`;
postLink.href = post.url;
postLink.appendChild(article);
return postLink;
}
function filterOriginalPosts(feed) {
return feed.filter((item) => {
const isRepost = item?.reason?.$type === 'app.bsky.feed.defs#reasonRepost';
const isReply = item?.post?.record?.reply;
return !isRepost && !isReply;
});
}
async function fetchPosts() {
try {
const response = await fetch("https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=lit.mates.dev&limit=20&filter=posts_no_replies");
if (!response.ok) {
throw new Error('Failed to fetch posts');
}
const data = await response.json();
const filteredFeed = filterOriginalPosts(data.feed);
const posts = filteredFeed.map(item => ({
author: item.post.author.displayName,
handle: item.post.author.handle,
avatar: item.post.author.avatar,
createdAt: item.post.record.createdAt,
text: item.post.record.text,
likes: item.post.likeCount || 0,
reposts: item.post.repostCount || 0,
url: `https://bsky.app/profile/${item.post.author.handle}/post/${item.post.uri.split('/').pop()}`,
embed: item.post.embed?.images?.map(img => ({
url: img.thumb,
alt: img.alt || ''
})) || []
}));
const postsContainer = document.getElementById('posts');
postsContainer.innerHTML = '';
posts.forEach(post => {
postsContainer.appendChild(createPost(post));
});
} catch (error) {
console.error('Error fetching posts:', error);
}
}
fetchPosts();
function formatDate(t){return new Date(t).toLocaleDateString("en-US",{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})}function getRandomRotation(){return 3*Math.random()-1.5}function createPost(t){const e=document.createElement("div");e.className="post",e.style.transform=`rotate(${getRandomRotation()}deg)`;const o=document.createElement("a");o.href=t.url,o.target="_blank",o.style.textDecoration="none";const n=t.embed.length>0?t.embed.map((t=>`\n <a href="${t.url}" target="_blank">\n <img class="image-placeholder" src="${t.url}" alt="${t.alt||"Image"}" style="width: 100%;" />\n </a>\n `)).join(""):"",a=t.text.replace(/\n/g,"<br>");return e.innerHTML=`\n <div class="post-header">\n <div class="avatar">\n <img src="${t.avatar}" alt="${t.author}" style="width: 100%; height: 100%; object-fit: cover;" />\n </div>\n <div>\n <div style="font-weight: bold;">${t.author} (@${t.handle})</div>\n <div style="font-size: 0.875rem; color: #666;">\n ${formatDate(t.createdAt)}\n </div>\n </div>\n </div>\n <div class="post-content">${a}</div>\n ${n}\n <div class="post-actions">\n <button class="action-btn like">♥ ${t.likes}</button>\n <button class="action-btn repost">⟲ ${t.reposts}</button>\n </div>\n `,o.href=t.url,o.appendChild(e),o}function filterOriginalPosts(t){return t.filter((t=>{const e="app.bsky.feed.defs#reasonRepost"===t?.reason?.$type,o=t?.post?.record?.reply;return!e&&!o}))}async function fetchPosts(){try{const t=await fetch("https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=lit.mates.dev&limit=20&filter=posts_no_replies");if(!t.ok)throw new Error("Failed to fetch posts");const e=await t.json(),o=filterOriginalPosts(e.feed).map((t=>({author:t.post.author.displayName,handle:t.post.author.handle,avatar:t.post.author.avatar,createdAt:t.post.record.createdAt,text:t.post.record.text,likes:t.post.likeCount||0,reposts:t.post.repostCount||0,url:`https://bsky.app/profile/${t.post.author.handle}/post/${t.post.uri.split("/").pop()}`,embed:t.post.embed?.images?.map((t=>({url:t.thumb,alt:t.alt||""})))||[]}))),n=document.getElementById("posts");n.innerHTML="",o.forEach((t=>{n.appendChild(createPost(t))}))}catch(t){console.error("Error fetching posts:",t)}}fetchPosts();