init

getmarkus · Dec 3, 2023 · d4d873c · d4d873c
1 parent 3ab9163
commit d4d873c
Show file tree

Hide file tree

Showing 29 changed files with 7,527 additions and 0 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,39 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [ main ]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v3
+      - name: Install, build, and upload your site
+        uses: withastro/action@v1
+        # with:
+          # path: . # The root location of your Astro project inside the repository. (optional)
+          # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
+          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+# build output
+# dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
diff --git a/.vscode/launch.json b/.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"
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,40 @@
+# Example template for the Ubuntu Vanilla CSS Component framework
+
+I have been working with Tailwind CSS recently and wow is it efficient to work with. But sometimes you need an "enterprise" friendly or more "industrial" look. 
+
+Then I found Ubuntu's [Vanilla](https://vanillaframework.io/) CSS framework. 
+
+Here is an [Astro](https://astro.build/) template to show off some capablities.
+
+* SASS/SCSS framework
+* Minimal
+* Well used and tested (Ubuntu products)
+* Alpine.js friendly
+* Permissive license
+
+Ubuntu* - not affiliated (just a fan)
+
+```
+npm create astro@latest -- --template getmarkus/astro-vanilla-framework
+```
+
+[Ubuntu Vanilla 4.0 announcement](https://ubuntu.com/blog/vanilla-4-0-release)
+[Ubuntu Vanilla release notes](https://github.com/canonical/vanilla-framework/releases/)
+
+### Attribution
+* [logo](https://logoipsum.com/)
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+import alpinejs from "@astrojs/alpinejs";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [alpinejs()]
+});
diff --git a/dist/.nojekyll b/dist/.nojekyll
diff --git a/dist/_astro/index.3443a3dc.css b/dist/_astro/index.3443a3dc.css
diff --git a/dist/_astro/logo.031beca1.svg b/dist/_astro/logo.031beca1.svg
diff --git a/dist/_astro/page.7730416e.js b/dist/_astro/page.7730416e.js
diff --git a/dist/favicon.svg b/dist/favicon.svg
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v3.6.4"><title>Astro template for the Ubuntu Vanilla CSS Framework</title><meta name="keywords" content="Astro, Vanilla, CSS, Framework, Canonical, static, site, generator, web, development, design, template, layout, Sass"><meta name="description" content="Vanilla Framework - a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team."><meta name="author" content="Christopher Markus"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><link rel="stylesheet" href="/_astro/index.3443a3dc.css" /><script type="module" src="/_astro/page.7730416e.js"></script></head> <body>  <div class="l-docs"> <div class="l-docs__header"> <header id="navigation" class="p-navigation is-dark"> <div class="l-docs__subgrid"> <div class="l-docs__sidebar"> <div class="p-navigation__banner"> <div class="p-navigation__tagged-logo"> <a class="p-navigation__link" href="#"> <div class="p-navigation__logo-tag"> <img class="p-navigation__logo-icon" src="/_astro/logo.031beca1.svg" alt=""> </div> <span class="p-navigation__logo-title">Your Co</span> </a> </div> <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a> <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a> </div> </div> <div class="l-docs__main"> <div class="p-navigation__row u-fixed-width"> <nav class="p-navigation__nav" aria-label="Example main"> <ul class="p-navigation__items"> <li class="p-navigation__item"> <a class="p-navigation__link" href="#">Products</a> </li> <li class="p-navigation__item"> <a class="p-navigation__link" href="#">Services</a> </li> <li class="p-navigation__item"> <a class="p-navigation__link" href="#">Partners</a> </li> <li class="p-navigation__item is-selected"> <a class="p-navigation__link" href="#">Docs</a> </li> </ul> </nav> </div> </div> </div> </header> <section id="search-docs" class="p-strip is-bordered is-shallow l-docs__subgrid"> <div class="l-docs__sidebar u-hide--medium u-hide--small"> <div class="u-fixed-width"> <h5 class="u-sv-2">Documentation example</h5> </div> </div> <div class="l-docs__main"> <div class="row"> <form class="p-search-box u-no-margin--bottom"> <input type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on"> <button type="reset" class="p-search-box__reset" name="close"> <i class="p-icon--close">Close</i> </button> <button type="submit" class="p-search-box__button" name="submitSearch"> <i class="p-icon--search">Search</i> </button> </form> </div> </div> </section> </div> <aside class="l-docs__sidebar"> <nav class="p-side-navigation--raw-html is-sticky" id="drawer" aria-label="Table of contents"> <div class="u-hide--large p-strip is-shallow"> <div class="u-fixed-width"> <a href="#drawer" class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
+Toggle side navigation
+</a> </div> </div> <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="drawer"></div> <div class="p-side-navigation__drawer"> <div class="p-side-navigation__drawer-header"> <a href="#" class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer">
+Toggle side navigation
+</a> </div> <h3>Side navigation</h3> <ul> <li> <a>First page</a> </li> <li> <a href="#">Second page</a> </li> <li> <a href="#">Third page</a> </li> <li> <strong>Sub section</strong> <ul> <li> <a href="#">Second level link</a> </li> <li> <a class="is-active" href="#">Current page</a> </li> <li> <a href="#">Another second level link</a> </li> </ul> </li> <li> <a href="#">Last page</a> </li> </ul> <ul> <li> <a href="#"><strong>Another group</strong></a> </li> <li> <a href="#">First page</a> </li> <li> <a href="#">Second page</a> </li> <li> <a href="#">Third page</a> </li> </ul> </div> </nav> </aside> <div class="l-docs__title" id="main-content"> <div class="p-section--shallow"> <div class="row"> <div class="col-12"> <h1>Your Co Documentation</h1> </div> </div> </div> </div> <div class="l-docs__meta"> <div class="l-docs__sticky-container"> <aside class="p-table-of-contents"> <div class="p-table-of-contents__section"> <h2 class="p-table-of-contents__header">On this page</h2> <nav class="p-table-of-contents__nav" aria-label="Table of contents"> <ul class="p-table-of-contents__list"> <li class="p-table-of-contents__item"> <a class="p-table-of-contents__link" href="#link1">Heading 1</a> </li> <li class="p-table-of-contents__item"> <a class="p-table-of-contents__link" href="#link2">Heading 2</a> </li> <li class="p-table-of-contents__item"> <a class="p-table-of-contents__link is-active" href="#link3">Heading 3</a> </li> <li class="p-table-of-contents__item"> <a class="p-table-of-contents__link" href="#link4">Heading 4</a> </li> </ul> </nav> </div> </aside> </div> </div> <main class="l-docs__main"> <div class="row"> <div class="col-12"> <h3>Vanilla Framework documentation for this page</h3> <ul> <li> <a href="https://vanillaframework.io/docs/layouts/documentation">documentation</a> </li> <li> <a href="https://vanillaframework.io/docs/examples/layouts/docs">example</a> </li> </ul> </div> </div> <div class="row"> <div class="col-12"> <h3>Other example layouts from the Vanilla Framework</h3> <ul> <li> <a href="https://vanillaframework.io/docs/examples/brochure/index">brochure page</a> </li> <li> <a href="https://vanillaframework.io/docs/examples/layouts/application/default">application/dashboard</a> </li> <li> <a href="https://vanillaframework.io/docs/examples/templates/vertical-spacing">vertical landing</a> </li> <li> <a href="https://vanillaframework.io/docs/examples/layouts/full-width/no-sidebar">full width</a> </li> <li> <a href="https://vanillaframework.io/docs/examples/layouts/full-width/default">full width with sidebar</a> </li> <li> <a href="https://vanillaframework.io/docs/examples/brochure/hero-50-50">hero 50/50</a> </li> <li> <a href="https://vanillaframework.io/docs/examples/brochure/hero-25-75">hero 25/75</a> </li> <li> <a href="https://vanillaframework.io/docs/examples/brochure/hero-75-offset">hero offset</a> </li> <li> <a href="https://vanillaframework.io/docs/examples">all examples</a> </li> </ul> <h3>Notifications</h3> <div class="p-notification"> <p class="p-notification__content">
+Vanilla Framwork 4.0 <a href="https://ubuntu.com/blog/vanilla-4-0-release">release announcement</a> </p> </div> <div class="p-notification"> <p class="p-notification__content">
+Vanilla Framwork Github <a href="https://github.com/canonical/vanilla-framework/releases/">releases</a> </p> </div> </div> </div> </main> <div class="l-docs__footer"> <footer class="p-strip--dark l-docs__subgrid"> <div class="l-docs__sidebar"> <p style="padding-left: 1.5rem">© 2023 Your Co</p> </div> <div class="l-docs__main"> <nav class="row" aria-label="Footer"> <div class="has-cookie"> <ul class="p-inline-list--middot"> <li class="p-inline-list__item"> <a class="is-dark" href="#"><small>Legal information</small></a> </li> <li class="p-inline-list__item"> <a class="is-dark" href="#"><small>Report a bug on this site</small></a> </li> </ul> <span class="u-off-screen"><a href="#">Go to the top of the page</a></span> </div> </nav> </div> </footer> </div> </div>  </body></html>
diff --git a/dist/robots.txt b/dist/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /