Explore Landing Page Ideas for 2023 #7175
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
typo : "fibrant" should surely be "vibrant"! Also: for newcomers, I'd urge highlighting tiddlyhost as the best initial setup. It would allow us to postpone the "... needs some help saving to file ... wide variety of methods..." grimace. |
linonetwo
reviewed
Feb 21, 2023
| @@ -0,0 +1 @@ | |||
| [{"text":"<section id=\"get-started\" class=\"text-gray-600 bg-white body-font\">\n <div class=\"container mx-auto flex px-5 py-24 items-center justify-center flex-col\">\n <div class=\"text-center lg:w-2/3 w-full\">\n \t\t<h2 class=\"mb-1 text-xs font-medium tracking-widest text-green-500 title-fon\">Get started</h2>\n \t\t<h1 class=\"title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 mt-0\">Choose a way to save</h1>\n \t<p class=\"mb-8 text-base leading-relaxed text-left text-gray-700\">TiddlyWiki needs some help saving to file. By default, it writes the whole file every time you press save. To remedy this there's a wide variety of methods available, with different features and limitations. Click on the badge for a method to see more information about it. You can also click on one of the platform filters to restrict the listing to methods that work with that platform.</p>\n <div class=\"flex justify-center items-center\">\n\t\t\t\t{{landing page download empty}}\n\t\t\t\t<hr class=\"shadow\">\n </div>\n </div>\n\t\t<br>\n\t\t{{Saving}}\n </div>\n</section>","title":"Landing page getting started","tags":"","modified":"20210423113421188","created":"20210415094718280"},{"text":"Go to the control panel -> Appearance -> Layout. Then click on Landingpage to view it.\n\nAlternatively, press `ctrl`+`shift`+`L` to bring up a the page shift modal to select a layout.\n\nWhen on the landing page, pressing the `documentation` button on the navbar or the button or the `try it out` button brings you to the normal page layout.\n","title":"Landing page instructions","modified":"20210423121155832","created":"20210423115811312"},{"text":"{{landing page navbar}}\n\n{{landing page home}}\n\n{{landing page features}}\n\n{{landing page themes}}\n\n{{Landing page showcase}}\n\n{{landing page community}}\n\n{{Landing page getting started}}\t\n\n{{landing page testemonials}}\n\n{{landing page footer}}\n","title":"Landing page layout","tags":"$:/tags/Layout","name":"Landingpage","modified":"20210423114412387","description":"A landingpage for TiddlyWiki","created":"20210414165130837"},{"text":"<section id=\"showcase\" class=\"text-gray-600 body-font bg-white\">\n <div class=\"container px-5 py-24 mx-auto\">\n\t\t<h2 class=\"mb-1 text-xs font-medium tracking-widest text-green-500 title-font text-center pb-2\">WikiText</h2>\n <h1 class=\"text-3xl font-medium title-font text-gray-900 mb-12 text-center mt-0\">Use wigdets to add rich functionality</h1>\n\t\t<div class=\"flex flex-wrap -m-4\">\n <div class=\"p-4 md:w-1/2 w-full\">\n <div class=\"h-full p-2\">\n\n```\n! Outstanding tasks\n\n<<list-tagged-draggable tag:\"task\" subFilter:\"!has[draft.of]!tag[done]\" itemTemplate:\"TaskManagementExampleDraggableTemplate\" emptyMessage:\"You don't have any active tasks\">>\n\n! Completed tasks\n\n//(Listed in reverse order of completion)//\n\n<$list filter=\"[!has[draft.of]tag[task]tag[done]sort[created]]\">\n<div>\n<$checkbox tag=\"done\"> ~~<$link/>~~</$checkbox>\n</div>\n</$list>\n```\n\n\n </div>\n </div>\n <div class=\"p-4 md:w-1/2 w-full\">\n <div class=\"h-full p-8 bg-gray-100 rounded\">\n{{TaskManagementExample (Draggable)}}\n\n\n </div>\n </div>\n </div>\n\t\n </div>\n</section>","title":"Landing page showcase","tags":"","modified":"20210423114750267","created":"20210423103059225"},{"text":".container {\n width: 100%\n}\n\n@media (min-width: 640px) {\n .container {\n max-width: 640px\n }\n}\n\n@media (min-width: 768px) {\n .container {\n max-width: 768px\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px\n }\n}\n\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px\n }\n}\n\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px\n }\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity))\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgba(243, 244, 246, var(--tw-bg-opacity))\n}\n\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgba(229, 231, 235, var(--tw-bg-opacity))\n}\n\n.bg-gray-500 {\n --tw-bg-opacity: 1;\n background-color: rgba(107, 114, 128, var(--tw-bg-opacity))\n}\n\n.bg-gray-600 {\n --tw-bg-opacity: 1;\n background-color: rgba(75, 85, 99, var(--tw-bg-opacity))\n}\n\n.bg-green-300 {\n --tw-bg-opacity: 1;\n background-color: rgba(110, 231, 183, var(--tw-bg-opacity))\n}\n\n.bg-green-500 {\n --tw-bg-opacity: 1;\n background-color: rgba(16, 185, 129, var(--tw-bg-opacity))\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgba(59, 130, 246, var(--tw-bg-opacity))\n}\n\n.hover\\:bg-green-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(167, 243, 208, var(--tw-bg-opacity))\n}\n\n.hover\\:bg-green-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(5, 150, 105, var(--tw-bg-opacity))\n}\n\n.hover\\:bg-blue-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(37, 99, 235, var(--tw-bg-opacity))\n}\n\n.focus\\:bg-purple-400:focus {\n --tw-bg-opacity: 1;\n background-color: rgba(167, 139, 250, var(--tw-bg-opacity))\n}\n\n.border-transparent {\n border-color: transparent\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.border-0 {\n border-width: 0px\n}\n\n.border {\n border-width: 1px\n}\n\n.border-b {\n border-bottom-width: 1px\n}\n\n.block {\n display: block\n}\n\n.flex {\n display: flex\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.table {\n display: table\n}\n\n.hidden {\n display: none\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.flex-wrap {\n flex-wrap: wrap\n}\n\n.items-start {\n align-items: flex-start\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.flex-grow {\n flex-grow: 1\n}\n\n.flex-shrink-0 {\n flex-shrink: 0\n}\n\n.order-first {\n order: -9999\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.font-extrabold {\n font-weight: 800\n}\n\n.h-5 {\n height: 1.25rem\n}\n\n.h-full {\n height: 100%\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem\n}\n\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\n}\n\n.leading-5 {\n line-height: 1.25rem\n}\n\n.leading-6 {\n line-height: 1.5rem\n}\n\n.leading-8 {\n line-height: 2rem\n}\n\n.leading-relaxed {\n line-height: 1.625\n}\n\n.leading-loose {\n line-height: 2\n}\n\n.list-none {\n list-style-type: none\n}\n\n.-m-4 {\n margin: -1rem\n}\n\n.my-12 {\n margin-top: 3rem;\n margin-bottom: 3rem\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto\n}\n\n.mb-1 {\n margin-bottom: 0.25rem\n}\n\n.mt-0 {\n\tmargin-top: 0rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem\n}\n\n.mt-3 {\n margin-top: 0.75rem\n}\n\n.mb-3 {\n margin-bottom: 0.75rem\n}\n\n.ml-3 {\n margin-left: 0.75rem\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.ml-4 {\n margin-left: 1rem\n}\n\n.mr-5 {\n margin-right: 1.25rem\n}\n\n.mb-6 {\n margin-bottom: 1.5rem\n}\n\n.mt-8 {\n margin-top: 2rem\n}\n\n.mb-8 {\n margin-bottom: 2rem\n}\n\n.mt-10 {\n margin-top: 2.5rem\n}\n\n.mb-10 {\n margin-bottom: 2.5rem\n}\n\n.mb-12 {\n margin-bottom: 3rem\n}\n\n.mb-16 {\n margin-bottom: 4rem\n}\n\n.-mb-10 {\n margin-bottom: -2.5rem\n}\n\n.max-w-3xl {\n max-width: 48rem\n}\n\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover\n}\n\n.object-center {\n -o-object-position: center;\n object-position: center\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-4 {\n padding: 1rem\n}\n\n.p-5 {\n padding: 1.25rem\n}\n\n.p-6 {\n padding: 1.5rem\n}\n\n.p-8 {\n padding: 2rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem\n}\n\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-16 {\n padding-top: 4rem;\n padding-bottom: 4rem\n}\n\n.py-24 {\n padding-top: 6rem;\n padding-bottom: 6rem\n}\n\n.pt-4 {\n padding-top: 1rem\n}\n\n.pl-4 {\n padding-left: 1rem\n}\n\n.pt-8 {\n padding-top: 2rem\n}\n\n.pb-8 {\n padding-bottom: 2rem\n}\n\n.static {\n position: static\n}\n\n* {\n --tw-shadow: 0 0 #0000\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n* {\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgba(59, 130, 246, 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000\n}\n\n.text-left {\n text-align: left\n}\n\n.text-center {\n text-align: center\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgba(0, 0, 0, var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity))\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgba(156, 163, 175, var(--tw-text-opacity))\n}\n\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgba(107, 114, 128, var(--tw-text-opacity))\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgba(75, 85, 99, var(--tw-text-opacity))\n}\n\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgba(55, 65, 81, var(--tw-text-opacity))\n}\n\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgba(17, 24, 39, var(--tw-text-opacity))\n}\n\n.text-green-500 {\n --tw-text-opacity: 1;\n color: rgba(16, 185, 129, var(--tw-text-opacity))\n}\n\n.hover\\:text-gray-800:hover {\n --tw-text-opacity: 1;\n color: rgba(31, 41, 55, var(--tw-text-opacity))\n}\n\n.hover\\:text-gray-900:hover {\n --tw-text-opacity: 1;\n color: rgba(17, 24, 39, var(--tw-text-opacity))\n}\n\n.hover\\:text-blue-500:hover {\n --tw-text-opacity: 1;\n color: rgba(59, 130, 246, var(--tw-text-opacity))\n}\n\n.tracking-tight {\n letter-spacing: -0.025em\n}\n\n.tracking-widest {\n letter-spacing: 0.1em\n}\n\n.w-5 {\n width: 1.25rem\n}\n\n.w-64 {\n width: 16rem\n}\n\n.w-5\\/6 {\n width: 83.333333%\n}\n\n.w-full {\n width: 100%\n}\n\n.gap-x-4 {\n -moz-column-gap: 1rem;\n column-gap: 1rem\n}\n\n.transition {\n transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.duration-150 {\n transition-duration: 150ms\n}\n\n@-webkit-keyframes spin {\n to {\n transform: rotate(360deg)\n }\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg)\n }\n}\n\n@-webkit-keyframes ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0\n }\n}\n\n@keyframes ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0\n }\n}\n\n@-webkit-keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n@-webkit-keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n animation-timing-function: cubic-bezier(0.8,0,1,1)\n }\n\n 50% {\n transform: none;\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n animation-timing-function: cubic-bezier(0,0,0.2,1)\n }\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n animation-timing-function: cubic-bezier(0.8,0,1,1)\n }\n\n 50% {\n transform: none;\n -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n animation-timing-function: cubic-bezier(0,0,0.2,1)\n }\n}\n\n@media (min-width: 640px) {\n .sm\\:hidden {\n display: none\n }\n\n .sm\\:flex-row {\n flex-direction: row\n }\n\n .sm\\:flex-shrink-0 {\n flex-shrink: 0\n }\n\n .sm\\:text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\n }\n\n .sm\\:text-4xl {\n font-size: 2.25rem;\n line-height: 2.5rem\n }\n\n .sm\\:leading-9 {\n line-height: 2.25rem\n }\n\n .sm\\:mt-0 {\n margin-top: 0px\n }\n\n .sm\\:ml-3 {\n margin-left: 0.75rem\n }\n\n .sm\\:max-w-md {\n max-width: 28rem\n }\n\n .sm\\:text-left {\n text-align: left\n }\n\n .sm\\:w-full {\n width: 100%\n }\n}\n\n@media (min-width: 768px) {\n .md\\:border-b-0 {\n border-bottom-width: 0px\n }\n\n .md\\:border-r {\n border-right-width: 1px\n }\n\n .md\\:flex-row {\n flex-direction: row\n }\n\n .md\\:flex-nowrap {\n flex-wrap: nowrap\n }\n\n .md\\:items-start {\n align-items: flex-start\n }\n\n .md\\:items-center {\n align-items: center\n }\n\n .md\\:m-14 {\n margin: 3.5rem\n }\n\n .md\\:mx-0 {\n margin-left: 0px;\n margin-right: 0px\n }\n\n .md\\:mt-0 {\n margin-top: 0px\n }\n\n .md\\:mb-0 {\n margin-bottom: 0px\n }\n\n .md\\:ml-auto {\n margin-left: auto\n }\n\n .md\\:py-12 {\n padding-top: 3rem;\n padding-bottom: 3rem\n }\n\n .md\\:px-12 {\n padding-left: 3rem;\n padding-right: 3rem\n }\n\n .md\\:pl-16 {\n padding-left: 4rem\n }\n\n .md\\:pr-20 {\n padding-right: 5rem\n }\n\n .md\\:text-left {\n text-align: left\n }\n\n .md\\:w-1\\/2 {\n width: 50%\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:border-r-0 {\n border-right-width: 0px\n }\n\n .lg\\:border-b-0 {\n border-bottom-width: 0px\n }\n\n .lg\\:border-r {\n border-right-width: 1px\n }\n\n .lg\\:block {\n display: block\n }\n\n .lg\\:inline-block {\n display: inline-block\n }\n\n .lg\\:flex-row {\n flex-direction: row\n }\n\n .lg\\:items-start {\n align-items: flex-start\n }\n\n .lg\\:items-center {\n align-items: center\n }\n\n .lg\\:flex-grow {\n flex-grow: 1\n }\n\n .lg\\:max-w-lg {\n max-width: 32rem\n }\n\n .lg\\:p-5 {\n padding: 1.25rem\n }\n\n .lg\\:py-16 {\n padding-top: 4rem;\n padding-bottom: 4rem\n }\n\n .lg\\:px-16 {\n padding-left: 4rem;\n padding-right: 4rem\n }\n\n .lg\\:px-28 {\n padding-left: 7rem;\n padding-right: 7rem\n }\n\n .lg\\:pl-24 {\n padding-left: 6rem\n }\n\n .lg\\:w-1\\/3 {\n width: 33.333333%\n }\n\n .lg\\:w-2\\/3 {\n width: 66.666667%\n }\n\n .lg\\:w-1\\/4 {\n width: 25%\n }\n\n .lg\\:w-5\\/6 {\n width: 83.333333%\n }\n\n .lg\\:w-full {\n width: 100%\n }\n}\n\n@media (min-width: 1280px) {\n .xl\\:block {\n display: block\n }\n\n .xl\\:flex {\n display: flex\n }\n\n .xl\\:items-center {\n align-items: center\n }\n\n .xl\\:flex-1 {\n flex: 1 1 0%\n }\n\n .xl\\:mt-0 {\n margin-top: 0px\n }\n\n .xl\\:ml-8 {\n margin-left: 2rem\n }\n\n .xl\\:w-0 {\n width: 0px\n }\n}\n\n@media (min-width: 1536px) {\n .\\32xl\\:block {\n display: block\n }\n}\n\n/* some additions made by odin */\n\n#navbar a {\n\ttext-decoration: none;\n\tcolor: black;\n}\n\n#navbar button {\n\tborder: 0px;\n}\n\n#home a {\n\ttext-decoration: none;\n}\n\n#transclusion-item {\n\tborder: none;\n\tmargin: 0;\n\tpadding: 0;\n\twidth: auto;\n\toverflow: visible;\n\tbackground: transparent;\n\tcolor: inherit;\n\tfont: inherit;\n\tline-height: normal;\n\t-webkit-font-smoothing: inherit;\n\t-moz-osx-font-smoothing: inherit;\n\t-webkit-appearance: none;\n}\n","type":"text/css","title":"Landing page styles.css","tags":"$:/tags/Stylesheet","modified":"20210423114904940","created":"20210416115430571"},{"text":"<section id=\"community\" class=\"md:m-14 px-6 py-6 bg-green-500 dark:bg-gray-800 rounded-lg md:py-12 md:px-12 lg:py-16 lg:px-16 xl:flex xl:items-center\">\n\t\t\t<div class=\"xl:w-0 xl:flex-1\">\n\t\t\t\t\t<h2 class=\"text-2xl leading-8 font-extrabold tracking-tight text-white sm:text-3xl sm:leading-9\">\n\t\t\t\t\t\t\tTiddlyWiki has a fibrant community and a plugin library maintained by its users \n\t\t\t\t\t</h2>\n\t\t\t\t\t<p class=\"mt-3 max-w-3xl text-lg leading-6 text-white\">\n\t\t\t\t\t\t\tOver the years users have made and shared many plugins, palletes themes and editions. Installing is as simple as drag and drop into your own wiki. Head over to the <strong>TiddlyWiki Community Links Aggregator</strong> to check them out.\n\t\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<div class=\"mt-8 sm:w-full sm:max-w-md xl:mt-0 xl:ml-8\">\n\t\t\t\t\t<div class=\"mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0\">\n\t\t\t\t\t\t\t<button href=\"https://links.tiddlywiki.com/\" class=\"w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-green-300 hover:bg-green-200 focus:outline-none focus:bg-purple-400 transition duration-150 ease-in-out\">\n\t\t\t\t\t\t\t\t\tGo to the Community Links Aggregator\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p class=\"mt-3 text-sm leading-5 text-white\">\n\t\t\t\t\t\t\tVisit the plugin's website to try out the plugin. Carefully read the installing instructions and back up before installing. These plugins may not always be up to date and may contain bugs or unwanted behaviour!\n\t\t\t\t\t</p>\n\t\t\t</div>\n</section>","title":"landing page community","tags":"","modified":"20210423114643419","created":"20210415075843432"},{"text":"<$button class=\"inline-flex items-center text-white bg-blue-500 border-0 py-2 px-6 focus:outline-none hover:bg-blue-600 rounded text-lg\">\n<$action-sendmessage $message=\"tm-download-file\" $param=\"$:/editions/tw5.com/download-empty\" filename=\"empty.html\"/>\nDownload Empty {{$:/core/images/save-button}}\n</$button>","type":"text/vnd.tiddlywiki","title":"landing page download empty","tags":"","modified":"20210415113935964","created":"20210415112909844"},{"text":"<section id=\"customize\" class=\"container mx-auto px-6 p-6 bg-white dark:bg-gray-800\">\n <div class=\"mb-16 text-center\">\n\t\t\t<h2 class=\"mb-1 text-xs font-medium tracking-widest text-green-500 title-font\">Create</h2>\n <p class=\"title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 font-semibold mt-0\">\n Customize TiddlyWiki for any usecase you can imagine\n </p>\n </div>\n <div class=\"flex flex-wrap my-12 dark:text-white\">\n <div class=\"w-full border-b md:w-1/2 md:border-r lg:w-1/3 p-8\">\n <div class=\"flex items-center mb-6\">\n {{$:/images/templarian-material-design/note-text}}\n <div class=\"ml-4 text-xl\">\n Zettelkasten\n </div>\n </div>\n <p class=\"leading-loose text-gray-500 dark:text-gray-200 text-md\">\n Store all your notes inside TiddlyWiki and create relationships using links and tags.\n </p>\n </div>\n <div class=\"w-full border-b md:w-1/2 lg:w-1/3 lg:border-r p-8\">\n <div class=\"flex items-center mb-6\">\n {{$:/images/font-awesome/solid/book}}\n <div class=\"ml-4 text-xl\">\n Diary\n </div>\n </div>\n <p class=\"leading-loose text-gray-500 dark:text-gray-200 text-md\">\n TiddlyWiki is perfect for keeping an diary. Not satisfied with other solutions? Create your own personal diary app on top of TiddlyWiki!\n </p>\n </div>\n <div class=\"w-full border-b md:w-1/2 md:border-r lg:w-1/3 lg:border-r-0 p-8\">\n <div class=\"flex items-center mb-6\">\n {{$:/images/templarian-material-design/web}}\n <div class=\"ml-4 text-xl\">\n Static page generator\n </div>\n </div>\n <p class=\"leading-loose text-gray-500 dark:text-gray-200 text-md\">\n Use TiddlyWIki as a static page generator for your blog or site. Create content in TiddlyWiki and let TiddlyWiki create the static pages.\n </p>\n </div>\n <div class=\"w-full border-b md:w-1/2 lg:w-1/3 lg:border-r lg:border-b-0 p-8\">\n <div class=\"flex items-center mb-6\">\n {{$:/images/svg-icon/library-11}}\n <div class=\"ml-4 text-xl\">\n Writing\n </div>\n </div>\n <p class=\"leading-loose text-gray-500 dark:text-gray-200 text-md\">\n Write a novel or your thesis in TiddlyWiki. Store your research notes, write each chapter seperatly and stich it together for the final version. \n </p>\n </div>\n <div class=\"w-full border-b md:w-1/2 md:border-r md:border-b-0 lg:w-1/3 lg:border-b-0 p-8\">\n <div class=\"flex items-center mb-6\">\n\t\t\t\t\t\t\t\t{{$:/images/font-awesome/solid/brain}}\n <div class=\"ml-4 text-xl\">\n Knowlegde base\n </div>\n </div>\n <p class=\"leading-loose text-gray-500 dark:text-gray-200 text-md\">\n TiddlyWiki is great for creating a knowledge base for you or your company. TiddlyWiki doesn't impose a structure and let's you free to create your own.\n </p>\n </div>\n <div class=\"w-full md:w-1/2 lg:w-1/3 p-8\">\n <div class=\"flex items-center mb-6\">\n {{$:/images/font-awesome/solid/handshake}}\n <div class=\"ml-4 text-xl\">\n Share\n </div>\n </div>\n <p class=\"leading-loose text-gray-500 dark:text-gray-200 text-md\">\n TiddlyWiki is a single file that is easy to open and to share. Import a plugin to create slideshows turn TiddlyWik into a tool for education.\n </p>\n </div>\n </div>\n</section>\n","title":"landing page features","tags":"","modified":"20210423114005555","created":"20210415080452675"},{"text":"<footer class=\"text-gray-600 body-font\">\n <div class=\"container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col\">\n <div class=\"w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10\">\n <a class=\"flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0\">\n\t\t\t\t\t\t{{landing page icon}}\n <span class=\"ml-3 text-xl\">TiddlyWiki</span>\n </a>\n <p class=\"mt-2 text-sm text-gray-500\">Made by Jeremy Ruston.</p>\n </div>\n <div class=\"flex-grow flex flex-wrap md:pr-20 -mb-10 md:text-left text-center order-first\">\n <div class=\"lg:w-1/4 md:w-1/2 w-full px-4\">\n <h2 class=\"title-font font-medium text-gray-900 tracking-widest text-sm mb-3\">About</h2>\n <nav class=\"list-none mb-10\">\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<$list filter=\"[tag[About]]\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t</$list>\n\t\t\t\t\t</ul>\t\n </nav>\n </div>\n <div class=\"lg:w-1/4 md:w-1/2 w-full px-4\">\n <h2 class=\"title-font font-medium text-gray-900 tracking-widest text-sm mb-3\">Links</h2>\n <nav class=\"list-none mb-10\">\n <li>\n <a target=\"_blank\" href=\"https://github.com/Jermolene/TiddlyWiki5\" class=\"text-gray-600 hover:text-black-800\">Github</a>\n </li>\n <li>\n <a target=\"_blank\" href=\"https://groups.google.com/forum/#!forum/tiddlywiki\" class=\"text-gray-600 hover:text-gray-800\">Google Groups</a>\n </li>\n <li>\n <a target=\"_blank\" href=\"https://tiddlywiki.fission.app/\" class=\"text-gray-600 hover:text-gray-800\">TiddlyWiki on Fission</a>\n </li>\n </nav>\n </div>\n\t\t</div>\n </div>\n <div class=\"bg-gray-600\">\n <div class=\"container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row\">\n <p class=\"text-white text-sm text-center sm:text-left\">Made by Odin. Build with Tailwindcss and TiddlyWiki.\n </p>\n </div>\n </div>\n</footer>\n","title":"landing page footer","tags":"","modified":"20210415134831270","created":"20210415124253537"},{"text":"<section id=\"home\" class=\"text-gray-600 body-font\">\n <div class=\"container mx-auto flex px-5 py-24 md:flex-row flex-col items-center\">\n <div id=\"transclusion-item\" class=\"lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0 lg:p-5 sm:hidden mb:block lg:block xl:block 2xl:block \">\n\t\t\t\t\t\t{{TiddlyWiki||$:/core/ui/ViewTemplate}}\n </div>\n <div class=\"lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center\">\n\t\t\t\t\t\t<h2 class=\"mb-1 text-xs font-medium tracking-widest text-black title-font text-green-500\">TiddlyWiki</h2>\n <h1 class=\"title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 font-semibold mt-0\">Looking for a customizable\n <br class=\"hidden lg:inline-block\">notetaking platform?\n </h1>\n <p class=\"mb-8 leading-relaxed\"><strong>TiddlyWiki</strong> is designed to fit around your brain, helping you deal with the things that won't fit. The fundamental idea is that information is more useful and reusable if we cut it up into the smallest semantically meaningful chunks: <strong>Tiddlers</strong>. Tiddlers use a <strong>WikiText</strong> notation that concisely represents a wide range of text formatting and hypertext features. TiddlyWiki allows you to organise and retrieve your notes in ways that conform to your personal thought patterns, rather than chain you into one preset organisational structure.</p>\n <div class=\"flex justify-center items-center gap-x-4\">\n <a href=\"#get-started\" class=\"inline-flex text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded text-lg\">Get started</a>\n\t\t\t\t\t\t\t<$button class=\"inline-flex items-center text-white bg-gray-500 border-0 py-2 px-6 focus:outline-none hover:bg-blue-600 rounded text-lg\" set=\"$:/layout\" setTo=\"$:/core/ui/PageTemplate\">Try it out!</$button>\n\t\t\t\t\t\t\t\n </div>\n </div>\n </div>\n </section>","title":"landing page home","tags":"","modified":"20210423113404597","created":"20210415104647817"},{"text":"<?xml version=\"1.0\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xl=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"34 107 510 317\" width=\"60pt\" height=\"36pt\"><metadata xmlns:dc=\"http://purl.org/dc/elements/1.1/\"><dc:date>2012-05-10 07:32Z</dc:date><!-- Produced by OmniGraffle Professional 5.3.6 --></metadata><defs></defs><g stroke=\"none\" stroke-opacity=\"1\" stroke-dasharray=\"none\" fill=\"none\" fill-opacity=\"1\"><title>Canvas 1</title><g><title>Layer 1</title><path d=\"M 204.10294 372.67294 L 206.91333 373.50204 C 210.44484 371.92197 217.54364 374.36401 221.30923 375.55795 C 214.37523 367.871 203.92865 356.58286 196.40225 349.4665 C 193.93185 340.85104 194.98593 332.1817 195.51744 323.3866 L 195.62405 322.659 C 192.65733 329.6997 188.89246 336.5437 186.86893 343.95477 C 184.50095 353.95294 197.39323 364.74045 202.39233 370.92294 Z M 419.00293 414.95798 C 399.65295 414.411 391.14194 414.45804 381.28735 398.25296 L 373.60684 398.473 C 364.66696 398.076 368.39264 398.25595 362.42844 397.95901 C 352.45654 397.57098 354.05396 388.09604 352.29965 383.09003 C 349.49335 366.09698 356.01324 349.01611 355.80756 332.01971 C 355.73474 325.98639 347.19724 304.63062 344.14716 296.99548 C 334.58554 298.79572 324.97205 299.13895 315.27176 299.62231 C 292.91254 299.56754 270.70496 296.8295 248.65794 293.35248 C 244.36153 311.10052 231.59093 335.94183 242.14684 353.9793 C 254.95975 372.63696 263.95123 377.80597 277.88824 378.93094 C 291.8251 380.055 294.97214 395.78998 291.60031 401.40997 C 288.61584 405.294 283.37045 405.99902 278.91385 406.94 L 269.99945 407.35898 C 262.98456 407.12299 256.71454 405.229 250.46393 402.30798 C 240.02545 396.48102 229.24443 384.36703 221.23434 375.67001 C 223.09915 379.143 224.21146 385.92294 222.52005 389.07803 C 217.78415 395.78699 197.30133 395.746 187.92093 391.577 C 177.26495 386.84198 151.51596 353.59503 147.53493 328.69455 C 158.12593 308.66583 173.55493 291.2196 181.36093 269.41132 C 164.34593 258.55438 155.23293 240.88019 156.41594 220.8598 L 156.84294 218.5423 C 140.10095 221.67648 148.78296 220.51039 130.772964 221.87279 C 73.41696 221.6973 22.976959 182.80795 51.378967 122.367004 C 53.225952 118.787964 54.982956 115.534 58.113968 117.08801 C 60.626953 118.33496 60.265976 123.33699 59.001953 128.88399 C 42.766968 201.10277 122.11395 201.65552 170.88995 188.29181 C 175.73093 186.96521 185.35893 178.03061 192.02843 175.0687 C 202.93033 170.22757 214.76323 168.2634 226.50644 166.84811 C 255.71411 163.51997 290.81815 178.90649 308.65442 179.4089 C 326.4909 179.91129 351.86395 175.13808 367.43942 176.14308 C 378.74075 176.66016 389.83795 178.70007 400.74194 181.6059 C 407.79996 147.215 408.29895 121.867996 425.03094 116 C 434.85095 117.550995 442.4179 130.93298 448.01895 138.08301 L 448.04193 138.07898 C 459.4489 137.62897 470.30396 140.52301 481.09692 143.73497 C 500.63696 140.962006 517.03394 129.989 534.28992 121.45299 C 534.23596 121.721985 533.95398 121.81297 533.78595 121.99397 C 516.80396 135.72798 514.4319 158.952 516.42993 180.42822 C 517.17297 191.57237 514.02393 203.67166 510.13098 215.08179 C 502.84595 233.67169 488.77692 253.26677 472.44794 252.26176 C 466.27496 252.0665 462.68893 248.57117 458.10095 244.83946 C 457.21094 252.39809 453.71295 259.14267 450.34094 265.82758 C 442.55396 280.64941 422.20496 287.18097 403.36292 303.00763 C 384.52216 318.83453 409.39194 375.35904 415.42194 385.65802 C 421.45096 395.95798 438.28192 399.72598 431.75095 409.02194 C 429.75296 412.09198 426.69794 413.19 423.43292 414.38098 Z\" fill=\"rgba(16, 185, 129)\"/></g></g></svg>\n","type":"image/svg+xml","title":"landing page icon","tags":"","modified":"20210415110605628","created":"20210415110423817"},{"text":"<div id=\"navbar\" class=\"text-gray-600 body-font\">\n <div class=\"container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center\">\n <a class=\"flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0\">\n\t\t\t\t\t\t{{landing page icon}}\n <span class=\"ml-3 text-xl\">TiddlyWiki</span>\n </a>\n <nav class=\"md:ml-auto flex flex-wrap items-center text-base justify-center\">\n <a class=\"mr-5 hover:text-gray-900\" href=\"#customize\">Customize</a>\n <a class=\"mr-5 hover:text-gray-900\" href=\"#theme\">Theme</a>\n\t\t\t\t\t\t<a class=\"mr-5 hover:text-gray-900\" href=\"#showcase\">WikiText</a>\n\t\t\t\t\t\t<a class=\"mr-5 hover:text-gray-900\" href=\"#community\">Community</a>\n\t\t\t\t\t\t<a class=\"mr-5 hover:text-gray-900\" href=\"#get-started\">Get started</a>\n </nav>\n<$button class=\"bg-gray-200 p-2 flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0\" set=\"$:/layout\" setTo=\"$:/core/ui/PageTemplate\">\nDocumentation\n</$button>\n </div>\n</div>","title":"landing page navbar","tags":"","modified":"20210423115059469","created":"20210415105553535"},{"text":" <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"block w-5 h-5 text-gray-400 mb-4\" viewBox=\"0 0 975.036 975.036\">\n <path d=\"M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z\"></path>\n </svg>","title":"landing page qoute icon","tags":"","modified":"20210415132844264","created":"20210415132834232"},{"text":"<section id=\"testemonials\" class=\"text-gray-600 body-font bg-white\">\n <div class=\"container px-5 py-24 mx-auto\">\n\t\t<h2 class=\"mb-1 text-xs font-medium tracking-widest text-black title-font text-green-500 text-center\">Reviews</h2>\n <h1 class=\"text-3xl font-medium title-font text-gray-900 mb-12 mt-0 text-center\">Testimonials</h1>\n <div class=\"flex flex-wrap -m-4\">\n <div class=\"p-4 md:w-1/2 w-full\">\n <div class=\"h-full bg-gray-100 p-8 rounded\">\n {{landing page qoute icon}}\n <p class=\"leading-relaxed mb-6\"><strong>The TiddlyWiki is the best software I've ever found for organising my ideas.</strong> It's well worth spending an hour or so playing with it to see how it can help you. This will be time well-spent and will change how you think and how you organise your ideas.</p>\n <a href=\"https://joearms.github.io/#Index\" class=\"inline-flex items-center \">\n <span class=\"flex-grow flex flex-col pl-4 hover:text-blue-500\">\n <span class=\"title-font font-medium text-gray-900\">Joe Armstrong</span>\n <span class=\"text-gray-500 text-sm\">Co-inventor of Erlang</span>\n </span>\n </a>\n </div>\n </div>\n <div class=\"p-4 md:w-1/2 w-full\">\n <div class=\"h-full bg-gray-100 p-8 rounded\">\n {{landing page qoute icon}}\n <p class=\"leading-relaxed mb-6\"><strong>TiddlyWiki gets a Gearhead rating of 6 out of 5 (it's that good).</strong>\n\nFinding code that works flawlessly after just two or three years is magical enough but after seven years?!</p>\n <a href=\"https://www.networkworld.com/article/3028098/tiddlywiki-a-free-open-source-wiki-revisited.html\" class=\"inline-flex items-center pt-4\">\n <span class=\"flex-grow flex flex-col pl-4 pt-8 hover:text-blue-500\">\n <span class=\"title-font font-medium text-gray-900\">Mark Gibbs</span>\n <span class=\"text-gray-500 text-sm\">Network World</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n\t\t\t\t<div class=\"flex justify-center items-center pb-8\" style=\"font-size:0.7em;text-align:center;margin:3em auto;\">{{Product Hunt Link}}</div>\n</section>","title":"landing page testemonials","tags":"","modified":"20210423114217652","created":"20210415131406020"},{"text":" <section id=\"theme\" class=\"text-gray-700 body-font\">\n <div class=\"container flex flex-col px-5 py-16 mx-auto lg:items-center md:flex-row lg:px-28\">\n <div class=\"flex flex-col items-start text-left lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16\">\n <h2 class=\"mb-1 text-xs font-medium tracking-widest text-black title-font text-green-500\">Customize</h2>\n <h1 class=\"title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 mt-0\">\n Add a little color</h1>\n <p class=\"mb-8 text-base leading-relaxed text-left text-gray-700\">Use themes and palletes to customize TiddlyWiki to your tastes. Use one from the prebundled palettes, install a community made or create your own.</p>\n <div class=\"flex flex-col justify-left lg:flex-row\">\n\n </div>\n </div>\n\t\t\t\t\t\t\t\t <div class=\"w-full mb-10 lg:w-5/6 lg:max-w-lg md:w-1/2\">\n <img class=\"object-cover object-center rounded\" alt=\"example of themes\"\n src=\"https://i.imgur.com/klxNpR9.png\">\n </div>\n </div>\n </section>\n ","title":"landing page themes","tags":"","modified":"20210423114034868","created":"20210415093249376"}] | |||
There was a problem hiding this comment.
Why not make them separate tiddlers, so It's easier for editions like tiddloid and tidgi to copy this to make standard/simillar landing pages?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In April 2021, TiddlyTalk user Odin created an experimental landing page for TiddlyWiki that came up in recent discussion about landing pages
https://landingpage-example.tiddlyhost.com
Go to control panel → Appearance → Layout and switch to the landing page layout to see it.
This PR takes Odin's landing page but instead of using it as an alternative layout, it transcludes the landing page into the "before story" area, and then uses absolute positioning to stretch it to cover the available space. Thus it ends up behind any opened tiddlers.
When a tiddler is opened, the landing page is faded and made smaller so that the tiddlers above it are more prominent. To return to the landing page one simply closes the last tiddler.
To try it, out click on the link below to visit the Vercel preview for this PR.