From e76dc01e523be5358a2ec0852c3a5b766b1d376d Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Thu, 18 Apr 2024 21:31:21 +0200 Subject: docs: add use cases to landing page --- .../docs/src/components/Features/index.module.css | 6 +- subprojects/docs/src/components/Features/index.tsx | 2 +- .../docs/src/components/UseCases/index.module.css | 104 +++++++++ subprojects/docs/src/components/UseCases/index.tsx | 106 +++++++++ subprojects/docs/src/components/UseCases/uc1.svg | 1 + .../docs/src/components/UseCases/uc1.svg.license | 4 + subprojects/docs/src/components/UseCases/uc2.svg | 1 + .../docs/src/components/UseCases/uc2.svg.license | 4 + subprojects/docs/src/components/UseCases/uc3.svg | 1 + .../docs/src/components/UseCases/uc3.svg.license | 4 + subprojects/docs/src/components/UseCases/uc4.svg | 1 + .../docs/src/components/UseCases/uc4.svg.license | 4 + subprojects/docs/src/components/UseCases/uc5.svg | 1 + .../docs/src/components/UseCases/uc5.svg.license | 4 + subprojects/docs/src/components/UseCases/uc6.svg | 1 + .../docs/src/components/UseCases/uc6.svg.license | 4 + subprojects/docs/src/components/Video/cover.svg | 2 +- .../docs/src/components/Video/index.module.css | 4 + subprojects/docs/src/css/custom.css | 2 + subprojects/docs/src/pages/index.module.css | 62 +----- subprojects/docs/src/pages/index.tsx | 239 +++++++++++---------- 21 files changed, 384 insertions(+), 173 deletions(-) create mode 100644 subprojects/docs/src/components/UseCases/index.module.css create mode 100644 subprojects/docs/src/components/UseCases/index.tsx create mode 100644 subprojects/docs/src/components/UseCases/uc1.svg create mode 100644 subprojects/docs/src/components/UseCases/uc1.svg.license create mode 100644 subprojects/docs/src/components/UseCases/uc2.svg create mode 100644 subprojects/docs/src/components/UseCases/uc2.svg.license create mode 100644 subprojects/docs/src/components/UseCases/uc3.svg create mode 100644 subprojects/docs/src/components/UseCases/uc3.svg.license create mode 100644 subprojects/docs/src/components/UseCases/uc4.svg create mode 100644 subprojects/docs/src/components/UseCases/uc4.svg.license create mode 100644 subprojects/docs/src/components/UseCases/uc5.svg create mode 100644 subprojects/docs/src/components/UseCases/uc5.svg.license create mode 100644 subprojects/docs/src/components/UseCases/uc6.svg create mode 100644 subprojects/docs/src/components/UseCases/uc6.svg.license (limited to 'subprojects') diff --git a/subprojects/docs/src/components/Features/index.module.css b/subprojects/docs/src/components/Features/index.module.css index aa136724..20ad300b 100644 --- a/subprojects/docs/src/components/Features/index.module.css +++ b/subprojects/docs/src/components/Features/index.module.css @@ -17,7 +17,7 @@ } [data-theme='dark'] :global(.fiforeground) { - fill: #ebebff; + fill: var(--ifm-font-color-base); } [data-theme='dark'] :global(.fiempty) { @@ -124,3 +124,7 @@ text-align: right; } } + +.row--last { + margin-bottom: calc(-1 * var(--ifm-leading)); +} diff --git a/subprojects/docs/src/components/Features/index.tsx b/subprojects/docs/src/components/Features/index.tsx index 57012725..36fab14a 100644 --- a/subprojects/docs/src/components/Features/index.tsx +++ b/subprojects/docs/src/components/Features/index.tsx @@ -90,7 +90,7 @@ export default function Features() { generation processes. -
+
} title="Advanced web-based editor" diff --git a/subprojects/docs/src/components/UseCases/index.module.css b/subprojects/docs/src/components/UseCases/index.module.css new file mode 100644 index 00000000..c8ffc0af --- /dev/null +++ b/subprojects/docs/src/components/UseCases/index.module.css @@ -0,0 +1,104 @@ +/* + * SPDX-FileCopyrightText: 2024 The Refinery Authors + * + * SPDX-License-Identifier: EPL-2.0 + */ + +:global(.uchighlight) { + fill: var(--refinery-highlight); +} + +:global(.ucdraw) { + fill: #303846; +} + +:global(.ucstroke) { + stroke: #303846; +} + +[data-theme='dark'] :global(.ucdraw) { + fill: var(--ifm-color-emphasis-700); +} + +[data-theme='dark'] :global(.ucstroke) { + stroke: var(--ifm-color-emphasis-700); +} + +.use-case { + position: relative; + display: flex; + overflow: hidden; + flex-direction: column-reverse; + align-content: justify; + width: 100%; + background: var(--ifm-card-background-color); + box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: var(--ifm-card-border-radius); + margin-bottom: 2rem; + transition: all var(--ifm-transition-fast) ease; + transition-property: border, box-shadow; + --ifm-link-color: var(--ifm-color-emphasis-800); + --ifm-link-hover-color: var(--ifm-color-emphasis-700); +} + +.use-case:hover, +.use-case:focus-within { + border-color: var(--ifm-color-primary); + box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%); +} + +.use-case__content { + display: flex; + overflow: hidden; + flex-direction: column; + align-items: center; + padding: 1rem; +} + +.use-case__content svg { + width: 100%; + max-width: 600px; + height: auto; + transform: scale(1); + transition: transform var(--ifm-transition-fast) ease; +} + +.use-case:hover svg, +.use-case:focus-within svg { + transform: scale(1.414); +} + +.use-case__title { + margin: 0; + padding: 1rem; + background: var(--ifm-background-surface-color); + font-weight: 400; +} + +.use-case__title b, +.use-case__title span { + display: inline-block; +} + +[data-theme='dark'] .use-case__title { + background: var(--ifm-color-emphasis-200); +} + +.use-case__link:hover > * { + text-decoration: underline; +} + +.use-case__link::before { + content: ' '; + position: absolute; + top: 0; + left: 0; + z-index: 99; + width: 100%; + height: 100%; +} + +.row--bottom { + margin-bottom: -2rem; +} diff --git a/subprojects/docs/src/components/UseCases/index.tsx b/subprojects/docs/src/components/UseCases/index.tsx new file mode 100644 index 00000000..c9570cc6 --- /dev/null +++ b/subprojects/docs/src/components/UseCases/index.tsx @@ -0,0 +1,106 @@ +/* + * SPDX-FileCopyrightText: 2024 The Refinery Authors + * + * SPDX-License-Identifier: EPL-2.0 + */ + +import Link from '@docusaurus/Link'; +import clsx from 'clsx'; + +import styles from './index.module.css'; +import Uc1 from './uc1.svg'; +import Uc2 from './uc2.svg'; +import Uc3 from './uc3.svg'; +import Uc4 from './uc4.svg'; +import Uc5 from './uc5.svg'; +import Uc6 from './uc6.svg'; + +function UseCase({ + icon, + title, + href, +}: { + icon: React.ReactNode; + title: React.ReactNode; + href: string; +}) { + return ( +
+
+

+ + {title} + +

+
{icon}
+
+
+ ); +} + +export default function UseCases() { + return ( + <> +
+ } + title={ + <> + Scenario generation for testing autonomous vechicles + + } + href="https://doi.org/10.1007/s10270-021-00884-z" + /> + } + title={ + <> + Conformance checking of modeling toolchains + + } + href="https://doi.org/10.1007/s10009-019-00530-6" + /> + } + title={ + <> + Synthesize distributed communication networks + + } + href="https://doi.org/10.1109/TSE.2020.3025732" + /> +
+
+ } + title={ + <> + Execution time analysis for data-driven{' '} + critical systems + + } + href="https://doi.org/10.1145/3471904" + /> + } + title={ + <> + Generative architectures with assured resilience + + } + href="https://doi.org/10.1145/3550355.3552448" + /> + } + title={ + <> + Video game map generator with model-based{' '} + techniques + + } + href="https://doi.org/10.1145/3417990.3422001" + /> +
+ + ); +} diff --git a/subprojects/docs/src/components/UseCases/uc1.svg b/subprojects/docs/src/components/UseCases/uc1.svg new file mode 100644 index 00000000..2b5504e5 --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc1.svg @@ -0,0 +1 @@ + diff --git a/subprojects/docs/src/components/UseCases/uc1.svg.license b/subprojects/docs/src/components/UseCases/uc1.svg.license new file mode 100644 index 00000000..15aca74d --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc1.svg.license @@ -0,0 +1,4 @@ +SPDX-FileCopyrightText: 2024 The Refinery Authors + +SPDX-License-Identifier: EPL-2.0 + diff --git a/subprojects/docs/src/components/UseCases/uc2.svg b/subprojects/docs/src/components/UseCases/uc2.svg new file mode 100644 index 00000000..8aec8169 --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc2.svg @@ -0,0 +1 @@ + diff --git a/subprojects/docs/src/components/UseCases/uc2.svg.license b/subprojects/docs/src/components/UseCases/uc2.svg.license new file mode 100644 index 00000000..15aca74d --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc2.svg.license @@ -0,0 +1,4 @@ +SPDX-FileCopyrightText: 2024 The Refinery Authors + +SPDX-License-Identifier: EPL-2.0 + diff --git a/subprojects/docs/src/components/UseCases/uc3.svg b/subprojects/docs/src/components/UseCases/uc3.svg new file mode 100644 index 00000000..cd463317 --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc3.svg @@ -0,0 +1 @@ + diff --git a/subprojects/docs/src/components/UseCases/uc3.svg.license b/subprojects/docs/src/components/UseCases/uc3.svg.license new file mode 100644 index 00000000..15aca74d --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc3.svg.license @@ -0,0 +1,4 @@ +SPDX-FileCopyrightText: 2024 The Refinery Authors + +SPDX-License-Identifier: EPL-2.0 + diff --git a/subprojects/docs/src/components/UseCases/uc4.svg b/subprojects/docs/src/components/UseCases/uc4.svg new file mode 100644 index 00000000..fa647e00 --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc4.svg @@ -0,0 +1 @@ + diff --git a/subprojects/docs/src/components/UseCases/uc4.svg.license b/subprojects/docs/src/components/UseCases/uc4.svg.license new file mode 100644 index 00000000..15aca74d --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc4.svg.license @@ -0,0 +1,4 @@ +SPDX-FileCopyrightText: 2024 The Refinery Authors + +SPDX-License-Identifier: EPL-2.0 + diff --git a/subprojects/docs/src/components/UseCases/uc5.svg b/subprojects/docs/src/components/UseCases/uc5.svg new file mode 100644 index 00000000..1b7d769d --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc5.svg @@ -0,0 +1 @@ + diff --git a/subprojects/docs/src/components/UseCases/uc5.svg.license b/subprojects/docs/src/components/UseCases/uc5.svg.license new file mode 100644 index 00000000..15aca74d --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc5.svg.license @@ -0,0 +1,4 @@ +SPDX-FileCopyrightText: 2024 The Refinery Authors + +SPDX-License-Identifier: EPL-2.0 + diff --git a/subprojects/docs/src/components/UseCases/uc6.svg b/subprojects/docs/src/components/UseCases/uc6.svg new file mode 100644 index 00000000..063d89a8 --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc6.svg @@ -0,0 +1 @@ + diff --git a/subprojects/docs/src/components/UseCases/uc6.svg.license b/subprojects/docs/src/components/UseCases/uc6.svg.license new file mode 100644 index 00000000..15aca74d --- /dev/null +++ b/subprojects/docs/src/components/UseCases/uc6.svg.license @@ -0,0 +1,4 @@ +SPDX-FileCopyrightText: 2024 The Refinery Authors + +SPDX-License-Identifier: EPL-2.0 + diff --git a/subprojects/docs/src/components/Video/cover.svg b/subprojects/docs/src/components/Video/cover.svg index b263c8b3..632175d9 100644 --- a/subprojects/docs/src/components/Video/cover.svg +++ b/subprojects/docs/src/components/Video/cover.svg @@ -1 +1 @@ -Videointroduction +Videointroduction diff --git a/subprojects/docs/src/components/Video/index.module.css b/subprojects/docs/src/components/Video/index.module.css index 209c5d64..4fbd1b80 100644 --- a/subprojects/docs/src/components/Video/index.module.css +++ b/subprojects/docs/src/components/Video/index.module.css @@ -8,6 +8,10 @@ fill: var(--ifm-color-primary); } +:global(.videohighlight) { + fill: var(--refinery-highlight); +} + [data-theme='dark'] :global(.videocolor) { fill: var(--ifm-color-primary-darker); } diff --git a/subprojects/docs/src/css/custom.css b/subprojects/docs/src/css/custom.css index a359649b..30384369 100644 --- a/subprojects/docs/src/css/custom.css +++ b/subprojects/docs/src/css/custom.css @@ -46,6 +46,7 @@ --ifm-global-shadow-tl: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12) !important; + --refinery-highlight: #ca1243; } [data-theme='dark'] { @@ -63,6 +64,7 @@ --ifm-color-primary-lighter: #75c3cd; --ifm-color-primary-lightest: #94d1d8; --ifm-card-background-color: var(--ifm-background-surface-color) !important; + --refinery-highlight: #e06c75; } code { diff --git a/subprojects/docs/src/pages/index.module.css b/subprojects/docs/src/pages/index.module.css index 572e5eef..367b78ed 100644 --- a/subprojects/docs/src/pages/index.module.css +++ b/subprojects/docs/src/pages/index.module.css @@ -4,6 +4,10 @@ * SPDX-License-Identifier: EPL-2.0 */ +.page { + margin-bottom: 2rem; +} + .buttons { display: flex; flex-direction: row; @@ -12,7 +16,7 @@ } .section { - padding: 4rem 0; + padding: 2rem 0; } @media (max-width: 576px) { @@ -28,62 +32,10 @@ .section__title { text-align: center; + margin-bottom: var(--ifm-leading); } .section--video { + padding: 4rem 0; background: var(--ifm-background-surface-color); } - -.video__container { - position: relative; - width: 100%; - height: auto; - aspect-ratio: 560/315; - box-shadow: var(--ifm-global-shadow-lw); - transition: box-shadow var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); -} - -.video__container:hover, -.video__container:focus-within { - box-shadow: var(--ifm-global-shadow-md); -} - -.video, .video__button, .video__cover { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.video__button { - margin: 0; - padding: 0; - border: none; - cursor: pointer; -} - -.video__cover { - z-index: 1; -} - -.video__play { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1; - aspect-ratio: 1/1; - height: 16rem; - width: auto; - max-height: 50%; - background: var(--ifm-color-primary); - mask-image: url(@material-icons/svg/svg/play_circle/outline.svg); - mask-size: contain; - transition: background var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); -} - -.video__button:hover .video__play, -.video__button:focus .video__play { - background: var(--ifm-color-primary-dark); -} diff --git a/subprojects/docs/src/pages/index.tsx b/subprojects/docs/src/pages/index.tsx index 6b65c32b..cb0bfeb8 100644 --- a/subprojects/docs/src/pages/index.tsx +++ b/subprojects/docs/src/pages/index.tsx @@ -11,6 +11,7 @@ import clsx from 'clsx'; import styles from './index.module.css'; import Features from '@site/src/components/Features'; +import UseCases from '@site/src/components/UseCases'; import Video from '@site/src/components/Video'; function Hero() { @@ -106,111 +107,108 @@ Publication.defaultProps = { function Publications() { return ( -
-

Related publications

-
-
-

Tool demonstration

-
    - - K. Marussy, A. Ficsor, O. Semeráth, D. Varró: “Refinery: - Graph Solver as a Service” ICSE 2024 Demonstrations - -
-

Partial model specification language

-
    - - K. Marussy, O. Semeráth, A. Babikian, D. Varró:{' '} - - A Specification Language for Consistent Model Generation based - on Partial Models. - {' '} - J. Object Technol. 19(3): 3:1-22 (2020) - -
-

Diverse and realistic graph generation

-
    - - O. Semeráth, R. Farkas, G. Bergmann, D. Varró:{' '} - - Diversity of graph models and graph generators in mutation - testing. - {' '} - Int. J. Softw. Tools Technol. Transf. 22(1): 57-78 (2020) - - - O. Semeráth, A. Babikian, B. Chen, C. Li, K. Marussy, G. Szárnyas, - D. Varró:{' '} - - Automated generation of consistent, diverse and structurally - realistic graph models. - {' '} - Softw. Syst. Model. 20(5): 1713-1734 (2021) - -
-
-
-

Consistent graph generation techniques

-
    - - O. Semeráth, A. Nagy, D. Varró: “A graph solver for the - automated generation of consistent domain-specific models.”{' '} - ICSE 2018: 969-980 - - - K. Marussy, O. Semeráth, D. Varró:{' '} - - Automated Generation of Consistent Graph Models With - Multiplicity Reasoning. - {' '} - IEEE Trans. Softw. Eng. 48(5): 1610-1629 (2022) - - - A. Babikian, O. Semeráth, A. Li, K. Marussy, D. Varró:{' '} - - Automated generation of consistent models using qualitative - abstractions and exploration strategies. - {' '} - Softw. Syst. Model. 21(5): 1763-1787 (2022) - -
-

Correctness proofs

-
    - - D. Varró, O. Semeráth, G. Szárnyas, Á. Horváth: “Towards the - Automated Generation of Consistent, Diverse, Scalable and - Realistic Graph Models.”{' '} - Graph Transformation, Specifications, and Nets 2018: - 285-312 - -
-
+
+
+

Tool demonstration

+
    + + K. Marussy, A. Ficsor, O. Semeráth, D. Varró: “Refinery: Graph + Solver as a Service” ICSE 2024 Demonstrations + +
+

Partial model specification language

+
    + + K. Marussy, O. Semeráth, A. Babikian, D. Varró:{' '} + + A Specification Language for Consistent Model Generation based on + Partial Models. + {' '} + J. Object Technol. 19(3): 3:1-22 (2020) + +
+

Diverse and realistic graph generation

+
    + + O. Semeráth, R. Farkas, G. Bergmann, D. Varró:{' '} + + Diversity of graph models and graph generators in mutation + testing. + {' '} + Int. J. Softw. Tools Technol. Transf. 22(1): 57-78 (2020) + + + O. Semeráth, A. Babikian, B. Chen, C. Li, K. Marussy, G. Szárnyas, + D. Varró:{' '} + + Automated generation of consistent, diverse and structurally + realistic graph models. + {' '} + Softw. Syst. Model. 20(5): 1713-1734 (2021) + +
+
+
+

Consistent graph generation techniques

+
    + + O. Semeráth, A. Nagy, D. Varró: “A graph solver for the + automated generation of consistent domain-specific models.”{' '} + ICSE 2018: 969-980 + + + K. Marussy, O. Semeráth, D. Varró:{' '} + + Automated Generation of Consistent Graph Models With Multiplicity + Reasoning. + {' '} + IEEE Trans. Softw. Eng. 48(5): 1610-1629 (2022) + + + A. Babikian, O. Semeráth, A. Li, K. Marussy, D. Varró:{' '} + + Automated generation of consistent models using qualitative + abstractions and exploration strategies. + {' '} + Softw. Syst. Model. 21(5): 1763-1787 (2022) + +
+

Correctness proofs

+
    + + D. Varró, O. Semeráth, G. Szárnyas, Á. Horváth: “Towards the + Automated Generation of Consistent, Diverse, Scalable and Realistic + Graph Models.”{' '} + Graph Transformation, Specifications, and Nets 2018: + 285-312 + +
); @@ -219,16 +217,27 @@ function Publications() { export default function Home() { return ( - -
- -
-
-
-
- -
+
+ +
+ +
+
+
+
+
+

Explore use-cases

+ +
+
+
+
+

Related publications

+ +
+
+
); } -- cgit v1.2.3-54-g00ecf