Skip to content

Commit

Permalink
fix CI and components paeg
Browse files Browse the repository at this point in the history
  • Loading branch information
@toni-santos
toni-santos committed Sep 25, 2024
1 parent 3d12d7a commit 71d5c19
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 149 deletions.
2 changes: 1 addition & 1 deletion content-scripts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ const functionsToExecute = [
{ name: "courseUnitPage", func: courseUnitPage },
{ name: "injectOverrideFunctions", func: injectOverrideFunctions },
{ name: "addStarIconToCard", func: addStarIconToCard },
{ name: "componentsPage", func: createComponentsPage },
];


const init = async () => {
// Inject user preferences
const data = await getStorage(userPreferences);
Expand Down
188 changes: 109 additions & 79 deletions content-scripts/pages/components_page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import jsx from "texsaur";
import Button from "../components/Button";
import { Table } from "../components/Table";
Expand All @@ -6,68 +7,94 @@ import Icon from "../components/Icon";
const components = ["Icon", "Button", "Table"];

export function createComponentsPage() {
if (!document.location.href.toLowerCase().includes("components")) {
return;
}
document.body.innerHTML = "";
document.title = "Components";
if (!document.location.href.toLowerCase().includes("components")) {
return;
}
document.body.innerHTML = "";
document.title = "Components";

const sidebarItems = components.map((component) => (
<a href={`#${component}`} key={component}>
<li className="se-sidebar-item">
{component}
</li>
</a>
));
const sidebarItems = components.map((component) => (
<a href={`#${component}`} key={component}>
<li className="se-sidebar-item">{component}</li>
</a>
));

const page = (
<div className="se-docs-container">
{/* Sidebar */}
<div className="se-sidebar">
<img src={chrome.runtime.getURL("images/logo/extended.png")} alt="NitSig Logo" width="100" />
<ul>{sidebarItems}</ul>
</div>
const page = (
<div className="se-docs-container">
{/* Sidebar */}
<div className="se-sidebar">
<img
src={chrome.runtime.getURL("images/logo/extended.png")}
alt="NitSig Logo"
width="100"
/>
<ul>{sidebarItems}</ul>
</div>

{/* Main Content */}
<div className="se-main-content">
<h1>NitSig Components</h1>
<div className="introduction">
<p>These components were created by the NitSig team in order to use them across the Sigarra pages.</p>
<p>If you find something in your Sigarra that would be interesting to change by one of the following components, send an email to <a href="mailto:[email protected]">[email protected]</a>.</p>
<p>Interesting to see the extension code base? Check our open source <a href="https://github.com/NIAEFEUP/nitsig" target="_blank" rel="noopener noreferrer">GitHub Repository</a>!</p>
</div>
{/* Main Content */}
<div className="se-main-content">
<h1>NitSig Components</h1>
<div className="introduction">
<p>
These components were created by the NitSig team in
order to use them across the Sigarra pages.
</p>
<p>
If you find something in your Sigarra that would be
interesting to change by one of the following
components, send an email to{" "}
<a href="mailto:[email protected]">[email protected]</a>.
</p>
<p>
Interesting to see the extension code base? Check our
open source{" "}
<a
href="https://github.com/NIAEFEUP/nitsig"
target="_blank"
rel="noopener noreferrer"
>
GitHub Repository
</a>
!
</p>
</div>

{/* Icon */}
<Component name="Icon"
description="Talking about icons, we exclusive use the Remix Icon library, the outlined style! Check remixicon.com for all the available icons."
code={`
{/* Icon */}
<Component
name="Icon"
description="Talking about icons, we exclusive use the Remix Icon library, the outlined style! Check remixicon.com for all the available icons."
code={`
<Icon name="ri-notification-line" />
`}
>
<Icon name="ri-notification-line" />
</Component>
>
<Icon name="ri-notification-line" />
</Component>

{/* Button */}
<Component name="Button"
description="Our button abstraction that can be used to create buttons with icons and text."
code={`
{/* Button */}
<Component
name="Button"
description="Our button abstraction that can be used to create buttons with icons and text."
code={`
<Button
name="my_button"
text="Click me"
icon="ri-notification-line"
onclick={() => alert("Button was clicked")}
/>
`}
>
<Button
title="my_button"
icon="ri-notification-line"
onclick={() => alert("Button was clicked")}
/>
</Component>

>
<Button title="my_button" icon="ri-notification-line" onclick={() => alert("Button was clicked")} />
</Component>


{/* Table */}
<Component name="Table"
description="A simple table design with sorting capabilities on column headers."
code={`
{/* Table */}
<Component
name="Table"
description="A simple table design with sorting capabilities on column headers."
code={`
<Table
name="my_table"
headers={[
Expand All @@ -81,42 +108,45 @@ export function createComponentsPage() {
]}
/>
`}
>
<Table
name="my_table"
headers={[
["Component", "Component"],
["Description", "Description"],
["Status", "Status"]
]}
data={[
["Button", "A button that can be clicked", "In progress"],
["Input", "A text input field", "Complete"]
]}
/>
</Component>
</div>
</div>
);
>
<Table
name="my_table"
headers={[
["Component", "Component"],
["Description", "Description"],
["Status", "Status"],
]}
data={[
[
"Button",
"A button that can be clicked",
"In progress",
],
["Input", "A text input field", "Complete"],
]}
/>
</Component>
</div>
</div>
);

document.body.appendChild(page);
document.body.appendChild(page);
}

interface ComponentProps {
name: string;
description: string;
code: string;
name: string;
description: string;
code: string;
}

const Component: JSX.Component<ComponentProps> = ({ name, description, code }, children) => (
<div id={name} className="se-component-section" >
<h2>{name}</h2>
<p>{description}</p>
<div className="se-component-show">
{children}
const Component: JSX.Component<ComponentProps> = (
{ name, description, code },
children,
) => (
<div id={name} className="se-component-section">
<h2>{name}</h2>
<p>{description}</p>
<div className="se-component-show">{children}</div>
<pre className="se-code-block">{code}</pre>
</div>
<pre className="se-code-block">
{code}
</pre>
</div>
);
);
137 changes: 68 additions & 69 deletions css/componentsPage.css
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,87 @@
body{
body {
margin: 0;
}

.se-docs-container {
display: flex;
height: 100vh;
width: 100vw;

.se-sidebar {
position: fixed;
width: 200px;
padding: 20px;
border-right: 1px solid #ccc;
overflow-y: auto;
height: 100%;

ul {
list-style-type: none;
padding: 0;
position: fixed;
width: 200px;
padding: 20px;
border-right: 1px solid #ccc;
overflow-y: auto;
height: 100%;

a{
text-decoration: none;
}

.se-sidebar-item {
padding: 10px;
cursor: pointer;
transition: background-color 0.3s;
border-radius: 5px;

&:hover {
background-color: #e6e6e6;
}
ul {
list-style-type: none;
padding: 0;

a {
text-decoration: none;
}

.se-sidebar-item {
padding: 10px;
cursor: pointer;
transition: background-color 0.3s;
border-radius: 5px;

&:hover {
background-color: #e6e6e6;
}
}
}
}
}

.se-main-content {
margin-left: 240px;
width: 100%;
overflow-y: auto;
padding-left: 3em;
padding-right: 3em;

h1 {
font-size: 32px;
color: #333;
border: none;
}
.se-main-content {
margin-left: 240px;
width: 100%;
overflow-y: auto;
padding-left: 3em;
padding-right: 3em;

.introduction{
margin-top: 10px;
margin-bottom: 50px;
p{
margin: 7px;
h1 {
font-size: 32px;
color: #333;
border: none;
}
}

.se-component-show{
padding: 20px 0 20px 0;
}

.se-component-section {
margin-bottom: 40px;

h2 {
font-size: 24px;
color: #333;
border: none;
.introduction {
margin-top: 10px;
margin-bottom: 50px;
p {
margin: 7px;
}
}

p {
font-size: 16px;
color: #666;

.se-component-show {
padding: 20px 0 20px 0;
}

.se-code-block {
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
font-family: monospace;
color: #333;

.se-component-section {
margin-bottom: 40px;

h2 {
font-size: 24px;
color: #333;
border: none;
}

p {
font-size: 16px;
color: #666;
}

.se-code-block {
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
font-family: monospace;
color: #333;
}
}
}
}
}

}
Loading

0 comments on commit 71d5c19

Please sign in to comment.