diff --git a/src/assets/css/ai-guides.css b/src/assets/css/ai-guides.css new file mode 100644 index 00000000..59267457 --- /dev/null +++ b/src/assets/css/ai-guides.css @@ -0,0 +1,131 @@ +/* Styling for the AI-Powered Guides components */ + +.rfai-container { + background-color: var(--color-background-secondary); + border-radius: var(--border-radius-rounded); + padding: var(--size-medium); + margin: var(--size-large) 0; + border: 1px solid var(--color-grey-light); +} + +@media (prefers-color-scheme: dark) { + .rfai-container { + border-color: var(--color-grey-dark); + } +} + +.rfai-container h3 { + margin-top: 0; + font-size: var(--type-large); + color: var(--color-text); + text-transform: none; /* Override default h3 uppercase */ +} + +.rfai-container > p { + margin-bottom: var(--size-medium); +} + +.rfai-prompt { + border-top: 1px solid var(--color-grey-light); + padding: var(--size-small) 0; +} + +@media (prefers-color-scheme: dark) { + .rfai-prompt { + border-top-color: var(--color-grey-dark); + } +} + +.rfai-prompt:first-of-type { + border-top: none; + padding-top: 0; +} + +.rfai-prompt:last-of-type { + padding-bottom: 0; +} + +.rfai-prompt summary { + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + list-style: none; +} + +.rfai-prompt summary::-webkit-details-marker { + display: none; +} + +.rfai-prompt-title { + font-weight: var(--weight-bold); + font-size: var(--type-body); + font-family: var(--font-body); +} + +.rfai-prompt-subtitle { + margin-top: var(--size-3xsmall); + font-size: var(--type-small); +} + +.rfai-copy-button { + background-color: var(--color-theme); + color: var(--color-black); + border: none; + padding: var(--size-2xsmall) var(--size-small); + border-radius: var(--border-radius-rounded); + cursor: pointer; + font-weight: var(--weight-semi-bold); + font-family: var(--font-title); + transition: background-color 0.2s, filter 0.2s; + white-space: nowrap; + text-transform: uppercase; +} + +.rfai-copy-button:hover { + filter: brightness(1.1); +} + +.rfai-copy-button.copied { + background-color: var(--color-positive); + color: var(--color-white); +} + +.rfai-prompt-content { + margin-top: var(--size-small); +} + +.rfai-prompt-content pre { + white-space: pre-wrap; + word-wrap: break-word; + background-color: rgba(100, 100, 100, 0.1); + padding: var(--size-xsmall); + border-radius: var(--border-radius-rounded); + max-height: 400px; + overflow-y: auto; + border: none; +} + +.rfai-loader, .rfai-error { + color: var(--color-text); + font-style: italic; + padding: var(--size-xsmall); +} + +.rfai-error a { + color: var(--color-link); + text-decoration: underline; +} + +/* Accessibility class */ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} \ No newline at end of file diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 5362f00d..b54f59e1 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -8,6 +8,7 @@ @import 'https://github.com/text.css'; @import 'https://github.com/modifiers.css'; @import 'https://github.com/transitions.css'; +@import 'https://github.com/ai-guides.css'; html, body { min-height: 100vh; diff --git a/src/components/AIGuidesContainer.vue b/src/components/AIGuidesContainer.vue new file mode 100644 index 00000000..c4db8c2f --- /dev/null +++ b/src/components/AIGuidesContainer.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/components/PromptGuide.vue b/src/components/PromptGuide.vue new file mode 100644 index 00000000..6695b385 --- /dev/null +++ b/src/components/PromptGuide.vue @@ -0,0 +1,85 @@ + + + diff --git a/src/components/index.js b/src/components/index.js index 33c84997..661f902f 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -23,6 +23,8 @@ import ChevronIcon from './icons/ChevronIcon.vue' import NewTabIcon from './icons/NewTabIcon.vue' import RobotIcon from './icons/RobotIcon.vue' import DocumentIcon from './icons/DocumentIcon.vue' +import AIGuidesContainer from './AIGuidesContainer.vue' +import PromptGuide from './PromptGuide.vue' export { News, @@ -49,5 +51,7 @@ export { ChevronIcon, NewTabIcon, RobotIcon, - DocumentIcon + DocumentIcon, + AIGuidesContainer, + PromptGuide } diff --git a/src/content/resources/libraries.mjs b/src/content/resources/libraries.mjs index a41e0105..8c1fb269 100644 --- a/src/content/resources/libraries.mjs +++ b/src/content/resources/libraries.mjs @@ -255,7 +255,7 @@ export default () => ([ }, { name: 'SikuliLibrary', - href: 'https://github.com/rainmanwy/robotframework-SikuliLibrary#readme', + href: 'https://github.com/MarketSquare/robotframework-SikuliLibrary#readme', description: 'Provides keywords to test UI through Sikulix. This library supports Python 2.x and 3.x.', tags: ['ui'] }, diff --git a/src/js/scheduled.mjs b/src/js/scheduled.mjs index 67227281..5b046370 100644 --- a/src/js/scheduled.mjs +++ b/src/js/scheduled.mjs @@ -69,7 +69,8 @@ const getStars = async() => { // called for every repo in libraries and tools const getRepo = async(repoName) => await request(`https://api.github.com/repos/${repoName}`) const getRepoName = (url) => { - const parts = url.split('github.com/')[1].split('/') + const cleanUrl = url.split('#')[0] + const parts = cleanUrl.split('github.com/')[1].split('/') return `${parts[0]}/${parts[1]}` } const repos = [...libraries(), ...tools()] diff --git a/src/views/Home.vue b/src/views/Home.vue index db5bc881..3c37f246 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -36,6 +36,7 @@ +
@@ -87,7 +88,8 @@ import { TabBox, Sponsors, Milestones, - NewsBanner + NewsBanner, + AIGuidesContainer } from 'Components' import VideoComponent from 'Components/VideoComponent' @@ -108,6 +110,7 @@ export default { Sponsors, Milestones, NewsBanner, + AIGuidesContainer, MonacoEditor: defineAsyncComponent(() => import('Components/Editor.vue')) } }