using tailwind tygraphy

client/package-lock.json

@@ -10,6 +10,7 @@
 			"devDependencies": {
 				"@sveltejs/adapter-static": "^1.0.0-next.28",
 				"@sveltejs/kit": "next",
+				"@tailwindcss/typography": "^0.5.2",
 				"autoprefixer": "^10.4.2",
 				"eslint": "^7.32.0",
 				"eslint-config-prettier": "^8.3.0",
@@ -267,6 +268,20 @@
 				}
 			}
 		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz",
+			"integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==",
+			"dev": true,
+			"dependencies": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
+			}
+		},
 		"node_modules/@types/parse-json": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -1420,6 +1435,18 @@
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
 			"dev": true
 		},
+		"node_modules/lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
+			"dev": true
+		},
+		"node_modules/lodash.isplainobject": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+			"integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+			"dev": true
+		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -2884,6 +2911,17 @@
 				"svelte-hmr": "^0.14.9"
 			}
 		},
+		"@tailwindcss/typography": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz",
+			"integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==",
+			"dev": true,
+			"requires": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2"
+			}
+		},
 		"@types/parse-json": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -3739,6 +3777,18 @@
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
 			"dev": true
 		},
+		"lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
+			"dev": true
+		},
+		"lodash.isplainobject": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+			"integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+			"dev": true
+		},
 		"lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

client/package.json

@@ -12,6 +12,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^1.0.0-next.28",
 		"@sveltejs/kit": "next",
+		"@tailwindcss/typography": "^0.5.2",
 		"autoprefixer": "^10.4.2",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",

client/src/components/NewsBlock.svelte

@@ -2,20 +2,26 @@
 	export let feedEntry;
 </script>
 
-<div class="group grid grid-cols-1  sm:grid-cols-3">
+<div class="group grid grid-cols-1 sm:grid-cols-3">
 	<div>
 		{#if feedEntry.media_content}
-			<a target="_blank" href={feedEntry.link}>
+			<a target="_blank"  href={feedEntry.link}>
 				<img
-					class="w-full max-w-[15rem] md:max-w-md object-cover object-top aspect-[4/3]"
+					class="hover:opacity-60 m-0 w-full max-w-[15rem] md:max-w-md object-cover object-top aspect-[4/3]"
 					src={feedEntry.media_content[0].url}
 					alt={feedEntry.title}
 					loading="lazy"
 				/>
 			</a>
+		{:else}
+			<a target="_blank" href={feedEntry.link}>
+				<div
+					class="hover:opacity-60 bg-gray-200 h-full w-full max-w-[15rem] md:max-w-md object-cover object-top aspect-[4/3]"
+				/>
+			</a>
 		{/if}
 	</div>
-	<div class="col-span-2  sm:pl-4">
+	<div class="col-span-2 sm:pl-4">
 		<div class="text-sm">
 			Score:
 			<span class="font-bold {feedEntry.sentiment > 0 ? 'text-emerald-600' : 'text-red-600'}">
@@ -23,10 +29,12 @@
 			</span>
 		</div>
 
-		<a target="_blank" href={feedEntry.link}>
-			<h2 class="text-2xl font-bold font-serif leading-tight">{feedEntry.title}</h2>
-			<h4 class="text-sm font-bold leading-tight">By {feedEntry.author}</h4>
-			<p class="py-3 max-w-prose leading-normal">{@html feedEntry.summary}</p>
+		<a target="_blank" class="no-underline" href={feedEntry.link}>
+			<h2 class="m-0 font-serif leading-tight hover:opacity-50">{feedEntry.title}</h2>
+			<h5 class="mt-1 leading-tight {feedEntry.author ? 'visibile' : 'invisible'}">
+				By {feedEntry.author}
+			</h5>
+			<p class="prose max-w-prose leading-normal prose-gray">{@html feedEntry.summary}</p>
 			<!-- {#if feedEntry.tags}
 				<div class="text-sm">
 					{#each feedEntry.tags as tag}

client/src/routes/index.svelte

@@ -44,7 +44,7 @@
 		}
 		lastUpdate = new Date(predictions.last_update);
 		predictions = predictions.entries.sort((a, b) => b.sentiment - a.sentiment);
-		positiveOrder = true
+		positiveOrder = true;
 		console.log(lastUpdate, predictions);
 	}
 
@@ -56,12 +56,12 @@
 	}
 </script>
 
-<div class="px-6 py-3 max-w-4xl mx-auto">
-	<h1 class="text-4xl font-bold font-serif pt-5 leading-tight">The New York Times Homepage</h1>
-	<h3 class="text-sm leading-tight pb-5 {lastUpdate ? 'visibile' : 'invisible'}">
+<article class="prose px-6 py-3 max-w-4xl mx-auto">
+	<h1 class="font-serif mb-0">The New York Times Homepage</h1>
+	<h5 class="mt-0 {lastUpdate ? 'visibile' : 'invisible'}">
 		<b>Last Updated:</b>
 		{lastUpdate ? lastUpdate.toLocaleString() : ''}
-	</h3>
+	</h5>
 
 	<p class="py-3 max-w-prose leading-normal">
 		This project is an experiment running sentiment analysis on the current
@@ -99,12 +99,37 @@
 	</p>
 	<details>
 		<summary class="cursor-pointer">Notes</summary>
-		<p />
+		<h4>Install Node with NVM</h4>
+		<p class="max-w-prose leading-normal">
+			This <a
+				class="text-blue-500 underline hover:no-underline"
+				target="_blank"
+				href="https://huggingface.co/spaces/radames/NYTimes-homepage-rearranged/blob/main/install-node.sh"
+				>Node script</a
+			>
+
+			install node LTS and create symbolic links to <code>/home/user/.local/bin/</code> as it seems like we don't
+			have permission to update $PATH env
+		</p>
+		<h4>main.py</h4>
+		<p class="max-w-prose leading-normal">
+			Because the Spaces run a python application, see "app_file" on docs. main.py is just a simple
+			python subprocess to make make", "build-all Makefile
+			https://huggingface.co/spaces/radames/NYTimes-homepage-rearranged/blob/main/Makefile
+		</p>
+		<h4>SvelteKit Node Adapter?</h4>
+		<p class="max-w-prose leading-normal">
+			SvelteKit eventually can be used as our primary web application with the
+			@sveltejs/adapter-node with Node and Flask the API application with your ML project. However,
+			there is an open issue to enable dynamic basepath, which blocks the possibility to embedded
+			deployment or relative path. https://github.com/sveltejs/kit/issues/595
+			https://huggingface.co/spaces/radames/NYTimes-homepage-rearranged/blob/main/main.py
+		</p>
 	</details>
 
-	<p class="py-3 max-w-prose leading-normal">
+	<p class="max-w-prose leading-normal">
 		You can try other news feeds <select
-			class="inline-block text-sm bg-gray-200 border border-gray-200 text-gray-700 px-1 py-1 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+			class="inline-block text-xs bg-gray-200 border border-gray-200 text-gray-700 px-0 py-0 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
 			bind:value={selectedFeedUrl}
 		>
 			{#each feeds as feed (feed.value)}
@@ -130,7 +155,7 @@
 			Loading the NYTimes homepage feed and running sentiment analysis on headlines...
 		</div>
 	{:then data}
-		<ul>
+		<ul class="m-0 p-0"> 
 			{#each predictions as entry, i}
 				<li class="py-5">
 					<NewsBlock feedEntry={entry} />
@@ -141,4 +166,4 @@
 	{:catch error}
 		<p>An error occurred!</p>
 	{/await}
-</div>
+</article>

client/tailwind.config.cjs

@@ -3,5 +3,5 @@ module.exports = {
   theme: {
     extend: {}
   },
-  plugins: []
+  plugins: [require('@tailwindcss/typography')]
 };