Initial commit

Author: st3phhays

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 4

.gitignore

@@ -0,0 +1,30 @@
+# build output
+dist/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+/test-results/
+/playwright-report/
+/playwright/.cache/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "cSpell.words": [
+        "Abbreviations",
+        "Blockquotes",
+        "cheatsheet"
+    ]
+}

.yarn/releases/yarn-3.2.4.cjs

@@ -0,0 +1,3 @@
+yarnPath: .yarn/releases/yarn-3.2.4.cjs
+nodeLinker: node-modules
+checksumBehavior: "update"

.yarnrc.yml

@@ -0,0 +1,14 @@
+import { defineConfig } from 'astro/config';
+import sitemap from "@astrojs/sitemap";
+
+export default defineConfig({
+  markdown: {
+    shikiConfig: {
+      theme: 'dracula',
+      langs: [],
+      wrap: false,
+    },
+  },
+  site: "https://bootstrappretty.dev",
+  integrations: [sitemap()]
+});

README.md

@@ -0,0 +1,37 @@
+{
+  "name": "bootstrap-pretty-docs",
+  "packageManager": "[email protected]",
+  "type": "module",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "description": "Pretty and flexible themes for Bootstrap 5.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bootstrap-pretty/bootstrap-pretty-docs.git"
+  },
+  "author": "Bootstrap Pretty (https://bootstrappretty.dev)",
+  "bugs": {
+    "url": "https://github.com/bootstrap-pretty/bootstrap-pretty-docs/issues"
+  },
+  "homepage": "https://github.com/bootstrap-pretty/bootstrap-pretty-docs#readme",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/sitemap": "^1.0.0",
+    "@popperjs/core": "^2.11.6",
+    "anchor-js": "^5.0.0",
+    "astro": "^1.6.0",
+    "astro-icon": "^0.8.0",
+    "bootstrap-pretty": "0.2.0",
+    "clipboard": "^2.0.11",
+    "sass": "^1.55.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.28.1"
+  }
+}

astro.config.mjs

@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: '././src/tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome']
+      },
+    },
+
+    /*{
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox']
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari']
+      },
+    },*/
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

bootstrap-pretty-icon.ico

@@ -0,0 +1,25 @@
+---
+const paths = Astro.url.pathname.split('/').filter(x => x);
+let parts = [
+    {
+        text: 'Home',
+        href: '/'
+    }
+];
+// Capitalize first route (posts && tags)
+paths[0] === paths[0] && paths.splice(0, 1, paths[0].charAt(0).toUpperCase() + paths[0].slice(1));
+paths.forEach((text, i) => {
+    const href = `/${paths.slice(0, i + 1).join('/')}`;
+    parts.push({ text: text, href})
+})
+---
+
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        {parts.map(({ text, href }, index) => 
+            <li class={`breadcrumb-item ${index + 1 === parts.length ? "active" : ""}`} role="listitem" aria-current={index + 1 === parts.length ? "page" : false}>
+                {index + 1 !== parts.length ? <a href={href.toLowerCase()}>{text}</a> : decodeURIComponent(text)}
+            </li>
+        )}
+    </ol>
+</nav>

package.json

@@ -0,0 +1,15 @@
+---
+import NavigationLinks from '@components/NavigationLinks.astro';
+import { SITE } from '@config';
+---
+
+<footer class="flex-shrink-0 text-center rounded-4 mb-n2 border text-bg-tertiary-bg">
+    <div class="container-xxl">
+        <p class="my-3">Copyright &copy; {new Date().getFullYear()} - {SITE.title}</p>
+        <!-- <nav class="navbar navbar-expand">
+            <ul class="navbar-nav mx-auto mx-md-end">
+                <NavigationLinks />
+            </ul>
+        </nav> -->
+    </div>
+</footer>

playwright.config.ts

@@ -0,0 +1,33 @@
+---
+import NavigationLinks from '@components/NavigationLinks.astro';
+import { SITE } from '@config';
+import { Icon } from 'astro-icon';
+import ThemeToggle from 'bootstrap-pretty/components/astro/ThemeToggle.astro';
+import PaletteSelector from '@components/PaletteSelector.astro';
+const iconComponent = Icon;
+const { showPaletteSelector } = Astro.props;
+---
+
+<header class="py-3 rounded-4 mt-n2 border text-bg-tertiary-bg">
+    <nav class="navbar navbar-expand justify-content-between container-xxl px-3">
+        <div class="d-flex">
+            <a class="navbar-brand" href="/">
+                Bootstrap <span class="font-handwriting text-primary">Pretty</span>
+            </a>
+            <!-- <div>
+                <ul class="navbar-nav">
+                    <NavigationLinks />
+                </ul>
+            </div> -->
+        </div>
+        <div class="d-flex align-items-center">
+            <a href={SITE.gitHubUrl} target="_blank" rel="noreferrer" title="Visit Bootstrap Pretty on GitHub"><Icon class="w-25-px me-4" name="bi:github" /></a>
+            {
+                showPaletteSelector && (
+                    <PaletteSelector />
+                )
+            }
+            <ThemeToggle iconComponent={iconComponent} />
+        </div>
+    </nav>
+</header>

public/android-chrome-192x192.png

@@ -0,0 +1,12 @@
+---
+import { NAVIGATION_LINKS } from '@config';
+const url = new URL(Astro.request.url);
+---
+
+{
+    NAVIGATION_LINKS.filter(link => link.showInNav).map((link, index) => (
+        <li class="nav-item">
+            <a class={`nav-link ${index === 0 ? "ps-0" : ""} ${url.pathname.includes(link.slug) ? "active" : ""}`} href={`/${link.slug}`} aria-current={url.pathname.includes(link.slug) ? "page" : false}>{link.title}</a>
+        </li>
+    ))
+}

public/android-chrome-512x512.png

@@ -0,0 +1,8 @@
+---
+import Breadcrumb from "@components/Breadcrumb.astro";
+const { title, description } = Astro.props;
+---
+
+<Breadcrumb />
+<h1 class="mb-0"><strong>{title}</strong></h1>
+<p class="mb-5">{description}</p>

public/apple-touch-icon.png

@@ -0,0 +1,25 @@
+---
+const { palettes } = Astro.props;
+---
+
+<div class="row">
+    {palettes.map((palette: { slug: string; title: string; palette: string; description: string; tags: string[]; }) =>
+        <div class="col-sm-6 col-lg-4 mb-3">
+            <div class="card h-100">
+                <a href={`/${palette.slug}`} title={palette.title}>
+                    <img class="card-img-top border-bottom" src={`/images/playwright/${palette.slug}/${palette.palette}.png`} alt={palette.title}>
+                </a>
+                <div class="card-body">
+                    <p class="card-title lead mx-1">{palette.title}</p>
+                    <p class="card-text mx-1">{palette.description}</p>
+                    <ul class="list-inline">
+                        {palette.tags.map((tag: string) => (
+                            <li class="list-inline-item m-1"><a class="btn btn-sm btn-primary" href={`/palettes/tags/${tag}`}>#{tag}</a></li>
+                        ))}
+                    </ul>
+                    <a class="btn btn-link" href={`/${palette.slug}`}>View</a>
+                </div>
+            </div>
+        </div>
+    )}
+</div>

public/favicon-16x16.png

@@ -0,0 +1,14 @@
+---
+import PALETTES from 'bootstrap-pretty/palettes.json';
+const featuredPalettes = PALETTES.filter(x => x.tags.includes("featured"));
+---
+
+<select id="paletteSelector" class="form-select me-3" aria-label="Palette Selector">
+    {featuredPalettes.map(palette =>
+        <option value={palette.title}>{palette.title}</option>
+    )}
+</select>
+
+<script>
+    import "../scripts/body-bootstrap-pretty-palette-selector";
+</script>