Fix docs website broken anchors

Author: Gedochao

website/docs/commands/publishing/publish.md

@@ -285,7 +285,7 @@ or relative (beware of name clashes with pre-defined repositories above).
 ### Authentication
 
 Specify publish repository authentication either on the command-line or via
-using directives. See user / password / realm in the [settings table](#settings)
+using directives. See user / password / realm in the [settings table](#other-settings)
 and the [CI overrides](#ci-overrides).
 
 ### Connection parameters configuration

website/docusaurus.config.js

@@ -9,6 +9,7 @@ module.exports = {
  url: 'https://scala-cli.virtuslab.org/',
  baseUrl: '/',
  onBrokenLinks: 'throw',
+ onBrokenAnchors: 'warn',
  markdown: {
  hooks: {
  onBrokenMarkdownLinks: 'warn'
@@ -39,7 +40,7 @@ module.exports = {
  {
  // type: 'doc',
  label: "Use cases",
- to: '/#use_cases',
+ to: '/',
  items: [
  {
  to: '/education',

website/src/pages/install.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
 
 import Section from "../components/Section"
 import BigHeader from "../components/BigHeader"
@@ -12,7 +13,6 @@ const Index = (props) => {
 
  <div className="container content">
 
-
 {/* Install Scala CLI */}
  <Section className="section-install-cli">
 <div className="row">
@@ -30,7 +30,10 @@ const Index = (props) => {
 
 
 <Section className="section-about advanced-install">
-
+{/* Anchor targets for deep linking - using Heading so Docusaurus can detect them */}
+<Heading as="h2" id="advanced-installation" style={{display: 'none', margin: 0, padding: 0}}>Advanced Installation</Heading>
+<Heading as="h2" id="scala-js" style={{display: 'none', margin: 0, padding: 0}}>Scala.js</Heading>
+<Heading as="h2" id="scala-native" style={{display: 'none', margin: 0, padding: 0}}>Scala Native</Heading>
 <AdvancedInstallation/>
 
 </Section>

website/src/scss/_variables.scss

@@ -0,0 +1,3 @@
+$theme-red: #F23135;
+$theme-yellow: #FFD583;
+

website/src/scss/components/section-install-cli.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .section-install-cli {
  margin-top: 130px;
  margin-bottom: 130px;

website/src/scss/components/section-use-tiles.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .section-use-tiles {
  margin-top: 130px;
  margin-bottom: 130px;

website/src/scss/components/section-yellow-banner.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .section-yellow-banner {
  margin-top: 50px;
  margin-bottom: 130px;

website/src/scss/style.scss

@@ -1,22 +1,17 @@
 
-$theme-red: #F23135;
-$theme-yellow: #FFD583;
+@use 'variables' as *;
+@use 'components/section-base' as *;
+@use 'components/section-image-box' as *;
+@use 'components/section-features' as *;
+@use 'components/section-about' as *;
+@use 'components/section-yellow-banner' as *;
+@use 'components/section-use-tiles' as *;
+@use 'components/section-install-cli' as *;
+@use 'components/tooltip' as *;
+@use 'components/runnable-sample' as *;
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
 
-@import 'components/section-base';
-
-@import 'components/section-image-box';
-@import 'components/section-features';
-@import 'components/section-about';
-
-@import "./components/section-yellow-banner";
-@import "./components/section-use-tiles";
-@import "./components/section-install-cli";
-
-@import "./components/tooltip";
-@import "./components/runnable-sample";
-
 @font-face {
  font-family: "Roboto Mono", monospace;
  src: url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');