tall-blog
tall
tall-blog | tall | |
---|---|---|
2 | 4 | |
2 | 2,269 | |
- | 0.8% | |
0.0 | 6.7 | |
about 3 years ago | about 1 month ago | |
PHP | Blade | |
GNU General Public License v3.0 only | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
tall-blog
-
Creating Your First Blog With TALL - Part Eight
It's important to note that the project up to this phase is available here on GitHub. So if you're late to the party, you can clone it and continue with us. :)
-
Creating Your First Blog With TALL - Part Five
Note: There is a starter project up to this episode which can be accessed on Github here
tall
- A cli-tool that installs packages you'd want when starting a new Laravel Project
-
Is it dumb to learn laravel and vue.js at the same time?
Livewire will help with all the dynamic stuff. For example, create a model on the page, and have a table below populate with the new model, all without reloading. It's easy to learn as it's mostly the same syntax as Laravel itself. If you want a great pre-set framework, install this: https://github.com/laravel-frontend-presets/tall
-
Is Laravel still simple?
I would recommend people that don't want the complex Jetstream bits to use this ui preset. https://github.com/laravel-frontend-presets/tall
-
MarkdownX Editor ๐
MarkdownX is like a element with super powers โจ. It is a text editor with a beautiful interface that makes it easy for users to write in Markdown. The component has a pretty sweet dropdown that allows you to easily upload images, add lists, embed videos, and so much more!
A month ago we posted a tweet about a new editor we were building and it got a pretty huge response with nearly 500 likes and 50 retweets ๐คฏ
That set things in motion and we started working on a version that could be used with any Tallstack application. ๐.
I'll show you the steps below ๐ on how to install this in a new Tallstack app.
1. ๐ง Create a new Laravel App
The first step is creating a new Laravel application. If you already have an existing Tallstack application, you can skip ahead to step 3.
laravel new mdx
Enter fullscreen mode Exit fullscreen modeIn this example, I'll install a new laravel app in a folder named
mdx
.Then, go into that directory
cd mdx
, and we can move to the next step.2. ๐ฉ Installing the Tallstack Pre-set
The Tallstack preset allows us to add TailwindCSS, Alpine, and Livewire in our new application with a few simple commands. You can find that preset here: https://github.com/laravel-frontend-presets/tall.
Let's run those commands in our new application:
composer require livewire/livewire laravel-frontend-presets/tall php artisan ui tall npm install npm run dev
Enter fullscreen mode Exit fullscreen modeAfter we have run those commands, we should be able to visit our new site:
And we should have a new Tallstack application in front of us.
note: if you get an application key error, you may also need to run
php artisan key:generate
.Next up, we'll be moving the component files to our new application.
3. ๐งฉ Adding the MarkdownX Editor
Adding this component to your project is literally as easy as 1, 2, 3. Because that's how many files the MarkdownX editor includes. Here are those files:
- Controller - app/Http/Livewire/MarkdownX.php
- View - resources/views/livewire/markdown-x.blade.php
- Config - config/markdownx.php
After downloading a copy of the latest MarkdownX editor, you will need to move those files ๐ to their appropriate location in your Laravel application.
Note: make sure to run
php artisan storage:link
, if you want to test out image uploading. The MarkdownX storage uses the local public disk by default, but you can change this in the config ๐.After you have done this, we are now ready to test it out in our new application.
๐งช Test out the Editor
To test the editor in our new app we are going to modify the welcome page located at
resources/views/welcome.blade.php
, to look like this:
@extends('layouts.app') @section('content') @endsection
Enter fullscreen mode Exit fullscreen modeIf we visit our application homepage we'll see the editor in front of us ๐ค.
We can now drag-and-drop images, add videos, lists, and a bunch of other cool things that make writing more fun and easier than ever before.
Be sure to check out the official new landing page for MarkdownX here and the documentation here. I hope you find this component useful in your next project, and I hope you continue to build awesome stuff ๐ค. See you soon!
What are some alternatives?
filament - A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
laravel-simple-select - Laravel Simple Select inputs component for Blade and Livewire.
laravel-ui-adminlte - Laravel UI Frontend Preset for AdminLTE with Laravel Fortify support.
UNIT3D-Community-Edition - Private Torrent Tracker Built With Laravel, Livewire and AlpineJS.
tall-toasts - A Toast notification library for the Laravel TALL stack. You can push notifications from the backend or frontend to render customizable toasts with almost zero footprint on the published CSS/JS ๐ฅ๐
daybreak - Simple timesheets and vacation management for small businesses.
modal - Livewire component that provides you with a modal that supports multiple child modals while maintaining state.
guild - Guild - Build Your Guild and award employees with Crypto ๐ฐ