website·Indexed 30 days ago
https://asalta-docs.netlify.appA starter template for creating customizable documentation sites using Jigsaw. Features include Tailwind CSS for styling, support for Algolia DocSearch, and a configurable navigation menu defined in navigation.php.
/source/_assets/sass. Specifically, add custom styles to _documentation.scss. If modifying the Sass architecture, ensure that the @tailwind directives are preserved in the final output files to maintain framework functionality.// source/_assets/sass/main.scss
@tailwind preflight;
@tailwind components;
// Code syntax highlighting, powered by highlightjs.org
@import '~highlight.js/styles/a11y-light.css';
@import 'base';
@import 'navigation';
@import 'documentation';
@tailwind utilities;By default, content files should be placed in the source/docs folder. Each content page must begin with a YAML header to define how it is rendered:
title: Used for HTML title and OpenGraph tags.extends: Specifies the parent Blade layout (e.g., _layouts.documentation maps to source/_layouts/documentation.blade.php).section: Defines the Blade section where the content will be injected.---
title: Navigation
description: Building a navigation menu for your site
extends: _layouts.documentation
section: content
---/source/404.blade.php. This file uses Blade templating and extends the master layout. You can preview the page by visiting the /404 path in your browser. Depending on your hosting provider, additional server configuration may be required to ensure this page is served for all 404 errors; refer to the Jigsaw documentation for specific server setup.<!-- source/404.blade.php -->
@extends('_layouts.master')
@section('body')
<div class="flex flex-col items-center mt-32 text-gray-700">
<h1 class="text-6xl leading-none mb-2">404</h1>
<h2 class="text-3xl">Page not found</h2>
<hr class="block w-full max-w-lg mx-auto my-8 border">
<p class="text-xl">Need to update this page? See the <a title="404 Page Documentation" href="/docs/404"> documentation here</a>.</p>
</div>
@endsectionAsalta uses Laravel Mix to process assets.
source/_assets/. Run npm run dev or npm run prod to compile them into /source/assets/build/./source/assets/.During the site build process, the entire /source/assets/ directory is copied to the destination build folder (e.g., build_local).
# Compile assets for development
npm run dev
# Compile assets for production
npm run prod/* Main dropdown wrapper */
.algolia-autocomplete .ds-dropdown-menu {
width: 500px;
}
/* Main category (eg. Getting Started) */
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: darkgray;
border: 1px solid gray;
}
/* Category (eg. Downloads) */
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: gray;
}
/* Title (eg. Bootstrap CDN) */
.algolia-autocomplete .algolia-docsearch-suggestion--title {
font-weight: bold;
color: black;
}
/* Description description (eg. Bootstrap currently works...) */
.algolia-autocomplete .algolia-docsearch-suggestion--text {
font-size: 0.8rem;
color: gray;
}
/* Highlighted text */
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: blue;
}navigation.php. You can define simple links by mapping a label to a URL string, or create nested menus by using a children associative array. To integrate this navigation into the site configuration, require the navigation.php file within config.php. In Blade templates, the navigation data is accessible via $page->navigation.<?php
// navigation.php
return [
'Getting Started' => [
'url' => 'docs/getting-started',
'children' => [
'Customizing Your Site' => 'docs/customizing-your-site',
'Navigation' => 'docs/navigation',
'Algolia DocSearch' => 'docs/algolia-docsearch',
'Custom 404 Page' => 'docs/custom-404-page',
],
],
'Jigsaw Docs' => 'https://jigsaw.tighten.co/docs/installation',
];
// config.php
'navigation' => require_once('navigation.php'),config.php file. This file is used to define project-specific variables such as the base URL, site name, and search API keys. It is also the location where site 'collections' (e.g., contributors or blog posts) are defined.// config.php
return [
'baseUrl' => 'https://my-awesome-Asalta-site.com/',
'production' => false,
'siteName' => 'My Site',
'siteDescription' => 'Give your documentation a boost with Asalta.',
'docsearchApiKey' => '',
'docsearchIndexName' => '',
'navigation' => require_once('navigation.php'),
];config.php file. Once configured, the search field at the top of the page will be active. To ensure search results link directly to specific sections, add a unique id or name attribute to your heading tags (e.g., <h1>, <h2>).// config.php
return [
'docsearchApiKey' => 'YOUR_API_KEY',
'docsearchIndexName' => 'YOUR_INDEX_NAME',
];# build static files with Asalta
./vendor/bin/Asalta build
# compile assets with Laravel Mix
npm run dev