The Appview for the kipclip.com atproto bookmarking service
2
fork

Configure Feed

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

feat: add press kit page with brand assets and guidelines

+309 -2
+11 -2
deno.lock
··· 6 6 "jsr:@fresh/build-id@1": "1.0.1", 7 7 "jsr:@fresh/core@^2.2.0": "2.2.0", 8 8 "jsr:@panva/jose@6.1.0": "6.1.0", 9 - "jsr:@std/assert@1": "1.0.16", 9 + "jsr:@std/assert@1": "1.0.19", 10 10 "jsr:@std/bytes@^1.0.6": "1.0.6", 11 11 "jsr:@std/dotenv@0.225": "0.225.6", 12 12 "jsr:@std/encoding@1": "1.0.10", ··· 102 102 "jsr:@std/internal" 103 103 ] 104 104 }, 105 + "@std/assert@1.0.19": { 106 + "integrity": "eaada96ee120cb980bc47e040f82814d786fe8162ecc53c91d8df60b8755991e", 107 + "dependencies": [ 108 + "jsr:@std/internal" 109 + ] 110 + }, 105 111 "@std/bytes@1.0.6": { 106 112 "integrity": "f6ac6adbd8ccd99314045f5703e23af0a68d7f7e58364b47d2c7f408aeb5820a" 107 113 }, ··· 151 157 ] 152 158 }, 153 159 "@std/http@1.0.25": { 154 - "integrity": "577b4252290af1097132812b339fffdd55fb0f4aeb98ff11bdbf67998aa17193" 160 + "integrity": "577b4252290af1097132812b339fffdd55fb0f4aeb98ff11bdbf67998aa17193", 161 + "dependencies": [ 162 + "jsr:@std/encoding@^1.0.10" 163 + ] 155 164 }, 156 165 "@std/internal@1.0.12": { 157 166 "integrity": "972a634fd5bc34b242024402972cd5143eac68d8dffaca5eaa4dba30ce17b027"
+21
frontend/components/About.tsx
··· 130 130 <span aria-hidden className="text-lg">🦋</span> 131 131 made bij tijs.org 132 132 </a> 133 + <a 134 + href="/press" 135 + className="inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-white hover:opacity-95" 136 + style={{ backgroundColor: "var(--teal)" }} 137 + > 138 + <svg 139 + className="w-5 h-5" 140 + fill="none" 141 + stroke="currentColor" 142 + viewBox="0 0 24 24" 143 + aria-hidden 144 + > 145 + <path 146 + strokeLinecap="round" 147 + strokeLinejoin="round" 148 + strokeWidth={2} 149 + d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" 150 + /> 151 + </svg> 152 + Press Kit 153 + </a> 133 154 </div> 134 155 </section> 135 156 </main>
+5
frontend/components/App.tsx
··· 12 12 import { Settings } from "./Settings.tsx"; 13 13 import { ReadingList } from "./ReadingList.tsx"; 14 14 import { Support } from "./Support.tsx"; 15 + import { Press } from "./Press.tsx"; 15 16 import { useApp } from "../context/AppContext.tsx"; 16 17 import { clearAll as clearCache } from "../cache/db.ts"; 17 18 ··· 102 103 103 104 if (currentPath === "/support") { 104 105 return <Support />; 106 + } 107 + 108 + if (currentPath === "/press") { 109 + return <Press />; 105 110 } 106 111 107 112 if (currentPath === "/create-account") {
+272
frontend/components/Press.tsx
··· 1 + const CDN = "https://cdn.kipclip.com"; 2 + 3 + const assets = [ 4 + { 5 + name: "Mascot (with background)", 6 + filename: "kip-satchel.png", 7 + description: "Full mascot illustration on blue background", 8 + }, 9 + { 10 + name: "Mascot (transparent)", 11 + filename: "kip-satchel-transparent.png", 12 + description: "Full mascot illustration on transparent background", 13 + }, 14 + { 15 + name: "Avatar", 16 + filename: "kip-vignette.png", 17 + description: "Circular mascot avatar for profile images and icons", 18 + }, 19 + { 20 + name: "Wordmark (SVG)", 21 + filename: "kipclip.svg", 22 + description: "kipclip wordmark logo in vector format", 23 + }, 24 + ]; 25 + 26 + function DownloadCard( 27 + { name, filename, description }: { 28 + name: string; 29 + filename: string; 30 + description: string; 31 + }, 32 + ) { 33 + const url = `${CDN}/images/${filename}`; 34 + const isSvg = filename.endsWith(".svg"); 35 + 36 + return ( 37 + <div className="bg-white rounded-lg shadow-md overflow-hidden"> 38 + <div 39 + className="flex items-center justify-center p-6" 40 + style={{ 41 + backgroundColor: isSvg ? "var(--cream)" : undefined, 42 + backgroundImage: !isSvg 43 + ? "linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%), linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%)" 44 + : undefined, 45 + backgroundSize: !isSvg ? "16px 16px" : undefined, 46 + backgroundPosition: !isSvg ? "0 0, 8px 8px" : undefined, 47 + }} 48 + > 49 + <img 50 + src={url} 51 + alt={name} 52 + className="max-h-40 object-contain" 53 + /> 54 + </div> 55 + <div className="p-4 border-t border-gray-100"> 56 + <h4 className="font-semibold text-gray-800">{name}</h4> 57 + <p className="text-sm text-gray-500 mt-1">{description}</p> 58 + <a 59 + href={url} 60 + download={filename} 61 + className="inline-flex items-center gap-1 mt-3 text-sm font-medium hover:opacity-80" 62 + style={{ color: "var(--coral)" }} 63 + > 64 + <svg 65 + className="w-4 h-4" 66 + fill="none" 67 + stroke="currentColor" 68 + viewBox="0 0 24 24" 69 + > 70 + <path 71 + strokeLinecap="round" 72 + strokeLinejoin="round" 73 + strokeWidth={2} 74 + d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V3" 75 + /> 76 + </svg> 77 + Download 78 + </a> 79 + </div> 80 + </div> 81 + ); 82 + } 83 + 84 + export function Press() { 85 + return ( 86 + <div className="min-h-screen bg-gray-50"> 87 + <header className="bg-white shadow-sm"> 88 + <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between"> 89 + <a href="/" className="flex items-center gap-2"> 90 + <img 91 + src="https://res.cloudinary.com/dru3aznlk/image/upload/v1760692589/kip-vignette_h2jwct.png" 92 + alt="Kip logo" 93 + className="w-8 h-8" 94 + /> 95 + <h1 96 + className="text-2xl font-bold" 97 + style={{ color: "var(--coral)" }} 98 + > 99 + kipclip 100 + </h1> 101 + </a> 102 + <a 103 + href="/" 104 + className="text-gray-600 hover:text-gray-800 text-sm font-medium" 105 + > 106 + Back to Bookmarks 107 + </a> 108 + </div> 109 + </header> 110 + 111 + <main className="max-w-4xl mx-auto px-4 py-12 space-y-8"> 112 + <section> 113 + <h2 className="text-3xl font-bold text-gray-800 mb-3"> 114 + Press Kit 115 + </h2> 116 + <p className="text-gray-700 text-lg"> 117 + Resources for writing about kipclip. Feel free to use these assets 118 + in articles, blog posts, and other media. 119 + </p> 120 + </section> 121 + 122 + <section className="bg-white rounded-lg shadow-md p-6 space-y-3"> 123 + <h3 className="text-xl font-bold text-gray-800">About kipclip</h3> 124 + <p className="text-gray-700"> 125 + kipclip is a free, open bookmark manager built on{" "} 126 + <a 127 + href="https://atproto.com" 128 + target="_blank" 129 + rel="noopener noreferrer" 130 + className="underline hover:text-gray-800" 131 + > 132 + AT Protocol 133 + </a> 134 + . Users sign in with their Bluesky account and their bookmarks are 135 + stored on their own personal data server — not on kipclip's 136 + infrastructure. This means users own their data and can take it with 137 + them. 138 + </p> 139 + <div className="bg-gray-50 rounded-md p-4 mt-2"> 140 + <p className="text-sm text-gray-500 mb-1 font-medium"> 141 + Short description (for bios, listings, etc.) 142 + </p> 143 + <p className="text-gray-700 italic"> 144 + "kipclip is a free, open bookmark manager for the AT Protocol 145 + ecosystem. Save links, organize with tags, own your data." 146 + </p> 147 + </div> 148 + </section> 149 + 150 + <section className="bg-white rounded-lg shadow-md p-6 space-y-3"> 151 + <h3 className="text-xl font-bold text-gray-800">Key Facts</h3> 152 + <ul className="list-disc pl-5 text-gray-700 space-y-2"> 153 + <li> 154 + <strong>What:</strong>{" "} 155 + Bookmark manager for the AT Protocol / Bluesky ecosystem 156 + </li> 157 + <li> 158 + <strong>Built on:</strong>{" "} 159 + AT Protocol (open standard for decentralized social) 160 + </li> 161 + <li> 162 + <strong>Data ownership:</strong>{" "} 163 + Bookmarks stored on user's Personal Data Server (PDS), not kipclip 164 + servers 165 + </li> 166 + <li> 167 + <strong>Price:</strong> Free 168 + </li> 169 + <li> 170 + <strong>Source:</strong>{" "} 171 + <a 172 + href="https://github.com/tijs/kipclip-appview" 173 + target="_blank" 174 + rel="noopener noreferrer" 175 + className="underline hover:text-gray-800" 176 + > 177 + Open source on GitHub 178 + </a> 179 + </li> 180 + <li> 181 + <strong>Creator:</strong>{" "} 182 + <a 183 + href="https://bsky.app/profile/tijs.org" 184 + target="_blank" 185 + rel="noopener noreferrer" 186 + className="underline hover:text-gray-800" 187 + > 188 + tijs.org 189 + </a> 190 + </li> 191 + <li> 192 + <strong>Website:</strong>{" "} 193 + <a 194 + href="https://kipclip.com" 195 + className="underline hover:text-gray-800" 196 + > 197 + kipclip.com 198 + </a> 199 + </li> 200 + </ul> 201 + </section> 202 + 203 + <section className="space-y-4"> 204 + <h3 className="text-xl font-bold text-gray-800">Brand Assets</h3> 205 + <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> 206 + {assets.map((asset) => ( 207 + <DownloadCard key={asset.filename} {...asset} /> 208 + ))} 209 + </div> 210 + </section> 211 + 212 + <section className="bg-white rounded-lg shadow-md p-6 space-y-3"> 213 + <h3 className="text-xl font-bold text-gray-800">Brand Colors</h3> 214 + <div className="grid grid-cols-2 sm:grid-cols-4 gap-3"> 215 + {[ 216 + { name: "Coral", var: "--coral", hex: "#e66456" }, 217 + { name: "Teal", var: "--teal", hex: "#5b8a8f" }, 218 + { name: "Orange", var: "--orange", hex: "#f4a261" }, 219 + { name: "Cream", var: "--cream", hex: "#f5f1e8" }, 220 + ].map((color) => ( 221 + <div key={color.var} className="text-center"> 222 + <div 223 + className="w-full h-16 rounded-lg mb-2 border border-gray-200" 224 + style={{ backgroundColor: color.hex }} 225 + /> 226 + <p className="text-sm font-medium text-gray-800"> 227 + {color.name} 228 + </p> 229 + <p className="text-xs text-gray-500">{color.hex}</p> 230 + </div> 231 + ))} 232 + </div> 233 + </section> 234 + 235 + <section className="bg-white rounded-lg shadow-md p-6 space-y-3"> 236 + <h3 className="text-xl font-bold text-gray-800">Usage Guidelines</h3> 237 + <ul className="list-disc pl-5 text-gray-700 space-y-2"> 238 + <li> 239 + Use "kipclip" in lowercase — it's not capitalized, even at the 240 + start of a sentence. 241 + </li> 242 + <li>Don't alter, rotate, or distort the logo or mascot.</li> 243 + <li> 244 + Keep adequate spacing around the logo when placing it alongside 245 + other elements. 246 + </li> 247 + <li> 248 + The mascot's name is Kip. Kip is a chicken with a satchel full of 249 + bookmarks. 250 + </li> 251 + </ul> 252 + </section> 253 + 254 + <section className="bg-white rounded-lg shadow-md p-6 space-y-3"> 255 + <h3 className="text-xl font-bold text-gray-800">Contact</h3> 256 + <p className="text-gray-700"> 257 + For press inquiries, reach out to{" "} 258 + <a 259 + href="https://bsky.app/profile/tijs.org" 260 + target="_blank" 261 + rel="noopener noreferrer" 262 + className="underline hover:text-gray-800" 263 + > 264 + tijs.org on Bluesky 265 + </a> 266 + . 267 + </p> 268 + </section> 269 + </main> 270 + </div> 271 + ); 272 + }