swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #35 from DioxusLabs/jk/formatting-and-extension

Browse Source 
Formatting and extension
This commit is contained in:
Jon Kelley authored and GitHub committed 2022-12-25 23:39:45 -05:00
2 parents b482b4c35d 230c83c35b
commit 75e005f761
19 files changed
+3861 -1297
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.gitignore
+2 -2
View File
@@ -1,4 +1,4 @@
/target
Cargo.lock
.DS_Store
.idea/
.DS_Store
Cargo.lock
Generated
+60 -3
View File
@@ -29,6 +29,17 @@ dependencies = [
"opaque-debug",
]
[[package]]
name = "ahash"
version = "0.7.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "fcb51a0695d8f838b1ee009b3fbf66bda078cd64590202a864a8f3e8c4315c47"
dependencies = [
"getrandom 0.2.8",
"once_cell",
"version_check",
]
[[package]]
name = "aho-corasick"
version = "0.7.20"
@@ -649,6 +660,20 @@ dependencies = [
"subtle",
]
[[package]]
name = "dioxus-autofmt"
version = "0.0.0"
source = "git+https://github.com/dioxuslabs/dioxus#641488e825d861a14670ba7a15a535e76d3cee7a"
dependencies = [
"dioxus-rsx",
"prettyplease",
"proc-macro2",
"quote",
"serde",
"syn",
"triple_accel",
]
[[package]]
name = "dioxus-cli"
version = "0.3.0"
@@ -664,6 +689,7 @@ dependencies = [
"colored 2.0.0",
"convert_case",
"ctrlc",
"dioxus-autofmt",
"dioxus-core",
"dioxus-html",
"dioxus-rsx",
@@ -700,7 +726,7 @@ dependencies = [
[[package]]
name = "dioxus-core"
version = "0.2.1"
source = "git+https://github.com/dioxuslabs/dioxus#3824f386f7118999be739e92ac4f320f88979e06"
source = "git+https://github.com/dioxuslabs/dioxus#641488e825d861a14670ba7a15a535e76d3cee7a"
dependencies = [
"bumpalo",
"futures-channel",
@@ -717,10 +743,11 @@ dependencies = [
[[package]]
name = "dioxus-html"
version = "0.2.1"
source = "git+https://github.com/dioxuslabs/dioxus#3824f386f7118999be739e92ac4f320f88979e06"
source = "git+https://github.com/dioxuslabs/dioxus#641488e825d861a14670ba7a15a535e76d3cee7a"
dependencies = [
"async-trait",
"dioxus-core",
"dioxus-rsx",
"enumset",
"euclid",
"keyboard-types",
@@ -732,8 +759,10 @@ dependencies = [
[[package]]
name = "dioxus-rsx"
version = "0.0.1"
source = "git+https://github.com/dioxuslabs/dioxus#3824f386f7118999be739e92ac4f320f88979e06"
source = "git+https://github.com/dioxuslabs/dioxus#641488e825d861a14670ba7a15a535e76d3cee7a"
dependencies = [
"dioxus-core",
"internment",
"proc-macro2",
"quote",
"serde",
@@ -1094,6 +1123,9 @@ name = "hashbrown"
version = "0.12.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
dependencies = [
"ahash",
]
[[package]]
name = "headers"
@@ -1391,6 +1423,16 @@ dependencies = [
"cfg-if",
]
[[package]]
name = "internment"
version = "0.7.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2a798d7677f07d6f1e77be484ea8626ddb1566194de399f1206306820c406371"
dependencies = [
"hashbrown",
"parking_lot",
]
[[package]]
name = "ipconfig"
version = "0.3.1"
@@ -1986,6 +2028,15 @@ version = "0.2.17"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5b40af805b3121feab8a3c29f04d8ad262fa8e0561883e7653e024ae4479e6de"
[[package]]
name = "prettyplease"
version = "0.1.15"
source = "git+https://github.com/DioxusLabs/prettyplease-macro-fmt.git#05cc781b2997966fc2f2ff3409a5433e9d4f559f"
dependencies = [
"proc-macro2",
"syn",
]
[[package]]
name = "proc-macro-error"
version = "1.0.4"
@@ -2837,6 +2888,12 @@ dependencies = [
"once_cell",
]
[[package]]
name = "triple_accel"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "22048bc95dfb2ffd05b1ff9a756290a009224b60b2f0e7525faeee7603851e63"
[[package]]
name = "trust-dns-proto"
version = "0.22.0"
Cargo.toml
+7 -2
View File
@@ -74,8 +74,13 @@ mlua = { version = "0.8.1", features = [
ctrlc = "3.2.3"
# dioxus-rsx = "0.0.1"
dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus" }
dioxus-html = { git = "https://github.com/DioxusLabs/dioxus", features = ["hot-reload-context"] }
dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", features = ["serialize"] }
dioxus-html = { git = "https://github.com/DioxusLabs/dioxus", features = [
"hot-reload-context",
] }
dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", features = [
"serialize",
] }
dioxus-autofmt = { git = "https://github.com/dioxuslabs/dioxus" }
[[bin]]
path = "src/main.rs"
build.rs
+50
View File
@@ -0,0 +1,50 @@
//! Construct version in the `commit-hash date channel` format
use std::{env, path::PathBuf, process::Command};
fn main() {
set_rerun();
set_commit_info();
if option_env!("CFG_RELEASE").is_none() {
println!("cargo:rustc-env=POKE_RA_DEVS=1");
}
}
fn set_rerun() {
println!("cargo:rerun-if-env-changed=CFG_RELEASE");
let mut manifest_dir = PathBuf::from(
env::var("CARGO_MANIFEST_DIR").expect("`CARGO_MANIFEST_DIR` is always set by cargo."),
);
while manifest_dir.parent().is_some() {
let head_ref = manifest_dir.join(".git/HEAD");
if head_ref.exists() {
println!("cargo:rerun-if-changed={}", head_ref.display());
return;
}
manifest_dir.pop();
}
println!("cargo:warning=Could not find `.git/HEAD` from manifest dir!");
}
fn set_commit_info() {
let output = match Command::new("git")
.arg("log")
.arg("-1")
.arg("--date=short")
.arg("--format=%H %h %cd")
.output()
{
Ok(output) if output.status.success() => output,
_ => return,
};
let stdout = String::from_utf8(output.stdout).unwrap();
let mut parts = stdout.split_whitespace();
let mut next = || parts.next().unwrap();
println!("cargo:rustc-env=RA_COMMIT_HASH={}", next());
println!("cargo:rustc-env=RA_COMMIT_SHORT_HASH={}", next());
println!("cargo:rustc-env=RA_COMMIT_DATE={}", next())
}
extension/DEV.md
+10
View File
@@ -0,0 +1,10 @@
## packaging
```
$ cd myExtension
$ vsce package
# myExtension.vsix generated
$ vsce publish
# <publisherID>.myExtension published to VS Code Marketplace
```
extension/README.md
-10
View File
@@ -12,13 +12,3 @@ Converts a selection of html to valid rsx.
### Convert HTML to Dioxus Component
Converts a selection of html to a valid Dioxus component with all SVGs factored out into their own module.
## packaging
```
$ cd myExtension
$ vsce package
# myExtension.vsix generated
$ vsce publish
# <publisherID>.myExtension published to VS Code Marketplace
```
extension/dist/.gitignore
+2
View File
@@ -0,0 +1,2 @@
**
!.gitignore
extension/package-lock.json
Generated
+3245 -1191
View File
File diff suppressed because it is too large. Load diff
extension/package.json
+45 -20
View File
@@ -1,26 +1,29 @@
{
"name": "dioxusstudio",
"displayName": "dioxusStudio",
"description": "Toolkit for IDE support in Dioxus apps",
"name": "dioxus",
"displayName": "Dioxus",
"description": "Useful tools for working with Dioxus",
"version": "0.0.1",
"publisher": "jkelleyrtp",
"publisher": "DioxusLabs",
"private": true,
"license": "MIT",
"icon": "static/icon.png",
"repository": {
"type": "git",
"url": "https://github.com/Microsoft/vscode-extension-samples"
"url": "https://github.com/DioxusLabs/cli"
},
"engines": {
"vscode": "^1.32.0"
"vscode": "^1.68.1"
},
"categories": [
"Other"
"Programming Languages"
],
"activationEvents": [
"onCommand:extension.htmlToDioxusRsx",
"onCommand:extension.htmlToDioxusComponent"
"onCommand:extension.htmlToDioxusComponent",
"onCommand:extension.formatRsx",
"onCommand:extension.formatRsxDocument"
],
"main": "./out/extension",
"main": "./out/main",
"contributes": {
"commands": [
{
@@ -30,22 +33,44 @@
{
"command": "extension.htmlToDioxusComponent",
"title": "Dioxus: Convert HTML to Component"
},
{
"command": "extension.formatRsx",
"title": "Dioxus: Format RSX"
},
{
"command": "extension.formatRsxDocument",
"title": "Dioxus: Format RSX Document"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"lint": "eslint . --ext .ts,.tsx",
"watch": "tsc -watch -p ./",
"package": "vsce package"
"vscode:prepublish": "npm run build-base -- --minify",
"package": "vsce package -o rust-analyzer.vsix",
"build-base": "esbuild ./src/main.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node --target=node16",
"build": "npm run build-base -- --sourcemap",
"watch": "npm run build-base -- --sourcemap --watch",
"lint": "prettier --check . && eslint -c .eslintrc.js --ext ts ./src ./tests",
"fix": "prettier --write . && eslint -c .eslintrc.js --ext ts ./src ./tests --fix",
"pretest": "tsc && npm run build",
"test": "cross-env TEST_VARIABLE=test node ./out/tests/runTests.js"
},
"devDependencies": {
"@types/node": "^12.12.0",
"@types/vscode": "^1.32.0",
"@typescript-eslint/eslint-plugin": "^4.16.0",
"@typescript-eslint/parser": "^4.16.0",
"eslint": "^7.21.0",
"typescript": "^4.3.5"
"@types/node": "^18.0.2",
"@types/vscode": "^1.68.1",
"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"cross-env": "^7.0.3",
"esbuild": "^0.14.27",
"eslint": "^8.19.0",
"typescript": "^4.7.4",
"eslint-config-prettier": "^8.5.0",
"ovsx": "^0.5.1",
"prettier": "^2.6.2",
"tslib": "^2.3.0",
"vsce": "^2.7.0"
},
"dependencies": {
"vsce": "^2.9.2"
}
}
extension/server/.gitignore
+3
View File
@@ -0,0 +1,3 @@
**
!Readme.md
!.gitignore
extension/src/extension.ts
-32
View File
@@ -1,32 +0,0 @@
import * as vscode from 'vscode';
import { spawn } from "child_process";
export function activate(context: vscode.ExtensionContext) {
function registerCommand(cmd: string) {
function convert(cmd: string) {
const editor = vscode.window.activeTextEditor;// Get the active text editor
if (editor) {
const html = editor.document.getText(editor.selection);
if (html.length > 0) {
let params = ["translate"];
if (cmd.includes("Component")) params.push("--component");
params.push("--source");
params.push(html);
const child_proc = spawn("dioxus", params);
let result = '';
child_proc.stdout?.on('data', data => result += data);
child_proc.on('close', () => {
if (result.length > 0) editor.edit(editBuilder => editBuilder.replace(editor.selection, result));
});
} else {
vscode.window.showWarningMessage("Please select HTML fragment before invoking this command!");
}
}
}
const handle = vscode.commands.registerCommand(cmd, () => convert(cmd));
context.subscriptions.push(handle);
}
registerCommand('extension.htmlToDioxusRsx');
registerCommand('extension.htmlToDioxusComponent');
}
extension/src/main.ts
+184
View File
@@ -0,0 +1,184 @@
import * as vscode from 'vscode';
import { spawn } from "child_process";
let serverPath: string = "dioxus";
export async function activate(context: vscode.ExtensionContext) {
let somePath = await bootstrap(context);
if (somePath == undefined) {
await vscode.window.showErrorMessage('Could not find bundled Dioxus-CLI. Please install it manually.');
return;
} else {
serverPath = somePath;
}
context.subscriptions.push(
// vscode.commands.registerTextEditorCommand('editor.action.clipboardPasteAction', onPasteHandler),
vscode.commands.registerCommand('extension.htmlToDioxusRsx', translateBlock),
vscode.commands.registerCommand('extension.htmlToDioxusComponent', translateComponent),
vscode.commands.registerCommand('extension.formatRsx', fmtSelection),
vscode.commands.registerCommand('extension.formatRsxDocument', formatRsxDocument),
vscode.workspace.onWillSaveTextDocument(fmtDocument)
);
}
function translateComponent() {
translate(true)
}
function translateBlock() {
translate(false)
}
function translate(component: boolean) {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
const html = editor.document.getText(editor.selection);
if (html.length == 0) {
vscode.window.showWarningMessage("Please select HTML fragment before invoking this command!");
return;
}
let params = ["translate"];
if (component) params.push("--component");
params.push("--raw", html);
const child_proc = spawn(serverPath, params);
let result = '';
child_proc.stdout?.on('data', data => result += data);
child_proc.on('close', () => {
if (result.length > 0) editor.edit(editBuilder => editBuilder.replace(editor.selection, result));
});
child_proc.on('error', (err) => {
vscode.window.showWarningMessage(`Errors occurred while translating. Make sure you have the most recent Dioxus-CLI installed! \n${err}`);
});
}
function onPasteHandler() {
// check settings to see if we should convert HTML to Rsx
if (vscode.workspace.getConfiguration('dioxus').get('convertOnPaste')) {
convertHtmlToRsxOnPaste();
}
}
function convertHtmlToRsxOnPaste() {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
// get the cursor location
const cursor = editor.selection.active;
// try to parse the HTML at the cursor location
const html = editor.document.getText(new vscode.Range(cursor, cursor));
}
function formatRsxDocument() {
const editor = vscode.window.activeTextEditor;
if (editor) {
fmtDocument();
}
}
function fmtSelection() {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
const unformatted = editor.document.getText(editor.selection);
if (unformatted.length == 0) {
vscode.window.showWarningMessage("Please select rsx invoking this command!");
return;
}
const child_proc = spawn(serverPath, ["fmt", "--raw", unformatted.toString()]);
let result = '';
child_proc.stdout?.on('data', data => result += data);
child_proc.on('close', () => {
if (result.length > 0) editor.edit(editBuilder => editBuilder.replace(editor.selection, result));
});
child_proc.on('error', (err) => {
vscode.window.showWarningMessage(`Errors occurred while translating. Make sure you have the most recent Dioxus-CLI installed! \n${err}`);
});
}
function fmtDocument() {
const editor = vscode.window.activeTextEditor;
const document = editor?.document;
if (!document) return;
// check the settings to make sure format on save is configured
if (document.languageId === "rust" && document.uri.scheme === "file") {
const active_editor = vscode.window.activeTextEditor;
if (active_editor?.document.fileName === document.fileName) {
const text = document.getText();
const child_proc = spawn("dioxus", ["fmt", "-f", text]);
let result = '';
child_proc.stdout?.on('data', data => result += data);
type RsxEdit = {
formatted: string,
start: number,
end: number
}
child_proc.on('close', () => {
if (result.length > 0) {
let decoded: RsxEdit[] = JSON.parse(result);
if (decoded.length > 0) {
active_editor.edit(editBuilder => {
decoded.map((edit) => {
editBuilder.replace(new vscode.Range(
document.positionAt(edit.start),
document.positionAt(edit.end)
), edit.formatted);
});
}, {
undoStopAfter: false,
undoStopBefore: false
})
}
}
});
child_proc.on('error', (err) => {
vscode.window.showWarningMessage(`Errors occurred while translating. Make sure you have the most recent Dioxus-CLI installed! \n${err}`);
});
}
}
}
// I'm using the approach defined in rust-analyzer here
//
// We ship the server as part of the extension, but we need to handle external paths and such
//
// https://github.com/rust-lang/rust-analyzer/blob/fee5555cfabed4b8abbd40983fc4442df4007e49/editors/code/src/main.ts#L270
async function bootstrap(context: vscode.ExtensionContext): Promise<string | undefined> {
const ext = process.platform === "win32" ? ".exe" : "";
const bundled = vscode.Uri.joinPath(context.extensionUri, "server", `dioxus${ext}`);
const bundledExists = await vscode.workspace.fs.stat(bundled).then(
() => true,
() => false
);
// if bunddled doesn't exist, try using a locally-installed version
if (!bundledExists) {
return "dioxus";
}
return bundled.fsPath;
}
extension/static/icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

src/cli/autoformat/mod.rs
+76
View File
@@ -0,0 +1,76 @@
use std::process::exit;
use super::*;
/// Build the Rust WASM app and all of its assets.
#[derive(Clone, Debug, Parser)]
pub struct Autoformat {
/// Input rsx (selection)
#[clap(short, long)]
pub raw: Option<String>,
/// Input file
#[clap(short, long)]
pub file: Option<String>,
}
impl Autoformat {
// Todo: autoformat the entire crate
pub fn autoformat(self) -> Result<()> {
if let Some(raw) = self.raw {
if let Some(inner) = dioxus_autofmt::fmt_block(&raw, 0) {
println!("{}", inner);
} else {
// exit process with error
eprintln!("error formatting codeblock");
exit(1);
}
}
if let Some(file) = self.file {
let edits = dioxus_autofmt::fmt_file(&file);
let as_json = serde_json::to_string(&edits).unwrap();
println!("{}", as_json);
}
Ok(())
}
}
#[test]
fn spawn_properly() {
let out = Command::new("dioxus")
.args([
"fmt",
"-f",
r#"
//
rsx! {
div {}
}
//
//
//
"#,
])
.output()
.expect("failed to execute process");
dbg!(out);
}
// parse the whole doc
// find all the comment blocks
//
//
//
//
//
//
//
//
//
src/cli/mod.rs
+23 -4
View File
@@ -1,11 +1,13 @@
pub mod autoformat;
pub mod build;
pub mod cfg;
pub mod clean;
pub mod config;
pub mod create;
pub mod serve;
pub mod plugin;
pub mod serve;
pub mod translate;
pub mod version;
use crate::{
cfg::{ConfigOptsBuild, ConfigOptsServe},
@@ -41,19 +43,33 @@ pub struct Cli {
pub enum Commands {
/// Build the Rust WASM app and all of its assets.
Build(build::Build),
/// Translate some source file into Dioxus code.
Translate(translate::Translate),
/// Build, watch & serve the Rust WASM app and all of its assets.
Serve(serve::Serve),
/// Init a new project for Dioxus.
Create(create::Create),
/// Clean output artifacts.
Clean(clean::Clean),
/// Print the version of this extension
#[clap(name = "version")]
Version(version::Version),
/// Format some rsx
#[clap(name = "fmt")]
Autoformat(autoformat::Autoformat),
/// Dioxus config file controls.
#[clap(subcommand)]
Config(config::Config),
#[clap(subcommand)]
/// Manage plugins for dioxus cli
#[clap(subcommand)]
Plugin(plugin::Plugin),
}
@@ -67,6 +83,9 @@ impl Commands {
Commands::Clean(_) => "clean",
Commands::Config(_) => "config",
Commands::Plugin(_) => "plugin",
}.to_string()
Commands::Version(_) => "version",
Commands::Autoformat(_) => "fmt",
}
.to_string()
}
}
}
src/cli/translate/mod.rs
+23 -5
View File
@@ -1,3 +1,5 @@
use std::process::exit;
use super::*;
/// Build the Rust WASM app and all of its assets.
@@ -13,6 +15,10 @@ pub struct Translate {
#[clap(short, long)]
pub file: Option<String>,
/// Input file
#[clap(short, long)]
pub raw: Option<String>,
/// Output file, stdout if not present
#[clap(parse(from_os_str))]
pub output: Option<PathBuf>,
@@ -24,12 +30,20 @@ impl Translate {
component,
output,
file,
raw,
} = self;
let contents = match file {
Some(input) => std::fs::read_to_string(&input)
.map_err(|e| Error::CustomError(format!("Could not read input file: {e}.")))?,
None => {
let contents = match (file, raw) {
(Some(input), None) => std::fs::read_to_string(&input).unwrap_or_else(|e| {
log::error!("Cloud not read input file: {}.", e);
exit(0);
}),
(None, Some(raw)) => raw,
(Some(_), Some(_)) => {
log::error!("Only one of --file or --raw can be specified.");
exit(0);
}
(None, None) => {
if atty::is(atty::Stream::Stdin) {
return custom_error!("No input file, source, or stdin to translate from.");
}
@@ -64,7 +78,11 @@ impl Translate {
}
/// render without handling svgs or anything
fn simple_render_child(f: &mut impl std::fmt::Write, child: &Node, il: u32) -> std::fmt::Result {
pub fn simple_render_child(
f: &mut impl std::fmt::Write,
child: &Node,
il: u32,
) -> std::fmt::Result {
write_tabs(f, il)?;
match child {
Node::Text(t) => writeln!(f, "\"{}\"", t)?,
src/cli/version.rs
+76
View File
@@ -0,0 +1,76 @@
use super::*;
/// Build the Rust WASM app and all of its assets.
#[derive(Clone, Debug, Parser)]
#[clap(name = "version")]
pub struct Version {}
impl Version {
pub fn version(self) -> VersionInfo {
version()
}
}
use std::fmt;
/// Information about the git repository where rust-analyzer was built from.
pub struct CommitInfo {
pub short_commit_hash: &'static str,
pub commit_hash: &'static str,
pub commit_date: &'static str,
}
/// Cargo's version.
pub struct VersionInfo {
/// rust-analyzer's version, such as "1.57.0", "1.58.0-beta.1", "1.59.0-nightly", etc.
pub version: &'static str,
/// The release channel we were built for (stable/beta/nightly/dev).
///
/// `None` if not built via rustbuild.
pub release_channel: Option<&'static str>,
/// Information about the Git repository we may have been built from.
///
/// `None` if not built from a git repo.
pub commit_info: Option<CommitInfo>,
}
impl fmt::Display for VersionInfo {
fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
write!(f, "{}", self.version)?;
if let Some(ci) = &self.commit_info {
write!(f, " ({} {})", ci.short_commit_hash, ci.commit_date)?;
};
Ok(())
}
}
/// Returns information about cargo's version.
pub const fn version() -> VersionInfo {
let version = match option_env!("CFG_RELEASE") {
Some(x) => x,
None => "0.0.0",
};
let release_channel = option_env!("CFG_RELEASE_CHANNEL");
let commit_info = match (
option_env!("RA_COMMIT_SHORT_HASH"),
option_env!("RA_COMMIT_HASH"),
option_env!("RA_COMMIT_DATE"),
) {
(Some(short_commit_hash), Some(commit_hash), Some(commit_date)) => Some(CommitInfo {
short_commit_hash,
commit_hash,
commit_date,
}),
_ => None,
};
VersionInfo {
version,
release_channel,
commit_info,
}
}
src/main.rs
+11
View File
@@ -64,6 +64,17 @@ async fn main() -> Result<()> {
log::error!("tool error: {}", e);
}
}
Commands::Autoformat(opts) => {
if let Err(e) = opts.autoformat() {
log::error!("format error: {}", e);
}
}
Commands::Version(opt) => {
let version = opt.version();
println!("{}", version);
}
}
Ok(())
tests/test.html
+44 -28
View File
@@ -1,32 +1,48 @@
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -mx-4 -mb-10 text-center">
<div class="sm:w-1/2 mb-10 px-4">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" class="object-cover object-center h-full w-full"
src="https://dummyimage.com/1201x501">
</div>
<h2 class="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">Buy YouTube Videos</h2>
<p class="leading-relaxed text-base">
Williamsburg occupy sustainable snackwave gochujang. Pinterest cornhole brunch, slow-carb neutra
irony.
</p>
<button
class="flex mx-auto mt-6 text-white bg-indigo-500 border-0 py-2 px-5 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
</div>
<div class="sm:w-1/2 mb-10 px-4">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" class="object-cover object-center h-full w-full"
src="https://dummyimage.com/1202x502">
</div>
<h2 class="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">The Catalyzer</h2>
<p class="leading-relaxed text-base">
Williamsburg occupy sustainable snackwave gochujang. Pinterest
cornhole brunch, slow-carb neutra irony.
</p>
<button
class="flex mx-auto mt-6 text-white bg-indigo-500 border-0 py-2 px-5 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
</div>
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -mx-4 -mb-10 text-center">
<div class="sm:w-1/2 mb-10 px-4">
<div class="rounded-lg h-64 overflow-hidden">
<img
alt="content"
class="object-cover object-center h-full w-full"
src="https://dummyimage.com/1201x501"
/>
</div>
<h2 class="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">
Buy YouTube Videos
</h2>
<p class="leading-relaxed text-base">
Williamsburg occupy sustainable snackwave gochujang. Pinterest
cornhole brunch, slow-carb neutra irony.
</p>
<button
class="flex mx-auto mt-6 text-white bg-indigo-500 border-0 py-2 px-5 focus:outline-none hover:bg-indigo-600 rounded"
>
Button
</button>
</div>
<div class="sm:w-1/2 mb-10 px-4">
<div class="rounded-lg h-64 overflow-hidden">
<img
alt="content"
class="object-cover object-center h-full w-full"
src="https://dummyimage.com/1202x502"
/>
</div>
<h2 class="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">
The Catalyzer
</h2>
<p class="leading-relaxed text-base">
Williamsburg occupy sustainable snackwave gochujang. Pinterest
cornhole brunch, slow-carb neutra irony.
</p>
<button
class="flex mx-auto mt-6 text-white bg-indigo-500 border-0 py-2 px-5 focus:outline-none hover:bg-indigo-600 rounded"
>
Button
</button>
</div>
</div>
</div>
</section>