[3.0] Fix issues with mobile website (#2416)

* Fix issues with mobile site. Add CSProj for website.

* Add tailwindcss.

* Add tailwind config

* Some more minor adjustments

* Attempt to fix build

---------

Co-authored-by: Dylan Perks <[email protected]>
Co-authored-by: Dylan Perks <[email protected]>

Author: joskuijpers

.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-lock.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/package.json

@@ -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/plugins/tailwind-config.cjs

@@ -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/HomepageFeatures/index.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/components/VideoSection.tsx

@@ -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:[email protected]&display=swap');
 @import 'variables.css';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
     scroll-behavior: smooth;
 }

sources/Website/src/css/custom.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/css/variables.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%;
+    }
+}