Docs improvements

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 dyvenia
+Copyright (c) 2023
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

dev/example_project/pyproject.toml

@@ -13,7 +13,7 @@ dependencies = [
 name = "cotton-dev-app"
 version = "0.1"
 description = "Development and test app for the django package."
-authors = ["Will Abbott <wabbott@dyvenia.com>"]
+authors = ["Will Abbott <willabb83@gmail.com>"]
 
 [tool.poetry.dependencies]
 python = "^3.8"

docs/docs_project/docs_project/settings.py

@@ -27,7 +27,7 @@ SECRET_KEY = "django-insecure-%)7a&zw=le4uey^36*z*9^4#*iii65t)nyt$36mxq70@=(z6^n
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ["0.0.0.0", "django-cotton.com"]
+ALLOWED_HOSTS = ["0.0.0.0", "django-cotton.com", "www.django-cotton.com"]
 
 
 # Application definition

docs/docs_project/docs_project/templates/components.cotton.html

@@ -69,7 +69,7 @@ def weather_view(request):
 {% endcotton_verbatim %}{% endverbatim %}
 </c-snippet>
 
-    <h3 id="named-slots">Passing other types of data using named slots</h3>
+    <h3 id="named-slots">Named slots</h3>
 
     <p>There are occasions when you will need to pass different types of content other than a simple string or variable to a component. In these cases, you can use <c-highlight>named slots</c-highlight>.</p>
 
@@ -116,14 +116,14 @@ def weather_view(request):
 <c-input name="last_name" placeholder="Last name" value="Smith" readonly  />
 {% endcotton_verbatim %}{% endverbatim %}
 <c-slot name="preview">
-    <div class="mb-2"><input type="text" autocomplete="off" class="border px-2 py-1 shadow" name="first_name" placeholder="First name" /></div>
-    <div><input type="text" autocomplete="off" class="border px-2 py-1 shadow" name="last_name" placeholder="Last name" value="Smith" readonly /></div>
+    <div class="mb-2"><input type="text" autocomplete="off" class="border px-2 py-1 shadow rounded" name="first_name" placeholder="First name" /></div>
+    <div><input type="text" autocomplete="off" class="border px-2 py-1 shadow rounded" name="last_name" placeholder="Last name" value="Smith" readonly /></div>
 </c-slot>
 </c-snippet>
 
-    <h3 id="boolean-attributes">Boolean Attributes</h3>
+    <h3 id="boolean-attributes">Boolean attributes</h3>
 
-    <p>Sometimes you just want to pass a simple boolean to a component so Cotton supports providing the attribute name without a value which will provide a boolean True to the component. (This is an <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes">html spec</a>).</p>
+    <p>Sometimes you just want to pass a simple boolean to a component. Cotton supports providing the attribute name without a value which will provide a boolean True to the component.</p>
 
 <c-snippet label="input.cotton.html">{% cotton_verbatim %}{% verbatim %}
 <input type="text" {{ attrs }} />
@@ -138,7 +138,7 @@ def weather_view(request):
 <c-input name="telephone" required />
 {% endcotton_verbatim %}{% endverbatim %}
 <c-slot name="preview">
-    <input type="text" autocomplete="off" class="border px-2 py-1 shadow" name="telephone" placeholder="Telephone" /> <span class="text-red-500 text-3xl">*</span>
+    <input type="text" autocomplete="off" class="border px-2 py-1 shadow rounded" name="telephone" placeholder="Telephone" /> <span class="text-red-500 text-3xl">*</span>
 </c-slot>
 </c-snippet>
 
@@ -197,11 +197,11 @@ def weather_view(request):
 <c-slot name="preview">
     <div class="mb-1">
         <label>First name</label><br>
-        <input type="text" autocomplete="off" class="border px-2 py-1" name="first_name" placeholder="First name" />
+        <input type="text" autocomplete="off" class="border px-2 py-1 rounded" name="first_name" placeholder="First name" />
     </div>
     <div>
         <label>Last name</label><br>
-        <input type="text" autocomplete="off" class="border px-2 py-1" name="last_name" placeholder="Last name" /><br>
+        <input type="text" autocomplete="off" class="border px-2 py-1 rounded" name="last_name" placeholder="Last name" /><br>
         <div class="text-sm text-red-500">Last name is required</div>
     </div>
 </c-slot>

docs/docs_project/docs_project/templates/cotton/layouts/base.cotton.html

@@ -28,7 +28,7 @@
 <body class="bg-amber-50 dark:bg-gray-900 flex flex-col min-h-screen bg-fixed text-[16.5px]">
     <c-navbar />
 
-    <div class="flex flex-1">
+    <div class="flex-1">
         {{ slot }}
     </div>
 

docs/docs_project/docs_project/templates/cotton/navbar.cotton.html

@@ -1,4 +1,4 @@
-<div class="py-5 border-opacity-15 relative z-10" :class="{'bg-white dark:bg-gray-800': isOpen}"
+<div class="py-5 sticky top-0 md:top-auto bg-amber-50 dark:bg-gray-900 border-opacity-15 relative z-10" :class="{'bg-white dark:bg-gray-800': isOpen}"
      x-data="{isOpen: false}"
      x-init="
         window.addEventListener('resize', () => {

docs/docs_project/docs_project/templates/cotton/sidebar.cotton.html

@@ -1,4 +1,4 @@
-<div class="sticky top-6 pb-6 pt-2">
+<div class="sticky top-16 md:top-3 pb-6 pt-2">
     <c-sidebar-block>
         <c-slot name="title">Getting Started</c-slot>
         <ul>

docs/docs_project/docs_project/templates/home.cotton.html

@@ -1,8 +1,8 @@
 <c-layouts.with-sidebar hide_index="true">
 
-    <div class="max-w-5xl mx-auto px-3">
+    <div class="max-w-5xl mx-auto px-0">
         <div class="text-center mx-auto max-w-4xl leading-normal mb-6">
-            <h1 class="text-4xl md:text-5xl mb-15 dark:text-gray-200 font-medium mb-3 inline-flex flex-wrap items-center justify-center space-x-3 space-y-3">
+            <h1 class="text-4xl md:text-5xl mb-15 dark:text-gray-200 font-medium mb-3 inline-flex flex-wrap items-center justify-center space-x-2 md:space-x-3 space-y-3">
                 <span class="w-full md:w-auto">Goodbye</span>
                 <c-tag class="text-xl sm:text-2xl md:text-4xl">
                     {% verbatim %}{% extends %}{% endverbatim %}
@@ -28,7 +28,7 @@
         </div>
 
         <div class="grid md:grid-cols-2 gap-4">
-            <div class="col-span-1 flex flex-col">
+            <div class="col-span-1 flex flex-col overflow-x-auto">
                 <h2 class="!font-normal !text-xl mb-3 mt-0 text-center"><span class="font-semibold">Before:</span> Verbose, Rigid</h2>
                 <div class="flex h-full rounded-xl overflow-hidden">
                     <c-demo.snippet-tabs labels="'view.html|product_layout.html'" tabs_id="compare">

docs/docs_project/pyproject.toml

@@ -19,7 +19,7 @@ authors = [
 name = "cotton-docs-app"
 version = "0.1"
 description = "Docs site for django_cotton."
-authors = ["Will Abbott <wabbott@dyvenia.com>"]
+authors = ["Will Abbott <willabb83@gmail.com>"]
 
 [tool.poetry.dependencies]
 python = "^3.8"

pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "poetry.core.masonry.api"
 name = "django-cotton"
 version = "0.9.3"
 description = "Bringing component based design to Django templates."
-authors = [ "Will Abbott <wabbott@dyvenia.com>",]
+authors = [ "Will Abbott <willabb83@gmail.com>",]
 license = "MIT"
 readme = "README.md"
 classifiers = [ "Development Status :: 3 - Alpha", "Intended Audience :: Developers", "License :: OSI Approved :: MIT License", "Programming Language :: Python :: 3.10", "Framework :: Django",]