moeamaya

Building a Design System Documentation Site with Astro

This guide outlines how we at Operate set up an Astro-powered documentation site for our design system, with automatic content sourcing from your component library package. The project is led by Joe Bell.

Overview

This setup automatically generates documentation pages from markdown files located within your design system package (e.g., @org/pipeline). It uses Astro's content collections with the glob loader to source .md and .mdx files directly from node_modules.

Key Features

moeamaya

document.fonts.ready.then((fonts) => {
  const fontFaces = Array.from(fonts);
  console.log(fontFaces);
});

moeamaya

// Note this is against Twitter's Terms of Service, so it's just for fun :)

const btns = Array.from(document.querySelectorAll('[data-testid]'))
const unfollows = btns.filter(btn => btn.textContent == "Following")

for (let i = 0; i <= unfollows.length; i++){
	setTimeout(function () {   
		unfollows[i].click();
		setTimeout(function () {
			const confirm = document.querySelector('[data-testid="confirmationSheetConfirm"]');

moeamaya

{
  "project_type": "Prospect",
  "project": "2013120B",
  "start_date": "2017-11-13",
  "duration": 24,
  "fee_construction": 25000000,
  "fee_percent": 6,
  "fee_total": 1580000,
  "budget_pm_percentage": 9,
  "budget_reserve": 10,

moeamaya

class Organization < ApplicationRecord
  has_one :subscription
end

class Subscription < ApplicationRecord
  has_many :payments
  
  # stripe_id
  # plan_id
  # last_four

moeamaya

var DATA = {

  // Overall totals
  total_fee: 1700500, // dollars
  total_production: 1200500, // dollars
  total_pm: 150500, // dollars
  total_consultants: 200500, // dollars
  total_reserve: 130500, // dollars

  // Calendar Parameters

moeamaya

var DESIGN = {
  panelNumber: 3, // how many panels total
  overallWidth: 198, // inches
  overallHeight: 72, // inches
  panelWidth: 42, // inches, 33 for zinc
  panelHeight: 138, // inches
  crop: false, // stretch
  gridSize: 2, // inches, [0.1 - 2.0]
  gridType: "staggered", // [staggered, square]
  perfShape: "circle", // [circle, diamond, square, hexagon]

moeamaya

transition: cubic-bezier(0.16, 0.68, 0.43, 0.99);

moeamaya

 var sdk = new Flux(API_KEY, {baseUrl: 'https://flux.io'});

// The main view for the app
 var FluxApp = function() {
   var self = Object.create(FluxApp.prototype);

   var render = function() {
     var authView = AuthView();
   };

moeamaya

(function(){

  var $cta = $('.home-action');
  var DIV = 20;
  var verticalsArr = [];
  var verticalsArr2 = [];
  var state = 0;

  var width = $cta.width();