[3.0] Fix issues with mobile website

.github/workflows/dotnet.yml

@@ -45,10 +45,10 @@ jobs:
                 if-no-files-found: warn
                 retention-days: 1
             - name: Push to Experimental Feed
-              if: ${{ github.repository == 'dotnet/Silk.NET' }}
+              if: ${{ secrets.EXP_NUGET_PASSWORD != '' }}
               run: ./build.sh PushToNuGet --skip Clean Compile Pack --nuget-feed https://dotnet.github.io/Silk.NET/nuget/experimental/index.json --nuget-username ${{ secrets.EXP_NUGET_USERNAME }} --nuget-password ${{ secrets.EXP_NUGET_PASSWORD }} --nuget-api-key ${{ secrets.EXP_NUGET_PASSWORD }}
             - name: Push to GitHub Packages
-              if: ${{ github.repository == 'dotnet/Silk.NET' }}
+              if: ${{ secrets.EXP_NUGET_PASSWORD != '' }}  # ik it's irrelevant but it tells if we likely have perms
               run: ./build.sh PushToNuGet --skip Clean Compile Pack --nuget-feed https://nuget.pkg.github.com/dotnet/index.json --nuget-api-key ${{ secrets.GITHUB_TOKEN }}
     Test:
         strategy:
@@ -78,13 +78,14 @@ jobs:
               run: dotnet restore --runtime ${{ matrix.rid }}
             - name: Test
               run: dotnet test -c Release --no-restore --runtime ${{ matrix.rid }} --collect:"XPlat Code Coverage" --results-directory ./coverage --logger:"trx"
-            - name: Test Report
-              uses: dorny/test-reporter@v1
-              if: success() || failure()
-              with:
-                name: .NET Test Report (${{ matrix.rid }})
-                path: ./coverage/**/*.trx
-                reporter: dotnet-trx
+            # TODO: https://github.com/dorny/test-reporter?tab=readme-ov-file#recommended-setup-for-public-repositories
+            #- name: Test Report
+            #  uses: dorny/test-reporter@v1
+            #  if: success() || failure()
+            #  with:
+            #    name: .NET Test Report (${{ matrix.rid }})
+            #    path: ./coverage/**/*.trx
+            #    reporter: dotnet-trx
             - name: Upload Coverage Results
               uses: actions/upload-artifact@v4
               with:

sources/Website/docusaurus.config.ts

@@ -1,11 +1,12 @@
 import {themes as prismThemes} from 'prism-react-renderer';
 import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
+
 import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
 import { visit } from 'unist-util-visit';
-import { pathToFileURL } from 'node:url';
 import path from 'node:path';
 import { readFileSync, existsSync } from 'node:fs';
+import tailwindPlugin from './plugins/tailwind-config.cjs';
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
@@ -91,6 +92,10 @@ const config: Config = {
 
     staticDirectories: ["static", "../../eng/submodules/silk.net-2.x/documentation/images"],
 
+    plugins: [
+        tailwindPlugin
+    ],
+
     presets: [
         [
             'classic',

sources/Website/package.json

@@ -15,21 +15,24 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.6.3",
-    "@docusaurus/preset-classic": "3.6.3",
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-responsive-3d-carousel": "^2.1.1",
     "remark-github-admonitions-to-directives": "^2.1.0",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.6.3",
-    "@docusaurus/tsconfig": "3.6.3",
-    "@docusaurus/types": "3.6.3",
+    "@docusaurus/module-type-aliases": "3.7.0",
+    "@docusaurus/tsconfig": "3.7.0",
+    "@docusaurus/types": "3.7.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2"
   },
   "browserslist": {

sources/Website/plugins/tailwind-config.cjs

@@ -0,0 +1,15 @@
+function tailwindPlugin(context, options) {
+    return {
+        name: 'tailwind-plugin',
+        configurePostCss(postcssOptions) {
+            postcssOptions.plugins = [
+                require('postcss-import'),
+                require('tailwindcss'),
+                require('autoprefixer'),
+            ];
+            return postcssOptions;
+        },
+    };
+}
+
+module.exports = tailwindPlugin;

sources/Website/src/components/HomepageFeatures/index.tsx

@@ -48,7 +48,7 @@ const FeatureList: FeatureItem[] = [
 
 function Feature({title, image, description}: FeatureItem) {
   return (
-    <div className={clsx('col col--4')} style={{padding: "0"}}>
+    <div className={clsx('col col--4')}>
       <div>
         <img src={useBaseUrl(image)} className={styles.featureimg} role="img" />
       </div>
@@ -63,7 +63,7 @@ function Feature({title, image, description}: FeatureItem) {
 export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.corerow}>
-      <div className="container" style={{padding: "0"}}>
+      <div className="container">
         <div className="row">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />

sources/Website/src/components/VideoSection.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import styles from './styles.module.css';
 import Link from "@docusaurus/Link";
 
 export function VideoSection({ children }): JSX.Element {

sources/Website/src/css/custom.css

@@ -1,6 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Space+Grotesk:wght@300..700&display=swap');
 @import 'variables.css';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
     scroll-behavior: smooth;
 }

sources/Website/src/css/variables.css

@@ -83,6 +83,8 @@
     --ifm-color-content: var(--ifm-color-emphasis-900);
     --ifm-color-content-inverse: var(--ifm-color-emphasis-900);
 
+    --ifm-button-color: var(--ifm-color-gray-900);
+
     --ifm-background-color: var(--ifm-color-emphasis-0);
     --ifm-background-surface-color: var(--ifm-color-emphasis-0);
 

sources/Website/src/pages/index.module.css

@@ -32,10 +32,32 @@ p {
 }
 
 .heroWords {
-  width: 40%;
+  width: 100%;
   align-content: center;
 }
 
+.heroCarousel {
+  width: 100%;
+}
+
+.heroRow {
+    flex-flow: wrap-reverse;
+}
+
+@media (min-width: 940px) {
+    .heroWords {
+        width: 40%;
+    }
+
+    .heroCarousel {
+        width: 60%;
+    }
+
+    .heroRow {
+        flex-flow: initial;
+    }
+}
+
 .heroWords h1 {
   background: linear-gradient(128.87deg,#512bd4 14.05%,#0b6cff 89.3%);
   background-clip: text;
@@ -48,7 +70,7 @@ p {
   color: transparent;
 }
 
-@media (min-width:540px) {
+/*@media (min-width:540px) {
   .heroWords h1 {
     font-size: 2.5rem;
     line-height: 3.25rem;
@@ -64,7 +86,7 @@ p {
   }
 }
 
-@media (min-width:1248px) {
+@media (min-width:1248px) {*/
   .heroWords h1 {
     font-size: 4.25rem;
     line-height: 4.625rem;
@@ -78,11 +100,23 @@ p {
     line-height: 2.5rem;
     text-transform: none;
   }
+/*}*/
+
+.heroButtons {
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .heroButtons a {
   margin-right: 1rem;
   margin-top: 1rem;
+    flex-grow: 1;
+}
+
+@media (min-width: 720px) {
+    .heroButtons a {
+        flex-grow: unset;
+    }
 }
 
 .silkDnfLogo {
@@ -137,29 +171,64 @@ p {
   height: 100%;
   border-radius: 1rem;
   object-fit: cover;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 0.1rem 0.5rem;
+}
+
+.carouselImage {
+    padding: 0.5rem;
 }
 
 .otherMoreDifferentSection > div {
   width: 50%;
   align-content: center;
 }
 
+.technologiesSection {
+    background: var(--ifm-color-emphasis-100);
+    padding: 1.5rem;
+    width: 100%;
+    border-radius: 2rem;
+    text-align: center;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 2rem;
+}
+
+@media (min-width: 720px) {
+    .technologiesSection {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.technologiesSection > div {
+    /*display: grid;*/
+    /*grid-template-columns: subgrid;*/
+    /*grid-template-rows: subgrid;*/
+}
+
+.technologiesSection > div > h1 {
+    align-self: center;
+}
+
 .supportedIcons {
   display: flex;
   justify-content: center;
   margin: 2rem 2rem 0 2rem;
   flex-wrap: wrap;
+  gap: max(1.5rem, 5%);
 }
 
 .supportedIcon {
-  width: 20%;
-  padding: 1.5rem;
+  width: max(5rem, 10%);
+  min-width: 4rem;
+  max-width: 8rem;
   height: auto;
   align-content: center;
+  list-style: none;
 }
 
 .communityIcon {
-  width: 10%;
+  width: max(6rem, 10%);
   padding: 1.5rem;
   height: auto;
   align-content: center;
@@ -184,3 +253,37 @@ p {
 .strideSection h2 {
   color: white;
 }
+
+.homeContainer {
+    margin: 2rem auto;
+    max-width: 1140px;
+    padding: 0 1rem;
+    width: 100%;
+}
+
+.homeContainer > .homeRow {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+@media (min-width: 1440px) {
+    .homeContainer {
+        max-width: 1320px;
+    }
+}
+
+.contactUs {
+    width: 100%;
+    padding: 0 1rem;
+    margin: 0 auto;
+}
+
+.contactUs > p {
+    text-align: center;
+}
+
+@media (min-width: 720px) {
+    .contactUs {
+        width: 50%;
+    }
+}

sources/Website/src/pages/index.tsx

@@ -9,26 +9,23 @@ import styles from './index.module.css';
 import {Carousel} from "react-responsive-3d-carousel";
 import 'react-responsive-3d-carousel/dist/styles.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
 
 function HomepageHeader() {
     const {siteConfig} = useDocusaurusContext();
-    const items = [
-        <a href="#" className={clsx(styles.carouselImage)}><img src={useBaseUrl("/img/home/hedra.gif")} alt="Image 1"/></a>,
-        <a href="#" className={clsx(styles.carouselImage)}><img src={useBaseUrl("/img/home/platformer.gif")}
-                                                                alt="Image 2"/></a>,
-        <a href="#" className={clsx(styles.carouselImage)}><img src={useBaseUrl("/img/home/cat.gif")}
-                                                                alt="Image 3"/></a>,
-        <a href="#" className={clsx(styles.carouselImage)}><img src={useBaseUrl("/img/home/cubes.gif")} alt="Image 4"/></a>,
-    ];
     return (
         <header className={clsx('hero', styles.heroBanner)}>
             <div className={clsx('container')}>
-                <div className={clsx('row')}>
+                <div className={clsx('row', styles.heroRow)}>
                     <div className={clsx(styles.heroWords)}>
                         <Heading as="h1">
                             {siteConfig.title}
                         </Heading>
-                        <p className={clsx(styles.heroSubtitle)} style={{textAlign: "initial"}}>{siteConfig.tagline}</p>
+
+                        <p className={clsx(styles.heroSubtitle)} style={{textAlign: "initial"}}>
+                            {siteConfig.tagline}
+                        </p>
+
                         <div className={clsx(styles.heroButtons)}>
                             <Link
                                 className={clsx('button button--primary button--lg', styles.silkBtn)}
@@ -41,7 +38,9 @@ function HomepageHeader() {
                                 GitHub
                             </Link>
                         </div>
+
                         <br/>
+
                         <div className={clsx(styles.silkDnfText)}>
                             <span>An official</span>
                             <a href="https://dotnetfoundation.org">
@@ -52,27 +51,54 @@ function HomepageHeader() {
                             <span>project</span>
                         </div>
                     </div>
-                    <Carousel
-                        items={items}
-                        startIndex={0}
-                        containerWidth={"60%"}
-                        containerHeight={"auto"}
-                        width={"80%"}
-                        height={"auto"}
-                        aspectRatio={1.78}
-                        showArrows={false}
-                        showStatus={false}
-                        showIndicators={false}
-                        sizeDuration={5000}
-                        defaultOption={{angleFactor: 0, depthFactor: 1, widthFactor: 1.25}}
-                        transformDuration={250}
-                    />
+                    <div className={clsx(styles.heroCarousel)}>
+                        <BrowserOnly>
+                            {() => {
+                                const items = [
+                                    <span className={clsx(styles.carouselImage)}>
+                                        <img src={useBaseUrl("/img/home/hedra.gif")} alt="Hedra preview"/>
+                                    </span>,
+                                                                <span className={clsx(styles.carouselImage)}>
+                                        <img src={useBaseUrl("/img/home/platformer.gif")} alt="Platformer preview"/>
+                                    </span>,
+                                                                <span className={clsx(styles.carouselImage)}>
+                                        <img src={useBaseUrl("/img/home/cat.gif")} alt="Cat preview"/>
+                                    </span>,
+                                                                <span className={clsx(styles.carouselImage)}>
+                                        <img src={useBaseUrl("/img/home/cubes.gif")} alt="Cubes demo preview"/>
+                                    </span>,
+                                ];
+                                return <Carousel
+                                    items={items}
+                                    startIndex={0}
+                                    containerWidth={"100%"}
+                                    containerHeight={"auto"}
+                                    width={"80%"}
+                                    height={"auto"}
+                                    boxShadow={"none"}
+                                    aspectRatio={1.78}
+                                    showArrows={false}
+                                    showStatus={false}
+                                    showIndicators={false}
+                                    sizeDuration={5000}
+                                    defaultOption={{angleFactor: 0, depthFactor: 1, widthFactor: 1.25}}
+                                    transformDuration={250}
+                                />;
+                            }}
+                        </BrowserOnly>
+                    </div>
                 </div>
             </div>
         </header>
     );
 }
 
+function SupportedTechnology({icon}) {
+    return (<li className={clsx(styles.supportedIcon)}>
+        <img src={useBaseUrl(icon)}/>
+    </li>);
+}
+
 export default function Home(): JSX.Element {
     const {siteConfig} = useDocusaurusContext();
     return (
@@ -82,49 +108,40 @@ export default function Home(): JSX.Element {
             <HomepageHeader/>
             <main>
                 <HomepageFeatures/>
-                <section className={clsx('container')}>
-                    <div className={clsx('row', styles.otherMoreDifferentSection)}>
+
+                <section className={clsx(styles.homeContainer)}>
+                    <div className={clsx(styles.technologiesSection)}>
                         <div>
                             <h1>Supported Technologies</h1>
-                            <div className={clsx(styles.supportedIcons)}>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/assimp.png")}/></div>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/dx12ultimate.png")}/></div>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/glfw.png")}/></div>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/openal.png")}/></div>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/opencl.svg")}/></div>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/opengl.jpg")}/></div>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/opengles.png")}/></div>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/openxr.svg")}/></div>
-                                <div className={clsx(styles.supportedIcon)}><img src={useBaseUrl("/img/home/sdl.png")}/>
-                                </div>
-                                <div className={clsx(styles.supportedIcon)}><img
-                                    src={useBaseUrl("/img/home/vulkan.svg")}/></div>
-                            </div>
+                            <ul className={clsx(styles.supportedIcons)}>
+                                <SupportedTechnology icon={"/img/home/assimp.png"}/>
+                                <SupportedTechnology icon={"/img/home/dx12ultimate.png"}/>
+                                <SupportedTechnology icon={"/img/home/glfw.png"}/>
+                                <SupportedTechnology icon={"/img/home/openal.png"}/>
+                                <SupportedTechnology icon={"/img/home/opencl.svg"}/>
+                                <SupportedTechnology icon={"/img/home/opengl.jpg"}/>
+                                <SupportedTechnology icon={"/img/home/opengles.png"}/>
+                                <SupportedTechnology icon={"/img/home/openxr.svg"}/>
+                                <SupportedTechnology icon={"/img/home/sdl.png"}/>
+                                <SupportedTechnology icon={"/img/home/vulkan.svg"}/>
+                            </ul>
                         </div>
                         <div>
                             <h1>Supported Targets</h1>
-                            <div className={clsx(styles.supportedIcons)}>
-                                <img src={useBaseUrl("/img/home/windows.svg")} className={clsx(styles.supportedIcon)}/>
-                                <img src={useBaseUrl("/img/home/linux.svg")} className={clsx(styles.supportedIcon)}/>
-                                <img src={useBaseUrl("/img/home/macos.svg")} className={clsx(styles.supportedIcon)}/>
-                                <img src={useBaseUrl("/img/home/ios.svg")} className={clsx(styles.supportedIcon)}/>
-                                <img src={useBaseUrl("/img/home/android.svg")} className={clsx(styles.supportedIcon)}/>
-                            </div>
+                            <ul className={clsx(styles.supportedIcons)}>
+                                <SupportedTechnology icon={"/img/home/windows.svg"}/>
+                                <SupportedTechnology icon={"/img/home/linux.svg"}/>
+                                <SupportedTechnology icon={"/img/home/macos.svg"}/>
+                                <SupportedTechnology icon={"/img/home/ios.svg"}/>
+                                <SupportedTechnology icon={"/img/home/android.svg"}/>
+                            </ul>
                         </div>
                     </div>
                 </section>
-                <br/>
-                <section className={clsx('container')}>
+
+                <section className={clsx(styles.homeContainer)}>
                     <h1 className={clsx(styles.centerText)}>Why choose Silk.NET?</h1>
-                    <div className={clsx('row')}>
+                    <div className={clsx(styles.homeRow)}>
                         <div className={clsx('col col--6')}>
                             <h2>Backed &amp; Built to Last</h2>
                             <p>
@@ -146,29 +163,30 @@ export default function Home(): JSX.Element {
                         </div>
                     </div>
                 </section>
-                <br/>
-                <section className={clsx('container', styles.centerText)}>
+
+                <section className={clsx(styles.homeContainer, styles.centerText)}>
                     <h1>Join the Conversation.</h1>
                     <div className={clsx(styles.supportedIcons)}>
-                        <a href="https://discord.gg/DTHHXRt" className={clsx(styles.communityIcon)}><img
-                            src={useBaseUrl("/img/home/discord.svg")}
-                        /></a>
+                        <a href="https://discord.gg/DTHHXRt" className={clsx(styles.communityIcon)}>
+                            <img src={useBaseUrl("/img/home/discord.svg")}/>
+                        </a>
                         <a href="https://github.com/dotnet/Silk.NET"
-                           className={clsx(styles.invertOnDark, styles.communityIcon)}><img
-                            src={useBaseUrl("/img/home/github.svg")}
-                        /></a>
+                           className={clsx(styles.invertOnDark, styles.communityIcon)}>
+                            <img src={useBaseUrl("/img/home/github.svg")}/>
+                        </a>
                     </div>
-                    <div className={clsx(styles.supportedIcons)}>
-                        <p style={{width: "50%", textAlign: "center"}}>
+                    <div className={clsx(styles.contactUs)}>
+                        <p>
                             Join, chat, ask for help on our vibrant Discord community frequented by power users, top
                             contributors, and the library maintainers themselves. Keep up-to-date with the project's
                             latest developments on GitHub. We don't have premium support, which means that through these
                             channels you always get equal access to the best resources available.
-                        </p></div>
+                        </p>
+                    </div>
                 </section>
-                <br/>
-                <section className={clsx('container')}>
-                    <div className={clsx('row', styles.strideSection)}>
+
+                <section className={clsx(styles.homeContainer)}>
+                    <div className={clsx(styles.homeRow, styles.strideSection)}>
                         <div className={clsx('col col--9')} style={{alignContent: 'center'}}>
                             <h2>Not your cup of tea? Try Stride.</h2>
                             <p>
@@ -180,7 +198,11 @@ export default function Home(): JSX.Element {
                         </div>
                         <div className={clsx('col col--3')} style={{alignContent: 'center'}}>
                             <img src={useBaseUrl("/img/home/stride.svg")}
-                                 style={{filter: "invert(1)", padding: "var(--ifm-spacing-horizontal)"}}/>
+                                 style={{
+                                     filter: "invert(1)",
+                                     padding: "var(--ifm-spacing-horizontal)",
+                                     width: "min(15rem, 100%)"
+                                 }}/>
                             <br/>
                             <Link
                                 className={clsx('button button--secondary button--lg', styles.silkBtn)}
@@ -191,7 +213,6 @@ export default function Home(): JSX.Element {
                         </div>
                     </div>
                 </section>
-                <br />
             </main>
         </Layout>
     );

sources/Website/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    corePlugins: {
+        preflight: false,
+        container: false,
+    },
+    darkMode: ["class", '[data-theme="dark"]'],
+    content: ["./src/**/*.{jsx,tsx,html}"],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}