-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
191 lines (176 loc) · 9.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<!--
A page to display archived tweets from a tweets.json file.
Author: Caspar "UPLYNXED" Neervoort (twitter.com/upLYNXed)
Version: 1.0.0
License: MIT
Files:
- index.html (this file)
- templates.js (templates for the page)
- tweets.js (javaScript for the page)
- config.json (configuration file)
- tweets.json (the tweets archive file)
Uses:
- Bootstrap 5.3.3 (https://getbootstrap.com/)
- Font Awesome 6.4.0 (https://fontawesome.com/)
- Twemoji 14.0.2 (https://github.com/twitter/twemoji)
- jQuery 3.6.0 (https://jquery.com/)
- JSRender 1.0.13 (https://www.jsviews.com/)
- JSViews 1.0.13 (https://www.jsviews.com/)
Demo: https://uplynxed.github.io/twitter-archive/
Usage:
1. Scrape your tweets using the scraper userscript or bookmarklet. (scraper is currently not publicly available)
2. Download the resulting tweets.json file and place it in the same directory as this file.
3. Find the user ID of the account you want to view (you can use https://tweeterid.com/ to find it) and set it in the config.json file.
4. Open this file in a web browser (tested in Firefox and Chrome).
4. You're done! You can now view your archived tweets in a web browser.
-->
<html lang="en" class="min-vh-100" data-bs-theme="dark" data-link="data-bs-theme^{:~config.theme != 'auto' ? ~config.theme : (~window.matchMedia && ~window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 🔽 EDIT ONLY THESE TAGS TO CUSTOMIZE THE APPEARANCE OF LINKS WHEN SHARED ON SOCIAL MEDIA 🔽 -->
<title>User Name (@username) - Twitter Archive</title>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:creator" content="@upLYNXed" />
<meta property="og:url" content="https://example.com/archive/" />
<meta property="og:title" content="User Name (@username) - Twitter Archive" />
<meta property="og:description" content="An archive of the majority of @username's tweets" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<!-- 🔼 EDIT ONLY THESE TAGS TO CUSTOMIZE THE APPEARANCE OF LINKS WHEN SHARED ON SOCIAL MEDIA 🔼 -->
<!-- Use bootstrap for styling -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Use bs-breakpoints for breakpoint events -->
<script src="js/bs-breakpoints.min.js"></script>
<!-- Use fontawesome for icons -->
<script src="https://kit.fontawesome.com/65301cbc77.js" crossorigin="anonymous"></script>
<!-- Use Twemoji for emojis -->
<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
<!-- Use jQuery for JSViews -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Use JSRender/JSViews for templating -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/1.0.13/jsviews.min.js"></script>
<!-- JavaScript for the page -->
<script src="tweets.js"></script>
<!-- JavaScript for the templates -->
<script src="templates.js"></script>
</head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid user-banner z-2 p-0 top-0" style="font-size: 0;top:-480px;">
<!-- Banner goes here -->
</div>
<div class="navbar navbar-expand-lg sticky-top text-bg-secondary bg-body-secondary shadow controls">
<div class="container d-flex flex-row flex-nowrap gap-2 gap-sm-3 align-baseline justify-content-start">
<button class="navbar-toggler px-3 py-3 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="true" aria-label="Toggle navigation">
<i class="fa-solid fa-bars"></i>
</button>
<a href="#"class="d-flex flex-shrink-1 g-2 navbar-brand user-head position-relative py-0" style="min-width:0;">
<div class="d-none d-sm-inline embed-responsive-item me-3">
<div class="align-content-center bg-body-secondary border border-5 border-dark-subtle d-grid justify-content-center rounded-circle translate-middle-y"
style="height: min(170px, 12vw);aspect-ratio: 1 / 1;transition: height 0.15s ease-in-out 0s;margin-bottom:max(-140px, -14vw);margin-top: clamp(0px, 1vw, 0.2em);">
<i class="fa-3x fa-solid fa-spin-pulse fa-spinner"></i>
</div>
</div>
<h1 class="col-3 position-relative fs-2 mb-0 pb-1 overflow-hidden" style="text-overflow: ellipsis;flex: 1;">
Loading Profile...
<span class="d-block fs-5 text-muted" style="max-width:calc(100% - 30px);text-overflow:ellipsis;overflow:hidden; ">
Please stand by...
</span>
</h1>
</a>
<div class="offcanvas-lg border-0 ms-lg-auto h-100 start-0" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header bg-body-tertiary border-bottom shadow" style="height:84px;">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
<button type="button" class="btn-close h-100 px-4" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasNavbar" aria-label="Close"></button>
</div>
<div class="offcanvas-body pt-3 pt-sm-4 pt-md-5 pt-lg-0 pb-2 pb-lg-0" id="navbarToggler">
<ul class="navbar-nav nav-pills nav-fill mb-3 mb-lg-0 me-lg-2 me-xl-4">
<li class="nav-item px-0 px-lg-1" id="tweets">
<a class="nav-link mb-3 mb-lg-0 p-0 active" aria-current="page" href="#tweets" title="Tweets">
<span class="d-block focus-ring border border-opacity-10 border-secondary rounded-3 px-4 py-3 py-lg-2 w-100" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasNavbar">
<i class="fa-regular fa-comment fa-flip-horizontal"></i>
<span class="d-inline d-lg-none">Tweets</span>
</span>
</a>
</li>
<li class="nav-item px-0 px-lg-1" id="media">
<a class="nav-link mb-3 mb-lg-0 p-0" href="#media" title="Media Tweets (images, videos, etc.)">
<span class="d-block focus-ring border border-opacity-10 border-secondary rounded-3 px-4 py-3 py-lg-2 w-100" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasNavbar">
<i class="fa-solid fa-photo-film"></i>
<span class="d-inline d-lg-none">Media</span>
</span>
</a>
</li>
<li class="nav-item px-0 px-lg-1" id="favorites">
<a class="nav-link mb-3 mb-lg-0 p-0" href="#favorites" title="Favorite Tweets (stored locally)">
<span class="d-block focus-ring border border-opacity-10 border-secondary rounded-3 px-4 py-3 py-lg-2 w-100" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasNavbar">
<i class="far fa-star"></i>
<span class="d-inline d-lg-none">Favorites</span>
</span>
</a>
</li>
</ul>
<form class="btn-toolbar d-flex" role="toolbar" aria-label="Search Bar" onsubmit="handleSearch(event); return false;" autocomplete="off">
<div class="input-group w-100">
<input class="form-control py-2 py-lg-0" type="search" placeholder="Search" aria-label="Search" name="search" id="search">
<button class="btn btn-primary" type="button" title="Search this archive (this feature is still a work in progress)" onclick="handleSearch(event);" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasNavbar">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
<button class="navbar-toggler ms-auto px-3 py-3 border-0 bg-body-tertiary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilters" aria-controls="offcanvasFilters" aria-label="Toggle Sidebar" title="Toggle Sidebar">
<i id="sidebar-filter-toggle" class="fa-solid fa-sliders"></i>
<i id="sidebar-thread-toggle" class="fa-solid fa-list-ul" style="display:none;"></i>
</button>
</div>
</div>
<main class="container-fluid position-relative flex-grow-1">
<div class="container user-bio py-4">
<!-- Bio Template goes here -->
</div>
<div class="container mb-5">
<div class="row pb-3">
<button class="btn btn-icon float-start w-auto ms-3 mb-1 d-none" id="back" onclick="window.history.back();">
<i class="fa-solid fa-chevron-left"></i>
</button>
<h3 class="w-auto">
Archived Tweets
</h3>
</div>
<div class="row reverse tweets">
<!-- Tweet List Template goes here -->
</div>
</div>
<div class="loading-spinner position-fixed start-0 end-0 top-0 bottom-0 h-100 w-100 z-2 z-3 d-grid align-content-center justify-content-center pt-5 bg-black bg-gradient bg-opacity-25 bg-opacity-50">
<div class="spinner-border" role="status" style="width: 4rem; height: 4rem;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</main>
<footer class="container-fluid text-bg-dark bg-dark-subtle py-4">
<div class="container">
<div class="row">
<div class="col-10">
<p class="text-muted">
Made with ♥ by <a href="https://twitter.com/uplynxed" target="_blank" class="text-decoration-none link-body-emphasis">
@upLYNXed
</a>
</p>
</div>
<div class="col-2">
<p class="text-muted text-end">
<a href="https://github.com/uplynxed" target="_blank" class="text-decoration-none link-body-emphasis" title="GitHub">
<i class="fa-brands fa-github me-1"></i>
</a>
</p>
</div>
</div>
</div>
</footer>
</body>
</html>