feat: init app base component

JulianCataldo · Jun 19, 2022 · 4b5da37 · 4b5da37
1 parent c0af6c1
commit 4b5da37
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 0 deletions.
diff --git a/app/Base/Base.astro b/app/Base/Base.astro
@@ -0,0 +1,50 @@
+---
+export interface Props {
+  lang?: string;
+  htmlClasses?: string[];
+  bodyClasses?: string[];
+  htmlId?: string;
+  bodyId?: string;
+}
+
+const props = Astro.props as Props;
+
+if (!props.lang) {
+  props.lang = 'en';
+}
+if (!props.htmlClasses) {
+  props.htmlClasses = [];
+}
+if (!props.bodyClasses) {
+  props.bodyClasses = [];
+}
+if (!props.htmlId) {
+  props.htmlId = null;
+}
+if (!props.bodyId) {
+  props.bodyId = null;
+}
+---
+
+<!DOCTYPE html>
+<html lang={props.lang} class:list={[...props.htmlClasses]} id={props.htmlId}>
+  <head>
+    <script is:inline>
+      // CRITICAL
+      // Add 'js' class to HTML tag if JavaScript is enabled
+      (() => {
+        const root = document.getElementsByTagName('html')[0];
+        root.classList.add('js');
+      })();
+    </script>
+
+    <meta charset='UTF-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+
+    <slot name='head'></slot>
+  </head>
+
+  <body class:list={[...props.bodyClasses]} id={props.bodyId}>
+    <slot name='body'></slot>
+  </body>
+</html>
diff --git a/app/Base/index.js b/app/Base/index.js
@@ -0,0 +1,3 @@
+import Base from './Base.astro';
+
+export default Base;
diff --git a/app/Base/package.json b/app/Base/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@julian_cataldo/astro-base",
+  "version": "0.9.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JulianCataldo/astro",
+    "directory": "app/Base"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "boilerplate",
+    "app",
+    "base",
+    "wrapper",
+    "javascript",
+    "html",
+    "document"
+  ],
+  "author": "",
+  "license": "ISC"
+}