sadalsvvd · April 10, 2023 19:54
diff --git a/compile.html b/compile.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twitter Archive Viewer</title>
  <!-- Include a CSS library for basic styling (Bootstrap) -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Include a JavaScript library for DOM manipulation (jQuery) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body>
  <div class="container">
    <h1>Twitter Archive Viewer</h1>
    <div id="tweets"></div>
  </div>
  <script src="./formatted_tweets.js"></script>

  <script>
    // Load the JSON file with the FilteredTweetArray data
    const filteredTweetArray = window.tweets;

    // Define a function to render tweets recursively, including children
    function renderTweet(tweet, isChild) {
        const borderClass = isChild ? '' : 'border-bottom';
        let tweetHtml = `
            <div class="tweet ${borderClass}" style="border-color: #555 !important;">
                <p>${isChild ? '' : new Date(tweet.created_at).toISOString() + ' | '}F: ${tweet.favorite_count} | RT: ${tweet.retweet_count} | ${tweet.in_reply_to_screen_name ? `Reply to: ${tweet.in_reply_to_screen_name}` : ''}</p>
                <p>${tweet.full_text}</p>
        `;

        if (tweet.children.length > 0) {
            tweetHtml += '<div class="children">';
            tweet.children.forEach(child => {
            tweetHtml += renderTweet(child, true);
            });
            tweetHtml += '</div>';
        }

        tweetHtml += '</div>';
        return tweetHtml;
    }

    // Call the function to render the tweets and insert them into the HTML
    let tweetsHtml = '';
    filteredTweetArray.forEach(tweet => {
    tweetsHtml += renderTweet(tweet, false);
    });
    $('#tweets').html(tweetsHtml);
  </script>
 </body>
 </html>
diff --git a/compile.js b/compile.js
 // This creates a tree.json file out of your data
 const fs = require('fs');

 // Note: you have to rename tweets.js to tweets.json and remove the leading
 const tweetData = require('./tweets.json');

 function buildTweetTree(tweetDataArray) {
    const idToTweetMap = {};
    const roots = [];
  
    // Step 4: Map tweets by their ID
    tweetDataArray.forEach(({ tweet }) => {
      tweet.children = [];
      idToTweetMap[tweet.id_str] = tweet;
    });
  
    // Step 5: Build the tree structure
    tweetDataArray.forEach(({ tweet }) => {
      if (tweet.in_reply_to_status_id) {
        const parentTweet = idToTweetMap[tweet.in_reply_to_status_id_str];
        if (parentTweet) {
          parentTweet.children.push(tweet);
        }
      } else {
        roots.push(tweet);
      }
    });
  
    // Step 6: Return the roots array
    return roots;
  }

  function filterTweetProperties(tweet) {
    const filteredTweet = {
      id: tweet.id,
      full_text: tweet.full_text,
      favorite_count: tweet.favorite_count,
      retweet_count: tweet.retweet_count,
      created_at: tweet.created_at,
      in_reply_to_status_id: tweet.in_reply_to_status_id,
      in_reply_to_screen_name: tweet.in_reply_to_screen_name,
      children: [],
    };

    if (tweet.extended_entities) {
        filteredTweet.media = filterMediaProperties(tweet.extended_entities.media);
    }
  
    if (tweet.children && tweet.children.length > 0) {
      filteredTweet.children = tweet.children.map(filterTweetProperties);
    }
  
    return filteredTweet;
  }
  
  function filterMediaProperties(media) {
    return {
      media_url_https: media.media_url_https,
      type: media.type,
      source_user_id: media.source_user_id,
      display_url: media.display_url,
    };
  }
  
  function buildFilteredTweetTree(tweetDataArray) {
    const tweetTree = buildTweetTree(tweetDataArray);
    const filteredTweetTree = tweetTree.map(filterTweetProperties);
  
    return filteredTweetTree;
  }

 const roots = buildFilteredTweetTree(tweetData);

 fs.writeFileSync('formatted_tweets.json', JSON.stringify(roots, null, 4), 'utf8');
diff --git a/escaping_twitter.md b/escaping_twitter.md
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Twitter Archive Viewer</title>
	<!-- Include a CSS library for basic styling (Bootstrap) -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

	<!-- Include a JavaScript library for DOM manipulation (jQuery) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>
	<body>
	<div class="container">
	<h1>Twitter Archive Viewer</h1>
	<div id="tweets"></div>
	</div>
	<script src="./formatted_tweets.js"></script>

	<script>
	// Load the JSON file with the FilteredTweetArray data
	const filteredTweetArray = window.tweets;

	// Define a function to render tweets recursively, including children
	function renderTweet(tweet, isChild) {
	const borderClass = isChild ? '' : 'border-bottom';
	let tweetHtml = `
	<div class="tweet ${borderClass}" style="border-color: #555 !important;">
	<p>${isChild ? '' : new Date(tweet.created_at).toISOString() + ' \| '}F: ${tweet.favorite_count} \| RT: ${tweet.retweet_count} \| ${tweet.in_reply_to_screen_name ? `Reply to: ${tweet.in_reply_to_screen_name}` : ''}</p>
	<p>${tweet.full_text}</p>
	`;

	if (tweet.children.length > 0) {
	tweetHtml += '<div class="children">';
	tweet.children.forEach(child => {
	tweetHtml += renderTweet(child, true);
	});
	tweetHtml += '</div>';
	}

	tweetHtml += '</div>';
	return tweetHtml;
	}

	// Call the function to render the tweets and insert them into the HTML
	let tweetsHtml = '';
	filteredTweetArray.forEach(tweet => {
	tweetsHtml += renderTweet(tweet, false);
	});
	$('#tweets').html(tweetsHtml);
	</script>
	</body>
	</html>
	// This creates a tree.json file out of your data
	const fs = require('fs');

	// Note: you have to rename tweets.js to tweets.json and remove the leading
	const tweetData = require('./tweets.json');

	function buildTweetTree(tweetDataArray) {
	const idToTweetMap = {};
	const roots = [];

	// Step 4: Map tweets by their ID
	tweetDataArray.forEach(({ tweet }) => {
	tweet.children = [];
	idToTweetMap[tweet.id_str] = tweet;
	});

	// Step 5: Build the tree structure
	tweetDataArray.forEach(({ tweet }) => {
	if (tweet.in_reply_to_status_id) {
	const parentTweet = idToTweetMap[tweet.in_reply_to_status_id_str];
	if (parentTweet) {
	parentTweet.children.push(tweet);
	}
	} else {
	roots.push(tweet);
	}
	});

	// Step 6: Return the roots array
	return roots;
	}

	function filterTweetProperties(tweet) {
	const filteredTweet = {
	id: tweet.id,
	full_text: tweet.full_text,
	favorite_count: tweet.favorite_count,
	retweet_count: tweet.retweet_count,
	created_at: tweet.created_at,
	in_reply_to_status_id: tweet.in_reply_to_status_id,
	in_reply_to_screen_name: tweet.in_reply_to_screen_name,
	children: [],
	};

	if (tweet.extended_entities) {
	filteredTweet.media = filterMediaProperties(tweet.extended_entities.media);
	}

	if (tweet.children && tweet.children.length > 0) {
	filteredTweet.children = tweet.children.map(filterTweetProperties);
	}

	return filteredTweet;
	}

	function filterMediaProperties(media) {
	return {
	media_url_https: media.media_url_https,
	type: media.type,
	source_user_id: media.source_user_id,
	display_url: media.display_url,
	};
	}

	function buildFilteredTweetTree(tweetDataArray) {
	const tweetTree = buildTweetTree(tweetDataArray);
	const filteredTweetTree = tweetTree.map(filterTweetProperties);

	return filteredTweetTree;
	}

	const roots = buildFilteredTweetTree(tweetData);

	fs.writeFileSync('formatted_tweets.json', JSON.stringify(roots, null, 4), 'utf8');