diff --git a/.gitignore b/.gitignore index d95afb08..cfd7d3e0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,8 @@ .vscode -*.pdf node_modules *.py frontend/package-lock.json frontend/package.json frontend/eslint.config.mjs backend/lrg_backend/target -backend/lrg_backend/data \ No newline at end of file +backend/lrg_backend/data diff --git a/README.md b/README.md index 96c2497f..8e20e81a 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,20 @@ ## About -School project for WMC. Guide to ricing linux systems +A school project for WMC 2024/25 at the [HTL Leonding](https://www.htl-leonding.at/) + +A Site to guide and teach how to ricing linux systems + +--- + +## Project Description [Project Description](./about/project-description.md) -![Use Case Diagram](./about/use-case-diagram.svg) +--- + +## Use case -## Hosting +![Use Case Diagram](./about/use-case.svg) -Currently no hosting +--- diff --git a/about/Sprint_16_5_25.md b/about/Sprints/Sprint_16_5_25.md similarity index 100% rename from about/Sprint_16_5_25.md rename to about/Sprints/Sprint_16_5_25.md diff --git a/about/Sprint_25_4_25.md b/about/Sprints/Sprint_25_4_25.md similarity index 100% rename from about/Sprint_25_4_25.md rename to about/Sprints/Sprint_25_4_25.md diff --git a/about/Sprint_4_4_25.md b/about/Sprints/Sprint_4_4_25.md similarity index 100% rename from about/Sprint_4_4_25.md rename to about/Sprints/Sprint_4_4_25.md diff --git a/about/WorkOverview_LinuxRicing_16_5.md b/about/Sprints/WorkOverview_LinuxRicing_16_5.md similarity index 100% rename from about/WorkOverview_LinuxRicing_16_5.md rename to about/Sprints/WorkOverview_LinuxRicing_16_5.md diff --git a/about/project-description.md b/about/project-description.md index ae7767fe..91454fcc 100644 --- a/about/project-description.md +++ b/about/project-description.md @@ -1,74 +1,75 @@ # Linux ricing guide -**Team members** -Mostbauer, Reitbauer, Hassani, Dirnberger +## Team Members -**Project Name:** -Linux ricing +Mostbauer, Reitbauer, Hassani, Dirnberger --- -## Initial Situation +## Project Name -Ricing(customizing) linux can be difficult for beginners. -A guid to explain what a ricing is and how to do it, can -help introduce people to the topic, and help them get the -result they want +Linux Ricing Guide --- -## Goals | Non-Goals - -**Project Goals:** -Showcasing how to customize the terminal, the window manager, etc. +## Initial Situation -**Non-Goals:** -Showcasing base linux usage. Knowledge of linux is required. -A detailed guide for each of the many listed technologies. +Customizing (or “ricing”) a Linux environment can be overwhelming, especially for beginners. With so many options for window managers, terminals, shells, and themes, it’s difficult to know where to start. This project addresses that gap by providing a clear, interactive guide to help users understand what ricing is and how to build a setup tailored to their needs. --- -## Project Contents - -Tutorial on how to customize certain aspects of your linux environment. - ---- +## Goals | Non-Goals -## Critical Success Factors +### Project Goals (All completed) -List of factors that are critical to the project's success. +- Provide an undestandable guide to customize key components of a Linux system: + - Terminal + - Window Manager (WM) + - Desktop Environment (DE) + - Shell + - Package Manager + - Themes and utilities -- Listing technologies for customization +- Easy navigation experience +- Enable users to log into an account for the site. +- Allow commenting and rating** on individual technologies and setups. +- Show homepage for each tool. +- Feature example setups from the team. +- Include documentation about ricing, Linux concepts, history, and installation guides. +- Provide an overview of the tools and technologies used in the project. +- Style the entire site for both desktop and mobile users. - - Adding links to the repo and/or home page of each program. +### Non-Goals -- Styling the site for desktop and mobile devices. +- Teaching basic Linux usage. + - Terminal, root/sudo, hardware/drivers (webcames, etc) +- Providing very deep and hyper specific tutorials for every listed technology. --- -## Milestones +## Project Contents -**Project Start:** +- Interactive Linux ricing configurator. +- Good feeling and simple navigation (tree, graph, search). +- Community features: discussions, comments, ratings. +- Informational pages on Linux customization and background. +- Personal setups with screenshots. +- Authentication via Google and GitHub (auth0). +- UI designed for both desktop and mobile. -- Event: Initial meeting in class during wmc lesson -- Date: 18.10.2024 +--- -**Pre Coding** +## Critical Success Factors -- [x] Find Idea -- [x] Create Project Skeleton -- [x] Create Repo -- [x] Invite Members -- [x] Assign tasks +- Clear structure to find what you need easily. +- Smooth user experience on both desktop and mobile. +- Active user interaction features (comments, ratings). +- Visually appealing and accessible presentation. -**Milestones:** +--- -- [ ] Ricing introduction complete: 1. Dez. -- [ ] Personal-Setups complete: 10. Dez. -- [ ] Main page complete: 11. Dez. -- [ ] Styling complete: 12. Dez. +## Project Status -**Project End:** +All goals and features listed above have been completed. -- Event: Showcase of final site -- Date: 12. Dez. +--- diff --git a/about/project-description.pdf b/about/project-description.pdf new file mode 100644 index 00000000..22eb1399 Binary files /dev/null and b/about/project-description.pdf differ diff --git a/about/the-docs.md b/about/the-docs.md deleted file mode 100644 index 62469a9d..00000000 --- a/about/the-docs.md +++ /dev/null @@ -1,19 +0,0 @@ -# The Docs - -## General Information - -Goal of the docs is to provide the **'how'** part of the project. It will provide installation guides as well as general tips and knowledge. - -## What Topics will be covered? - -How to pick the right.. - -- [x] distro -- [x] Desktop Environment DE -- [ ] Window Manager WM -- [ ] Package Manager -- [ ] Shell -- [x] Terminal - - [x] Terminal Themes - -all will be completed with **installation guides** and tips. \ No newline at end of file diff --git a/about/use-case-diagram.svg b/about/use-case-diagram.svg deleted file mode 100644 index 44033253..00000000 --- a/about/use-case-diagram.svg +++ /dev/null @@ -1 +0,0 @@ -Linux ricing guideUtilitiesCustom DownloaderHistory and InformationConfigurator ToolSearch UtilityChoose Linux DistributionsSelect Window ManagersExplore Desktop EnvironmentsPick Terminals and ThemesSelect ShellsAdd Package ManagersDownload Custom SetupExplore Linux DistributionsView Distro HistoriesView example SetupsUser \ No newline at end of file diff --git a/about/use-case.puml b/about/use-case.puml index aa28ca11..11dc735b 100644 --- a/about/use-case.puml +++ b/about/use-case.puml @@ -1,42 +1,86 @@ @startuml actor User -rectangle "Linux ricing guide" { - - package "Utilities" { - usecase "Configurator Tool" as UC11 - usecase "Search Utility" as UC12 - - package "Custom Downloader" { - usecase "Choose Linux Distributions" as UC1 - usecase "Select Window Managers" as UC2 - usecase "Explore Desktop Environments" as UC3 - usecase "Pick Terminals and Themes" as UC4 - usecase "Select Shells" as UC5 - usecase "Add Package Managers" as UC6 - usecase "Download Custom Setup" as UC7 - } +rectangle "Linux Ricing Guide Website" { + + package "User Accounts" { + usecase "Log in with Google" as UC_LoginGoogle + usecase "Log in with GitHub" as UC_LoginGitHub + } + + package "Community & Feedback" { + usecase "Participate in Discussions" as UC_Discuss + usecase "Leave Comments" as UC_Comment + usecase "Rate Comments" as UC_RateComments + usecase "Rate Distros" as UC_RateDistros + } + + package "System Setup Configurator" { + usecase "Select Linux Distribution" as UC_SelectDistro + usecase "Select Window Manager" as UC_SelectWM + usecase "Select Desktop Environment" as UC_SelectDE + usecase "Choose Terminals and Themes" as UC_SelectTerm + usecase "Choose Shell" as UC_SelectShell + usecase "Add Package Manager" as UC_AddPkgMgr + usecase "Visit Project Homepages" as UC_Homepages + } + + package "Documentation & Guides" { + usecase "Linux Concepts Overview" as UC_LinuxOverview + usecase "Installation Guides" as UC_InstallGuides + usecase "Distro & Linux History" as UC_History } + package "About the Project" { + usecase "View Our Setups" as UC_OurSetups + usecase "Technologies Used" as UC_TechUsed + usecase "About Us" as UC_AboutUs + usecase "About This Page" as UC_AboutPage + usecase "Contributions Page" as UC_Contributions + } - package "History and Information" { - usecase "Explore Linux Distributions" as UC8 - usecase "View Distro Histories" as UC9 - usecase "View example Setups" as UC10 + + package "Navigation Methods" { + usecase "Browse via File Tree" as UC_TreeNav + usecase "Browse via Node Graph" as UC_NodeNav + usecase "Search with Highlighting" as UC_Search } - UC8 --> UC9 - UC11 --> UC7 - UC1 --> UC11 - UC2 --> UC11 - UC3 --> UC11 - UC4 --> UC11 - UC5 --> UC11 - UC6 --> UC11 - - User --> UC11 - User --> UC12 - User --> UC8 - User --> UC10 + UC_Discuss --> UC_Comment + UC_Discuss --> UC_RateComments + + UC_SelectDistro --> UC_Homepages + UC_SelectWM --> UC_Homepages + UC_SelectDE --> UC_Homepages + UC_SelectTerm --> UC_Homepages + UC_SelectShell --> UC_Homepages + UC_AddPkgMgr --> UC_Homepages + + User --> UC_LoginGoogle + User --> UC_LoginGitHub + + User --> UC_Discuss + User --> UC_RateDistros + + User --> UC_SelectDistro + User --> UC_SelectWM + User --> UC_SelectDE + User --> UC_SelectTerm + User --> UC_SelectShell + User --> UC_AddPkgMgr + + User --> UC_LinuxOverview + User --> UC_InstallGuides + User --> UC_History + + User --> UC_OurSetups + User --> UC_TechUsed + User --> UC_AboutUs + User --> UC_AboutPage + User --> UC_Contributions + + User --> UC_TreeNav + User --> UC_NodeNav + User --> UC_Search } -@enduml \ No newline at end of file +@enduml diff --git a/about/use-case.svg b/about/use-case.svg new file mode 100644 index 00000000..b7926961 --- /dev/null +++ b/about/use-case.svg @@ -0,0 +1 @@ +Linux Ricing Guide WebsiteUser AccountsCommunity & FeedbackSystem Setup ConfiguratorDocumentation & GuidesAbout the ProjectNavigation MethodsLog in with GoogleLog in with GitHubParticipate in DiscussionsLeave CommentsRate CommentsRate DistrosSelect Linux DistributionSelect Window ManagerSelect Desktop EnvironmentChoose Terminals and ThemesChoose ShellAdd Package ManagerVisit Project HomepagesLinux Concepts OverviewInstallation GuidesDistro & Linux HistoryView Our SetupsTechnologies UsedAbout UsAbout This PageContributions PageBrowse via File TreeBrowse via Node GraphSearch with HighlightingUser \ No newline at end of file diff --git a/about/webApplication.md b/about/webApplication.md deleted file mode 100644 index d2dc1683..00000000 --- a/about/webApplication.md +++ /dev/null @@ -1,16 +0,0 @@ -# Custom Linux Setup Tool - -## Summary - -On the site you can find detailed information about various Linux distributions, window managers, desktop environments, terminals, terminal themes, shells, and package managers. -You can also learn more about the history of linux and specific distros. -Additionally, there is a downloader tool available that guides you through the following steps to create a custom setup: - -1. **Choose Linux Distributions** -2. **Select Window Managers** -3. **Explore Desktop Environments** -4. **Pick Terminals and Themes** -5. **Select Shells** -6. **Add Package Managers** - -Afterwards you can download everything in one place. diff --git a/linux-ricing-guide/components/CommentSection.vue b/linux-ricing-guide/components/CommentSection.vue index 395b9940..93a6b39e 100644 --- a/linux-ricing-guide/components/CommentSection.vue +++ b/linux-ricing-guide/components/CommentSection.vue @@ -94,7 +94,7 @@ const postComment = async (cH: ICommentHandler, comments: CommentWithParsedDate[ await cH.getComment(newCommentId, (res) => { const newComment: CommentWithParsedDate = { ...res.data, - date: new Date(res.data.timestamp_epoch).toLocaleString(), + date: new Date(res.data.timestamp_epoch * 1000).toLocaleString(), } console.log(res) comments.push(newComment) diff --git a/linux-ricing-guide/components/GraphNode.vue b/linux-ricing-guide/components/GraphNode.vue index 9bc4a195..d162f1fb 100644 --- a/linux-ricing-guide/components/GraphNode.vue +++ b/linux-ricing-guide/components/GraphNode.vue @@ -24,9 +24,9 @@ @click="() => { toggleNode(node); closeNav(); }" /> - + :style="{ fontSize: ((!node.parent ? 28 : node.children.length == 0 ? 14 : 20) - node.name.length / 10) + 'px' }"> + {{ line }} @@ -108,10 +108,10 @@ export default defineComponent({ calculatePositions(node: Node, depth: number, angle: number, parentNode?: TreeNode): TreeNode { // Limit the number of children to 8 for performance - node.Children = node.Children.slice(0, 8) || [] + const displayedChildren = node.Children.slice(0, 8) || [] const baseClusterRadius = 200; - const extraRadius = Math.max(node.Children.length - 1, 0) * 60; + const extraRadius = Math.max(displayedChildren.length - 1, 0) * 60; const clusterRadius = baseClusterRadius + extraRadius; const nodeX = parentNode ? parentNode.x + Math.cos(angle * Math.PI / 180) * clusterRadius : 0; @@ -147,7 +147,7 @@ export default defineComponent({ this.connections.push({ path: this.createConnectionPath(parentNode, radialPosition) }); } - const childCount = node.Children.length; + const childCount = displayedChildren.length; if (childCount > 0) { const totalArc = childCount <= 3 ? 120 : childCount <= 6 ? 180 : 330; const spreadAngle = totalArc / childCount; @@ -155,7 +155,7 @@ export default defineComponent({ baseAngle = (baseAngle + 360) % 360; let childAngle = baseAngle + angle - totalArc / 2; - for (const child of node.Children) { + for (const child of displayedChildren) { const extraSpacing = child.Children.length > 0 ? spreadAngle / 2 : 0; const childNode = this.calculatePositions(child, depth + 1, childAngle + extraSpacing, radialPosition); radialPosition.children.push(childNode); diff --git a/linux-ricing-guide/components/ImageGrid.vue b/linux-ricing-guide/components/ImageGrid.vue index 47131dfa..49fa3519 100644 --- a/linux-ricing-guide/components/ImageGrid.vue +++ b/linux-ricing-guide/components/ImageGrid.vue @@ -3,7 +3,7 @@ '--desktop-cols': dimensions.width, '--mobile-cols': mobileDimensions.width }"> -
+
@@ -17,7 +17,9 @@ diff --git a/linux-ricing-guide/layouts/default.vue b/linux-ricing-guide/layouts/default.vue index 89f02696..c28e67e1 100644 --- a/linux-ricing-guide/layouts/default.vue +++ b/linux-ricing-guide/layouts/default.vue @@ -7,8 +7,8 @@

Disconnected

-
+
@@ -24,36 +24,36 @@

No connection to the backend server could be established. Please note that some parts and some functionality of the website may be unavailable at this time.

-
- -
+ +
-
+ +
-
- - - -
+
+ + + +
diff --git a/linux-ricing-guide/pages/about-this-page.vue b/linux-ricing-guide/pages/about-this-page.vue index 96c0baf2..5a356dca 100644 --- a/linux-ricing-guide/pages/about-this-page.vue +++ b/linux-ricing-guide/pages/about-this-page.vue @@ -1,9 +1,31 @@ \ No newline at end of file + \ No newline at end of file diff --git a/linux-ricing-guide/pages/configurator.vue b/linux-ricing-guide/pages/configurator.vue new file mode 100644 index 00000000..2dbc040b --- /dev/null +++ b/linux-ricing-guide/pages/configurator.vue @@ -0,0 +1,147 @@ + + + + + \ No newline at end of file diff --git a/linux-ricing-guide/pages/contributions.vue b/linux-ricing-guide/pages/contributions.vue index 96c0baf2..a0f75c20 100644 --- a/linux-ricing-guide/pages/contributions.vue +++ b/linux-ricing-guide/pages/contributions.vue @@ -1,9 +1,29 @@