DOCSEARCHbyAlgolia
Submit Docs

Caravan Kidstec Documentation

website·Indexed 30 days ago

https://openup-labtakizawa.github.io/caravan-kidstec

Technical documentation for the こどもテックキャラバン (Children's Tech Caravan) website. It covers the development stack including Next.js, React, Tailwind CSS, Bun, and Biome, as well as site management using Docusaurus for documentation, versioning, and i18n deployment.

Tokens
4.4K
Snippets
35
Records
48
Agent score
75%

What's inside Caravan Kidstec

  1. Overview of こどもテックキャラバン (Kodomo Tech Caravan)

    こどもテックキャラバン is a STEAM-based event designed to expand children's potential through robot construction, programming, and nature-based learning. The initiative focuses on creating moments of discovery for participating families and provides opportunities for NPOs and sponsor companies to contribute to regional revitalization and nature conservation. The project operates on the principle of 'Collective Impact,' collaborating with NPOs, local businesses, and university students in alignment with SDG Goal 17 (Partnerships for the Goals).

  2. Tech stack used for the KidsTec Caravan homepage

    The KidsTec Caravan homepage is built as an Open Source Software (OSS) project using the following technology stack:

    • Framework: Next.js (a React framework for full-stack web applications by Vercel)
    • UI Library: React (JavaScript library developed by Meta)
    • Runtime: Bun (a high-performance JavaScript runtime, used as an alternative to Node.js or Deno)
    • Styling: Tailwind CSS (a utility-first CSS framework)
    • Language: TypeScript (a typed superset of JavaScript developed by Microsoft)

  6. Use React Components in documents via MDX

    By using MDX, you can export and use React components directly within your Markdown files. This allows for interactive elements and dynamic content inside documentation.
    export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`あなたは ${color} 色の ${children} ラベルをクリックしました`)
    }}>
    {children}
  </span>
);

これは <Highlight color="#25c2a0">Docusaurus グリーン</Highlight> !

  7. Create a new documentation version in Docusaurus

    Docusaurus allows managing documentation across multiple versions. Running the docs:version command copies the current docs folder into a new versioned directory (e.g., versioned_docs/version-1.0) and updates the versions.json file.

    After creation, you will have two versions:

    • The specific version (e.g., 1.0) accessible at /docs/.
    • The current version (unreleased documentation for the next release) accessible at /docs/next/.
    bun docusaurus docs:version 1.0

  8. Test Docusaurus builds on Pull Requests

    A GitHub Action is configured to trigger a test build whenever a pull request is created against the main branch and files within @caravan-kidstec/docs/** are modified. This ensures that changes do not break the site build before merging.
    name: 🌐 Test deployment

on:
  pull_request:
    branches: main
    paths:
      - "@caravan-kidstec/docs/**"

permissions:
  contents: read
  pull-requests: write

jobs:
  test-deploy:
    name: Test deployment
    runs-on: ubuntu-latest
    steps:
      - name: 📥 Checkout
        uses: actions/checkout@v6
        with:
          fetch-depth: 0
          persist-credentials: false
      - name: 🐣 Install bun
        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76
        with:
          bun-version: canary

      - name: 📦 Install dependencies
        run: bun i --frozen-lockfile
      - name: 🌐 Test build website
        run: bun docs-build

  11. Embed images using absolute and relative paths

    Images can be referenced using standard Markdown syntax. You can use absolute paths to reference images in the static directory (e.g., static/img/) or relative paths to reference images stored near the Markdown file.
    # Absolute path (from static directory)
![caravan-kidstec logo](/img/caravan-kidstec.png)

# Relative path
![caravan-kidstec logo](./img/caravan-kidstec.png)

  12. Translate documentation files for a specific locale

    To translate a document, copy the original file from the docs folder into the corresponding locale directory under i18n. For example, to translate docs/intro.md into French (fr), place the translated version in i18n/fr/docusaurus-plugin-content-docs/current/intro.md.
    mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md