From 327c9a88037f67d2e8de1b4ec64e32d86a7b178a Mon Sep 17 00:00:00 2001 From: Allan Kong Date: Thu, 5 Jun 2025 19:24:31 -0700 Subject: [PATCH 01/54] Font --- package-lock.json | 11 ++++++++++- package.json | 3 ++- resources/css/app.css | 3 +++ tailwind.config.js | 2 +- theming.config.js | 3 +++ 5 files changed, 19 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b34a3100..8c2393f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,10 +1,11 @@ { - "name": "html", + "name": "computer-science-resources", "lockfileVersion": 3, "requires": true, "packages": { "": { "dependencies": { + "@fontsource/open-sans": "^5.2.5", "@primevue/forms": "^4.3.3", "@primevue/themes": "^4.3.3", "diff": "^7.0.0", @@ -512,6 +513,14 @@ "node": ">=18" } }, + "node_modules/@fontsource/open-sans": { + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.2.5.tgz", + "integrity": "sha512-f0Ww6H+LB6GXA8UCgqs90h4djVttu3quH/1+wkfUY8b09mG1ESn4ACRBHYY78bsoeDXpaCyZh7eoGROBWplvAQ==", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@iconify/types": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", diff --git a/package.json b/package.json index 2d70c7cc..058b194e 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,11 @@ "vue": "^3.3.13" }, "dependencies": { + "@fontsource/open-sans": "^5.2.5", "@primevue/forms": "^4.3.3", "@primevue/themes": "^4.3.3", - "primevue": "^4.3.3", "diff": "^7.0.0", + "primevue": "^4.3.3", "yup": "^1.6.1" } } diff --git a/resources/css/app.css b/resources/css/app.css index 0de21207..b8459b52 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,7 +1,10 @@ +@import "@fontsource/open-sans"; + @tailwind base; @tailwind components; @tailwind utilities; + [x-cloak] { display: none; } diff --git a/tailwind.config.js b/tailwind.config.js index ab005166..b253218a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,7 +15,7 @@ export default { theme: { extend: { fontFamily: { - sans: ['Figtree', ...defaultTheme.fontFamily.sans], + sans: ['Open Sans', ...defaultTheme.fontFamily.sans], }, colors: { primary: "#fa6600", // Orange diff --git a/theming.config.js b/theming.config.js index 38a74b68..351d98fb 100644 --- a/theming.config.js +++ b/theming.config.js @@ -2,6 +2,9 @@ import { definePreset } from '@primevue/themes'; import Aura from "@primevue/themes/aura"; const customTheme = definePreset(Aura, { + font: { + family: 'Open Sans' + }, semantic: { primary: { 50: '{orange.50}', From ff4280162e6ac2c2910913a2111f6cdad2532798 Mon Sep 17 00:00:00 2001 From: Allan Kong Date: Thu, 5 Jun 2025 20:42:52 -0700 Subject: [PATCH 02/54] Better looking show page --- .../ComputerScienceResourceController.php | 3 + .../js/Components/Resources/ResourceItem.vue | 75 +-- resources/js/Helpers/labels.js | 18 - resources/js/Pages/Resources/Show.vue | 526 ++++++++++++++---- 4 files changed, 475 insertions(+), 147 deletions(-) diff --git a/app/Http/Controllers/ComputerScienceResourceController.php b/app/Http/Controllers/ComputerScienceResourceController.php index 07abfb47..bfd16879 100644 --- a/app/Http/Controllers/ComputerScienceResourceController.php +++ b/app/Http/Controllers/ComputerScienceResourceController.php @@ -111,6 +111,9 @@ public function store(StoreResourceRequest $request) */ public function show(Request $request, ComputerScienceResource $computerScienceResource, string $tab = 'reviews') { + # Get the review summaries + $computerScienceResource->load('reviewSummary'); + $validTabs = ['reviews', 'discussion', 'edits']; if (!in_array($tab, $validTabs)) { diff --git a/resources/js/Components/Resources/ResourceItem.vue b/resources/js/Components/Resources/ResourceItem.vue index 0cc6887d..f76a947c 100644 --- a/resources/js/Components/Resources/ResourceItem.vue +++ b/resources/js/Components/Resources/ResourceItem.vue @@ -39,16 +39,38 @@ const emit = defineEmits(["upvote", "downvote"]); -
- -

- {{ resource.name }} -

- - +
+
+ +

+ {{ resource.name }} +

+ + + + +
+
+
+ +
+ + {{ resource.review_summary?.review_count || 0 }} +
+
+ +

{{ resource.description }}

@@ -89,12 +111,12 @@ const emit = defineEmits(["upvote", "downvote"]);
-
- +
+ Topics: -
+
{{ tag }} @@ -103,12 +125,12 @@ const emit = defineEmits(["upvote", "downvote"]);
-
- +
+ Languages: -
+
{{ tag }} @@ -117,12 +139,12 @@ const emit = defineEmits(["upvote", "downvote"]);
-
- +
+ Tags: -
+
{{ tag }} @@ -132,20 +154,5 @@ const emit = defineEmits(["upvote", "downvote"]);
- - - -
- -
- - {{ resource.review_summary?.review_count || 0 }} -
-
- diff --git a/resources/js/Helpers/labels.js b/resources/js/Helpers/labels.js index 39bf0b6d..cb3de6f7 100644 --- a/resources/js/Helpers/labels.js +++ b/resources/js/Helpers/labels.js @@ -33,24 +33,6 @@ export const platformLabels = { magazine: "Magazine", }; -// export const platformsLabels = [ -// "Website", value: "website" }, -// { label: "Book", value: "book" }, -// { label: "Blog", value: "blog" }, -// { label: "Course", value: "course" }, -// { label: "Bootcamp", value: "bootcamp" }, -// { label: "Youtube Channel", value: "youtube_channel" }, -// { label: "Newsletter", value: "newsletter" }, -// { label: "Podcast", value: "podcast" }, -// { label: "Forum", value: "forum" }, -// { label: "Workshop", value: "workshop" }, -// { label: "Mobile app", value: "mobile_app" }, -// { label: "Desktop app", value: "desktop_app" }, -// { label: "Magazine", value: "magazine" }, -// ]; - - - export const pricingsObject = [ { label: "Free", value: "free" }, { label: "Paid", value: "paid" }, diff --git a/resources/js/Pages/Resources/Show.vue b/resources/js/Pages/Resources/Show.vue index 38258cc0..0569e81f 100644 --- a/resources/js/Pages/Resources/Show.vue +++ b/resources/js/Pages/Resources/Show.vue @@ -9,6 +9,10 @@ import Commentable from "@/Components/Comments/Commentable.vue"; import ResourceEdits from "@/Components/Resources/ResourceEdit/ResourceEdits.vue"; import ResourceUpvoteSorting from "@/Components/Resources/ResourceUpvoteSorting.vue"; import { getConfigData } from "@/Helpers/config"; +import StarRating from "@/Components/StarRating/StarRating.vue"; +import { Icon } from "@iconify/vue"; +import { platformIcons, pricingIcons, difficultyIcons } from "@/Helpers/icons"; +import { platformLabels } from "@/Helpers/labels"; const props = defineProps({ tab: { @@ -47,130 +51,462 @@ const sortingType = urlParams.get("sort_by") || "top";